Skip to content

Commit 4663da8

Browse files
laurenpudzlaurenpudz
authored
Merge pull request #44 from codersforcauses/issue-3-Create_footer_component
Issue 3 create footer component
2 parents 26a6119 + 6044399 commit 4663da8

File tree

6 files changed

+212
-0
lines changed

6 files changed

+212
-0
lines changed

‎client/public/facebook.png

9.42 KB
Loading

‎client/public/insta.png

15.8 KB
Loading

‎client/public/logo-trans.png

3.42 KB
Loading

‎client/public/partner.png

6.14 KB
Loading

‎client/src/components/Footer.tsx

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import Image from "next/image";
2+
import Link from "next/link";
3+
4+
function Footer() {
5+
return (
6+
<footer className="bg-footer font-sans text-text">
7+
<div className="mx-auto w-full max-w-screen-xl px-6 py-20">
8+
{/* Top row: 3 columns */}
9+
<div className="grid grid-cols-1 gap-12 md:grid-cols-3">
10+
{/* Left column: logo + contact info */}
11+
<div>
12+
<div className="mb-8 flex h-[100px] w-[220px] items-center justify-center bg-gray-300 text-xs text-gray-600">
13+
Logo Placeholder
14+
</div>
15+
16+
<ul className="space-y-3 text-sm">
17+
<li className="flex items-center gap-2">
18+
<Link
19+
href="mailto:contactus@transplant.org.au"
20+
className="transform transition duration-200 hover:scale-105 hover:text-pink-700"
21+
>
22+
contactus@transplant.org.au
23+
</Link>
24+
</li>
25+
26+
<li className="flex items-center gap-2">
27+
<Link
28+
href="tel:1800827757"
29+
className="transform transition duration-200 hover:scale-105 hover:text-pink-700"
30+
>
31+
Within Australia 1800 827 757
32+
</Link>
33+
</li>
34+
35+
<li className="flex items-center gap-2">
36+
<Link
37+
href="tel:+61299225400"
38+
className="transform transition duration-200 hover:scale-105 hover:text-pink-700"
39+
>
40+
Outside Australia +61 2 9922 5400
41+
</Link>
42+
</li>
43+
44+
<li className="flex items-center gap-2">
45+
<Link
46+
href="#top"
47+
className="transform transition duration-200 hover:scale-105 hover:text-pink-700"
48+
>
49+
PO Box 3444, Rhodes, NSW 2138
50+
</Link>
51+
</li>
52+
</ul>
53+
</div>
54+
55+
{/* Middle column: partners */}
56+
<div className="text-center">
57+
<h3 className="mb-4 text-base font-bold uppercase tracking-wider">
58+
Proudly Presented By
59+
</h3>
60+
<div className="mb-4">
61+
<Image
62+
src="/logo-trans.png"
63+
alt="Partner 1"
64+
width={200}
65+
height={80}
66+
className="mx-auto object-contain"
67+
/>
68+
</div>
69+
<div>
70+
<Image
71+
src="/partner.png"
72+
alt="DonateLife"
73+
width={140}
74+
height={60}
75+
className="mx-auto object-contain"
76+
/>
77+
</div>
78+
</div>
79+
80+
{/* Right column: quick links */}
81+
<div>
82+
<h3 className="mb-4 text-base font-bold uppercase tracking-wider">
83+
Quick Links
84+
</h3>
85+
<ul className="space-y-3 border-t border-gray-300 pt-3 text-sm">
86+
<li>
87+
<a
88+
href="#"
89+
className="block transform border-b border-gray-200 pb-1 transition duration-200 hover:scale-105 hover:text-pink-700"
90+
>
91+
The Sports
92+
</a>
93+
</li>
94+
95+
<li>
96+
<a
97+
href="#"
98+
className="block transform border-b border-gray-200 pb-1 transition duration-200 hover:scale-105 hover:text-pink-700"
99+
>
100+
Schedule
101+
</a>
102+
</li>
103+
104+
<li>
105+
<a
106+
href="#"
107+
className="block transform border-b border-gray-200 pb-1 transition duration-200 hover:scale-105 hover:text-pink-700"
108+
>
109+
Registration
110+
</a>
111+
</li>
112+
113+
<li>
114+
<a
115+
href="#"
116+
className="block transform border-b border-gray-200 pb-1 transition duration-200 hover:scale-105 hover:text-pink-700"
117+
>
118+
Frequently Asked Questions
119+
</a>
120+
</li>
121+
122+
<li>
123+
<a
124+
href="#"
125+
className="block transform border-b border-gray-200 pb-1 transition duration-200 hover:scale-105 hover:text-pink-700"
126+
>
127+
Contact Us
128+
</a>
129+
</li>
130+
131+
<li>
132+
<a
133+
href="#"
134+
className="block transform transition duration-200 hover:scale-105 hover:text-pink-700"
135+
>
136+
Latest News
137+
</a>
138+
</li>
139+
</ul>
140+
</div>
141+
</div>
142+
143+
{/* Bottom section */}
144+
<div className="mt-16 space-y-4 text-left text-sm text-gray-600">
145+
<p>
146+
We acknowledge the Ngunnawal and Ngambri peoples who are the
147+
traditional custodians of the land on which we gather for the 2026
148+
Australian Transplant Games. We recognise their connections to land,
149+
sea, and community and pay our respect to their elders past and
150+
present.
151+
</p>
152+
153+
<div className="mt-2 flex flex-col items-center justify-between gap-4 md:flex-row">
154+
{/* Left: Copyright + Links */}
155+
<div className="text-sm text-gray-600">
156+
© 2026 Australian Transplant Games. All Rights Reserved
157+
<span className="mx-2 text-pink-500">|</span>
158+
<Link
159+
href="#"
160+
className="transform text-pink-500 transition duration-200 hover:scale-105 hover:text-pink-700"
161+
>
162+
Privacy Statement
163+
</Link>
164+
<span className="mx-2 text-pink-500">|</span>
165+
<Link
166+
href="#"
167+
className="transform text-pink-500 transition duration-200 hover:scale-105 hover:text-pink-700"
168+
>
169+
Medical Website by Wolf IQ
170+
</Link>
171+
</div>
172+
173+
{/* Right: social icons */}
174+
<div className="flex gap-4">
175+
<Link
176+
href="https://www.instagram.com/transplantaus/"
177+
target="_blank"
178+
rel="noopener noreferrer"
179+
className="transform transition duration-200 hover:scale-105"
180+
>
181+
<Image
182+
src="/insta.png"
183+
alt="Instagram"
184+
width={24}
185+
height={24}
186+
/>
187+
</Link>
188+
189+
<Link
190+
href="https://www.facebook.com/transplantaustralia"
191+
target="_blank"
192+
rel="noopener noreferrer"
193+
className="transform transition duration-200 hover:scale-105"
194+
>
195+
<Image
196+
src="/facebook.png"
197+
alt="Facebook"
198+
width={24}
199+
height={24}
200+
/>
201+
</Link>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
</footer>
207+
);
208+
}
209+
210+
export default Footer;

‎client/src/pages/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Inter as FontSans } from "next/font/google";
22
import { useState } from "react";
33

4+
import Footer from "@/components/Footer";
45
import Navbar from "@/components/Navbar";
56
import { usePings } from "@/hooks/pings";
67
import { cn } from "@/lib/utils";
@@ -35,6 +36,7 @@ export default function Home() {
3536
Response from server: <span>{data as string}</span>
3637
</p>
3738
</main>
39+
<Footer />
3840
</>
3941
);
4042
}

0 commit comments

Comments
 (0)