From 2b58bff107698fad0c504aa79a1fe59224a0db33 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 29 Sep 2025 17:32:51 +0000
Subject: [PATCH 1/2] Initial plan


From ca0870b53e287d51d89abe1f0dc2cdaf8c45098b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 29 Sep 2025 17:46:17 +0000
Subject: [PATCH 2/2] Complete navigation and footer redesign with mobile
 responsiveness

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
---
 src/components/layout/footer.tsx | 103 ++++++++++--
 src/components/layout/header.tsx | 262 +++++++++++++++++++++++++++----
 2 files changed, 318 insertions(+), 47 deletions(-)

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 8b5fddc..458da32 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -7,9 +7,9 @@ export function Footer() {
     <footer id="footer" className="border-t bg-background">
       <Container>
         <div className="py-12">
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-8">
             {/* Brand */}
-            <div className="col-span-1 md:col-span-2">
+            <div className="col-span-1 sm:col-span-2 lg:col-span-2">
               <Link href="/" className="flex items-center space-x-2 mb-4">
                 <span className="text-xl font-bold">
                   <span className="text-foreground">Code</span>
@@ -17,11 +17,11 @@ export function Footer() {
                   <span className="text-foreground"> Hub</span>
                 </span>
               </Link>
-              <p className="text-sm text-muted-foreground max-w-md">
+              <p className="text-sm text-muted-foreground max-w-md mb-4">
                 A vibrant community of open source enthusiasts, researchers, and creators. 
                 We collaborate on powerful open-source solutions.
               </p>
-              <div className="flex items-center space-x-4 mt-4">
+              <div className="flex items-center space-x-4">
                 <Link 
                   href="https://github.com/CodeStorm-Hub" 
                   target="_blank" 
@@ -34,9 +34,9 @@ export function Footer() {
               </div>
             </div>
 
-            {/* Navigation */}
+            {/* Main Navigation */}
             <div>
-              <h3 className="text-sm font-semibold mb-4">Navigation</h3>
+              <h3 className="text-sm font-semibold mb-4">Main</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
                 <li>
                   <Link href="/about" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
@@ -66,13 +66,35 @@ export function Footer() {
               <h3 className="text-sm font-semibold mb-4">Community</h3>
               <ul className="space-y-2 text-sm text-muted-foreground">
                 <li>
-                  <Link 
-                    href="https://github.com/CodeStorm-Hub" 
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-                  >
-                    GitHub
+                  <Link href="/community" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Community
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/blog" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Blog
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/events" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Events
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/showcase" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Showcase
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Resources */}
+            <div>
+              <h3 className="text-sm font-semibold mb-4">Resources</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <Link href="/resources" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Resources
                   </Link>
                 </li>
                 <li>
@@ -85,18 +107,65 @@ export function Footer() {
                     Code of Conduct
                   </Link>
                 </li>
+                <li>
+                  <Link href="/changelog" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Changelog
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/roadmap" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Roadmap
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Legal & Developer */}
+            <div>
+              <h3 className="text-sm font-semibold mb-4">Legal</h3>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>
+                  <Link href="/privacy" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Privacy Policy
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/terms" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Terms of Service
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/accessibility" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Accessibility
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/style-guide" className="hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
+                    Style Guide
+                  </Link>
+                </li>
               </ul>
             </div>
           </div>
 
           <div className="border-t pt-8 mt-8">
-            <div className="flex flex-col md:flex-row justify-between items-center">
+            <div className="flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
               <p className="text-sm text-muted-foreground">
                 © {new Date().getFullYear()} CodeStorm Hub. All rights reserved.
               </p>
-              <p className="text-sm text-muted-foreground mt-2 md:mt-0">
-                Built with Next.js, Tailwind CSS, and Radix UI
-              </p>
+              <div className="flex flex-col sm:flex-row items-center space-y-1 sm:space-y-0 sm:space-x-4">
+                <p className="text-sm text-muted-foreground">
+                  Built with Next.js, Tailwind CSS, and Radix UI
+                </p>
+                <Link 
+                  href="https://github.com/CodeStorm-Hub" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  Open Source
+                </Link>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 759c3cd..85bb256 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,11 +1,54 @@
 "use client"
 
 import Link from "next/link"
+import { useState } from "react"
+import { usePathname } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Container } from "@/components/ui/container"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
+import { GitHubLogoIcon, HamburgerMenuIcon, Cross1Icon, ChevronDownIcon } from "@radix-ui/react-icons"
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+
+const navigationItems = {
+  main: [
+    { href: "/about", label: "About" },
+    { href: "/projects", label: "Projects" },
+    { href: "/team", label: "Team" },
+    { href: "/contact", label: "Contact" },
+  ],
+  community: [
+    { href: "/community", label: "Community" },
+    { href: "/blog", label: "Blog" },
+    { href: "/events", label: "Events" },
+    { href: "/showcase", label: "Showcase" },
+  ],
+  resources: [
+    { href: "/resources", label: "Resources" },
+    { href: "/contributing", label: "Contributing" },
+    { href: "/code-of-conduct", label: "Code of Conduct" },
+    { href: "/changelog", label: "Changelog" },
+    { href: "/roadmap", label: "Roadmap" },
+  ],
+  legal: [
+    { href: "/privacy", label: "Privacy Policy" },
+    { href: "/terms", label: "Terms of Service" },
+    { href: "/accessibility", label: "Accessibility" },
+  ],
+  developer: [
+    { href: "/style-guide", label: "Style Guide" },
+  ]
+}
 
 export function Header() {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const pathname = usePathname()
+
+  const isActivePath = (href: string) => {
+    if (href === "/") return pathname === "/"
+    return pathname.startsWith(href)
+  }
+
+  const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen)
+
   return (
     <header id="navigation" className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <Container>
@@ -19,47 +62,206 @@ export function Header() {
             </span>
           </Link>
 
-          {/* Navigation */}
-          <nav className="hidden md:flex items-center space-x-6" aria-label="Main navigation">
-            <Link 
-              href="/about" 
-              className="text-sm font-medium text-foreground/60 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-            >
-              About
-            </Link>
-            <Link 
-              href="/projects" 
-              className="text-sm font-medium text-foreground/60 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-            >
-              Projects
-            </Link>
-            <Link 
-              href="/team" 
-              className="text-sm font-medium text-foreground/60 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-            >
-              Team
-            </Link>
-            <Link 
-              href="/contact" 
-              className="text-sm font-medium text-foreground/60 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-            >
-              Contact
-            </Link>
+          {/* Desktop Navigation */}
+          <nav className="hidden lg:flex items-center space-x-1" aria-label="Main navigation">
+            {/* Main Navigation Items */}
+            {navigationItems.main.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`px-3 py-2 text-sm font-medium transition-colors rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+                  isActivePath(item.href)
+                    ? "text-foreground bg-accent"
+                    : "text-foreground/60 hover:text-foreground hover:bg-accent/50"
+                }`}
+              >
+                {item.label}
+              </Link>
+            ))}
+
+            {/* Community Dropdown */}
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <Button variant="ghost" size="sm" className="h-10 text-sm font-medium text-foreground/60 hover:text-foreground">
+                  Community
+                  <ChevronDownIcon className="ml-1 h-3 w-3" />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content className="min-w-[200px] bg-popover border border-border rounded-md shadow-md p-1" sideOffset={5}>
+                  {navigationItems.community.map((item) => (
+                    <DropdownMenu.Item key={item.href} asChild>
+                      <Link
+                        href={item.href}
+                        className={`flex items-center px-3 py-2 text-sm rounded-sm cursor-default focus:outline-none transition-colors ${
+                          isActivePath(item.href)
+                            ? "bg-accent text-accent-foreground"
+                            : "text-popover-foreground hover:bg-accent hover:text-accent-foreground"
+                        }`}
+                      >
+                        {item.label}
+                      </Link>
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+
+            {/* Resources Dropdown */}
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <Button variant="ghost" size="sm" className="h-10 text-sm font-medium text-foreground/60 hover:text-foreground">
+                  Resources
+                  <ChevronDownIcon className="ml-1 h-3 w-3" />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content className="min-w-[200px] bg-popover border border-border rounded-md shadow-md p-1" sideOffset={5}>
+                  {navigationItems.resources.map((item) => (
+                    <DropdownMenu.Item key={item.href} asChild>
+                      <Link
+                        href={item.href}
+                        className={`flex items-center px-3 py-2 text-sm rounded-sm cursor-default focus:outline-none transition-colors ${
+                          isActivePath(item.href)
+                            ? "bg-accent text-accent-foreground"
+                            : "text-popover-foreground hover:bg-accent hover:text-accent-foreground"
+                        }`}
+                      >
+                        {item.label}
+                      </Link>
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
           </nav>
 
-          {/* CTA */}
+          {/* Mobile Menu Button */}
           <div className="flex items-center space-x-2">
-            <Button variant="ghost" size="sm" asChild>
+            <Button variant="ghost" size="sm" asChild className="hidden sm:flex">
               <Link href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
                 <GitHubLogoIcon className="h-4 w-4 mr-2" />
                 GitHub
               </Link>
             </Button>
-            <Button size="sm">
+            <Button size="sm" className="hidden sm:inline-flex">
               Join Us
             </Button>
+            
+            {/* Mobile Menu Toggle */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="lg:hidden"
+              onClick={toggleMobileMenu}
+              aria-expanded={isMobileMenuOpen}
+              aria-controls="mobile-menu"
+              aria-label="Toggle navigation menu"
+            >
+              {isMobileMenuOpen ? (
+                <Cross1Icon className="h-4 w-4" />
+              ) : (
+                <HamburgerMenuIcon className="h-4 w-4" />
+              )}
+            </Button>
           </div>
         </div>
+
+        {/* Mobile Navigation Menu */}
+        {isMobileMenuOpen && (
+          <div id="mobile-menu" className="lg:hidden border-t border-border">
+            <div className="px-2 pt-2 pb-3 space-y-1">
+              {/* Main Navigation */}
+              <div className="space-y-1">
+                {navigationItems.main.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={`block px-3 py-2 text-base font-medium rounded-md transition-colors ${
+                      isActivePath(item.href)
+                        ? "text-foreground bg-accent"
+                        : "text-foreground/60 hover:text-foreground hover:bg-accent/50"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+
+              {/* Community Section */}
+              <div className="pt-4">
+                <div className="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                  Community
+                </div>
+                {navigationItems.community.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={`block px-3 py-2 text-base font-medium rounded-md transition-colors ${
+                      isActivePath(item.href)
+                        ? "text-foreground bg-accent"
+                        : "text-foreground/60 hover:text-foreground hover:bg-accent/50"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+
+              {/* Resources Section */}
+              <div className="pt-4">
+                <div className="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                  Resources
+                </div>
+                {navigationItems.resources.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={`block px-3 py-2 text-base font-medium rounded-md transition-colors ${
+                      isActivePath(item.href)
+                        ? "text-foreground bg-accent"
+                        : "text-foreground/60 hover:text-foreground hover:bg-accent/50"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+
+              {/* Mobile CTA Buttons */}
+              <div className="pt-4 space-y-2">
+                <Button asChild className="w-full justify-center">
+                  <Link href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
+                    <GitHubLogoIcon className="h-4 w-4 mr-2" />
+                    View on GitHub
+                  </Link>
+                </Button>
+                <Button variant="outline" className="w-full justify-center">
+                  Join Community
+                </Button>
+              </div>
+
+              {/* Legal Links */}
+              <div className="pt-4 border-t border-border">
+                <div className="flex flex-wrap gap-4 px-3 py-2">
+                  {navigationItems.legal.map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {item.label}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </Container>
     </header>
   )