Skip to content

Issue 147 remove or replace footer quick links #149

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

Merged
SafetyInObscurity merged 3 commits into from
Mar 17, 2026
Merged

Issue 147 remove or replace footer quick links #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
152c1e3
Refactored some of the Footer
Games4Doritos Mar 6, 2026
80b6f06
Refined Footer's bottom section
Games4Doritos Mar 16, 2026
b534422
Eslint
Games4Doritos Mar 16, 2026
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
115 changes: 66 additions & 49 deletions client/src/components/main/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,12 @@
import { motion } from "framer-motion";
import {
Calendar,
Clock,
Gamepad2,
Handshake,
Heart,
Home,
Link as LucideLink,
Map,
Palette,
Pencil,
Sparkles,
Upload,
Users,
} from "lucide-react";
import Image from "next/image";
Expand All @@ -23,15 +18,19 @@ import { useRef } from "react";
import LinksList from "@/components/ui/LinksList";
import NetworkCanvas from "@/components/ui/NetworkCanvas";
import SocialIconButton from "@/components/ui/SocialIconButton";
import { social_media } from "@/gamedev-metadata.json";

export interface ListLink {
label: string;
href: string;
icon: ReactNode;
}

const quickLinks: ListLink[] = [
type socialMedia = {
url: string;
alt_text: string;
};

/*const quickLinks: ListLink[] = [
{
label: "Join the Club",
href: "#",
Expand All @@ -44,7 +43,7 @@ const quickLinks: ListLink[] = [
},
{ label: "Upcoming Jams", href: "#", icon: <Clock className="h-4 w-4" /> },
{ label: "Resources", href: "#", icon: <Pencil className="h-4 w-4" /> },
];
];*/

// Main navigation links (ideally should be shared with Navbar)
export const mainLinks: ListLink[] = [
Expand All @@ -67,6 +66,25 @@ export const mainLinks: ListLink[] = [
},
];

const socialMedia: socialMedia[] = [
{
url: "https://www.facebook.com/people/Game-Development-UWA/61576948012356/",
alt_text: "Facebook",
},
{
url: "https://discord.com/invite/JvnuVyMUff",
alt_text: "Discord",
},
{
url: "https://www.instagram.com/gamedevelopmentuwa",
alt_text: "Instagram",
},
{
url: "https://game-development-uwa.itch.io/",
alt_text: "Itch.io",
},
];

export default function Footer() {
const footerRef = useRef<HTMLElement | null>(null);
return (
Expand All @@ -77,7 +95,7 @@ export default function Footer() {
>
<div className="relative z-10 border-t border-purple-500/20">
<div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
<div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-3">
<div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-2">
<div className="space-y-4 lg:col-span-1">
<div className="group flex items-center gap-4">
<motion.div
Expand Down Expand Up @@ -110,22 +128,18 @@ export default function Footer() {
Game Development
</h3>
<p className="font-jersey10 text-lg text-gray-400">
Create • Play • Inspire
Design • Create • Play
</p>
</div>
</div>
<a
href="mailto:UWAgamedev@gmail.com"
className="block font-jersey10 text-xl text-gray-300 transition-colors hover:text-purple-400"
>
UWAgamedev@gmail.com
<a className="block font-jersey10 text-xl text-gray-300 transition-colors hover:text-purple-400">
Email coming soon!
</a>
<p className="font-jersey10 text-xl leading-relaxed text-gray-300/80">
Building the next generation of game developers at UWA game
development club
Building the next generation of game developers!
</p>
<div className="flex gap-3 pt-2">
{social_media.map((data) => (
{socialMedia.map((data) => (
<SocialIconButton
key={data.alt_text}
url={data.url}
Expand All @@ -134,16 +148,13 @@ export default function Footer() {
))}
</div>
</div>
<LinksList
title="Quick Links"
titleIcon={<LucideLink className="h-4 w-4 text-accent" />}
links={quickLinks}
/>
<LinksList
title="Explore"
titleIcon={<Map className="h-4 w-4 text-purple-400" />}
links={mainLinks}
/>
<div className="justify-center lg:flex">
<LinksList
title="Explore"
titleIcon={<Map className="h-4 w-4 text-purple-400" />}
links={mainLinks}
/>
</div>
</div>
<div className="relative my-8">
<div className="absolute inset-0 flex items-center">
Expand All @@ -156,30 +167,36 @@ export default function Footer() {
</div>
</div>
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
<div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400">
<span>© {new Date().getFullYear()} CFC Game Dev</span>
<span className="text-purple-500">•</span>
<span>All rights reserved</span>
<div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400 sm:w-48 lg:w-80">
<div>
© {new Date().getFullYear()} CFC ~ GDUWA
<span className="mx-2 text-purple-500">•</span>
All rights reserved
</div>
</div>
<Link
href=""
className="group flex -translate-x-[52px] items-center gap-2.5 rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-2 transition-all duration-300 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20"
onClick={() => window.open("/Constitution-V1.pdf")}
>
<span className="font-jersey10 text-xl text-gray-300 transition-colors group-hover:text-white">
Constitution
</span>
</Link>
<div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400">
Made with
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
<div className="flex justify-center sm:w-48 lg:w-80">
<Link
href=""
className="group flex w-fit items-center gap-2.5 rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-2 transition-all duration-300 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20"
onClick={() => window.open("/Constitution-V1.pdf")}
>
<Heart className="h-4 w-4 fill-current text-red-500" />
</motion.div>
in Perth, UWA
<div className="font-jersey10 text-xl text-gray-300 transition-colors group-hover:text-white">
Constitution
</div>
</Link>
</div>
<span className="flex items-center justify-end gap-2 font-jersey10 text-xl text-gray-400 sm:w-48 lg:w-80">
<pre className="gap-2 font-jersey10 text-xl">
Made with
<motion.span
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
<Heart className="mx-2 inline h-4 w-4 fill-current text-red-500" />
</motion.span>
in UWA, Perth
</pre>
</span>
</div>
</div>
</div>
Expand Down
16 changes: 0 additions & 16 deletions client/src/gamedev-metadata.json
View file
Open in desktop

This file was deleted.

Loading