From fcd6ce5f8c453f47156ffee00fd597845eebe9a6 Mon Sep 17 00:00:00 2001
From: mrunmay-24-ukey <mrunmayukey587@gmail.com>
Date: Tue, 9 Dec 2025 10:11:09 +0530
Subject: [PATCH] fix: improved responsiveness and added a hamburger

---
 app/page.tsx              |  88 ++++++++++++++---------------
 components/HomeHeader.tsx | 115 ++++++++++++++++++++++++++++++++------
 2 files changed, 143 insertions(+), 60 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 8b6018e..e2fa197 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -58,33 +58,33 @@ export default function Home() {
       <HomeHeader />
 
       {/* Hero Section */}
-      <section className="relative py-32 px-4 overflow-hidden bg-gradient-to-b from-background to-background/80">
+      <section className="relative py-16 sm:py-24 lg:py-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-gradient-to-b from-background to-background/80">
         <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:60px_60px]" />
         <div className="container relative mx-auto max-w-6xl">
-          <div className="text-center space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+          <div className="text-center space-y-6 sm:space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
             <div className="inline-block animate-in fade-in slide-in-from-top-2 duration-500">
-              <span className="inline-flex items-center px-4 py-1.5 text-sm font-medium text-primary bg-primary/10 rounded-full">
+              <span className="inline-flex items-center px-3 sm:px-4 py-1 sm:py-1.5 text-xs sm:text-sm font-medium text-primary bg-primary/10 rounded-full">
                 New Tools Added Weekly
               </span>
             </div>
-            <h1 className="text-6xl font-bold tracking-tight sm:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 dark:from-white dark:via-gray-300 dark:to-white px-2 sm:px-0">
               Professional Tools for{" "}
               <span className="text-primary">Modern Developers</span>
             </h1>
-            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            <p className="text-base sm:text-lg lg:text-xl text-muted-foreground max-w-3xl mx-auto px-2 sm:px-0">
               A collection of powerful tools designed to streamline your
               development workflow and boost productivity. Built by developers,
               for developers.
             </p>
-            <div className="flex justify-center gap-4 animate-in fade-in slide-in-from-bottom-2 duration-700 delay-100">
-              <Link href="/tools">
-                <Button size="lg" className="h-12 px-6 group">
+            <div className="flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-4 animate-in fade-in slide-in-from-bottom-2 duration-700 delay-100 px-2 sm:px-0">
+              <Link href="/tools" className="w-full sm:w-auto">
+                <Button size="lg" className="w-full sm:w-auto h-11 sm:h-12 px-6 group text-sm sm:text-base">
                   Explore Tools
-                  <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
+                  <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5 transition-transform group-hover:translate-x-1" />
                 </Button>
               </Link>
-              <Link href="https://github.com/rishabh3562/ToolBox" target="_blank">
-                <Button size="lg" variant="outline" className="h-12 px-6">
+              <Link href="https://github.com/rishabh3562/ToolBox" target="_blank" className="w-full sm:w-auto">
+                <Button size="lg" variant="outline" className="w-full sm:w-auto h-11 sm:h-12 px-6 text-sm sm:text-base">
                   View on GitHub
                 </Button>
               </Link>
