Skip to content

Commit d546e6a

Browse files
rezwana-karimrezwana-karim
authored
Fix critical mobile navigation and complete UI/UX navigation overhaul (#16)
2 parents 1e7114b + ca0870b commit d546e6a

2 files changed

Lines changed: 318 additions & 47 deletions

File tree

‎src/components/layout/footer.tsx‎

Lines changed: 86 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@ export function Footer() {
77
<footer id="footer" className="border-t bg-background">
88
<Container>
99
<div className="py-12">
10-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
10+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-8">
1111
{/* Brand */}
12-
<div className="col-span-1 md:col-span-2">
12+
<div className="col-span-1 sm:col-span-2 lg:col-span-2">
1313
<Link href="/" className="flex items-center space-x-2 mb-4">
1414
<span className="text-xl font-bold">
1515
<span className="text-foreground">Code</span>
1616
<span className="text-primary">Storm</span>
1717
<span className="text-foreground"> Hub</span>
1818
</span>
1919
</Link>
20-
<p className="text-sm text-muted-foreground max-w-md">
20+
<p className="text-sm text-muted-foreground max-w-md mb-4">
2121
A vibrant community of open source enthusiasts, researchers, and creators.
2222
We collaborate on powerful open-source solutions.
2323
</p>
24-
<div className="flex items-center space-x-4 mt-4">
24+
<div className="flex items-center space-x-4">
2525
<Link
2626
href="https://github.com/CodeStorm-Hub"
2727
target="_blank"
@@ -34,9 +34,9 @@ export function Footer() {
3434
</div>
3535
</div>
3636

37-
{/* Navigation */}
37+
{/* Main Navigation */}
3838
<div>
39-
<h3 className="text-sm font-semibold mb-4">Navigation</h3>
39+
<h3 className="text-sm font-semibold mb-4">Main</h3>
4040
<ul className="space-y-2 text-sm text-muted-foreground">
4141
<li>
4242
<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() {
6666
<h3 className="text-sm font-semibold mb-4">Community</h3>
6767
<ul className="space-y-2 text-sm text-muted-foreground">
6868
<li>
69-
<Link
70-
href="https://github.com/CodeStorm-Hub"
71-
target="_blank"
72-
rel="noopener noreferrer"
73-
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"
74-
>
75-
GitHub
69+
<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">
70+
Community
71+
</Link>
72+
</li>
73+
<li>
74+
<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">
75+
Blog
76+
</Link>
77+
</li>
78+
<li>
79+
<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">
80+
Events
81+
</Link>
82+
</li>
83+
<li>
84+
<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">
85+
Showcase
86+
</Link>
87+
</li>
88+
</ul>
89+
</div>
90+
91+
{/* Resources */}
92+
<div>
93+
<h3 className="text-sm font-semibold mb-4">Resources</h3>
94+
<ul className="space-y-2 text-sm text-muted-foreground">
95+
<li>
96+
<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">
97+
Resources
7698
</Link>
7799
</li>
78100
<li>
@@ -85,18 +107,65 @@ export function Footer() {
85107
Code of Conduct
86108
</Link>
87109
</li>
110+
<li>
111+
<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">
112+
Changelog
113+
</Link>
114+
</li>
115+
<li>
116+
<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">
117+
Roadmap
118+
</Link>
119+
</li>
120+
</ul>
121+
</div>
122+
123+
{/* Legal & Developer */}
124+
<div>
125+
<h3 className="text-sm font-semibold mb-4">Legal</h3>
126+
<ul className="space-y-2 text-sm text-muted-foreground">
127+
<li>
128+
<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">
129+
Privacy Policy
130+
</Link>
131+
</li>
132+
<li>
133+
<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">
134+
Terms of Service
135+
</Link>
136+
</li>
137+
<li>
138+
<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">
139+
Accessibility
140+
</Link>
141+
</li>
142+
<li>
143+
<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">
144+
Style Guide
145+
</Link>
146+
</li>
88147
</ul>
89148
</div>
90149
</div>
91150

92151
<div className="border-t pt-8 mt-8">
93-
<div className="flex flex-col md:flex-row justify-between items-center">
152+
<div className="flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
94153
<p className="text-sm text-muted-foreground">
95154
© {new Date().getFullYear()} CodeStorm Hub. All rights reserved.
96155
</p>
97-
<p className="text-sm text-muted-foreground mt-2 md:mt-0">
98-
Built with Next.js, Tailwind CSS, and Radix UI
99-
</p>
156+
<div className="flex flex-col sm:flex-row items-center space-y-1 sm:space-y-0 sm:space-x-4">
157+
<p className="text-sm text-muted-foreground">
158+
Built with Next.js, Tailwind CSS, and Radix UI
159+
</p>
160+
<Link
161+
href="https://github.com/CodeStorm-Hub"
162+
target="_blank"
163+
rel="noopener noreferrer"
164+
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
165+
>
166+
Open Source
167+
</Link>
168+
</div>
100169
</div>
101170
</div>
102171
</div>

0 commit comments

Comments
 (0)