touchup: improve homepage

includes: - improving landing wording & look - adding scroll-to-section for core ideas & features - improving use cases wording
amelioro · Jan 10, 2025 · b446173 · b446173
1 parent 52afc08
commit b446173
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 58 deletions.
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
@@ -19,49 +19,56 @@ const Home: NextPage = () => {
         <meta property="og:url" content="https://ameliorate.app/" />
       </Head>
 
-      <div className="flex w-full flex-col divide-y">
+      {/* scroll-mt-12 to allow sections, when scrolled to via anchor, to appear below the header (which is 3rem height) */}
+      <div className="flex w-full flex-col divide-y *:scroll-mt-12">
         {/* overflow-hidden to keep the background image from going into other sections */}
-        <div className="flex justify-center overflow-hidden odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section className="flex justify-center overflow-hidden odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <Headline />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section
+          id="strategy-for-organizing"
+          className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main"
+        >
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <CoreIdeasSection />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <UseCasesSection />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section
+          id="features"
+          className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main"
+        >
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <FeaturesSection />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <ImprovingSection />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <ConcludingSection />
           </div>
-        </div>
+        </section>
 
-        <div className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
+        <section className="flex justify-center odd:bg-paperPlain-main even:bg-paperShaded-main">
           <div className="w-full max-w-6xl px-4 py-8 sm:p-8">
             <Footer />
           </div>
-        </div>
+        </section>
       </div>
     </>
   );

diff --git a/src/web/home/CoreIdeasSection.tsx b/src/web/home/CoreIdeasSection.tsx
@@ -77,7 +77,9 @@ export const CoreIdeasSection = () => {
 
   return (
     <div className="flex flex-col text-center">
-      <Typography variant="h4">Break things down</Typography>
+      <Typography id="header" variant="h4">
+        Break things down
+      </Typography>
       <Typography variant="body1">
         Check out{" "}
         <Link href={gettingStartedPage} target="_blank">

diff --git a/src/web/home/FeaturesSection.tsx b/src/web/home/FeaturesSection.tsx
@@ -114,13 +114,13 @@ export const FeaturesSection = () => {
 
   return (
     <div className="flex flex-col text-center">
-      <Typography variant="h4">Organize, navigate, and focus discussion</Typography>
+      <Typography variant="h4">Features</Typography>
       <Typography variant="body1">
         Check out the{" "}
         <Link href="https://ameliorate.app/docs" target="_blank">
           docs
         </Link>{" "}
-        for more features.
+        to learn more.
       </Typography>
 
       <div className="mt-2 hidden grid-cols-3 items-center gap-3 sm:grid">

diff --git a/src/web/home/Headline.tsx b/src/web/home/Headline.tsx
@@ -4,32 +4,6 @@ import Image from "next/image";
 
 import { Link } from "@/web/common/components/Link";
 
-const RotatingDescriptors = () => {
-  return (
-    <>
-      {/* use `hideThird` with a delay to show only one of the 3 texts for each 3s interval of the 9s */}
-      {/* use `left-0` and `w-full` for mobile because text-align center doesn't otherwise work with absolute positioning https://stackoverflow.com/a/18148018 */}
-      <span className="invisible absolute left-0 w-full animate-[slideInOut_3s_infinite,_hideThird_9s_0s_infinite] text-primary-main sm:left-auto">
-        effectively
-      </span>
-      <span className="invisible absolute left-0 w-full animate-[slideInOut_3s_infinite,_hideThird_9s_3s_infinite] text-primary-main sm:left-auto">
-        collaboratively
-      </span>
-      <span className="invisible absolute left-0 w-full animate-[slideInOut_3s_infinite,_hideThird_9s_6s_infinite] text-primary-main sm:left-auto">
-        with an open mind
-      </span>
-
-      {/*
-        size the text space to the largest of the lines (a line's worth except for small screen + big font),
-        while allowing the rotating words to be absolute and appear in the same spot as each other
-      */}
-      <span className="invisible left-0 w-full text-transparent sm:left-auto">
-        with an open mind
-      </span>
-    </>
-  );
-};
-
 export const Headline = () => {
   return (
     <div className="relative flex w-full justify-center sm:justify-normal">
@@ -50,27 +24,35 @@ export const Headline = () => {
           cars-going-too-fast
         </Link>
       </Typography>
-      <div className="relative my-24 flex max-w-lg flex-col gap-4 rounded-3xl bg-paperPlain-main text-center sm:my-32 sm:border sm:border-primary-main sm:p-8 sm:text-left sm:shadow-xl">
-        <Typography variant="h1" fontWeight="bold" className="text-4xl sm:text-5xl">
-          Analyze problems
+      {/* max-w-34rem to barely fit the headline on two lines */}
+      <div className="relative my-24 flex max-w-[34rem] flex-col gap-4 rounded-3xl bg-paperPlain-main text-center sm:my-32 sm:border sm:border-primary-main sm:p-8 sm:text-left sm:shadow-xl">
+        <Typography
+          variant="h1"
+          fontWeight="bold"
+          className="flex self-center border-b-4 border-primary-main pb-1 text-3xl sm:border-b-8 sm:text-5xl"
+        >
+          Understand problems.
           <br />
-          <RotatingDescriptors />
+          Improve decisions.
         </Typography>
 
         <Typography variant="body1">
-          Gain traction on tackling <b>any</b> problem.
+          Tackle problems with confidence, knowing that every detail and perspective has been
+          properly considered.
         </Typography>
 
         <Typography variant="body1" className="-mt-1">
-          <span className="font-bold text-primary-main">Ameliorate</span> provides a structure to
-          help you visualize all details and perspectives relevant to a problem, so that it's easier
-          to <b>grasp the problem</b>, <b>understand each other</b>, and ultimately{" "}
-          <b>make better decisions</b>.
+          <span className="font-bold underline decoration-primary-main decoration-2">
+            Ameliorate
+          </span>{" "}
+          makes it easier to understand problems by defining a{" "}
+          <Link href="#strategy-for-organizing">strategy for organizing information</Link> along
+          with <Link href="#features">tooling</Link> for navigating and refining that information.
         </Typography>
 
         <div className="flex flex-wrap items-center justify-center gap-2 *:shrink-0 sm:justify-normal">
           <Button variant="contained" LinkComponent={Link} href="/new">
-            Start Building
+            Get Started
           </Button>
           <Button variant="outlined" LinkComponent={Link} href="/playground">
             Play Around

diff --git a/src/web/home/UseCasesSection.tsx b/src/web/home/UseCasesSection.tsx
@@ -4,12 +4,13 @@ import { Card } from "@/web/home/Card";
 
 export const UseCasesSection = () => {
   return (
-    <div className="flex flex-col items-center gap-4">
-      <Typography variant="h4" className="text-center">
-        Work Constructively
+    <div className="flex flex-col items-center text-center">
+      <Typography variant="h4">Using Your Diagram</Typography>
+      <Typography variant="body1">
+        Once you've got your diagram, there are a few different ways you can use it.
       </Typography>
 
-      <div className="flex flex-wrap justify-center gap-2 md:*:w-56">
+      <div className="mt-4 flex flex-wrap justify-center gap-2 text-start md:*:w-56">
         <Card
           title="Grasp your own thoughts"
           description="Lay out your ideas with all of their nuance to better think through a problem and make better decisions for yourself."