Skip to content

Commit 012e16e

Browse files
DongDuong2001DongDuong2001
committed
Redesign footer with modern layout and newsletter
Revamps the footer with a new dark theme, decorative gradients, and a responsive grid layout. Adds a newsletter subscription section, reorganizes navigation links, updates social icons, and enhances accessibility and visual appeal.
1 parent 6d457c4 commit 012e16e

1 file changed

Lines changed: 160 additions & 148 deletions

File tree

‎components/footer.tsx‎

Lines changed: 160 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,181 @@
11
import Link from "next/link"
2-
import { Github, Linkedin, Instagram, Facebook, Mail, Code2, Youtube } from "lucide-react"
2+
import { Github, Linkedin, Instagram, Facebook, Mail, Code2, Youtube, ArrowRight, Heart } from "lucide-react"
3+
import { Button } from "@/components/ui/button"
4+
import { Input } from "@/components/ui/input"
5+
import { Separator } from "@/components/ui/separator"
36

47
export function Footer() {
58
const currentYear = new Date().getFullYear()
69

710
return (
8-
<footer className="w-full border-t border-border bg-card">
9-
<div className="container mx-auto px-4 py-12">
10-
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
11-
{/* Brand Section */}
12-
<div className="space-y-4">
13-
<div className="flex items-center gap-2">
14-
<Code2 className="h-6 w-6 text-primary" />
15-
<span className="text-xl font-bold">lab68dev</span>
11+
<footer className="relative w-full bg-black text-gray-300 overflow-hidden font-sans">
12+
{/* Decorative Gradients */}
13+
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50" />
14+
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-900/10 blur-[120px] rounded-full pointer-events-none" />
15+
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-900/10 blur-[120px] rounded-full pointer-events-none" />
16+
17+
<div className="container mx-auto px-6 py-16 relative z-10">
18+
19+
{/* Newsletter Section */}
20+
<div className="mb-20">
21+
<div className="bg-gray-900/40 border border-white/5 rounded-3xl p-8 md:p-12 backdrop-blur-sm relative overflow-hidden group">
22+
{/* Hover Glow */}
23+
<div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
24+
25+
<div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
26+
<div className="max-w-xl">
27+
<h3 className="text-3xl font-bold text-white mb-2 tracking-tight">
28+
Join the <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">Ecosystem</span>
29+
</h3>
30+
<p className="text-gray-400">
31+
Get the latest dev tools, tutorials, and community updates delivered straight to your inbox. No spam, just code.
32+
</p>
33+
</div>
34+
35+
<div className="w-full md:w-auto flex flex-col sm:flex-row gap-3">
36+
<Input
37+
type="email"
38+
placeholder="enter.your@email.com"
39+
className="bg-black/50 border-white/10 text-white placeholder:text-gray-600 focus:border-blue-500 h-11 w-full sm:w-80 transition-all font-mono text-sm"
40+
/>
41+
<Button className="h-11 bg-white text-black hover:bg-gray-200 font-semibold px-8 shadow-[0_0_20px_rgba(255,255,255,0.1)] hover:shadow-[0_0_30px_rgba(255,255,255,0.2)] transition-all">
42+
Subscribe
43+
</Button>
44+
</div>
1645
</div>
17-
<p className="text-sm text-muted-foreground">
18-
Building the future of collaborative development platforms.
19-
</p>
2046
</div>
47+
</div>
2148

22-
{/* Quick Links */}
23-
<div className="space-y-4">
24-
<h3 className="text-sm font-semibold uppercase tracking-wider">Platform</h3>
25-
<ul className="space-y-2">
26-
<li>
27-
<Link href="/dashboard" className="text-sm text-muted-foreground hover:text-primary transition-colors">
28-
Dashboard
29-
</Link>
30-
</li>
31-
<li>
32-
<Link href="/dashboard/projects" className="text-sm text-muted-foreground hover:text-primary transition-colors">
33-
Projects
34-
</Link>
35-
</li>
36-
<li>
37-
<Link href="/dashboard/ai-tools" className="text-sm text-muted-foreground hover:text-primary transition-colors">
38-
AI Tools
39-
</Link>
40-
</li>
41-
<li>
42-
<Link href="/dashboard/community" className="text-sm text-muted-foreground hover:text-primary transition-colors">
43-
Community
44-
</Link>
45-
</li>
46-
</ul>
49+
{/* Main Grid */}
50+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-12 lg:gap-8 mb-16">
51+
52+
{/* Brand Column */}
53+
<div className="lg:col-span-2 space-y-6">
54+
<Link href="/" className="flex items-center gap-2 group w-fit">
55+
<div className="p-2 bg-blue-600/10 rounded-lg group-hover:bg-blue-600/20 transition-colors">
56+
<Code2 className="h-6 w-6 text-blue-500" />
57+
</div>
58+
<span className="text-xl font-bold text-white tracking-tight">lab68dev</span>
59+
</Link>
60+
<p className="text-gray-500 text-sm leading-relaxed max-w-sm">
61+
Empowering developers to build, learn, and collaborate. An open-source initiative crafting the next generation of developer tools.
62+
</p>
63+
<div className="flex items-center gap-3">
64+
{[
65+
{ icon: Github, href: "https://github.com/lab68dev", label: "Github" },
66+
{ icon: Linkedin, href: "https://www.linkedin.com/company/lab68dev/", label: "LinkedIn" },
67+
{ icon: Youtube, href: "https://www.youtube.com/@lab68dev", label: "YouTube" },
68+
{ icon: Instagram, href: "https://www.instagram.com/lab68dev/", label: "Instagram" },
69+
].map((social) => (
70+
<Link
71+
key={social.label}
72+
href={social.href}
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
aria-label={social.label}
76+
className="p-2 border border-white/5 bg-white/5 rounded-full hover:bg-white/10 hover:border-white/20 hover:scale-110 text-gray-400 hover:text-white transition-all duration-300"
77+
>
78+
<social.icon className="h-4 w-4" />
79+
</Link>
80+
))}
81+
</div>
4782
</div>
4883

49-
{/* Resources */}
50-
<div className="space-y-4">
51-
<h3 className="text-sm font-semibold uppercase tracking-wider">Resources</h3>
52-
<ul className="space-y-2">
53-
<li>
54-
<Link href="https://github.com/lab68dev" target="_blank" className="text-sm text-muted-foreground hover:text-primary transition-colors">
55-
Documentation
56-
</Link>
57-
</li>
58-
<li>
59-
<Link href="https://github.com/lab68dev" target="_blank" className="text-sm text-muted-foreground hover:text-primary transition-colors">
60-
API Reference
61-
</Link>
62-
</li>
63-
<li>
64-
<Link href="https://github.com/lab68dev/lab68dev-platform" target="_blank" className="text-sm text-muted-foreground hover:text-primary transition-colors">
65-
GitHub Repository
66-
</Link>
67-
</li>
68-
<li>
69-
<Link href="mailto:lab68dev@gmail.com" className="text-sm text-muted-foreground hover:text-primary transition-colors">
70-
Support
71-
</Link>
72-
</li>
73-
</ul>
74-
</div>
84+
{/* Navigation Columns */}
85+
<div className="lg:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-8">
86+
87+
{/* Column 1 */}
88+
<div className="space-y-4">
89+
<h4 className="text-sm font-mono font-semibold text-white uppercase tracking-wider">Platform</h4>
90+
<ul className="space-y-3">
91+
{["Dashboard", "Projects", "Community", "AI Tools"].map((item) => (
92+
<li key={item}>
93+
<Link
94+
href={`/dashboard/${item.toLowerCase().replace(' ', '-')}`}
95+
className="text-sm text-gray-500 hover:text-blue-400 transition-colors flex items-center group"
96+
>
97+
<ArrowRight className="h-3 w-3 -ml-4 opacity-0 group-hover:opacity-100 group-hover:ml-0 transition-all duration-300 mr-2 text-blue-500" />
98+
{item}
99+
</Link>
100+
</li>
101+
))}
102+
</ul>
103+
</div>
75104

76-
{/* Connect */}
77-
<div className="space-y-4">
78-
<h3 className="text-sm font-semibold uppercase tracking-wider">Connect</h3>
79-
<div className="flex gap-4">
80-
<Link
81-
href="https://github.com/lab68dev"
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
85-
aria-label="GitHub"
86-
>
87-
<Github className="h-5 w-5" />
88-
</Link>
89-
<Link
90-
href="https://www.linkedin.com/company/lab68dev/"
91-
target="_blank"
92-
rel="noopener noreferrer"
93-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
94-
aria-label="LinkedIn"
95-
>
96-
<Linkedin className="h-5 w-5" />
97-
</Link>
98-
<Link
99-
href="https://www.instagram.com/lab68dev/"
100-
target="_blank"
101-
rel="noopener noreferrer"
102-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
103-
aria-label="Instagram"
104-
>
105-
<Instagram className="h-5 w-5" />
106-
</Link>
107-
<Link
108-
href="https://www.facebook.com/groups/lab68dev"
109-
target="_blank"
110-
rel="noopener noreferrer"
111-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
112-
aria-label="Facebook"
113-
>
114-
<Facebook className="h-5 w-5" />
115-
</Link>
116-
<Link
117-
href="https://discord.gg/g5FVt9pjN2"
118-
target="_blank"
119-
rel="noopener noreferrer"
120-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
121-
aria-label="Discord"
122-
>
123-
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
124-
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
125-
</svg>
126-
</Link>
127-
<Link
128-
href="https://www.youtube.com/@lab68dev"
129-
target="_blank"
130-
rel="noopener noreferrer"
131-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
132-
aria-label="YouTube"
133-
>
134-
<Youtube className="h-5 w-5" />
135-
</Link>
136-
<Link
137-
href="mailto:lab68dev@gmail.com"
138-
aria-label="Email"
139-
className="p-2 border border-border hover:border-primary hover:text-primary transition-colors"
140-
>
141-
<Mail className="h-5 w-5" />
142-
</Link>
105+
{/* Column 2 */}
106+
<div className="space-y-4">
107+
<h4 className="text-sm font-mono font-semibold text-white uppercase tracking-wider">Resources</h4>
108+
<ul className="space-y-3">
109+
{[
110+
{ label: "Documentation", href: "#" },
111+
{ label: "API Reference", href: "#" },
112+
{ label: "GitHub Repo", href: "https://github.com/lab68dev/lab68dev-platform" },
113+
{ label: "Open Source", href: "#" },
114+
].map((item) => (
115+
<li key={item.label}>
116+
<Link
117+
href={item.href}
118+
className="text-sm text-gray-500 hover:text-purple-400 transition-colors flex items-center group"
119+
>
120+
{item.label}
121+
</Link>
122+
</li>
123+
))}
124+
</ul>
143125
</div>
144-
<p className="text-xs text-muted-foreground mt-4">
145-
Subscribe to our newsletter for updates and insights.
146-
</p>
126+
127+
{/* Column 3 */}
128+
<div className="space-y-4">
129+
<h4 className="text-sm font-mono font-semibold text-white uppercase tracking-wider">Company</h4>
130+
<ul className="space-y-3">
131+
{["About", "Careers", "Blog", "Contact"].map((item) => (
132+
<li key={item}>
133+
<Link
134+
href="#"
135+
className="text-sm text-gray-500 hover:text-pink-400 transition-colors"
136+
>
137+
{item}
138+
</Link>
139+
</li>
140+
))}
141+
</ul>
142+
</div>
143+
144+
{/* Column 4 */}
145+
<div className="space-y-4">
146+
<h4 className="text-sm font-mono font-semibold text-white uppercase tracking-wider">Legal</h4>
147+
<ul className="space-y-3">
148+
{["Privacy", "Terms", "Cookies", "Licenses"].map((item) => (
149+
<li key={item}>
150+
<Link
151+
href={`/${item.toLowerCase()}`}
152+
className="text-sm text-gray-500 hover:text-white transition-colors"
153+
>
154+
{item}
155+
</Link>
156+
</li>
157+
))}
158+
</ul>
159+
</div>
160+
147161
</div>
148162
</div>
149163

164+
<Separator className="bg-white/5 mb-8" />
165+
150166
{/* Bottom Bar */}
151-
<div className="border-t border-border pt-8 mt-8">
152-
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
153-
<p className="text-sm text-muted-foreground">
154-
© {currentYear} lab68dev. All rights reserved.
167+
<div className="flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-600 font-mono">
168+
<p>
169+
© {currentYear} Lab68Dev Platform. All code is open source.
170+
</p>
171+
<div className="flex items-center gap-6">
172+
<Link href="#" className="hover:text-gray-400 transition-colors flex items-center gap-2">
173+
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
174+
All Systems Nominal
175+
</Link>
176+
<p className="flex items-center gap-1">
177+
Made with <Heart className="h-3 w-3 text-red-500 fill-red-500" /> by developers
155178
</p>
156-
<div className="flex gap-6 text-sm">
157-
<Link href="/privacy" className="text-muted-foreground hover:text-primary transition-colors">
158-
Privacy Policy
159-
</Link>
160-
<Link href="/terms" className="text-muted-foreground hover:text-primary transition-colors">
161-
Terms of Service
162-
</Link>
163-
<Link href="/cookies" className="text-muted-foreground hover:text-primary transition-colors">
164-
Cookie Policy
165-
</Link>
166-
</div>
167179
</div>
168180
</div>
169181
</div>

0 commit comments

Comments
 (0)