Skip to content

Issue 33 create the last three sections of the landing page #42

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
ycong1129 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Issue 33 create the last three sections of the landing page #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05edab0
the last three components of landing page
Jan 3, 2026
4582160
change landing.tsx into index.tsx
Jan 7, 2026
774d75a
fix problems after pull request
Jan 11, 2026
036d726
merge issue 14 into issue 33
Jan 13, 2026
46c65be
change some font styles
Jan 16, 2026
97d46a7
changed the name of placeholder pics
Jan 17, 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
Binary file added client/public/fire.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/public/heart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
250 changes: 250 additions & 0 deletions client/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
import { ChevronLeft, ChevronRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useRef, useState } from "react";

import FeatureBox from "@/components/ui/featureBox";
import { useEvent } from "@/hooks/useEvent";

import { Button } from "../components/ui/button";

// function formatDateTime(dateString: string): string {
// try {
// const date = new Date(dateString);
// return new Intl.DateTimeFormat("en-AU", {
// year: "numeric",
// month: "long",
// day: "numeric",
// hour: "2-digit",
// minute: "2-digit",
// }).format(date);
// } catch {
// return dateString;
// }
// }

export default function Landing() {
const btnList = [
{ name: "More about us", link: "/committee/about" },
Expand Down Expand Up @@ -128,6 +149,74 @@ export default function Landing() {
</div>
);

const gameShowcaseBtnList = [
{ name: "See more games by our members", link: "/" },
{ name: "See other cool stuff our members have created", link: "/" },
];

const router = useRouter();
const { id } = router.query;

const {
data: event,
// isPending,
// error,
// isError,
} = useEvent(router.isReady ? id : undefined);

console.log("event", event);

const upcomingEvents = [
{
id: 1,
title: "Summer 2026 Game Jam",
time: "Monday 24th Oct 11:00am–4:00pm",
image: "/landing_placeholder.png",
},
{
id: 2,
title: "Godot Workshop",
time: "Thursday 2nd Nov 2:00–4:00pm",
image: "/landing_placeholder.png",
},
{
id: 3,
title: "World domination",
time: "Thursday 2nd Nov 2:00–4:00pm",
image: "/landing_placeholder.png",
},
];

const gamesData = [
{
id: 1,
title: "Cool Game",
description: "Cool game is a game about being cool.",
image: "/landing_placeholder.png",
},
{
id: 2,
title: "Cool Game 2",
description: "Cool game 2 is a game about being cool.",
image: "/landing_placeholder.png",
},
{
id: 3,
title: "Cool Game 3",
description: "Cool game 3 is a game about being cool.",
image: "/landing_placeholder.png",
},
];

const VISIBLE_COUNT = 3;
const [currentIndex, setCurrentIndex] = useState(0);
const containerRef = useRef<HTMLDivElement>(null);

const maxIndex = Math.max(upcomingEvents.length - VISIBLE_COUNT, 0);
const slideLeft = () => setCurrentIndex((prev) => Math.max(prev - 1, 0));
const slideRight = () =>
setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));

