Skip to content

update footer to new style #225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Houwray wants to merge 1 commit into
base: main
Choose a base branch
from
Open

update footer to new style #225

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions src/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import { Instagram, Linkedin } from "lucide-react";

// Theme tokens from the design:
// Light: bg #FFFFFF @ 60%, headings #000000, other text #57595D
// Dark: bg #404246 @ 60%, headings #FFFFFF, other text #E3DFDF
const heading = "text-black dark:text-white";
const body = "text-[#57595D] dark:text-[#E3DFDF]";
const bodyHover = "hover:text-black dark:hover:text-white";
const socialButton =
"w-10 h-10 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center text-black dark:text-white hover:bg-primary hover:text-white transition-colors duration-300";

export function Footer() {
return (
<footer className="bg-foreground text-background">
<footer className="bg-white/60 dark:bg-[#404246]/60 backdrop-blur-md">
<div className="container mx-auto px-4">
{/* Main footer content */}
<div className="py-20 grid grid-cols-1 md:grid-cols-4 gap-12 lg:gap-8 max-w-7xl mx-auto items-start">
Expand All @@ -12,45 +21,46 @@ export function Footer() {
<img
src="/logo/web3uoa_logo.png"
alt="WEB3UOA"
className="w-10 h-10 shrink-0 brightness-0 invert"
className="w-10 h-10 shrink-0"
/>
<span className="text-2xl font-black tracking-tight whitespace-nowrap">
<span
className={`text-2xl font-black tracking-tight whitespace-nowrap ${heading}`}
>
WEB3UOA
</span>
</div>
<p className="text-background/70 leading-relaxed max-w-sm text-lg">
<p className={`${body} leading-relaxed max-w-sm text-lg`}>
Empowering the next generation of builders, shapers, and
innovators at the University of Auckland.
</p>
</div>

{/* Quick links */}
<div className="space-y-6">
<h3 className="font-bold text-lg text-white">Navigate</h3>
<h3 className={`font-bold text-lg ${heading}`}>Navigate</h3>
<div className="flex flex-col gap-4">
<a
href="/pages/about"
className="text-base text-background/70 hover:text-white transition-colors w-fit font-semibold"
className={`text-base ${body} ${bodyHover} transition-colors w-fit font-semibold`}
>
About
</a>
<a
href="/pages/events"
className="text-base text-background/70 hover:text-white transition-colors w-fit font-semibold"
className={`text-base ${body} ${bodyHover} transition-colors w-fit font-semibold`}
>
Events
</a>
<a
href="/pages/partners"
className="text-base text-background/70 hover:text-white transition-colors w-fit font-semibold"
className={`text-base ${body} ${bodyHover} transition-colors w-fit font-semibold`}
>
Partners
</a>
<a
href="https://forms.gle/vzRb7t46SPBUwi7v8"
target="_blank"
href="/pages/join-us"
rel="noopener noreferrer"
className="text-base text-primary hover:text-primary/80 transition-colors w-fit font-bold"
className="text-base text-primary hover:text-primary/80 dark:text-white dark:hover:text-white/80 transition-colors w-fit font-bold"
>
Join the Club
</a>
Expand All @@ -59,13 +69,13 @@ export function Footer() {

{/* Connect */}
<div className="space-y-6">
<h3 className="font-bold text-lg text-white">Connect</h3>
<h3 className={`font-bold text-lg ${heading}`}>Connect</h3>
<div className="flex gap-4">
<a
href="https://instagram.com/web3uoa"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 rounded-full bg-background/10 flex items-center justify-center text-white hover:bg-primary transition-colors duration-300"
className={socialButton}
aria-label="Instagram"
>
<Instagram className="w-5 h-5" />
Expand All @@ -74,7 +84,7 @@ export function Footer() {
href="https://x.com/web3uoa"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 rounded-full bg-background/10 flex items-center justify-center text-white hover:bg-primary transition-colors duration-300"
className={socialButton}
aria-label="X (Twitter)"
>
<svg
Expand All @@ -90,27 +100,29 @@ export function Footer() {
href="https://www.linkedin.com/company/web3uoa-university-of-auckland-web3-club/"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 rounded-full bg-background/10 flex items-center justify-center text-white hover:bg-primary transition-colors duration-300"
className={socialButton}
aria-label="LinkedIn"
>
<Linkedin className="w-5 h-5" />
</a>
</div>
<a
href="mailto:team@web3uoa.nz"
className="text-base text-background/70 hover:text-white transition-colors block w-fit font-medium"
className={`text-base ${body} ${bodyHover} transition-colors block w-fit font-medium`}
>
team@web3uoa.nz
</a>
</div>
</div>

{/* Bottom bar */}
<div className="py-8 border-t border-background/20 flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-2 sm:gap-4 text-sm text-background/50 font-medium text-center">
<div
className={`py-8 border-t border-black/10 dark:border-white/20 flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-2 sm:gap-4 text-sm ${body} font-medium text-center`}
>
<p>&copy; {new Date().getFullYear()} WEB3UOA. All rights reserved.</p>
<p>University of Auckland Web3 Club</p>
</div>
</div>
</footer>
);
}
}
Loading