Skip to content

Commit 62ddb6c

Browse files
kentcdoddskentcdodds
committed
make homepage good
1 parent ba86517 commit 62ddb6c

30 files changed

+178
-1354
lines changed

‎app/root.tsx

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -217,15 +217,56 @@ function App() {
217217
</div>
218218
</nav>
219219
</header>
220-
221220
<div className="flex-1">
222221
<Outlet />
223222
</div>
224-
225-
<div className="container flex justify-between pb-5">
226-
<Logo />
223+
<footer className="container flex items-center justify-between pb-5">
224+
<div className="flex items-center">
225+
<Logo />
226+
<nav className="ml-4">
227+
<ul className="flex space-x-4">
228+
<li>
229+
<Link
230+
to="/about"
231+
className="text-gray-600 hover:text-gray-900"
232+
>
233+
About
234+
</Link>
235+
</li>
236+
<li>
237+
<Link
238+
to="/privacy"
239+
className="text-gray-600 hover:text-gray-900"
240+
>
241+
Privacy
242+
</Link>
243+
</li>
244+
<li>
245+
<Link to="/tos" className="text-gray-600 hover:text-gray-900">
246+
Terms of Service
247+
</Link>
248+
</li>
249+
<li>
250+
<Link
251+
to="/support"
252+
className="text-gray-600 hover:text-gray-900"
253+
>
254+
Support
255+
</Link>
256+
</li>
257+
<li>
258+
<Link
259+
to="/contact"
260+
className="text-gray-600 hover:text-gray-900"
261+
>
262+
Contact
263+
</Link>
264+
</li>
265+
</ul>
266+
</nav>
267+
</div>
227268
<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
228-
</div>
269+
</footer>{' '}
229270
</div>
230271
<EpicToaster closeButton position="top-center" theme={theme} />
231272
<EpicProgress />

‎app/routes/_marketing+/about.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export default function AboutRoute() {
2-
return <div>About page</div>
2+
return (
3+
<div className="container">
4+
<h1 className="text-h1">About</h1>
5+
</div>
6+
)
37
}

‎app/routes/_marketing+/index.tsx

Lines changed: 112 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,124 @@
11
import { type MetaFunction } from '@remix-run/node'
2-
import {
3-
Tooltip,
4-
TooltipContent,
5-
TooltipProvider,
6-
TooltipTrigger,
7-
} from '#app/components/ui/tooltip.tsx'
8-
import { cn } from '#app/utils/misc.tsx'
9-
import { logos } from './logos/logos.ts'
2+
import { Link } from '@remix-run/react'
3+
import { Button } from '#app/components/ui/button.js'
104

115
export const meta: MetaFunction = () => [{ title: 'GratiText' }]
126

13-
// Tailwind Grid cell classes lookup
14-
const columnClasses: Record<(typeof logos)[number]['column'], string> = {
15-
1: 'xl:col-start-1',
16-
2: 'xl:col-start-2',
17-
3: 'xl:col-start-3',
18-
4: 'xl:col-start-4',
19-
5: 'xl:col-start-5',
20-
}
21-
const rowClasses: Record<(typeof logos)[number]['row'], string> = {
22-
1: 'xl:row-start-1',
23-
2: 'xl:row-start-2',
24-
3: 'xl:row-start-3',
25-
4: 'xl:row-start-4',
26-
5: 'xl:row-start-5',
27-
6: 'xl:row-start-6',
28-
}
29-
307
export default function Index() {
318
return (
32-
<main className="font-poppins grid h-full place-items-center">
33-
<div className="grid place-items-center px-4 py-16 xl:grid-cols-2 xl:gap-24">
34-
<div className="flex max-w-md flex-col items-center text-center xl:order-2 xl:items-start xl:text-left">
35-
<a
36-
href="https://www.epicweb.dev/stack"
37-
className="animate-slide-top [animation-fill-mode:backwards] xl:animate-slide-left xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
38-
>
39-
<svg
40-
className="size-20 text-foreground xl:-mt-4"
41-
xmlns="http://www.w3.org/2000/svg"
42-
fill="none"
43-
viewBox="0 0 65 65"
44-
>
45-
<path
46-
fill="currentColor"
47-
d="M39.445 25.555 37 17.163 65 0 47.821 28l-8.376-2.445Zm-13.89 0L28 17.163 0 0l17.179 28 8.376-2.445Zm13.89 13.89L37 47.837 65 65 47.821 37l-8.376 2.445Zm-13.89 0L28 47.837 0 65l17.179-28 8.376 2.445Z"
48-
></path>
49-
</svg>
50-
</a>
51-
<h1
52-
data-heading
53-
className="mt-8 animate-slide-top text-4xl font-medium text-foreground [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:animate-slide-left xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
54-
>
55-
<a href="https://www.gratitext.app">GratiText</a>
9+
<main className="bg-gray-100 py-12">
10+
<section className="container mx-auto px-4">
11+
<div className="mb-12">
12+
<h1 className="text-center text-4xl font-bold text-gray-900">
13+
Welcome to GratiText
5614
</h1>
57-
<p
58-
data-paragraph
59-
className="mt-6 animate-slide-top text-xl/7 text-muted-foreground [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:animate-slide-left xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
60-
>
61-
Check the{' '}
62-
<a
63-
className="underline hover:no-underline"
64-
href="https://github.com/epicweb-dev/epic-stack/blob/main/docs/getting-started.md"
65-
>
66-
Getting Started guide
67-
</a>{' '}
68-
file for how to get your project off the ground!
15+
<p className="mt-4 text-center text-lg text-gray-700">
16+
Strengthen your relationships with regular personalized messages of
17+
love and gratitude.
6918
</p>
19+
<div className="mt-12 flex flex-col items-center gap-6 md:flex-row">
20+
<div className="flex flex-col items-center md:mr-6 md:w-1/2">
21+
<img
22+
src="/images/smiling-phone-flowers.jpg"
23+
alt="Attention grabbing visual"
24+
className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg"
25+
/>
26+
<p className="mt-2 text-sm text-gray-500">
27+
Photo by{' '}
28+
<a
29+
className="underline"
30+
href="https://unsplash.com/@goodfacesagency?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
31+
>
32+
Good Faces
33+
</a>{' '}
34+
on{' '}
35+
<a
36+
className="underline"
37+
href="https://unsplash.com/photos/a-woman-walking-down-the-street-looking-at-her-cell-phone-58xYWBSr0aQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
38+
>
39+
Unsplash
40+
</a>
41+
</p>
42+
</div>
43+
<div className="flex flex-col justify-between self-stretch text-body-md text-gray-700 md:mt-0 md:w-1/2">
44+
<div className="flex flex-col gap-2">
45+
<p>
46+
GratiText empowers you to express love and appreciation
47+
effortlessly.
48+
</p>
49+
<p>
50+
Our platform schedules and delivers personal heartfelt
51+
messages from you, making it easy to{' '}
52+
<strong>stay connected</strong> and <em>nurture</em> your most
53+
important relationships.
54+
</p>
55+
<p>
56+
Whether it's a simple thank you or a meaningful reminder of
57+
your affection, GratiText helps you make a{' '}
58+
<strong>lasting impact</strong> on the people you care about.
59+
</p>
60+
</div>
61+
<p className="align-baseline text-body-2xl">
62+
<small>
63+
Messages written by you... A human. <strong>Not</strong> by
64+
AI.
65+
</small>
66+
</p>
67+
</div>
68+
</div>
69+
</div>
70+
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
71+
<div className="rounded-lg bg-white p-6 shadow-lg">
72+
<h2 className="text-2xl font-bold text-gray-800">Sign Up</h2>
73+
<p className="mt-4 text-gray-600">
74+
Create an account and start sending thoughtful messages to your
75+
loved ones.
76+
</p>
77+
</div>
78+
<div className="rounded-lg bg-white p-6 shadow-lg">
79+
<h2 className="text-2xl font-bold text-gray-800">
80+
Add a Loved One
81+
</h2>
82+
<p className="mt-4 text-gray-600">
83+
Add the phone number of your loved one to get started.
84+
</p>
85+
</div>
86+
<div className="rounded-lg bg-white p-6 shadow-lg">
87+
<h2 className="text-2xl font-bold text-gray-800">
88+
Select a Schedule
89+
</h2>
90+
<p className="mt-4 text-gray-600">
91+
Choose how often you want to send messages.
92+
</p>
93+
</div>
94+
<div className="rounded-lg bg-white p-6 shadow-lg">
95+
<h2 className="text-2xl font-bold text-gray-800">
96+
Write a Personal Message
97+
</h2>
98+
<p className="mt-4 text-gray-600">
99+
Craft meaningful messages that will be sent to your loved ones.
100+
</p>
101+
</div>
102+
<div className="rounded-lg bg-white p-6 shadow-lg">
103+
<h2 className="text-2xl font-bold text-gray-800">Messages Sent</h2>
104+
<p className="mt-4 text-gray-600">
105+
Our system sends your messages to your loved ones automatically on
106+
the schedule.
107+
</p>
108+
</div>
109+
<div className="rounded-lg bg-white p-6 shadow-lg">
110+
<h2 className="text-2xl font-bold text-gray-800">Reminders</h2>
111+
<p className="mt-4 text-gray-600">
112+
Get notified if you've not yet queued up a message for delivery.
113+
</p>
114+
</div>
115+
</div>
116+
<div className="mt-12 text-center">
117+
<Button asChild>
118+
<Link to="/login">Get Started</Link>
119+
</Button>
70120
</div>
71-
<ul className="mt-16 flex max-w-3xl flex-wrap justify-center gap-2 sm:gap-4 xl:mt-0 xl:grid xl:grid-flow-col xl:grid-cols-5 xl:grid-rows-6">
72-
<TooltipProvider>
73-
{logos.map((logo, i) => (
74-
<li
75-
key={logo.href}
76-
className={cn(
77-
columnClasses[logo.column],
78-
rowClasses[logo.row],
79-
'animate-roll-reveal [animation-fill-mode:backwards]',
80-
)}
81-
style={{ animationDelay: `${i * 0.07}s` }}
82-
>
83-
<Tooltip>
84-
<TooltipTrigger asChild>
85-
<a
86-
href={logo.href}
87-
className="grid size-20 place-items-center rounded-2xl bg-violet-600/10 p-4 transition hover:-rotate-6 hover:bg-violet-600/15 dark:bg-violet-200 dark:hover:bg-violet-100 sm:size-24"
88-
>
89-
<img src={logo.src} alt="" />
90-
</a>
91-
</TooltipTrigger>
92-
<TooltipContent>{logo.alt}</TooltipContent>
93-
</Tooltip>
94-
</li>
95-
))}
96-
</TooltipProvider>
97-
</ul>
98-
</div>
121+
</section>
99122
</main>
100123
)
101124
}

‎app/routes/_marketing+/logos/docker.svg

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎app/routes/_marketing+/logos/eslint.svg

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)