Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

touchup: wip homepage headline #635

Merged
merged 2 commits into from
Jan 10, 2025
Merged

touchup: wip homepage headline #635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8665fa
touchup: improve homepage
keyserj Jan 10, 2025
69ecae3
chore: automated snapshot updates [skip ci]
keyserj Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified e2e/tests/smoke.spec.ts-snapshots/homepage-chromium-linux.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading