Skip to content

Commit 8ee88cb

Browse files
jayshiraShinetopiajoshuachai
authored
Issue 4 create footer component (#22)
* Added a footer component to the UI - made a simple footer component based on the figma design - wasn't sure about the format of the tsx, I mainly followed the button.tsx file format - couldn't change the font family to 'roboto' as shown in the figma, someone help please :') - this is just my best attempt at creating the component, if anyone would like to change or redo it, feel free. * Added Figma text styles for css & tailwind use * Added Figma colour palette * changed style jsx to inline variable declaration * hotfix: added missing font variable * Modified footer components: - Added Plus Jakarta Sans font to the design - Made the footer columns match the figma design better - It shrinks and wraps well, however still overlaps if screen is VERY small * attempt to fix prettier * Logo added and dynamic footer change: - added logos of event organizers - made footer collapse into multiple rows in smaller screen * small changes to footer component - changed hover color to primary site color - unlinked venue locations - replaced text with icons to socials page * Linked social media, re-ordered guests & sponsors * update venue colour * Refactored footer and nav-links * ran npm run format --------- Co-authored-by: Shinetopia <ShinetopiaOfficial@outlook.com> Co-authored-by: Joshua Chai <joshua.chai@outlook.com.au> Co-authored-by: Joshua <joshuachai@outlook.com.au>
1 parent fd473d9 commit 8ee88cb

6 files changed

Lines changed: 164 additions & 6 deletions

File tree

‎client/public/images/aicode_logo_HD.png‎

194 KB
Loading

‎client/src/components/ui/footer.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
import { useRouter } from "next/router";
4+
import * as React from "react";
5+
import { FaFacebookF, FaInstagram } from "react-icons/fa";
6+
7+
export default function Footer() {
8+
const router = useRouter();
9+
type NavLink = {
10+
label: string;
11+
href: string;
12+
};
13+
const navlinks: NavLink[] = [
14+
{ label: "Home", href: "/" },
15+
{ label: "Schedule", href: "/schedule" },
16+
{ label: "Format & Rules", href: "/format-rules" },
17+
{ label: "Guests & Sponsors", href: "/guests-sponsors" },
18+
{ label: "Leaderboard", href: "/leaderboard" },
19+
];
20+
return (
21+
<footer className="bg-dark px-6 py-12 text-light">
22+
<div className="mx-auto max-w-7xl">
23+
{/* Main content with horizontal line */}
24+
<div className="stroke-3 grid w-full grid-cols-1 gap-y-8 border-b border-secondary pb-8 pr-5 sm:grid-cols-2 lg:grid-cols-[35%_20%_30%_15%]">
25+
{/* Logo */}
26+
<div className="pr-10">
27+
<h2 className="ft-subtitle mb-5">Event Organizers</h2>
28+
<Image
29+
className="mb-5 object-contain pr-8"
30+
src="/images/aicode_logo_HD.png"
31+
alt="AICODE Logo"
32+
width={282}
33+
height={55}
34+
/>
35+
<Image
36+
className="mb-5 object-contain pr-8"
37+
src="https://squadrone.com.au/wp-content/uploads/2024/11/squadrone-logo-01-scaled.webp"
38+
alt="Squadrone Logo"
39+
width={160}
40+
height={56}
41+
/>
42+
</div>
43+
44+
{/* Pages */}
45+
<div className="pr-10">
46+
<h3 className="ft-subtitle mb-3">Quick Links</h3>
47+
<ul className="ft-content mb-2 space-y-4">
48+
{navlinks.map((link) => (
49+
<li key={link.label}>
50+
<Link
51+
href={link.href}
52+
className={
53+
router.pathname === link.href
54+
? "nav-link-active"
55+
: "nav-link-footer"
56+
}
57+
>
58+
{link.label}
59+
</Link>
60+
</li>
61+
))}
62+
</ul>
63+
</div>
64+
65+
{/* Contact Info */}
66+
<div className="pr-10">
67+
<h3 className="ft-subtitle mb-3">Contact Info</h3>
68+
<p className="ft-content mb-2 text-light">
69+
Email:
70+
<br />
71+
<a
72+
href="mailto:info@youthdronetournament.com.au"
73+
className="ft-content break-all underline hover:text-primary"
74+
>
75+
info@youthdronetournament.com.au
76+
</a>
77+
</p>
78+
<p className="ft-content mb-2">
79+
Venue:
80+
<br />
81+
Melbourne Convention Centre
82+
<br />
83+
1 Convention Centre Pl
84+
<br />
85+
South Wharf VIC 3006
86+
</p>
87+
</div>
88+
89+
{/* Socials */}
90+
<div className="pr-5">
91+
<h3 className="ft-subtitle mb-5">Follow Us</h3>
92+
<div className="mb-5 flex gap-4">
93+
<a
94+
href="https://www.facebook.com/people/Squadrone/100094782254912/"
95+
className="flex h-10 w-10 items-center justify-center rounded-full border border-white text-white transition hover:border-primary hover:text-primary"
96+
>
97+
<FaFacebookF size={18} />
98+
</a>
99+
<a
100+
href="https://www.instagram.com/au.Squadrone/#"
101+
className="flex h-10 w-10 items-center justify-center rounded-full border border-white text-white transition hover:border-primary hover:text-primary"
102+
>
103+
<FaInstagram size={18} />
104+
</a>
105+
</div>
106+
<p className="ft-content text-sm text-light">
107+
Stay updated with the latest news and highlights from the
108+
tournament
109+
</p>
110+
</div>
111+
</div>
112+
113+
{/* Centered copyright below the line */}
114+
<p className="ft-content pt-2 text-center text-sm text-light">
115+
Copyright © 2025 Australia Youth Drone Tournament. All Rights
116+
Reserved.
117+
</p>
118+
</div>
119+
</footer>
120+
);
121+
}

‎client/src/pages/_app.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import "@/styles/globals.css";
33
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
44
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
55
import type { AppProps } from "next/app";
6-
import { Montserrat, Work_Sans } from "next/font/google";
6+
import { Montserrat, Plus_Jakarta_Sans, Work_Sans } from "next/font/google";
7+
8+
import Footer from "../components/ui/footer";
79

810
// import { cn } from "@/lib/utils";
911
import Navbar from "../components/ui/navbar";
@@ -13,6 +15,11 @@ const fontMontserrat = Montserrat({
1315
variable: "--font-montserrat",
1416
});
1517

18+
const fontPlusJakartaSans = Plus_Jakarta_Sans({
19+
subsets: ["latin"],
20+
variable: "--font-plus-jakarta",
21+
});
22+
1623
const fontWorkSans = Work_Sans({
1724
subsets: ["latin"],
1825
variable: "--font-worksans",
@@ -22,16 +29,18 @@ const queryClient = new QueryClient();
2229

2330
export default function App({ Component, pageProps }: AppProps) {
2431
return (
25-
<div className={`${fontMontserrat.variable} ${fontWorkSans.variable}`}>
32+
<div
33+
className={`${fontMontserrat.variable} ${fontPlusJakartaSans.variable} ${fontWorkSans.variable}`}
34+
>
2635
<QueryClientProvider client={queryClient}>
2736
<ReactQueryDevtools initialIsOpen={false} />
28-
<div>
29-
<Navbar />
30-
<main className="flex min-h-screen flex-col items-center gap-4 p-24">
37+
<div className="w-full">
38+
<main className="mx-auto flex min-h-screen max-w-7xl flex-col items-center gap-4 p-24">
3139
<Component {...pageProps} />
3240
</main>
3341
</div>
3442
</QueryClientProvider>
43+
<Footer />
3544
</div>
3645
);
3746
}

‎client/src/pages/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export default function Home() {
1212

1313
return (
1414
<>
15-
<h1 className="title-large text-dark">Title Test</h1>
15+
{/* Delete after style testing */}
16+
<p className="subtitle text-primary">subtitle with primary colour</p>
17+
<h1 className="title-large text-dark">Test Title</h1>
1618
<Button onClick={() => setClicked(true)}>
1719
{isLoading ? "Loading" : "Ping"}
1820
</Button>

‎client/src/styles/globals.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,31 @@
9999
.caption {
100100
@apply font-worksans text-[16px] font-normal;
101101
}
102+
/* footer */
103+
.ft-title {
104+
@apply font-jakarta text-[32px] font-semibold;
105+
}
106+
.ft-subtitle {
107+
@apply font-jakarta text-[20px] font-semibold;
108+
}
109+
.ft-content {
110+
@apply font-jakarta text-[16px] font-medium;
111+
}
112+
}
113+
114+
@layer components {
115+
.nav-link-base {
116+
@apply transition-colors duration-200 hover:text-primary;
117+
}
118+
.nav-link-navbar {
119+
@apply nav-link-base text-dark;
120+
}
121+
.nav-link-footer {
122+
@apply nav-link-base text-light;
123+
}
124+
.nav-link-active {
125+
@apply text-primary;
126+
}
102127
}
103128

104129
@layer components {

‎client/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const config = {
2222
fontFamily: {
2323
sans: ["var(--font-sans)", ...fontFamily.sans],
2424
montserrat: ["var(--font-montserrat)", ...fontFamily.sans],
25+
jakarta: ["var(--font-plus-jakarta)", ...fontFamily.sans],
2526
worksans: ["var(--font-worksans)", ...fontFamily.sans],
2627
},
2728
colors: {

0 commit comments

Comments
 (0)