From 44f1bd9cc7aa5fd8464c44c9759cb127c00b7bf7 Mon Sep 17 00:00:00 2001
From: dhaanisi <dhanishende2304@gmail.com>
Date: Wed, 18 Mar 2026 15:07:27 +0530
Subject: [PATCH 1/2] fix(home): use anchor tag for external link instead of
 router link

---
 apps/mail/components/home/HomeContent.tsx | 68 ++++-------------------
 1 file changed, 12 insertions(+), 56 deletions(-)

diff --git a/apps/mail/components/home/HomeContent.tsx b/apps/mail/components/home/HomeContent.tsx
index 501f70d641..d081103d21 100644
--- a/apps/mail/components/home/HomeContent.tsx
+++ b/apps/mail/components/home/HomeContent.tsx
@@ -24,13 +24,13 @@ import {
   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';
@@ -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 }}
@@ -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
@@ -115,7 +121,7 @@ export default function HomeContent() {
               />
             </span>
             Combinator
-          </Link>
+          </a>
         </motion.div>
 
         {/* Get Started button only visible for mobile screens */}
@@ -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
@@ -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
@@ -720,7 +724,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>
@@ -1214,7 +1217,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) => (
@@ -1233,8 +1235,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) => (
@@ -1280,50 +1280,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>

From 89ac5d1c41eed91a3698bd487a88f28e2eb91cfd Mon Sep 17 00:00:00 2001
From: dhaanisi <dhanishende2304@gmail.com>
Date: Wed, 18 Mar 2026 15:30:33 +0530
Subject: [PATCH 2/2] style(landing): improve accessibility and navigation
 button interaction

---
 apps/mail/components/home/HomeContent.tsx | 26 +++++++------
 apps/mail/components/navigation.tsx       | 47 +++++++++++++----------
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/apps/mail/components/home/HomeContent.tsx b/apps/mail/components/home/HomeContent.tsx
index d081103d21..410c1c4a4c 100644
--- a/apps/mail/components/home/HomeContent.tsx
+++ b/apps/mail/components/home/HomeContent.tsx
@@ -21,7 +21,7 @@ import {
   ChevronRight,
   Calendar,
   Figma,
-  Docx,
+  Docx, 
   ImageFile,
   Expand,
 
@@ -606,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>
diff --git a/apps/mail/components/navigation.tsx b/apps/mail/components/navigation.tsx
index 87f1d7ff53..931b125687 100644
--- a/apps/mail/components/navigation.tsx
+++ b/apps/mail/components/navigation.tsx
@@ -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';
@@ -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>
@@ -284,4 +291,4 @@ export function Navigation() {
       </div>
     </>
   );
-}
+}
\ No newline at end of file