Skip to content

Commit edcae6b

Browse files
TimothyHTanTimothyHTan
committed
added some rework to the footer(mobile version)
1 parent c41efc8 commit edcae6b

1 file changed

Lines changed: 66 additions & 61 deletions

File tree

‎components/layout/Footer.tsx‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,79 +20,84 @@ export function Footer() {
2020
};
2121

2222
return (
23-
<footer className="bg-white/50 border-t border-border/40 backdrop-blur-lg pt-16 pb-8">
23+
<footer className="bg-white/50 border-t border-border/40 backdrop-blur-lg pt-10 md:pt-16 pb-8">
2424
<div className="container mx-auto px-6 max-w-7xl">
25-
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
25+
<div className="space-y-8 md:space-y-0 md:grid md:grid-cols-4 md:gap-12 mb-10 md:mb-16">
2626
{/* Brand */}
27-
<div className="md:col-span-1 space-y-4">
27+
<div className="md:col-span-1 space-y-3 md:space-y-4">
2828
<Link href="/" className="flex items-center gap-2">
29-
<div className="bg-primary/10 p-2 rounded-full">
30-
<GraduationCap className="w-5 h-5 text-primary" />
29+
<div className="bg-primary/10 p-1.5 md:p-2 rounded-full">
30+
<GraduationCap className="w-4 h-4 md:w-5 md:h-5 text-primary" />
3131
</div>
32-
<span className="font-display font-bold text-lg tracking-tight">Studyin<span className="text-primary">BIT</span></span>
32+
<span className="font-display font-bold text-base md:text-lg tracking-tight">Studyin<span className="text-primary">BIT</span></span>
3333
</Link>
34-
<p className="text-muted-foreground text-sm leading-relaxed">
34+
<p className="text-muted-foreground text-xs md:text-sm leading-relaxed">
3535
Your gateway to world-class engineering education at Beijing Institute of Technology.
3636
</p>
3737
</div>
3838

39-
{/* Links */}
40-
<div>
41-
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-foreground/80">Explore</h3>
42-
<ul className="space-y-3">
43-
{links.explore.map((link) => (
44-
<li key={link.href}>
45-
<Link href={link.href} className="text-muted-foreground hover:text-primary transition-colors text-sm">
46-
{link.name}
47-
</Link>
48-
</li>
49-
))}
50-
</ul>
51-
</div>
39+
{/* Links + Contact row on mobile */}
40+
<div className="flex justify-between md:contents">
41+
{/* Left side: Explore + Resources stacked */}
42+
<div className="space-y-4 md:space-y-0 md:contents">
43+
<div>
44+
<h3 className="font-semibold mb-3 md:mb-4 text-xs md:text-sm uppercase tracking-wider text-foreground/80">Explore</h3>
45+
<ul className="space-y-2 md:space-y-3">
46+
{links.explore.map((link) => (
47+
<li key={link.href}>
48+
<Link href={link.href} className="text-muted-foreground hover:text-primary transition-colors text-xs md:text-sm">
49+
{link.name}
50+
</Link>
51+
</li>
52+
))}
53+
</ul>
54+
</div>
5255

53-
<div>
54-
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-foreground/80">Resources</h3>
55-
<ul className="space-y-3">
56-
{links.resources.map((link) => (
57-
<li key={link.href}>
58-
<Link href={link.href} className="text-muted-foreground hover:text-primary transition-colors text-sm">
59-
{link.name}
60-
</Link>
61-
</li>
62-
))}
63-
</ul>
64-
</div>
56+
<div>
57+
<h3 className="font-semibold mb-3 md:mb-4 text-xs md:text-sm uppercase tracking-wider text-foreground/80">Resources</h3>
58+
<ul className="space-y-2 md:space-y-3">
59+
{links.resources.map((link) => (
60+
<li key={link.href}>
61+
<Link href={link.href} className="text-muted-foreground hover:text-primary transition-colors text-xs md:text-sm">
62+
{link.name}
63+
</Link>
64+
</li>
65+
))}
66+
</ul>
67+
</div>
68+
</div>
6569

66-
{/* Contact */}
67-
<div>
68-
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-foreground/80">Connect</h3>
69-
<ul className="space-y-3">
70-
{links.social.map((link) => (
71-
<li key={link.name}>
72-
<a
73-
href={link.href}
74-
target="_blank"
75-
rel="noopener noreferrer"
76-
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors text-sm"
77-
>
78-
<link.icon className="w-4 h-4" />
79-
<span>{link.name}</span>
80-
</a>
81-
</li>
82-
))}
83-
<li className="pt-4 space-y-4">
84-
<div>
85-
<p className="text-sm font-medium text-foreground">Timothy Pardin</p>
86-
<p className="text-sm text-muted-foreground">+62 813-88577-873</p>
87-
</div>
88-
<div>
89-
<p className="text-sm font-medium text-foreground">Email Inquiry</p>
90-
<a href="mailto:[email protected]" className="text-sm text-muted-foreground hover:text-primary transition-colors">
91-
[email protected]
70+
{/* Right side: Connect */}
71+
<div className="text-right md:text-left">
72+
<h3 className="font-semibold mb-3 md:mb-4 text-xs md:text-sm uppercase tracking-wider text-foreground/80">Connect</h3>
73+
<ul className="space-y-2 md:space-y-3">
74+
{links.social.map((link) => (
75+
<li key={link.name}>
76+
<a
77+
href={link.href}
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors text-xs md:text-sm md:justify-start justify-end"
81+
>
82+
<link.icon className="w-3.5 h-3.5 md:w-4 md:h-4" />
83+
<span>{link.name}</span>
9284
</a>
93-
</div>
94-
</li>
95-
</ul>
85+
</li>
86+
))}
87+
<li className="pt-3 md:pt-4 space-y-3">
88+
<div>
89+
<p className="text-xs md:text-sm font-medium text-foreground">Timothy Pardin</p>
90+
<p className="text-xs md:text-sm text-muted-foreground mt-0.5">+62 813-88577-873</p>
91+
</div>
92+
<div>
93+
<p className="text-xs md:text-sm font-medium text-foreground">Email Inquiry</p>
94+
<a href="mailto:[email protected]" className="text-xs md:text-sm text-muted-foreground hover:text-primary transition-colors mt-0.5 inline-block">
95+
[email protected]
96+
</a>
97+
</div>
98+
</li>
99+
</ul>
100+
</div>
96101
</div>
97102
</div>
98103

0 commit comments

Comments
 (0)