Skip to content

Commit 75824ea

Browse files
akshay0611akshay0611
committed
style(footer): update footer layout and responsive styling
- Adjust container padding and grid gaps for better spacing - Modify Codeunia branding spacing and font sizes responsively - Resize social media icon buttons and icons for improved consistency - Change quick links and community to a two-column layout on mobile - Update typography for headings and links to use responsive text sizes - Refine newsletter section spacing and column positioning - Adjust bottom footer bar spacing and font sizes for mobile and desktop - Ensure all interactive links have hover and transition effects maintained
1 parent dd8e414 commit 75824ea

File tree

1 file changed

+87
-84
lines changed

1 file changed

+87
-84
lines changed

‎components/footer.tsx‎

Lines changed: 87 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -54,125 +54,128 @@ export default function Footer() {
5454
}
5555
return (
5656
<footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
57-
<div className="container px-4 pl-8 md:pl-12 py-16">
58-
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
57+
<div className="container px-4 md:pl-12 py-12 md:py-16">
58+
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-12">
5959
{/* codeunia branding */}
60-
<div className="space-y-6">
60+
<div className="space-y-4 md:space-y-6">
6161
<CodeuniaLogo size="lg" showText={true} instanceId="footer" />
62-
<p className="text-foreground/80 leading-relaxed">
62+
<p className="text-foreground/80 leading-relaxed text-sm md:text-base">
6363
Empowering the next generation of coders through real-world projects, vibrant community, and continuous
6464
learning.
6565
</p>
66-
<div className="flex items-center space-x-4">
66+
<div className="flex items-center space-x-3 md:space-x-4">
6767
<Link
6868
href="https://github.com/Codeunia"
6969
target="_blank"
7070
rel="noopener noreferrer"
71-
className="w-10 h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
71+
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
7272
>
73-
<Github className="h-5 w-5" />
73+
<Github className="h-4 w-4 md:h-5 md:w-5" />
7474
</Link>
7575
<Link
7676
href="https://www.instagram.com/codeunia"
7777
target="_blank"
7878
rel="noopener noreferrer"
79-
className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
79+
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
8080
>
81-
<Instagram className="h-5 w-5" />
81+
<Instagram className="h-4 w-4 md:h-5 md:w-5" />
8282
</Link>
8383
<Link
8484
href="https://x.com/codeunia"
8585
target="_blank"
8686
rel="noopener noreferrer"
87-
className="w-10 h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
87+
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-sky-500 to-sky-600 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
8888
>
89-
<Twitter className="h-5 w-5" />
89+
<Twitter className="h-4 w-4 md:h-5 md:w-5" />
9090
</Link>
9191
<Link
9292
href="https://www.linkedin.com/company/codeunia"
9393
target="_blank"
9494
rel="noopener noreferrer"
95-
className="w-10 h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
95+
className="w-9 h-9 md:w-10 md:h-10 bg-gradient-to-br from-blue-700 to-blue-800 rounded-lg flex items-center justify-center text-white hover:scale-110 transition-transform shadow-lg hover:shadow-primary/20"
9696
>
97-
<Linkedin className="h-5 w-5" />
97+
<Linkedin className="h-4 w-4 md:h-5 md:w-5" />
9898
</Link>
9999
</div>
100100
</div>
101101

102-
{/* quick links of codeunia */}
103-
<div className="space-y-6">
104-
<h4 className="text-lg font-bold text-foreground">Quick Links</h4>
105-
<div className="space-y-3">
106-
<Link
107-
href="/about"
108-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
109-
>
110-
About Us
111-
</Link>
112-
<Link
113-
href="/hackathons"
114-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
115-
>
116-
Events & Hackathons
117-
</Link>
118-
<Link
119-
href="/blog"
120-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
121-
>
122-
Developer Blog
123-
</Link>
124-
<Link
125-
href="/contact"
126-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
127-
>
128-
Contact Support
129-
</Link>
102+
{/* quick links and community - 2 column layout on mobile */}
103+
<div className="grid grid-cols-2 md:grid-cols-2 gap-8 md:gap-0 md:contents">
104+
{/* quick links of codeunia */}
105+
<div className="space-y-4 md:space-y-6">
106+
<h4 className="text-base md:text-lg font-bold text-foreground">Quick Links</h4>
107+
<div className="space-y-3">
108+
<Link
109+
href="/about"
110+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
111+
>
112+
About Us
113+
</Link>
114+
<Link
115+
href="/hackathons"
116+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
117+
>
118+
Events & Hackathons
119+
</Link>
120+
<Link
121+
href="/blog"
122+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
123+
>
124+
Developer Blog
125+
</Link>
126+
<Link
127+
href="/contact"
128+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
129+
>
130+
Contact Support
131+
</Link>
132+
</div>
130133
</div>
131-
</div>
132134

133-
{/* community section of codeunia */}
134-
<div className="space-y-6">
135-
<h4 className="text-lg font-bold text-foreground">Community</h4>
136-
<div className="space-y-3">
137-
<Link
138-
href="https://github.com/Codeunia"
139-
target="_blank"
140-
rel="noopener noreferrer"
141-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
142-
>
143-
GitHub Projects
144-
</Link>
145-
<Link
146-
href="https://discord.gg/Mhn3tXnJ"
147-
target="_blank"
148-
rel="noopener noreferrer"
149-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
150-
>
151-
Discord Server
152-
</Link>
153-
<Link
154-
href="https://x.com/codeunia"
155-
target="_blank"
156-
rel="noopener noreferrer"
157-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
158-
>
159-
Twitter Community
160-
</Link>
161-
<Link
162-
href="https://www.linkedin.com/company/codeunia"
163-
target="_blank"
164-
rel="noopener noreferrer"
165-
className="block text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
166-
>
167-
LinkedIn Network
168-
</Link>
135+
{/* community section of codeunia */}
136+
<div className="space-y-4 md:space-y-6">
137+
<h4 className="text-base md:text-lg font-bold text-foreground">Community</h4>
138+
<div className="space-y-3">
139+
<Link
140+
href="https://github.com/Codeunia"
141+
target="_blank"
142+
rel="noopener noreferrer"
143+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
144+
>
145+
GitHub Projects
146+
</Link>
147+
<Link
148+
href="https://discord.gg/Mhn3tXnJ"
149+
target="_blank"
150+
rel="noopener noreferrer"
151+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
152+
>
153+
Discord Server
154+
</Link>
155+
<Link
156+
href="https://x.com/codeunia"
157+
target="_blank"
158+
rel="noopener noreferrer"
159+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
160+
>
161+
Twitter Community
162+
</Link>
163+
<Link
164+
href="https://www.linkedin.com/company/codeunia"
165+
target="_blank"
166+
rel="noopener noreferrer"
167+
className="block text-sm md:text-base text-foreground/80 hover:text-primary transition-colors hover:translate-x-1 transform duration-200"
168+
>
169+
LinkedIn Network
170+
</Link>
171+
</div>
169172
</div>
170173
</div>
171174

172175
{/* codeunia newsletter */}
173-
<div className="space-y-6">
174-
<h4 className="text-lg font-bold text-foreground">Stay Updated</h4>
175-
<p className="text-foreground/80">
176+
<div className="space-y-4 md:space-y-6 md:col-start-4">
177+
<h4 className="text-base md:text-lg font-bold text-foreground">Stay Updated</h4>
178+
<p className="text-foreground/80 text-sm md:text-base">
176179
Get the latest updates on events, new features, and community highlights.
177180
</p>
178181
<form onSubmit={handleNewsletterSubmit} className="space-y-3">
@@ -213,11 +216,11 @@ export default function Footer() {
213216
</div>
214217
</div>
215218

216-
<div className="mt-12 pt-8 border-t border-border/40 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
217-
<p className="text-sm text-foreground/80">
219+
<div className="mt-8 md:mt-12 pt-6 md:pt-8 border-t border-border/40 flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
220+
<p className="text-xs md:text-sm text-foreground/80">
218221
© {new Date().getFullYear()} Codeunia. All rights reserved. Built with ❤️ for developers.
219222
</p>
220-
<div className="flex items-center space-x-6 text-sm text-foreground/80">
223+
<div className="flex items-center space-x-4 md:space-x-6 text-xs md:text-sm text-foreground/80">
221224
<Link href="/privacy" className="hover:text-primary transition-colors">
222225
Privacy Policy
223226
</Link>

0 commit comments

Comments
 (0)