@@ -94,28 +94,28 @@ export default function Home() {
       </section>
 
       {/* Tools Preview Section */}
-      <section className="py-24 px-4 bg-muted/30">
+      <section className="py-12 sm:py-16 lg:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30">
         <div className="container mx-auto max-w-6xl">
-          <div className="text-center mb-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
-            <h2 className="text-4xl font-bold mb-4">Featured Tools</h2>
-            <p className="text-muted-foreground text-lg">
+          <div className="text-center mb-8 sm:mb-12 lg:mb-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 sm:mb-4">Featured Tools</h2>
+            <p className="text-muted-foreground text-sm sm:text-base lg:text-lg px-2 sm:px-0">
               Discover our most popular developer tools
             </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
             {tools.map((tool, index) => (
               <div
                 key={tool.name}
-                className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-background to-muted p-8 transition-all hover:shadow-lg hover:scale-[1.02] animate-in fade-in slide-in-from-bottom-4 duration-700"
+                className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-background to-muted p-6 sm:p-8 transition-all hover:shadow-lg hover:scale-[1.02] animate-in fade-in slide-in-from-bottom-4 duration-700"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
-                <div className="flex items-center gap-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
-                    <tool.icon className="h-6 w-6 text-primary" />
+                <div className="flex items-center gap-3 sm:gap-4">
+                  <div className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors flex-shrink-0">
+                    <tool.icon className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
                   </div>
-                  <div>
-                    <h3 className="text-xl font-semibold group-hover:text-primary transition-colors">{tool.name}</h3>
-                    <p className="text-muted-foreground">{tool.description}</p>
+                  <div className="min-w-0">
+                    <h3 className="text-lg sm:text-xl font-semibold group-hover:text-primary transition-colors">{tool.name}</h3>
+                    <p className="text-sm sm:text-base text-muted-foreground">{tool.description}</p>
                   </div>
                 </div>
               </div>
@@ -125,26 +125,26 @@ export default function Home() {
       </section>
 
       {/* Features Section */}
-      <section className="py-24 px-4 bg-background">
+      <section className="py-12 sm:py-16 lg:py-24 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="container mx-auto max-w-6xl">
-          <div className="text-center mb-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
-            <h2 className="text-4xl font-bold mb-4">Why Choose Our Tools?</h2>
-            <p className="text-muted-foreground text-lg">
+          <div className="text-center mb-8 sm:mb-12 lg:mb-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 sm:mb-4">Why Choose Our Tools?</h2>
+            <p className="text-muted-foreground text-sm sm:text-base lg:text-lg px-2 sm:px-0">
               Designed with performance and usability in mind
             </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
             {features.map((feature, index) => (
               <div
                 key={feature.name}
-                className="relative p-8 bg-gradient-to-br from-muted/50 to-background rounded-xl border transition-all hover:shadow-lg hover:scale-[1.02] animate-in fade-in slide-in-from-bottom-4 duration-700"
+                className="relative p-6 sm:p-8 bg-gradient-to-br from-muted/50 to-background rounded-xl border transition-all hover:shadow-lg hover:scale-[1.02] animate-in fade-in slide-in-from-bottom-4 duration-700"
                 style={{ animationDelay: `${index * 100}ms` }}
               >
-                <div className="flex items-center justify-center w-14 h-14 mb-6 bg-primary/10 rounded-xl group-hover:bg-primary/20 transition-colors">
-                  <feature.icon className="w-7 h-7 text-primary" />
+                <div className="flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 mb-4 sm:mb-6 bg-primary/10 rounded-xl group-hover:bg-primary/20 transition-colors mx-auto sm:mx-0">
+                  <feature.icon className="w-6 h-6 sm:w-7 sm:h-7 text-primary" />
                 </div>
-                <h3 className="text-xl font-semibold mb-3">{feature.name}</h3>
-                <p className="text-muted-foreground">{feature.description}</p>
+                <h3 className="text-lg sm:text-xl font-semibold mb-2 sm:mb-3 text-center sm:text-left">{feature.name}</h3>
+                <p className="text-sm sm:text-base text-muted-foreground text-center sm:text-left">{feature.description}</p>
               </div>
             ))}
           </div>
@@ -152,35 +152,35 @@ export default function Home() {
       </section>
 
       {/* CTA Section */}
-      <section className="py-24 px-4 bg-gradient-to-br from-primary/5 via-background to-primary/5">
+      <section className="py-12 sm:py-16 lg:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary/5 via-background to-primary/5">
         <div className="container mx-auto max-w-4xl text-center animate-in fade-in slide-in-from-bottom-4 duration-700">
-          <h2 className="text-4xl font-bold mb-6">Ready to Get Started?</h2>
-          <p className="text-muted-foreground text-lg mb-8">
+          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 sm:mb-6 px-2 sm:px-0">Ready to Get Started?</h2>
+          <p className="text-sm sm:text-base lg:text-lg text-muted-foreground mb-6 sm:mb-8 px-2 sm:px-0">
             Join thousands of developers who use our tools to boost their
             productivity.
           </p>
-          <Link href="/tools">
-            <Button size="lg" className="h-12 px-8 group">
+          <Link href="/tools" className="inline-block">
+            <Button size="lg" className="h-11 sm:h-12 px-6 sm:px-8 group text-sm sm:text-base">
               View All Tools
-              <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
+              <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5 transition-transform group-hover:translate-x-1" />
             </Button>
           </Link>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="border-t py-12 px-4 bg-background">
+      <footer className="border-t py-8 sm:py-12 px-4 sm:px-6 lg:px-8 bg-background">
         <div className="container mx-auto max-w-6xl">
-          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-6">
             <div className="flex items-center space-x-2">
               <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
                 <span className="text-xl font-bold">🧰</span>
               </div>
-              <span className="text-lg font-bold">ToolBox</span>
+              <span className="text-base sm:text-lg font-bold">ToolBox</span>
             </div>
-            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 text-xs sm:text-sm text-muted-foreground">
               <span>© 2025 ToolBox</span>
-              <span>•</span>
+              <span className="hidden sm:inline">•</span>
               <Link href="#" className="hover:text-primary transition-colors">
                 Privacy
               </Link>
diff --git a/components/HomeHeader.tsx b/components/HomeHeader.tsx
index 12ebc8e..3ed4c1e 100644
--- a/components/HomeHeader.tsx
+++ b/components/HomeHeader.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { ArrowRight, LogIn, UserPlus, LogOut, User as UserIcon } from "lucide-react";
+import { ArrowRight, LogIn, UserPlus, LogOut, User as UserIcon, Menu } from "lucide-react";
 import { useSession, signOut } from "next-auth/react";
 import {
   DropdownMenu,
@@ -13,6 +13,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 
 export function HomeHeader() {
   const { data: session, status } = useSession();
@@ -24,17 +31,18 @@ export function HomeHeader() {
 
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
-        <Link href="/" className="flex items-center space-x-2 group">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between max-w-7xl">
+        <Link href="/" className="flex items-center space-x-2 group flex-shrink-0">
           <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center group-hover:bg-primary/20 transition-colors">
             <span className="text-xl font-bold">🧰</span>
           </div>
-          <span className="text-xl font-bold">ToolBox</span>
+          <span className="text-lg sm:text-xl font-bold">ToolBox</span>
         </Link>
 
-        <nav className="flex items-center gap-2">
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-2">
           <Link href="/tools">
-            <Button variant="ghost" className="text-base">
+            <Button variant="ghost" className="text-sm lg:text-base">
               Tools
             </Button>
           </Link>
@@ -42,17 +50,17 @@ export function HomeHeader() {
             <>
               {session.user?.isAdmin && (
                 <Link href="/admin">
-                  <Button variant="ghost" className="h-10 px-4">
+                  <Button variant="ghost" className="h-9 lg:h-10 px-3 lg:px-4 text-sm lg:text-base">
                     Dashboard
                   </Button>
                 </Link>
               )}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="h-10 px-3 gap-2">
-                    <div className="w-2 h-2 rounded-full bg-green-500" title="Logged in" />
-                    <UserIcon className="h-4 w-4" />
-                    <span className="max-w-[100px] truncate">
+                  <Button variant="outline" className="h-9 lg:h-10 px-2 lg:px-3 gap-2">
+                    <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="Logged in" />
+                    <UserIcon className="h-4 w-4 flex-shrink-0" />
+                    <span className="hidden lg:inline max-w-[120px] truncate text-sm">
                       {session.user?.name || session.user?.email}
                     </span>
                   </Button>
@@ -91,22 +99,97 @@ export function HomeHeader() {
           ) : mounted ? (
             <>
               <Link href="/login">
-                <Button variant="ghost" className="h-10 px-4">
+                <Button variant="ghost" className="h-9 lg:h-10 px-3 lg:px-4 text-sm lg:text-base">
                   <LogIn className="mr-2 h-4 w-4" />
-                  Sign In
+                  <span className="hidden sm:inline">Sign In</span>
                 </Button>
               </Link>
               <Link href="/register">
-                <Button className="h-10 px-4">
+                <Button className="h-9 lg:h-10 px-3 lg:px-4 text-sm lg:text-base">
                   <UserPlus className="mr-2 h-4 w-4" />
-                  Get Started
+                  <span className="hidden sm:inline">Get Started</span>
+                  <span className="sm:hidden">Start</span>
                 </Button>
               </Link>
             </>
           ) : (
-            <div className="h-10 w-40" /> // Placeholder during SSR
+            <div className="h-10 w-40" />
           )}
         </nav>
+
+        {/* Mobile Navigation */}
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="md:hidden">
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Open menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-[300px] sm:w-[400px]">
+            <SheetHeader>
+              <SheetTitle>Menu</SheetTitle>
+            </SheetHeader>
+            <div className="flex flex-col gap-4 mt-6">
+              <Link href="/tools">
+                <Button variant="ghost" className="w-full justify-start">
+                  Tools
+                </Button>
+              </Link>
+              {mounted && session ? (
+                <>
+                  {session.user?.isAdmin && (
+                    <Link href="/admin">
+                      <Button variant="ghost" className="w-full justify-start">
+                        Dashboard
+                      </Button>
+                    </Link>
+                  )}
+                  <div className="px-2 py-2 border-b">
+                    <p className="text-sm font-medium">{session.user?.name || session.user?.email}</p>
+                    <p className="text-xs text-muted-foreground">{session.user?.email}</p>
+                  </div>
+                  <Link href="/profile">
+                    <Button variant="ghost" className="w-full justify-start">
+                      <UserIcon className="mr-2 h-4 w-4" />
+                      Profile
+                    </Button>
+                  </Link>
+                  {session.user?.isAdmin && (
+                    <Link href="/admin">
+                      <Button variant="ghost" className="w-full justify-start">
+                        <ArrowRight className="mr-2 h-4 w-4" />
+                        Admin Dashboard
+                      </Button>
+                    </Link>
+                  )}
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start text-red-600 hover:text-red-700"
+                    onClick={() => signOut({ callbackUrl: "/" })}
+                  >
+                    <LogOut className="mr-2 h-4 w-4" />
+                    Logout
+                  </Button>
+                </>
+              ) : mounted ? (
+                <>
+                  <Link href="/login">
+                    <Button variant="ghost" className="w-full justify-start">
+                      <LogIn className="mr-2 h-4 w-4" />
+                      Sign In
+                    </Button>
+                  </Link>
+                  <Link href="/register">
+                    <Button className="w-full justify-start">
+                      <UserPlus className="mr-2 h-4 w-4" />
+                      Get Started
+                    </Button>
+                  </Link>
+                </>
+              ) : null}
+            </div>
+          </SheetContent>
+        </Sheet>
       </div>
     </header>
   );