Skip to content

Commit

Permalink
Merge pull request #635 from amelioro/homepage-wording-2
Browse files Browse the repository at this point in the history 
touchup: wip homepage headline
  • Loading branch information
@keyserj
keyserj authored Jan 10, 2025
2 parents 52afc08 + 69ecae3 commit 242cbd5
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 57 deletions.
Binary file modified e2e/tests/smoke.spec.ts-snapshots/homepage-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/tests/smoke.spec.ts-snapshots/playground-with-solution-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 22 additions & 15 deletions src/pages/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions src/web/home/FeaturesSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
54 changes: 18 additions & 36 deletions src/web/home/Headline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand Down
9 changes: 5 additions & 4 deletions src/web/home/UseCasesSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down

0 comments on commit 242cbd5

Please sign in to comment.