Skip to content

Gratitext page design #35

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

Closed
kentcdodds wants to merge 1 commit into from
Closed

Gratitext page design #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions app/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import * as React from 'react'
import { cn } from '#app/utils/misc.tsx'

const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex items-center justify-center rounded-lg text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
Expand All @@ -21,10 +21,10 @@ const buttonVariants = cva(
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
default: 'h-12 px-6 py-3',
wide: 'px-24 py-5',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
sm: 'h-9 rounded-lg px-3',
lg: 'h-14 rounded-lg px-8',
pill: 'px-12 py-3 leading-3',
icon: 'h-10 w-10',
},
Expand Down
10 changes: 5 additions & 5 deletions app/components/ui/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
Expand All @@ -61,10 +61,10 @@ const DropdownMenuContent = React.forwardRef<
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
className={cn(
'z-50 min-w-[8rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
Expand Down
2 changes: 1 addition & 1 deletion app/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
'flex h-12 w-full rounded-lg border border-input bg-background px-4 py-3 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
className,
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion app/components/ui/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
'flex min-h-[80px] w-full rounded-lg border border-input bg-background px-4 py-3 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
className,
)}
ref={ref}
Expand Down
12 changes: 6 additions & 6 deletions app/routes/_app+/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,41 +90,41 @@ export default function Layout() {
<div className="flex-1">
<Outlet />
</div>
<footer className="container my-4 flex items-center justify-between pb-5">
<footer className="container my-4 flex items-center justify-between pb-5 border-t border-border pt-8">
<div className="flex items-center gap-4">
<Logo />
<nav>
<ul className="flex list-none flex-col gap-2 md:flex-row md:gap-4">
<li>
<Link to="/about" className="text-gray-600 hover:text-gray-900">
<Link to="/about" className="text-muted-foreground hover:text-foreground">
About
</Link>
</li>
<li>
<Link
to="/privacy"
className="text-gray-600 hover:text-gray-900"
className="text-muted-foreground hover:text-foreground"
>
Privacy
</Link>
</li>
<li>
<Link to="/tos" className="text-gray-600 hover:text-gray-900">
<Link to="/tos" className="text-muted-foreground hover:text-foreground">
Terms of Service
</Link>
</li>
<li>
<Link
to="/support"
className="text-gray-600 hover:text-gray-900"
className="text-muted-foreground hover:text-foreground"
>
Support
</Link>
</li>
<li>
<Link
to="/contact"
className="text-gray-600 hover:text-gray-900"
className="text-muted-foreground hover:text-foreground"
>
Contact
</Link>
Expand Down
64 changes: 32 additions & 32 deletions app/routes/_app+/_marketing+/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ export const meta: MetaFunction = () => [{ title: 'GratiText' }]
export default function Index() {
const user = useOptionalUser()
return (
<main className="bg-gray-100 py-12">
<main className="bg-secondary/30 py-12">
<section className="container mx-auto px-4">
<div className="mb-12">
<h1 className="text-center text-4xl font-bold text-gray-900">
<h1 className="text-center text-h1 font-bold text-foreground">
Welcome to GratiText
</h1>
<p className="mt-4 text-center text-lg text-gray-700">
<p className="mt-4 text-center text-body-lg text-muted-foreground">
Strengthen your relationships with regular personalized messages of
love and gratitude.
</p>
Expand All @@ -23,100 +23,100 @@ export default function Index() {
<img
src="/images/smiling-phone-flowers.jpg"
alt="Attention grabbing visual"
className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg"
className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg ring-4 ring-white"
/>
<p className="mt-2 text-sm text-gray-500">
<p className="mt-2 text-sm text-muted-foreground">
Photo by{' '}
<a
className="underline"
className="underline hover:text-foreground"
href="https://unsplash.com/@goodfacesagency?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>
Good Faces
</a>{' '}
on{' '}
<a
className="underline"
className="underline hover:text-foreground"
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"
>
Unsplash
</a>
</p>
</div>
<div className="flex flex-col justify-between self-stretch text-body-md text-gray-700 md:mt-0 md:w-1/2">
<div className="flex flex-col gap-2">
<div className="flex flex-col justify-between self-stretch text-body-md text-foreground md:mt-0 md:w-1/2">
<div className="flex flex-col gap-4">
<p>
GratiText empowers you to express love and appreciation
effortlessly.
</p>
<p>
Our platform schedules and delivers personal heartfelt
messages from you, making it easy to{' '}
<strong>stay connected</strong> and <em>nurture</em> your most
<strong className="text-primary">stay connected</strong> and <em className="text-accent not-italic">nurture</em> your most
important relationships.
</p>
<p>
Whether it's a simple thank you or a meaningful reminder of
your affection, GratiText helps you make a{' '}
<strong>lasting impact</strong> on the people you care about.
<strong className="text-primary">lasting impact</strong> on the people you care about.
</p>
</div>
<p className="align-baseline text-body-2xl">
<p className="mt-6 align-baseline text-body-xl font-medium text-foreground">
<small>
Messages written by you... A human. <strong>Not</strong> by
Messages written by you... A human. <strong className="text-destructive">Not</strong> by
AI.
</small>
</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">Sign Up</h2>
<p className="mt-4 text-gray-600">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">Sign Up</h2>
<p className="mt-4 text-muted-foreground">
Create an account and start sending thoughtful messages to your
loved ones.
</p>
</div>
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">
Add a Loved One
</h2>
<p className="mt-4 text-gray-600">
<p className="mt-4 text-muted-foreground">
Add the phone number of your loved one to get started.
</p>
</div>
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">
Select a Schedule
</h2>
<p className="mt-4 text-gray-600">
<p className="mt-4 text-muted-foreground">
Choose how often you want to send messages.
</p>
</div>
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">
Write a Personal Message
</h2>
<p className="mt-4 text-gray-600">
<p className="mt-4 text-muted-foreground">
Craft meaningful messages that will be sent to your loved ones.
</p>
</div>
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">Messages Sent</h2>
<p className="mt-4 text-gray-600">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">Messages Sent</h2>
<p className="mt-4 text-muted-foreground">
Our system sends your messages to your loved ones automatically on
the schedule.
</p>
</div>
<div className="rounded-lg bg-white p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-800">Reminders</h2>
<p className="mt-4 text-gray-600">
<div className="rounded-lg bg-card p-6 shadow-sm border border-border">
<h2 className="text-h4 font-bold text-foreground">Reminders</h2>
<p className="mt-4 text-muted-foreground">
Get notified if you've not yet queued up a message for delivery.
</p>
</div>
</div>
<div className="mt-12 text-center">
<Button asChild>
<Button asChild size="lg">
{user ? (
<Link to="/recipients">Your Recipients</Link>
) : (
Expand Down
28 changes: 14 additions & 14 deletions app/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,37 @@
--foreground-destructive: 345 82.7% 40.8%;

--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--foreground: 0 0% 10%;

--muted: 210 40% 93%;
--muted-foreground: 215.4 16.3% 30%;
--muted: 220 9% 46%;
--muted-foreground: 220 9% 46%;

--muted-secondary: 210 40% 93%;
--muted-secondary-foreground: 215.4 9.3% 41%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 0 0% 10%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 0 0% 10%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--input-invalid: 0 84.2% 60.2%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 180 79% 24%;
--primary-foreground: 0 0% 100%;

--secondary: 210 20% 83%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 44 77% 94%;
--secondary-foreground: 180 79% 24%;

--accent: 210 40% 90%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 24 74% 55%;
--accent-foreground: 0 0% 100%;

--destructive: 0 70% 50%;
--destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;
--ring: 180 79% 24%;

--radius: 0.5rem;
}
Expand Down
Loading