Improve mobile responsiveness and touch target accessibility

app/page.tsx

@@ -30,7 +30,7 @@ export default function Home() {
        It is designed to be simple and easy to understand for
         beginners.
       </p>
-      <div className="flex flex-row items-center gap-5">
+      <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-5 w-full max-w-md sm:max-w-none">
          <GET/>
          <CanvasCursor />
          <DownloadButton/>

components/magicui/hero-video-dialog.tsx

@@ -92,12 +92,12 @@ export default function HeroVideoDialog({
           className="w-full transition-all duration-200 group-hover:brightness-[0.8] ease-out rounded-md shadow-lg border"
         />
         <div className="absolute inset-0 flex items-center justify-center group-hover:scale-100 scale-[0.9] transition-all duration-200 ease-out rounded-2xl">
-          <div className="bg-primary/10 flex items-center justify-center rounded-full backdrop-blur-md size-28">
+          <div className="bg-primary/10 flex items-center justify-center rounded-full backdrop-blur-md size-32 sm:size-28">
             <div
-              className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}
+              className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-24 sm:size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100 min-h-[48px] min-w-[48px]`}
             >
               <Play
-                className="size-8 text-white fill-white group-hover:scale-105 scale-100 transition-transform duration-200 ease-out"
+                className="size-10 sm:size-8 text-white fill-white group-hover:scale-105 scale-100 transition-transform duration-200 ease-out"
                 style={{
                   filter:
                     "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
@@ -121,8 +121,8 @@ export default function HeroVideoDialog({
               transition={{ type: "spring", damping: 30, stiffness: 300 }}
               className="relative w-full max-w-4xl aspect-video mx-4 md:mx-0"
             >
-              <motion.button className="absolute -top-16 right-0 text-white text-xl bg-neutral-900/50 ring-1 backdrop-blur-md rounded-full p-2 dark:bg-neutral-100/50 dark:text-black">
-                <XIcon className="size-5" />
+              <motion.button className="absolute -top-16 right-0 text-white text-xl bg-neutral-900/50 ring-1 backdrop-blur-md rounded-full p-3 sm:p-2 dark:bg-neutral-100/50 dark:text-black min-h-[44px] min-w-[44px] flex items-center justify-center">
+                <XIcon className="size-6 sm:size-5" />
               </motion.button>
               <div className="size-full border-2 border-white rounded-2xl overflow-hidden isolate z-[1] relative">
                 <iframe

components/navbar.tsx

@@ -128,7 +128,10 @@ export function NavMenu({ isSheet = false }) {
             key={item.title + item.href}
             activeClassName="!text-primary md:font-semibold font-medium"
             absolute
-            className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
+            className={cn(
+              "flex items-center gap-1 dark:text-stone-300/85 text-stone-800",
+              isSheet && "py-3 px-2 min-h-[44px] w-full rounded-md hover:bg-accent transition-colors"
+            )}
             href={item.href}
           >
             {item.title}{" "}

components/search.tsx

@@ -51,7 +51,7 @@ export default function Search() {
           <div className="relative flex-1 max-w-md cursor-pointer">
             <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500 dark:text-stone-400" />
             <Input
-              className="md:w-full rounded-md dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-7 text-sm shadow-sm overflow-ellipsis"
+              className="md:w-full rounded-md dark:bg-background/95 bg-background border h-11 min-h-[44px] pl-10 pr-0 sm:pr-7 text-sm shadow-sm overflow-ellipsis"
               placeholder="Search documentation..."
               type="search"
             />

components/ui/button.tsx

@@ -24,10 +24,10 @@ const buttonVariants = cva(
         "group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-primary-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
       },
         size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-10 px-4 py-2 sm:h-10 min-h-[44px]",
+        sm: "h-9 rounded-md px-3 sm:h-9 min-h-[40px]",
+        lg: "h-12 rounded-md px-8 min-h-[48px]",
+        icon: "h-11 w-11 min-h-[44px] min-w-[44px]",
       },
     },
     defaultVariants: {

components/ui/video.tsx

@@ -3,19 +3,20 @@ import HeroVideoDialog from "@/components/magicui/hero-video-dialog";
 export function Video() {
   return (
     <div className="relative">
+      {/* Mobile-first approach: Show image with play button, defer video loading */}
       <HeroVideoDialog
         className="dark:hidden block"
         animationStyle="from-center"
         videoSrc="/git_explained_in_100_seconds.mp4"
         thumbnailSrc="/docsw.png"
-        thumbnailAlt="Hero Video"
+        thumbnailAlt="Git Explained Video - Click to Play"
       />
       <HeroVideoDialog
         className="hidden dark:block"
         animationStyle="from-center"
         videoSrc="/git_explained_in_100_seconds.mp4"
         thumbnailSrc="/docs.png"
-        thumbnailAlt="Hero Video"
+        thumbnailAlt="Git Explained Video - Click to Play"
       />
     </div>
   );