Skip to content

improve (landing) : UI polish and accessibility improvements #2067

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

Open
dhaanisi wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

improve (landing) : UI polish and accessibility improvements #2067

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
44f1bd9
fix(home): use anchor tag for external link instead of router link
dhaanisi Mar 18, 2026
89ac5d1
style(landing): improve accessibility and navigation button interaction
dhaanisi Mar 18, 2026
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
94 changes: 26 additions & 68 deletions apps/mail/components/home/HomeContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ import {
ChevronRight,
Calendar,
Figma,
Docx,
Docx,
ImageFile,
Expand,

} from '../icons/icons';
import { PixelatedBackground, PixelatedLeft, PixelatedRight } from '@/components/home/pixelated-bg';
import { Tabs, TabsContent } from '@/components/ui/tabs';
import { signIn, useSession } from '@/lib/auth-client';
import { Link, useNavigate } from 'react-router';
import { useNavigate } from 'react-router';
import { Button } from '@/components/ui/button';
import { Balancer } from 'react-wrap-balancer';
import { Navigation } from '../navigation';
import { useTheme } from 'next-themes';
import { motion } from 'motion/react';
Expand Down Expand Up @@ -84,9 +84,9 @@ export default function HomeContent() {
transition={{ duration: 0.5, delay: 0.2 }}
className="text-center text-4xl font-medium md:text-6xl"
>
<Balancer className="mb-3 max-w-[1130px]">
<span className="mb-3 block max-w-[1130px] text-balance">
AI Powered Email, Built to Save You Time
</Balancer>
</span>
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
Expand All @@ -103,7 +103,13 @@ export default function HomeContent() {
transition={{ duration: 0.5 }}
className="border-input/50 mb-6 inline-flex items-center gap-4 rounded-full border border-[#2A2A2A] bg-[#1E1E1E] px-4 py-1"
>
<Link to="https://yc.vc" target="_blank" className="flex items-center gap-2 text-sm">
{/* Fixed: replaced <Link> with <a> for external URL */}
<a
href="https://yc.vc"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm"
>
Backed by
<span>
<img
Expand All @@ -115,7 +121,7 @@ export default function HomeContent() {
/>
</span>
Combinator
</Link>
</a>
</motion.div>

{/* Get Started button only visible for mobile screens */}
Expand Down Expand Up @@ -323,7 +329,6 @@ export default function HomeContent() {
<div className="hidden items-start justify-start gap-3 md:flex">
<div className="flex h-7 items-center justify-center gap-0.5 overflow-hidden rounded-md bg-[#373737] px-1.5">
<Cube className="relative h-3 w-3 overflow-hidden fill-[#9A9A9A]" />

<div className="flex items-center justify-center gap-2.5 px-0.5">
<div className="text-base-gray-950 justify-start text-sm leading-none">
Neutral
Expand All @@ -332,7 +337,6 @@ export default function HomeContent() {
</div>
<div className="flex h-7 items-center justify-center gap-0.5 overflow-hidden rounded-md bg-[#373737] px-1.5">
<MediumStack className="relative mx-1 h-2.5 w-2.5 overflow-hidden fill-[#9A9A9A]" />

<div className="flex items-center justify-center gap-2.5 px-0.5">
<div className="text-base-gray-950 justify-start text-sm leading-none">
Medium-length
Expand Down Expand Up @@ -602,27 +606,29 @@ export default function HomeContent() {
<div className="bg-tokens-stroke-light/5 relative h-2 w-[0.71px] rounded-full" />
<div className="flex items-center justify-start gap-[2.83px]">
<div className="outline-tokens-badge-default/10 flex items-center justify-start gap-1 overflow-hidden rounded-full py-[2.83px] pl-[2.83px] pr-2 outline outline-[0.35px] outline-offset-[-0.35px]">
<img
className="h-3.5 w-3.5 rounded-full px-[2.66px] py-1"
src="https://placehold.co/14x14"
/>
<img
className="h-3.5 w-3.5 rounded-full px-[2.66px] py-1"
src="https://placehold.co/14x14"
alt="User avatar"
/>
<div className="text-base-gray-950 justify-start text-[9.92px] leading-[9.92px]">
Ali
</div>
</div>
<div className="outline-tokens-badge-default/10 flex items-center justify-start gap-1 overflow-hidden rounded-full py-[2.83px] pl-[2.83px] pr-2 outline outline-[0.35px] outline-offset-[-0.35px]">
<div className="inline-flex h-3.5 w-3.5 flex-col items-center justify-center gap-2 overflow-hidden rounded-full">
<img className="h-4 w-4" src="https://placehold.co/17x17" />
</div>
<div className="inline-flex h-3.5 w-3.5 flex-col items-center justify-center gap-2 overflow-hidden rounded-full">
<img className="h-4 w-4" src="https://placehold.co/17x17" alt="User avatar" />
</div>
<div className="text-base-gray-950 justify-start text-[9.92px] leading-[9.92px]">
Nick
</div>
</div>
<div className="outline-tokens-badge-default/10 flex items-center justify-start gap-1 overflow-hidden rounded-full py-[2.83px] pl-[2.83px] pr-2 outline outline-[0.35px] outline-offset-[-0.35px]">
<img
className="h-3.5 w-3.5 rounded-full"
src="https://placehold.co/14x14"
/>
<img
className="h-3.5 w-3.5 rounded-full"
src="https://placehold.co/14x14"
alt="User avatar"
/>
<div className="text-base-gray-950 justify-start text-[9.92px] leading-[9.92px]">
Sarah
</div>
Expand Down Expand Up @@ -720,7 +726,6 @@ export default function HomeContent() {
</div>
</div>
</div>

<div className="from-tokens-scroll-overlay-primary to-tokens-scroll-overlay-top/0 absolute left-0 top-[668.98px] h-12 w-[547.09px] bg-linear-to-l" />
<div className="bg-tokens-agent-surface/10 border-tokens-agent-stroke absolute left-[498.90px] top-[674.65px] h-8 w-8 rounded-full border-2 px-1 shadow-[0px_8.503936767578125px_17.00787353515625px_0px_rgba(0,0,0,0.15)] backdrop-blur-lg" />
</div>
Expand Down Expand Up @@ -1214,7 +1219,6 @@ export default function HomeContent() {
</div>
</div>
<div className="relative inline-flex w-96 flex-col items-start justify-center gap-2">
{/* First row */}
<div className="no-scrollbar relative flex w-full justify-center">
<div className="flex items-center justify-start gap-2 whitespace-nowrap">
{firstRowQueries.map((query) => (
Expand All @@ -1233,8 +1237,6 @@ export default function HomeContent() {
<div className="absolute left-0 top-0 h-7 w-12 bg-linear-to-l from-neutral-800/0 to-neutral-800" />
<div className="absolute right-0 top-0 h-7 w-12 bg-linear-to-l from-neutral-800 to-neutral-800/0" />
</div>

{/* Second row */}
<div className="no-scrollbar relative flex w-full justify-center">
<div className="flex items-center justify-start gap-2 whitespace-nowrap">
{secondRowQueries.map((query) => (
Expand Down Expand Up @@ -1280,50 +1282,6 @@ export default function HomeContent() {
</div>
</div>

{/* <motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="relative hidden lg:block"
>
<div className="mx-auto max-w-[920px] text-center text-4xl font-normal leading-[48px] text-white">
<span className="text-[#B7B7B7]">Work smarter, not harder.</span>{' '}
<span className="pr-12 text-white">Automate repetitive</span>{' '}
<span className="text-[#B7B7B7]">email</span>
<span className="text-[#B7B7B7]"> tasks with</span>{' '}
<span className="pr-14 text-white">smart templates, </span>{' '}
<span className="text-white">scheduled sends</span>
<span className="text-[#B7B7B7]">
, follow-up reminders, and batch processing capabilities that
</span>{' '}
<br />
<span className="text-white underline">save hours every week.</span>
</div>
<div className="flex items-center justify-center">
<img
className="relative bottom-12 right-[162px]"
src="/verified-home.png"
alt="tasks"
width={50}
height={50}
/>
<img
className="relative bottom-[145px] right-[47px]"
src="/snooze-home.png"
alt="tasks"
width={50}
height={50}
/>
<img
className="relative bottom-[195px] left-[210px]"
src="/star-home.png"
alt="tasks"
width={50}
height={50}
/>
</div>
</motion.div> */}

<div className="relative mt-52 flex items-center justify-center">
<Footer />
</div>
Expand Down
47 changes: 27 additions & 20 deletions apps/mail/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useQuery } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router';
import { Button } from '@/components/ui/button';
import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import { Menu } from 'lucide-react';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
Expand Down Expand Up @@ -188,26 +189,32 @@ export function Navigation() {
<AnimatedNumber value={stars} className="font-medium text-white" />
</div>
</a>
<Button
className="h-8 bg-white text-black hover:bg-white hover:text-black cursor-pointer"
onClick={() => {
if (session) {
navigate('/mail/inbox');
} else {
toast.promise(
signIn.social({
provider: 'google',
callbackURL: `${window.location.origin}/mail`,
}),
{
error: 'Login redirect failed',
},
);
}
}}
<motion.div
whileHover={{ scale: 1.05, y: -1 }}
whileTap={{ scale: 0.96 }}
transition={{ type: 'spring', stiffness: 400, damping: 20 }}
>
Get Started
</Button>
<Button
className="h-8 cursor-pointer bg-white text-black hover:bg-white hover:text-black"
onClick={() => {
if (session) {
navigate('/mail/inbox');
} else {
toast.promise(
signIn.social({
provider: 'google',
callbackURL: `${window.location.origin}/mail`,
}),
{
error: 'Login redirect failed',
},
);
}
}}
>
Get Started
</Button>
</motion.div>
</div>
</nav>
</header>
Expand Down Expand Up @@ -284,4 +291,4 @@ export function Navigation() {
</div>
</>
);
}
}