From ae38a7c1dac19a476d97795f3fc09ee65c0f0c7e Mon Sep 17 00:00:00 2001
From: Shashidhar B M <112196062+ShashidharM0118@users.noreply.github.com>
Date: Sun, 9 Nov 2025 19:53:13 +0530
Subject: [PATCH 1/2] feat: mobile responsive home page with sidebar navigation

---
 app/layout.tsx            |   2 +-
 app/page.tsx              | 102 +++++++++++++-------------
 components/navigation.tsx | 148 ++++++++++++++++++++++++++++++++------
 3 files changed, 183 insertions(+), 69 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 5473e1c..06448b4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -27,7 +27,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="w-full">
               {children}
             </main>
           {/* </ThemeProvider> */}
diff --git a/app/page.tsx b/app/page.tsx
index db302fb..84e623e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -211,15 +211,23 @@ export default function HomePage() {
   return (
     <div className="min-h-screen">
       {/* Hero Section - Full Viewport Height */}
-      <div className="min-h-screen flex items-center justify-center relative">
-        <div className="container mx-auto px-4">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+      <div className="min-h-screen flex items-center justify-center relative px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="hidden lg:flex absolute inset-0 items-center justify-end overflow-hidden">
+          <img 
+            src={getImagePath("/handRevolution.png")} 
+            alt="HackHub - Think, Build, Innovate" 
+            className="w-[450px] xl:w-[500px] h-auto object-contain opacity-90 drop-shadow-2xl"
+          />
+        </div>
+
+        <div className="w-full max-w-7xl mx-auto relative z-10">
+          <div className="flex flex-col lg:grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
             {/* Left side - Welcome to HackHub */}
-            <div className="space-y-6">
+            <div className="space-y-4 sm:space-y-6 w-full">
               <div className="relative">            
                 {/* Main heading with enhanced styling */}
-                <div className="relative z-10 -mt-24 pb-8">
-                  <h1 className="text-6xl lg:text-7xl font-black leading-tight">
+                <div className="relative">
+                  <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 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 drop-shadow-sm">
                       <DecryptedText 
                         text="Welcome to the On-Chain"
@@ -232,7 +240,7 @@ export default function HomePage() {
                         encryptedClassName="text-amber-400/40"
                       />
                     </span>
-                    <span className="block text-6xl lg:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800 mt-4 tracking-tight">
+                    <span className="block text-4xl sm:text-5xl md:text-6xl lg:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800 mt-2 sm:mt-4 tracking-tight">
                       <DecryptedText 
                         text="Hackathon Hub."
                         animateOn="view"
@@ -247,10 +255,10 @@ export default function HomePage() {
                   </h1>
                   
                   {/* Accent line */}
-                   <div className="mt-6 w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
+                   <div className="mt-4 sm:mt-6 w-20 sm:w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
                    
-                   <div className="mt-8">
-                     <p className="text-xl lg:text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600 tracking-wider">
+                   <div className="mt-6 sm:mt-8">
+                     <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600 tracking-wider">
                        <DecryptedText 
                          text="Transparent. Permissionless. Intuitive."
                          animateOn="view"
@@ -267,57 +275,55 @@ export default function HomePage() {
               </div>
             </div>
             
-            {/* Right side - HackHub image */}
-            <div className="flex justify-center lg:justify-end pt-0">
-              <div className="relative -mt-8 pb-8">
-                <img 
-                  src={getImagePath("/handRevolution.png")} 
-                  alt="HackHub - Think, Build, Innovate" 
-                  className="w-full max-w-md h-auto object-contain drop-shadow-2xl"
-                />
-              </div>
+            {/* Right side - Image shown below text on mobile/tablet */}
+            <div className="flex justify-center lg:hidden w-full mt-8">
+              <img 
+                src={getImagePath("/handRevolution.png")} 
+                alt="HackHub - Think, Build, Innovate" 
+                className="w-[280px] sm:w-[350px] md:w-[400px] h-auto object-contain drop-shadow-2xl opacity-80"
+              />
             </div>
           </div>
         </div>
         
         {/* Scroll Indicator */}
-        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
-          <div className="flex flex-col items-center space-y-2">
-            <span className="text-sm text-amber-600 font-medium">Scroll to explore</span>
-            <ChevronDown className="w-6 h-6 text-amber-600" />
+        <div className="absolute bottom-4 sm:bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+          <div className="flex flex-col items-center space-y-1 sm:space-y-2">
+            <span className="text-xs sm:text-sm text-amber-600 font-medium">Scroll to explore</span>
+            <ChevronDown className="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" />
           </div>
         </div>
       </div>
 
       {/* Revolution Section with Hackathons Carousel */}
-      <div className="min-h-screen py-16">
-        <div className="container mx-auto">
-          <div className="space-y-8">
+      <div className="min-h-screen py-8 sm:py-12 lg:py-16 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="w-full max-w-7xl mx-auto">
+          <div className="space-y-6 sm:space-y-8">
               {/* Revolution Text - Moved Higher */}
-              <div className="relative -mt-8">
+              <div className="relative">
                 {/* Small decorative elements */}
                 
-                <div className="relative z-10 mt-">
-                  <div className="flex items-center justify-between">
+                <div className="relative z-10">
+                  <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-3xl 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>
                       </h2>
                       
                       {/* Accent line */}
-                      <div className="mt-6 w-20 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
+                      <div className="mt-4 sm:mt-6 w-16 sm:w-20 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>
                     </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 +340,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-[45vh] md:h-[50vh]">
                   <div className="relative h-full flex items-center">
                     {/* Infinite scrolling container */}
                     <div className="flex animate-scroll-left">
@@ -344,12 +350,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-3 md: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-[320px] md: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,20 +404,20 @@ export default function HomePage() {
               
               {/* Loading State - Right Side */}
               {loading && (
-                <div className="flex justify-center items-center h-[50vh]">
-                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-300"></div>
+                <div className="flex justify-center items-center h-[40vh] sm:h-[45vh] md:h-[50vh]">
+                  <div className="animate-spin rounded-full h-10 w-10 sm:h-12 sm: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">
-                    <p className="font-medium text-red-600">{error}</p>
+                <div className="flex items-center justify-center h-[40vh] sm:h-[45vh] md:h-[50vh] px-4">
+                  <div className="bg-red-50/80 rounded-lg p-4 sm:p-6 max-w-md w-full">
+                    <p className="font-medium text-red-600 text-sm sm:text-base">{error}</p>
                     <Button 
                       onClick={() => loadRecentHackathons(true)} 
                       variant="outline" 
-                      className="mt-4"
+                      className="mt-4 w-full sm:w-auto"
                     >
                       Try Again
                     </Button>
@@ -421,13 +427,13 @@ 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-[45vh] md:h-[50vh] px-4">
+                  <div className="bg-white/50 rounded-lg p-6 sm:p-8 max-w-md text-center w-full">
+                    <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-sm sm:text-base text-muted-foreground mb-4">Be the first to create an exciting hackathon!</p>
                     <Link href="/createHackathon">
-                      <Button className="bg-amber-600 hover:bg-amber-700">
+                      <Button className="bg-amber-600 hover:bg-amber-700 w-full sm:w-auto">
                         <Plus className="w-4 h-4 mr-2" />
                         Create Hackathon
                       </Button>
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 16b6895..57a8490 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -2,9 +2,12 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { Menu, X } from "lucide-react"
+
 // Helper function to get the correct image path for GitHub Pages
 const getImagePath = (path: string) => {
   // For static export, we need to ensure the path works with GitHub Pages
@@ -13,27 +16,29 @@ const getImagePath = (path: string) => {
 
 export default function Navigation() {
   const pathname = usePathname()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   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">
-              <img 
-                src={getImagePath("/block.png")} 
-                alt="HackHub Logo" 
-                width={48} 
-                height={48}
-                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">
-              HackHub
-            </span>
-          </Link>
-          
-          <nav className="hidden md:flex items-center gap-1">
+    <>
+      <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">
+                <img 
+                  src={getImagePath("/block.png")} 
+                  alt="HackHub Logo" 
+                  width={48} 
+                  height={48}
+                  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">
+                HackHub
+              </span>
+            </Link>
+            
+            <nav className="hidden md:flex items-center gap-1">
             <Link href="/explorer">
               <Button 
                 variant="ghost"
@@ -73,10 +78,113 @@ export default function Navigation() {
           </nav>
 
           <div className="flex items-center gap-3">
-            <ConnectButton />
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 text-gray-700 hover:text-amber-800 hover:bg-amber-50 rounded-lg transition-colors"
+              aria-label="Toggle menu"
+            >
+              {mobileMenuOpen ? (
+                <X className="w-6 h-6" />
+              ) : (
+                <Menu className="w-6 h-6" />
+              )}
+            </button>
+            
+            {/* Desktop Connect Button */}
+            <div className="hidden md:block">
+              <ConnectButton />
+            </div>
           </div>
         </div>
       </div>
     </header>
+
+    {/* Mobile Menu Sidebar */}
+    {mobileMenuOpen && (
+      <>
+        {/* Overlay */}
+        <div 
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setMobileMenuOpen(false)}
+        />
+        
+        {/* Sidebar */}
+        <div className="fixed top-0 left-0 h-full w-64 bg-white shadow-xl z-50 md:hidden transform transition-transform duration-300 ease-in-out">
+          <div className="flex flex-col h-full">
+            {/* Header */}
+            <div className="flex items-center justify-between p-4 border-b border-amber-100">
+              <span className="font-bold text-2xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+                Menu
+              </span>
+              <button
+                onClick={() => setMobileMenuOpen(false)}
+                className="p-2 text-gray-700 hover:text-amber-800 hover:bg-amber-50 rounded-lg transition-colors"
+                aria-label="Close menu"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            
+            {/* Navigation Links */}
+            <nav className="flex flex-col p-4 space-y-2 flex-1">
+              <Link 
+                href="/explorer"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <Button 
+                  variant="ghost"
+                  className={`w-full justify-start ${
+                    pathname === "/explorer" 
+                      ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
+                      : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
+                  } transition-all duration-200 font-medium`}
+                >
+                  Explore Hackathons
+                </Button>
+              </Link>
+              
+              <Link 
+                href="/createHackathon"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <Button 
+                  variant="ghost"
+                  className={`w-full justify-start ${
+                    pathname === "/createHackathon" 
+                      ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
+                      : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
+                  } transition-all duration-200 font-medium`}
+                >
+                  Organize a Hackathon
+                </Button>
+              </Link>
+              
+              <Link 
+                href="/myHackathons"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <Button 
+                  variant="ghost"
+                  className={`w-full justify-start ${
+                    pathname === "/myHackathons" 
+                      ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
+                      : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
+                  } transition-all duration-200 font-medium`}
+                >
+                  My Hackathons
+                </Button>
+              </Link>
+            </nav>
+            
+            {/* Connect Wallet Button at Bottom */}
+            <div className="p-4 border-t border-amber-100 bg-amber-50/30">
+              <ConnectButton />
+            </div>
+          </div>
+        </div>
+      </>
+    )}
+  </>
   )
 } 
\ No newline at end of file

From 88063261834e12230fbb964d115a570a993e58fc Mon Sep 17 00:00:00 2001
From: Shashidhar B M <112196062+ShashidharM0118@users.noreply.github.com>
Date: Mon, 10 Nov 2025 10:24:02 +0530
Subject: [PATCH 2/2] feat: mobile responsive of explore page

---
 app/explorer/page.tsx | 86 +++++++++++++++++++++----------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/app/explorer/page.tsx b/app/explorer/page.tsx
index 810339e..6d205a9 100644
--- a/app/explorer/page.tsx
+++ b/app/explorer/page.tsx
@@ -388,18 +388,18 @@ function ExplorerPageContent() {
 
   if (loading) {
     return (
-      <div className="space-y-8">
+      <div className="space-y-6 sm:space-y-8 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 sm:py-6 lg:py-8">
         <div className="text-center space-y-4">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
             Explore Hackathons
           </h1>
         </div>
         
         <div className="flex items-center justify-center py-12">
           <div className="text-center space-y-4">
-            <Loader2 className="w-8 h-8 animate-spin mx-auto text-amber-600" />
-            <p className="text-muted-foreground">Loading hackathons from blockchain...</p>
-            <p className="text-sm text-muted-foreground">
+            <Loader2 className="w-6 h-6 sm:w-8 sm:h-8 animate-spin mx-auto text-amber-600" />
+            <p className="text-sm sm:text-base text-muted-foreground">Loading hackathons from blockchain...</p>
+            <p className="text-xs sm:text-sm text-muted-foreground">
               {isConnected ? `Fetching from ${getNetworkName(chainId)}` : 'Please connect your wallet'}
             </p>
           </div>
@@ -410,12 +410,12 @@ function ExplorerPageContent() {
 
   if (error) {
     return (
-      <div className="space-y-8">
+      <div className="space-y-6 sm:space-y-8 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 sm:py-6 lg:py-8">
         <div className="text-center space-y-4">
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
             Explore Hackathons
           </h1>
-          <p className="text-muted-foreground text-lg">Discover amazing Web3 hackathons and join the innovation</p>
+          <p className="text-sm sm:text-base md:text-lg text-muted-foreground">Discover amazing Web3 hackathons and join the innovation</p>
           
           {/* Network Status */}
           <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
@@ -461,21 +461,21 @@ function ExplorerPageContent() {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6 sm:space-y-8 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 sm:py-6 lg:py-8">
       <div className="text-center space-y-4">
-        <div className="flex items-center justify-between">
-          <div className="flex-1"></div>
-          <h1 className="text-4xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="flex-1 hidden sm:block"></div>
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
             Explore Hackathons
           </h1>
-          <div className="flex-1 flex justify-end">
-            <div className="flex flex-col items-end">
+          <div className="flex-1 flex justify-center sm:justify-end w-full sm:w-auto">
+            <div className="flex flex-col items-center 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"
               >
                 <RotateCcw className={`w-4 h-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
                 {syncing ? 'Syncing...' : 'Sync'}
@@ -491,7 +491,7 @@ function ExplorerPageContent() {
       </div>
 
       {/* Search and Filters */}
-      <div className="flex flex-col lg:flex-row gap-4">
+      <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
         <div className="flex-1 relative">
           <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
           <Input 
@@ -502,9 +502,9 @@ function ExplorerPageContent() {
           />
         </div>
         
-        <div className="flex gap-2 flex-wrap lg:flex-nowrap">
+        <div className="flex gap-2">
           <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="w-full lg:w-[140px] bg-white text-[#8B6914]">
+            <SelectTrigger className="w-full sm:w-[160px] bg-white text-[#8B6914]">
               <SelectValue placeholder="Status" />
             </SelectTrigger>
             <SelectContent>
@@ -520,26 +520,26 @@ function ExplorerPageContent() {
 
       {/* Results Info */}
       {effectiveTotal > 0 && (
-        <div className="flex items-center justify-between text-sm text-gray-600">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-sm text-gray-600">
           <span>
             Showing {startItem}-{endItem} of {effectiveTotal} hackathons
             {hasActiveFilters && ` (filtered from ${totalHackathons} total)`}
           </span>
-          <span>
+          <span className="text-xs sm:text-sm">
             Page {currentPage} of {totalPages}
           </span>
         </div>
       )}
 
       {/* Hackathons List */}
-      <div className="space-y-8">
+      <div className="space-y-6 sm:space-y-8">
         {/* Active, Upcoming & Judging Hackathons */}
         {displayHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'concluded').length > 0 && (
           <div className="space-y-4">
-            <h2 className="text-2xl font-bold text-amber-800 border-b border-amber-200 pb-2">
+            <h2 className="text-xl sm:text-2xl font-bold text-amber-800 border-b border-amber-200 pb-2">
               🔥 Active, Upcoming & Judging Hackathons
             </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
               {displayHackathons
                 .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) !== 'concluded')
                 .sort((a, b) => {
@@ -651,10 +651,10 @@ function ExplorerPageContent() {
         {/* Past Hackathons */}
         {displayHackathons.filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'concluded').length > 0 && (
           <div className="space-y-4">
-            <h2 className="text-2xl font-bold text-gray-700 border-b border-gray-200 pb-2">
+            <h2 className="text-xl sm:text-2xl font-bold text-gray-700 border-b border-gray-200 pb-2">
               ✅ Past Hackathons
             </h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
               {displayHackathons
                 .filter(h => getHackathonStatus(h.startTime, h.endTime, h.concluded) === 'concluded')
                 .map((hackathon) => {
@@ -730,19 +730,19 @@ function ExplorerPageContent() {
 
       {/* Pagination Controls */}
       {(totalPages > 1 || (!loading && currentPage > 1)) && (
-        <div className="flex items-center justify-center space-x-2">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-2">
           <Button
             variant="outline"
             size="sm"
             onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
             disabled={currentPage === 1}
-            className="border-amber-300 text-amber-700 hover:bg-amber-50"
+            className="border-amber-300 text-amber-700 hover:bg-amber-50 w-full sm:w-auto"
           >
             <ChevronLeft className="w-4 h-4 mr-1" />
             Previous
           </Button>
           
-          <div className="flex items-center space-x-1">
+          <div className="flex items-center gap-1 overflow-x-auto px-2">
             {Array.from({ length: Math.min(5, Math.max(1, totalPages)) }, (_, i) => {
               const safeTotalPages = Math.max(1, totalPages)
               let pageNum
@@ -763,8 +763,8 @@ function ExplorerPageContent() {
                   size="sm"
                   onClick={() => setCurrentPage(pageNum)}
                   className={currentPage === pageNum 
-                    ? "bg-amber-600 text-white hover:bg-amber-700" 
-                    : "border-amber-300 text-amber-700 hover:bg-amber-50"
+                    ? "bg-amber-600 text-white hover:bg-amber-700 min-w-[40px]" 
+                    : "border-amber-300 text-amber-700 hover:bg-amber-50 min-w-[40px]"
                   }
                 >
                   {pageNum}
@@ -778,7 +778,7 @@ function ExplorerPageContent() {
             size="sm"
             onClick={() => setCurrentPage(prev => Math.min(Math.max(1, totalPages), prev + 1))}
             disabled={currentPage === Math.max(1, totalPages)}
-            className="border-amber-300 text-amber-700 hover:bg-amber-50"
+            className="border-amber-300 text-amber-700 hover:bg-amber-50 w-full sm:w-auto"
           >
             Next
             <ChevronRight className="w-4 h-4 ml-1" />
@@ -788,12 +788,12 @@ function ExplorerPageContent() {
 
       {/* No Results */}
       {displayHackathons.length === 0 && hackathons.length > 0 && (
-        <div className="text-center py-12">
-          <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
-            <Search className="w-8 h-8 text-gray-400" />
+        <div className="text-center py-8 sm:py-12 px-4">
+          <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
+            <Search className="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" />
           </div>
-          <h3 className="text-lg font-semibold mb-2">No hackathons found</h3>
-          <p className="text-muted-foreground mb-4">
+          <h3 className="text-base sm:text-lg font-semibold mb-2">No hackathons found</h3>
+          <p className="text-sm sm:text-base text-muted-foreground mb-4">
             Try adjusting your search terms, category, or status filter
           </p>
           <Button 
@@ -801,7 +801,7 @@ function ExplorerPageContent() {
               setSearchTerm("")
               setStatusFilter("All Status")
             }}
-            className="bg-gradient-to-r from-amber-600 to-orange-500 hover:from-amber-700 hover:to-orange-600 text-white"
+            className="bg-gradient-to-r from-amber-600 to-orange-500 hover:from-amber-700 hover:to-orange-600 text-white w-full sm:w-auto"
           >
             Show All Hackathons
           </Button>
@@ -810,15 +810,15 @@ function ExplorerPageContent() {
 
       {/* Empty State - No hackathons on blockchain */}
       {hackathons.length === 0 && (
-        <div className="text-center py-12">
-          <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
-            <Search className="w-8 h-8 text-gray-400" />
+        <div className="text-center py-8 sm:py-12 px-4">
+          <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
+            <Search className="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" />
           </div>
-          <h3 className="text-lg font-semibold mb-2">No hackathons found</h3>
-          <p className="text-muted-foreground mb-4">
+          <h3 className="text-base sm:text-lg font-semibold mb-2">No hackathons found</h3>
+          <p className="text-sm sm:text-base text-muted-foreground mb-4">
             No hackathons have been created on this network yet. Be the first to create one!
           </p>
-          <Button className="bg-gradient-to-r from-amber-600 to-orange-500 hover:from-amber-700 hover:to-orange-600 text-white">
+          <Button className="bg-gradient-to-r from-amber-600 to-orange-500 hover:from-amber-700 hover:to-orange-600 text-white w-full sm:w-auto">
             Create First Hackathon
           </Button>
         </div>