return (
<div>
<section className="flex w-full justify-center bg-muted px-12 py-10">
Expand Down Expand Up @@ -185,6 +274,167 @@ export default function Landing() {
</div>
</div>
</section>

<section className="bg-background px-10 py-10">
<div className="container mx-auto rounded-lg bg-primary-foreground px-4 py-8 lg:px-12">
{/* Title Row */}
<div className="flex items-center justify-between px-10">
<div className="flex items-center justify-between">
<h2 className="font-jersey10 text-4xl tracking-wide text-white">
Upcoming Events
</h2>

{/* Arrow controls */}
<div className="ml-5 flex gap-3 text-lg text-white/60">
<ChevronLeft
className={`hover:text-white ${currentIndex === 0 ? "opacity-40" : "cursor-pointer"}`}
onClick={slideLeft}
/>
<ChevronRight
className={`hover:text-white ${currentIndex === maxIndex ? "opacity-40" : "cursor-pointer"}`}
onClick={slideRight}
/>
</div>
</div>

<div>
<Link href="/events">
<span className="font-jersey10">See More </span>
</Link>
<span className="cursor-pointer font-jersey10 hover:text-white">
&gt;
</span>
</div>
</div>

<div className="mt-10 px-10">
<div ref={containerRef} className="mt-10 overflow-hidden">
<div
className="flex gap-10 transition-transform duration-300 ease-out"
style={{
transform: `translateX(calc(-${currentIndex} * (33.333% + 2.5rem)))`,
}}
>
{upcomingEvents.map((event) => (
<div
key={event.id}
className="flex-shrink-0 basis-[calc((100%-5rem)/3)]"
>
<div className="flex h-44 w-full items-center justify-center rounded-lg bg-muted-foreground">
<Image
src={event.image}
alt={event.title}
width={60}
height={60}
/>
</div>
Comment on lines +323 to +330
Copy link
Contributor

@laurenpudz laurenpudz Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You only need the image here. You don't need to make the image small and center it in a box, instead, please just make the image the size that the box currently is, similar to what you've done with the game images. Please also make sure the images corners are rounded.


<h3 className="mt-6 text-lg font-semibold tracking-wide text-white">
{event.title}
</h3>

<p className="text-sm tracking-wide text-white/70">
{event.time}
</p>

<div className="mt-3 w-full border-b border-white/20"></div>
</div>
))}
</div>
</div>
</div>
</div>
</section>

<section className="bg-background px-4 py-10 md:px-10">
<div className="flex w-full justify-between px-4">
<FeatureBox
title="So... How do I get involved?"
text="The easiest way to get involved is to come along to one of our events! Most events don't need registration- just check the event description to make sure. If you aren't feeling up to an event, just join our discord. React out to our friendly committee members if you need any help!"
/>
</div>
</section>

<section className="relative w-full overflow-hidden bg-background px-6 py-20 lg:px-12">
<div className="relative z-10 mx-auto max-w-7xl">
<div className="grid grid-cols-1 md:grid-cols-2">
{/* --- Title & Intro Text --- */}
<div className="mb-10 flex flex-col items-start">
<h2 className="flex items-center gap-3 font-jersey10 text-5xl text-white">
Featured Member Creations
<Image src="/heart.png" alt="" width={60} height={50} />
</h2>

<div className="inline-block">
<p className="mt-3 text-lg text-white/70">
Some of our favourite games made by our members
</p>

<div className="mt-8 h-px bg-white/30"></div>
</div>
</div>

{/* --- Buttons Row --- */}
<div className="mb-12 flex flex-col items-start gap-4">
{gameShowcaseBtnList.map((item, i) => (
<Link href={item.link} key={i}>
<Button>{item.name} &gt;</Button>
</Link>
))}
</div>
</div>

{/* --- Card Container --- */}
<div className="grid grid-cols-1 gap-10 md:grid-cols-3">
{gamesData.map((game) => (
<div
key={game.id}
className="rounded-xl p-6 text-background shadow-lg"
>
<div className="mb-6 flex h-44 items-center justify-center rounded-xl">
<Image
src={game.image}
alt={game.title}
width={340}
height={195}
/>
Comment on lines +395 to +400
Copy link
Contributor

@laurenpudz laurenpudz Jan 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image The spacing doesn't look quite right here, the pictures are too close to the game title. They should also have rounded corners, as in the figma

</div>

<h3 className="mb-2 font-firaCode font-jersey10 text-2xl text-white">
{game.title}
</h3>

<p className="mb-4 font-firaCode text-sm text-primary">
{game.description}
</p>

<div className="h-px w-full bg-white/30"></div>
</div>
))}
</div>
</div>
<Image
src="/fire.png"
alt=""
width={400}
height={400}
className="absolute -left-64 top-1/2 z-10 -translate-y-1/2"
/>
<Image
src="/fire.png"
alt=""
width={400}
height={400}
className="absolute -right-52 top-1/2 z-10 -translate-y-1/2"
/>
<Image
src="/fire.png"
alt=""
width={300}
height={300}
className="absolute -bottom-36 left-1/2 z-10 -translate-x-1/2"
/>
</section>
</div>
);
}