From 000bcc2891d57a684f3adc65d285c680e616dd77 Mon Sep 17 00:00:00 2001
From: Punitkumar756 <your-email@example.com>
Date: Sat, 13 Dec 2025 18:56:39 +0530
Subject: [PATCH 1/2] Enhance responsiveness and layout adjustments across
 multiple components

---
 app/createHackathon/page.tsx  |   6 +-
 app/globals.css               | 113 ++++++++++++++++++++++++++++++++++
 app/layout.tsx                |  11 +++-
 app/manage/ManageClient.tsx   |   2 +-
 app/page.tsx                  |  34 +++++-----
 components/hackathon-card.tsx |  10 +--
 components/navigation.tsx     |  10 +--
 package-lock.json             |  33 +++++++++-
 8 files changed, 184 insertions(+), 35 deletions(-)

diff --git a/app/createHackathon/page.tsx b/app/createHackathon/page.tsx
index bac98b7..9c5eb73 100644
--- a/app/createHackathon/page.tsx
+++ b/app/createHackathon/page.tsx
@@ -322,7 +322,7 @@ export default function CreateHackathon() {
               {/* Hackathon Name */}
               <div className="space-y-2">
                 <div className="flex items-center gap-4">
-                  <div className="flex items-center gap-2 min-w-[200px]">
+                  <div className="flex items-center gap-2 sm:min-w-[200px]">
                     <Sparkles className="w-4 h-4 text-[#8B6914]" />
                     <Label htmlFor="name" className="text-gray-700 font-medium">Hackathon Name *</Label>
                     <button
@@ -354,7 +354,7 @@ export default function CreateHackathon() {
               <div className="space-y-4">
                 {/* Timezone Toggle */}
                 <div className="flex items-center gap-4">
-                  <div className="flex items-center gap-2 min-w-[200px]">
+                  <div className="flex items-center gap-2 sm:min-w-[200px]">
                     <Globe className="w-4 h-4 text-[#8B6914]" />
                     <Label className="text-gray-700 font-medium">Timezone</Label>
                     <button
@@ -459,7 +459,7 @@ export default function CreateHackathon() {
               {/* Image URL */}
               <div className="space-y-2">
                 <div className="flex items-center gap-4">
-                  <div className="flex items-center gap-2 min-w-[200px]">
+                  <div className="flex items-center gap-2 sm:min-w-[200px]">
                     <Globe className="w-4 h-4 text-[#8B6914]" />
                     <Label htmlFor="imageURL" className="text-gray-700 font-medium">Image URL (Optional)</Label>
                     <button
diff --git a/app/globals.css b/app/globals.css
index 6336f9f..d4783fd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -51,6 +51,106 @@ body {
   .animate-scroll-left:hover {
     animation-play-state: paused;
   }
+
+  /* Responsive utilities for mobile */
+  .mobile-padding {
+    padding: 1rem;
+  }
+
+  .mobile-margin {
+    margin: 1rem;
+  }
+
+  .mobile-hidden {
+    display: none;
+  }
+
+  .mobile-flex {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mobile-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 0;
+    overflow-x: hidden;
+  }
+
+  .container {
+    width: 100%;
+    padding: 0 1rem;
+    max-width: 100vw;
+  }
+
+  /* Ensure cards don't overflow */
+  .card {
+    max-width: 100%;
+  }
+
+  /* Better spacing for mobile */
+  h1 {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  /* Prevent horizontal scroll */
+  * {
+    max-width: 100vw;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+/* Extra small devices (phones in portrait mode) */
+@media (max-width: 480px) {
+  body {
+    font-size: 14px;
+  }
+
+  .container {
+    padding: 0 0.75rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  button {
+    font-size: 0.875rem;
+  }
+}
+
+/* Tablet devices */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .container {
+    padding: 0 2rem;
+  }
 }
 
 @layer base {
@@ -137,6 +237,19 @@ body {
     scroll-behavior: smooth;
   }
   
+  /* Touch-friendly interactive elements */
+  button, a, input, select, textarea {
+    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.3);
+  }
+  
+  /* Ensure buttons have adequate touch target size on mobile */
+  @media (max-width: 768px) {
+    button:not(.compact) {
+      min-height: 44px;
+      min-width: 44px;
+    }
+  }
+  
   /* Make date and time input icons more visible */
   input[type="date"]::-webkit-calendar-picker-indicator,
   input[type="time"]::-webkit-calendar-picker-indicator {
diff --git a/app/layout.tsx b/app/layout.tsx
index 5473e1c..3caa9d2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import '@rainbow-me/rainbowkit/styles.css'
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import './globals.css'
 // import { ThemeProvider } from '@/components/theme-provider'
 import { WalletProvider } from '@/providers/WalletProvider'
@@ -11,6 +11,13 @@ export const metadata: Metadata = {
   generator: 'Next.js',
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+  userScalable: true,
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -27,7 +34,7 @@ export default function RootLayout({
             disableTransitionOnChange
           > */}
             <Navigation />
-            <main className="max-w-8xl mx-32 px-4 sm:px-6 lg:px-8 py-8">
+            <main className="max-w-8xl mx-auto px-4 sm:px-6 lg:mx-32 lg:px-8 py-4 sm:py-8">
               {children}
             </main>
           {/* </ThemeProvider> */}
diff --git a/app/manage/ManageClient.tsx b/app/manage/ManageClient.tsx
index 906bcd4..8661dbe 100644
--- a/app/manage/ManageClient.tsx
+++ b/app/manage/ManageClient.tsx
@@ -577,7 +577,7 @@ export default function ManageHackathonPage() {
 
                     {/* Right: input + update button */}
                     {!hackathonInfo?.concluded && (
-                      <div className="flex flex-col items-end gap-2 min-w-[280px]">
+                      <div className="flex flex-col items-end gap-2 min-w-[200px] sm:min-w-[280px]">
                         <div className="flex items-center gap-3">
                           <Input
                             id={`tokens-${judge.address}`}
diff --git a/app/page.tsx b/app/page.tsx
index db302fb..b260d94 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -290,17 +290,17 @@ export default function HomePage() {
       </div>
 
       {/* Revolution Section with Hackathons Carousel */}
-      <div className="min-h-screen py-16">
-        <div className="container mx-auto">
+      <div className="min-h-screen py-8 sm:py-16">
+        <div className="container mx-auto px-4 sm:px-6">
           <div className="space-y-8">
               {/* Revolution Text - Moved Higher */}
               <div className="relative -mt-8">
                 {/* Small decorative elements */}
                 
                 <div className="relative z-10 mt-">
-                  <div className="flex items-center justify-between">
+                  <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-0">
                     <div>
-                      <h2 className="text-4xl lg:text-5xl font-black leading-tight">
+                      <h2 className="text-2xl sm:text-4xl lg:text-5xl font-black leading-tight">
                         <span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700">
                           Think. Build. Innovate.
                         </span>
@@ -311,13 +311,13 @@ export default function HomePage() {
                     </div>
                     
                     {/* Sync Button */}
-                    <div className="flex flex-col items-end">
+                    <div className="flex flex-col items-start sm:items-end w-full sm:w-auto">
                       <Button
                         onClick={handleSync}
                         disabled={syncing || loading}
                         variant="outline"
                         size="sm"
-                        className="border-amber-300 text-amber-700 hover:bg-amber-50 mb-2"
+                        className="border-amber-300 text-amber-700 hover:bg-amber-50 mb-2 w-full sm:w-auto">
                       >
                         <RefreshCw className={`w-4 h-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
                         {syncing ? 'Syncing...' : 'Sync'}
@@ -334,7 +334,7 @@ export default function HomePage() {
               
               {/* Circular Hackathons Carousel - Right Side */}
               {!loading && !error && recentHackathons.length > 0 && (
-                <div className="overflow-hidden h-[50vh]">
+                <div className="overflow-hidden h-[40vh] sm:h-[50vh]">
                   <div className="relative h-full flex items-center">
                     {/* Infinite scrolling container */}
                     <div className="flex animate-scroll-left">
@@ -344,12 +344,12 @@ export default function HomePage() {
                         const statusBadge = getStatusBadge(status)
                         
                         return (
-                                                <div key={`${hackathon.contractAddress}-${index}`} className="flex-shrink-0 mx-4">
+                                                <div key={`${hackathon.contractAddress}-${index}`} className="flex-shrink-0 mx-2 sm:mx-4">
                         <Link 
                           href={`/h?hackAddr=${hackathon.contractAddress}&chainId=${chainId}`}
                           className="block"
                         >
-                          <Card className="w-[350px] bg-white border border-gray-200 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 cursor-pointer">
+                          <Card className="w-[280px] sm:w-[350px] bg-white border border-gray-200 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 cursor-pointer">
                                 <CardContent className="p-5">
                                   <div className="space-y-3">
                                     {/* Header */}
@@ -398,15 +398,15 @@ export default function HomePage() {
               
               {/* Loading State - Right Side */}
               {loading && (
-                <div className="flex justify-center items-center h-[50vh]">
+                <div className="flex justify-center items-center h-[40vh] sm:h-[50vh]">
                   <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-300"></div>
                 </div>
               )}
               
               {/* Error State - Right Side */}
               {error && (
-                <div className="flex items-center justify-center h-[50vh]">
-                  <div className="bg-red-50/80 rounded-lg p-6 max-w-md">
+                <div className="flex items-center justify-center h-[40vh] sm:h-[50vh]">
+                  <div className="bg-red-50/80 rounded-lg p-4 sm:p-6 max-w-md mx-4">
                     <p className="font-medium text-red-600">{error}</p>
                     <Button 
                       onClick={() => loadRecentHackathons(true)} 
@@ -421,11 +421,11 @@ export default function HomePage() {
               
               {/* Empty State - Right Side */}
               {!loading && !error && recentHackathons.length === 0 && (
-                <div className="flex items-center justify-center h-[50vh]">
-                  <div className="bg-white/50 rounded-lg p-8 max-w-md text-center">
-                    <Zap className="w-16 h-16 text-amber-500 mx-auto mb-4" />
-                    <h3 className="text-xl font-semibold text-gray-900 mb-2">No hackathons found</h3>
-                    <p className="text-muted-foreground mb-4">Be the first to create an exciting hackathon!</p>
+                <div className="flex items-center justify-center h-[40vh] sm:h-[50vh]">
+                  <div className="bg-white/50 rounded-lg p-6 sm:p-8 max-w-md text-center mx-4">
+                    <Zap className="w-12 h-12 sm:w-16 sm:h-16 text-amber-500 mx-auto mb-4" />
+                    <h3 className="text-lg sm:text-xl font-semibold text-gray-900 mb-2">No hackathons found</h3>
+                    <p className="text-muted-foreground text-sm sm:text-base mb-4">Be the first to create an exciting hackathon!</p>
                     <Link href="/createHackathon">
                       <Button className="bg-amber-600 hover:bg-amber-700">
                         <Plus className="w-4 h-4 mr-2" />
diff --git a/components/hackathon-card.tsx b/components/hackathon-card.tsx
index 70b7efb..e0f826b 100644
--- a/components/hackathon-card.tsx
+++ b/components/hackathon-card.tsx
@@ -43,18 +43,18 @@ export default function HackathonCard({ hackathon, showJoinButton = true }: Hack
         <img 
           src={hackathon.image || "/placeholder.svg?height=200&width=400"} 
           alt={hackathon.hackathonName}
-          className="w-full h-48 object-cover rounded-t-lg"
+          className="w-full h-36 sm:h-48 object-cover rounded-t-lg"
         />
         <div className="absolute top-4 right-4">
           {getStatusBadge()}
         </div>
       </div>
       
-      <CardContent className="p-6">
-        <div className="space-y-4">
+      <CardContent className="p-4 sm:p-6">
+        <div className="space-y-3 sm:space-y-4">
           <div>
-            <h3 className="text-xl font-bold mb-2 text-amber-900">{hackathon.hackathonName}</h3>
-            <p className="text-muted-foreground text-sm">{hackathon.description || "Web3 Hackathon"}</p>
+            <h3 className="text-lg sm:text-xl font-bold mb-2 text-amber-900">{hackathon.hackathonName}</h3>
+            <p className="text-muted-foreground text-xs sm:text-sm">{hackathon.description || "Web3 Hackathon"}</p>
           </div>
           
           <div className="flex items-center justify-between">
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 16b6895..81bf04b 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -16,10 +16,10 @@ export default function Navigation() {
 
   return (
     <header className="border-b border-amber-100/60 bg-white/95 backdrop-blur-md sticky top-0 z-50 shadow-sm">
-      <div className="px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
-            <div className="w-12 h-12 flex items-center justify-center">
+      <div className="px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14 sm:h-16">
+          <Link href="/" className="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity">
+            <div className="w-8 h-8 sm:w-12 sm:h-12 flex items-center justify-center">
               <img 
                 src={getImagePath("/block.png")} 
                 alt="HackHub Logo" 
@@ -28,7 +28,7 @@ export default function Navigation() {
                 className="object-contain"
               />
             </div>
-            <span className="font-bold text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+            <span className="font-bold text-xl sm:text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
               HackHub
             </span>
           </Link>
diff --git a/package-lock.json b/package-lock.json
index 73b889e..337356c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1207,6 +1207,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3017,6 +3018,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -3472,6 +3474,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -3882,6 +3885,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -3988,6 +3992,7 @@
       "version": "5.83.0",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.83.0.tgz",
       "integrity": "sha512-/XGYhZ3foc5H0VM2jLSD/NyBRIOK4q9kfeml4+0x2DlL6xVuAcVEW+hTlTapAmejObg0i3eNqhkr2dT+eciwoQ==",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.83.0"
       },
@@ -4086,6 +4091,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
       "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "devOptional": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4096,6 +4102,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4109,6 +4116,7 @@
       "version": "1.17.3",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.17.3.tgz",
       "integrity": "sha512-jHivr1UPoJTX5Uel4AZSOwrCf4mO42LcdmnhJtUxZaRWhW4FviFbIfs0moAWWld7GOT+2XnuVZjjA/K32uUnMQ==",
+      "peer": true,
       "dependencies": {
         "@emotion/hash": "^0.9.0",
         "@vanilla-extract/private": "^1.0.8",
@@ -4176,6 +4184,7 @@
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.18.0.tgz",
       "integrity": "sha512-33Wc/nnc/Q4qrqSL0F8BIDsG0iFTPrB4avjL/9vIE2DrA3GS3scVnrn6OtxpyF2TrwDZVfA+XUmfvoKuqtWPgw==",
+      "peer": true,
       "dependencies": {
         "eventemitter3": "5.0.1",
         "mipd": "0.0.7",
@@ -5365,6 +5374,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -5648,6 +5658,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -6049,6 +6060,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.1.0.tgz",
       "integrity": "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==",
+      "peer": true,
       "dependencies": {
         "node-fetch": "^2.7.0"
       }
@@ -6239,6 +6251,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -6431,6 +6444,7 @@
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.15.tgz",
       "integrity": "sha512-r6kEJXDKecVOCj2nLMuXK/FCPeurW33+3JRpfXVbjLja3XUYFfD9I/JBreH6sUyzcm3G/YQboBjMla6poKeSdA==",
+      "peer": true,
       "dependencies": {
         "@ecies/ciphers": "^0.2.3",
         "@noble/ciphers": "^1.3.0",
@@ -6451,7 +6465,8 @@
     "node_modules/embla-carousel": {
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
-      "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A=="
+      "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.5.1",
@@ -6741,7 +6756,8 @@
     "node_modules/eventemitter2": {
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
-      "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg=="
+      "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
+      "peer": true
     },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
@@ -8182,6 +8198,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8392,6 +8409,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8416,6 +8434,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8428,6 +8447,7 @@
       "version": "7.60.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.60.0.tgz",
       "integrity": "sha512-SBrYOvMbDB7cV8ZfNpaiLcgjH/a1c7aK0lK+aNigpf4xWLO8q+o4tcvVurv3c4EOyzn/3dCsYt4GKD42VvJ/+A==",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -8560,6 +8580,7 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -8881,6 +8902,7 @@
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
       "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "peer": true,
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
@@ -9180,6 +9202,7 @@
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -9343,6 +9366,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "devOptional": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9519,6 +9543,7 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.13.2.tgz",
       "integrity": "sha512-Qik0o+DSy741TmkqmRfjq+0xpZBXi/Y6+fXZLn0xNF1z/waFMbE3rkivv5Zcf9RrMUp6zswf2J7sbh2KBlba5A==",
+      "peer": true,
       "dependencies": {
         "derive-valtio": "0.1.0",
         "proxy-compare": "2.6.0",
@@ -9591,6 +9616,7 @@
           "url": "https://github.com/sponsors/wevm"
         }
       ],
+      "peer": true,
       "dependencies": {
         "@noble/curves": "1.9.2",
         "@noble/hashes": "1.8.0",
@@ -9614,6 +9640,7 @@
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-2.16.0.tgz",
       "integrity": "sha512-zXbYp9bt79A+XkStOiGaf2aDy+3B/vH0aHWP8Fc9dyzElOCXqeAzKTwvyrTGsSOHehHmGzo/KPkfc+e/HerJ5A==",
+      "peer": true,
       "dependencies": {
         "@wagmi/connectors": "5.9.0",
         "@wagmi/core": "2.18.0",
@@ -9793,6 +9820,7 @@
       "version": "8.18.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
       "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -9915,6 +9943,7 @@
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

From d0a8beb1433cddae3c306321e0e3d3f1eeefd6d1 Mon Sep 17 00:00:00 2001
From: Punitkumar756 <your-email@example.com>
Date: Sat, 13 Dec 2025 18:59:37 +0530
Subject: [PATCH 2/2] Enhance layout and responsiveness with fluid spacing,
 improved typography, and optimized interactive elements

---
 app/globals.css | 225 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 207 insertions(+), 18 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d4783fd..35e1636 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -14,6 +14,7 @@ body {
   /* Custom scrollbar for webkit browsers */
   .scrollbar-thin::-webkit-scrollbar {
     height: 6px;
+    width: 6px;
   }
   
   .scrollbar-thumb-amber-300::-webkit-scrollbar-thumb {
@@ -34,6 +35,13 @@ body {
     -webkit-line-clamp: 2;
   }
   
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+  
   /* Infinite scrolling animation */
   @keyframes scroll-left {
     0% {
@@ -46,19 +54,20 @@ body {
   
   .animate-scroll-left {
     animation: scroll-left 30s linear infinite;
+    will-change: transform;
   }
   
   .animate-scroll-left:hover {
     animation-play-state: paused;
   }
 
-  /* Responsive utilities for mobile */
+  /* Advanced Responsive utilities */
   .mobile-padding {
-    padding: 1rem;
+    padding: clamp(0.75rem, 4vw, 1.5rem);
   }
 
   .mobile-margin {
-    margin: 1rem;
+    margin: clamp(0.75rem, 4vw, 1.5rem);
   }
 
   .mobile-hidden {
@@ -68,6 +77,7 @@ body {
   .mobile-flex {
     display: flex;
     flex-direction: column;
+    gap: 1rem;
   }
 
   .mobile-center {
@@ -75,17 +85,54 @@ body {
     justify-content: center;
     align-items: center;
   }
+  
+  /* Fluid spacing */
+  .fluid-gap {
+    gap: clamp(0.5rem, 2vw, 1rem);
+  }
+  
+  .fluid-padding {
+    padding: clamp(1rem, 3vw, 2rem);
+  }
+  
+  /* Smooth interactions */
+  .smooth-hover {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .smooth-hover:hover {
+    transform: translateY(-2px);
+  }
+  
+  /* Prevent text selection on interactive elements */
+  .no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  
+  /* Safe area for notch devices */
+  .safe-top {
+    padding-top: env(safe-area-inset-top);
+  }
+  
+  .safe-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 @media (max-width: 768px) {
   body {
     padding: 0;
     overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   .container {
     width: 100%;
-    padding: 0 1rem;
+    padding: 0 clamp(0.75rem, 4vw, 1.5rem);
     max-width: 100vw;
   }
 
@@ -94,20 +141,25 @@ body {
     max-width: 100%;
   }
 
-  /* Better spacing for mobile */
+  /* Fluid typography for better readability */
   h1 {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
+    font-size: clamp(1.5rem, 5vw, 2.25rem);
+    line-height: 1.2;
   }
 
   h2 {
-    font-size: 1.5rem;
-    line-height: 2rem;
+    font-size: clamp(1.25rem, 4vw, 1.875rem);
+    line-height: 1.3;
   }
 
   h3 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
+    line-height: 1.4;
+  }
+  
+  p {
+    font-size: clamp(0.875rem, 2.5vw, 1rem);
+    line-height: 1.6;
   }
 
   /* Prevent horizontal scroll */
@@ -119,6 +171,37 @@ body {
     max-width: 100%;
     height: auto;
   }
+  
+  /* Optimize button sizing */
+  button, a[role="button"] {
+    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
+  }
+  
+  /* Better input sizing */
+  input, select, textarea {
+    font-size: 16px; /* Prevents zoom on iOS */
+    min-height: 44px;
+  }
+  
+  /* Optimize table scrolling */
+  table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Better modal sizing */
+  [role="dialog"], .modal {
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+    margin: 1rem;
+  }
+  
+  /* Reduce animations for performance */
+  * {
+    animation-duration: 0.5s !important;
+    transition-duration: 0.2s !important;
+  }
 }
 
 /* Extra small devices (phones in portrait mode) */
@@ -128,21 +211,53 @@ body {
   }
 
   .container {
-    padding: 0 0.75rem;
+    padding: 0 clamp(0.5rem, 3vw, 1rem);
   }
 
   h1 {
-    font-size: 1.5rem;
-    line-height: 2rem;
+    font-size: clamp(1.25rem, 6vw, 1.75rem);
+    line-height: 1.2;
   }
 
   h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+    font-size: clamp(1.125rem, 5vw, 1.5rem);
+    line-height: 1.3;
   }
 
   button {
     font-size: 0.875rem;
+    padding: 0.625rem 1rem;
+  }
+  
+  /* Stack flex items */
+  .flex {
+    flex-direction: column !important;
+  }
+  
+  /* Reduce gaps */
+  .gap-4 {
+    gap: 0.75rem !important;
+  }
+  
+  .gap-6 {
+    gap: 1rem !important;
+  }
+  
+  /* Better card spacing */
+  .card {
+    padding: 1rem !important;
+  }
+}
+
+/* Landscape phones */
+@media (max-height: 500px) and (orientation: landscape) {
+  header {
+    position: static !important;
+  }
+  
+  .hero-section {
+    min-height: auto !important;
+    padding: 2rem 0 !important;
   }
 }
 
@@ -151,6 +266,18 @@ body {
   .container {
     padding: 0 2rem;
   }
+  
+  body {
+    font-size: 15px;
+  }
+}
+
+/* Large screens optimization */
+@media (min-width: 1920px) {
+  .container {
+    max-width: 1800px;
+    margin: 0 auto;
+  }
 }
 
 @layer base {
@@ -229,17 +356,36 @@ body {
   * {
     @apply border-border;
   }
+  
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "kern" 1, "liga" 1;
+    text-rendering: optimizeLegibility;
   }
   
   html {
     scroll-behavior: smooth;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
   }
   
-  /* Touch-friendly interactive elements */
+  /* Enhanced touch-friendly interactive elements */
   button, a, input, select, textarea {
-    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.3);
+    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.2);
+    tap-highlight-color: rgba(251, 191, 36, 0.2);
+  }
+  
+  /* Better focus states for accessibility */
+  *:focus-visible {
+    outline: 2px solid rgba(251, 191, 36, 0.8);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  
+  /* Smooth scrolling for all containers */
+  * {
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
   }
   
   /* Ensure buttons have adequate touch target size on mobile */
@@ -247,9 +393,32 @@ body {
     button:not(.compact) {
       min-height: 44px;
       min-width: 44px;
+      touch-action: manipulation;
+    }
+    
+    a:not(.compact) {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+    }
+    
+    /* Disable double-tap zoom */
+    * {
+      touch-action: manipulation;
     }
   }
   
+  /* Optimize images */
+  img {
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+  }
+  
+  /* Better link styling */
+  a {
+    text-decoration-skip-ink: auto;
+  }
+  
   /* Make date and time input icons more visible */
   input[type="date"]::-webkit-calendar-picker-indicator,
   input[type="time"]::-webkit-calendar-picker-indicator {
@@ -267,4 +436,24 @@ body {
   input[type="time"]::-webkit-calendar-picker-indicator:hover {
     opacity: 0.8 !important;
   }
+  
+  /* Remove spinner from number inputs on mobile */
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  
+  /* Better select styling */
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    padding-right: 2.5rem;
+  }
 }