Feat/uads 18/front end home page

package.json

@@ -1 +1 @@
-{}
+{}

web/package.json

@@ -21,6 +21,7 @@
     "react-icons": "^5.2.1",
     "react-router": "^6.22.0",
     "react-router-dom": "^6.22.0",
+    "swiper": "^11.1.4",
     "tailwind-merge": "^2.2.1",
     "universal-cookie": "^7.0.2",
     "zod": "^3.22.4"

web/src/components/EventCard.tsx

@@ -29,7 +29,9 @@ export default function EventCard({ event }: EventCardProps) {
 			<div className="w-96 flex flex-col bg-pink rounded-3xl overflow-hidden">
 				<div className="relative h-3/5 group">
 					<img src={backgroundImage} alt="Background Image" className="w-full h-full object-cover" />
-					<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white text-2xl font-bold opacity-0 cursor-pointer group-hover:opacity-100 transition-opacity duration-300">{statusText}</div>
+					<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white text-2xl font-bold opacity-0 cursor-pointer group-hover:opacity-100 transition-opacity duration-300">
+						{statusText}
+					</div>
 				</div>
 
 				<div className="flex-grow flex rounded-b-3xl">

web/src/components/Footer.tsx

@@ -13,7 +13,7 @@ export default function Footer() {
 					<p className="font-raleway text-light-pink font-bold">&copy; UADS 2024. All Rights Reserved</p>
 				</div>
 				<div className="flex justify-center w-full lg:w-auto">
-					<Socials />
+					<Socials background="bg-brown" hoverBackground="bg-light-pink" iconColor="text-light-pink" hoverIconColor="text-black" />
 				</div>
 			</div>
 		</div>

web/src/components/Socials.tsx

@@ -2,37 +2,44 @@ import { Link } from "react-router-dom";
 import { FaFacebookF, FaInstagram, FaDiscord, FaTiktok } from "react-icons/fa";
 import { IoMdMail } from "react-icons/io";
 
-export default function Socials() {
+interface SocialsProps {
+    background: string;
+    hoverBackground: string;
+    iconColor: string;
+    hoverIconColor: string;
+}
+
+export default function Socials({ background, hoverBackground, iconColor, hoverIconColor }: SocialsProps) {
 	return (
 		<>
 			<div className="w-80 flex justify-between items-center" data-testid="socialsComponent">
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.facebook.com/uoadessertsociety" target="_blank" aria-label="Facebook" className="w-full h-full flex justify-center items-center">
-						<FaFacebookF className="text-light-pink group-hover:text-black" data-testid="facebookLogo" />
+						<FaFacebookF className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="facebookLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.instagram.com/uoadessertsociety/" target="_blank" aria-label="Instagram" className="w-full h-full flex justify-center items-center">
-						<FaInstagram className="text-light-pink group-hover:text-black" data-testid="instagramLogo" />
+						<FaInstagram className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="instagramLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://discord.gg/dFuwHuU8FT" target="_blank" aria-label="Discord" className="w-full h-full flex justify-center items-center">
-						<FaDiscord className="text-light-pink group-hover:text-black" data-testid="discordLogo" />
+						<FaDiscord className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="discordLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.tiktok.com/@uoadessertsociety?_t=8mQ3asFY7Pz&_r=1" target="_blank" aria-label="TikTok" className="w-full h-full flex justify-center items-center">
-						<FaTiktok className="text-light-pink group-hover:text-black" data-testid="tiktokLogo" />
+						<FaTiktok className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="tiktokLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="mailto:[email protected]" target="_blank" aria-label="Email" className="w-full h-full flex justify-center items-center">
-						<IoMdMail className="text-light-pink group-hover:text-black" data-testid="emailLogo" />
+						<IoMdMail className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="emailLogo" />
 					</Link>
 				</div>
 			</div>

web/src/components/SponsorCard.tsx

@@ -15,7 +15,7 @@ export default function SponsorCard({ sponsor }: SponsorCardProps) {
 
   return (
     <>
-      <div className="w-96 h-52 bg-pink flex rounded-b-3xl overflow-hidden relative">
+      <div className="w-96 h-52 bg-brown flex rounded-b-3xl overflow-hidden relative">
         <div className="w-full absolute top-0">
           <img src={background} alt="Pink Swiggly Background" />
         </div>

web/src/components/__tests__/Socials.test.tsx

@@ -7,7 +7,7 @@ describe("Socials Component", () => {
 	beforeEach(() => {
 		render(
 			<MemoryRouter>
-				<Socials />
+				<Socials background="bg-brown" hoverBackground="bg-light-pink" iconColor="text-light-pink" hoverIconColor="text-black" />
 			</MemoryRouter>
 		);
 	});

web/src/pages/Home.tsx

@@ -1,13 +1,220 @@
+import { NavLink } from "react-router-dom";
+import uadslogo from "../assets/uads_logo_brown.svg";
+import creamcup from "../assets/cupcake.svg";
+import sundae from "../assets/sundae.svg";
+import EventCard, { EventType } from "../components/EventCard";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import Socials from "../components/Socials";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import { Autoplay, Pagination } from "swiper/modules";
+import SponsorCard, { SponsorType } from "../components/SponsorCard";
+import placeholder from "../assets/download.jpg";
+
+// Temp Sponsors data
+const sponsorData: SponsorType[] = [
+	{
+		name: "Sponsor 1",
+		description: "Sponsor 1 Description",
+		image: placeholder,
+	},
+	{
+		name: "Sponsor 2",
+		description: "Sponsor 2 Description",
+		image: placeholder,
+	},
+	{
+		name: "Sponsor 3",
+		description: "Sponsor 3 Description",
+		image: placeholder,
+	},
+	{
+		name: "Sponsor 4",
+		description: "Sponsor 4 Description",
+		image: placeholder,
+	},
+	{
+		name: "Sponsor 5",
+		description: "Sponsor 5 Description",
+		image: placeholder,
+	},
+];
+
+// Temp events data
+const eventsData: EventType[] = [
+	{
+		id: 1,
+		date: "4",
+		month: "April",
+		title: "Meet and Greet",
+		description: "Come and meet your fellow peers and connect with each other",
+	},
+	{
+		id: 2,
+		date: "5",
+		month: "May",
+		title: "Event 2",
+		description: "Event 2 Description",
+	},
+	{
+		id: 3,
+		date: "17",
+		month: "June",
+		title: "June Party",
+		description: "UADS Party in June",
+	},
+	{
+		id: 4,
+		date: "6",
+		month: "July",
+		title: "Event 4",
+		description: "Description for Event 4",
+	},
+	{
+		id: 5,
+		date: "6",
+		month: "August",
+		title: "Event 5",
+		description: "Description for Event 5",
+	},
+];
 
 export default function Home() {
 	return (
 		<>
 			<Navbar />
-			<div className="container px-4 pt-24 mx-auto content-center">
-				<h1 className=" text-center text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">Home Page</h1>
+
+			<div className="max-w-screen bg-light-pink px-5 lg:px-10">
+				<div className="w-full flex flex-col md:flex-row justify-between items-center">
+					<img src={sundae} alt="Sundae Image" className="hidden md:block transform -rotate-12 opacity-50" />
+					<div className="w-full h-auto flex flex-col justify-center items-center font-bold font-raleway text-center py-10 md:py-20">
+						<img src={uadslogo} alt="UADS Logo" className="w-96" />
+						<h3 className="text-3xl text-brown">University of Auckland</h3>
+						<h1 className="text-7xl text-brown">Dessert Society</h1>
+						<br />
+						<h3 className="text-3xl text-pink">Where dessert lovers go to celebrate the art of eating and making desserts</h3>
+						<br />
+						<Socials background="bg-brown" hoverBackground="bg-pink" iconColor="text-light-pink" hoverIconColor="text-white" />
+					</div>
+					<img src={creamcup} alt="Cupcake Image" className="transform hidden md:block rotate-12 opacity-50" />
+				</div>
+			</div>
+
+			<div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-pink">
+				<h1 className="text-4xl text-light-pink font-bold font-raleway text-center">Supported by our Sponsors</h1>
+
+				<div className="w-full h-auto mb-5">
+					<Swiper
+						slidesPerView={1}
+						spaceBetween={100}
+						loop={true}
+						centeredSlides={true}
+						pagination={{
+							clickable: true,
+						}}
+						autoplay={{
+							delay: 3000,
+							disableOnInteraction: false,
+						}}
+						modules={[Autoplay, Pagination]}
+						breakpoints={{
+							640: {
+								slidesPerView: 2,
+								spaceBetween: 250,
+							},
+							768: {
+								slidesPerView: 2,
+								spaceBetween: 200,
+							},
+							1024: {
+								slidesPerView: 2,
+								spaceBetween: 200,
+							},
+							1280: {
+								slidesPerView: 3,
+								spaceBetween: 300,
+							},
+						}}
+						className="mySwiper px-0 md:px-10 py-10"
+					>
+						{sponsorData.map((sponsor) => {
+							return (
+								<SwiperSlide>
+									<SponsorCard sponsor={sponsor} />
+								</SwiperSlide>
+							);
+						})}
+					</Swiper>
+				</div>
+
+				<NavLink to="/sponsors" className="group flex justify-center items-center bg-light-pink hover:bg-brown py-2 px-5 rounded-xl">
+					<p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">See More Sponsors</p>
+				</NavLink>
 			</div>
+
+			<div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-brown">
+				<h1 className="text-4xl text-light-pink font-bold font-raleway text-center">Our Exciting Events</h1>
+
+				<div className="w-full h-auto mb-5">
+					<Swiper
+						slidesPerView={1}
+						spaceBetween={100}
+						loop={true}
+						centeredSlides={true}
+						pagination={{
+							clickable: true,
+						}}
+						autoplay={{
+							delay: 3000,
+							disableOnInteraction: false,
+						}}
+						modules={[Autoplay, Pagination]}
+						breakpoints={{
+							640: {
+								slidesPerView: 2,
+								spaceBetween: 250,
+							},
+							768: {
+								slidesPerView: 2,
+								spaceBetween: 200,
+							},
+							1024: {
+								slidesPerView: 2,
+								spaceBetween: 200,
+							},
+							1280: {
+								slidesPerView: 3,
+								spaceBetween: 300,
+							},
+						}}
+						className="mySwiper px-0 md:px-10 py-10"
+					>
+						{eventsData.map((event) => {
+							return (
+								<SwiperSlide>
+									<EventCard event={event} />
+								</SwiperSlide>
+							);
+						})}
+					</Swiper>
+				</div>
+
+				<NavLink to="/events" className="group flex justify-center items-center bg-light-pink hover:bg-pink py-2 px-5 rounded-xl">
+					<p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">See More Events</p>
+				</NavLink>
+			</div>
+
+			<div className="max-w-screen py-10 flex flex-col justify-center items-center bg-light-pink">
+				<h1 className="text-4xl text-brown font-bold font-raleway">Join UADS Today!</h1>
+
+				<NavLink to="/signup" className="flex justify-center items-center bg-pink hover:bg-brown py-2 px-16 my-5 rounded-xl">
+					<p className="text-2xl text-light-pink font-bold font-raleway">Join</p>
+				</NavLink>
+			</div>
+
 			<Footer />
 		</>
 	);

web/src/pages/__tests__/Home.test.tsx

@@ -7,16 +7,16 @@ import "@testing-library/jest-dom";
  * Test suite to test if the elements in the Home Page are rendered correctly
  */
 describe("Home Page Rendering", () => {
-	it("Should display the Home page title", () => {
-		// Render the Home component in a simulated DOM
-		render(
-			<MemoryRouter>
-				<Home />
-			</MemoryRouter>
-		);
+  it("Should display the Home page title", () => {
+    // Render the Home component in a simulated DOM
+    render(
+      <MemoryRouter>
+        <Home />
+      </MemoryRouter>
+    );
 
-		const message = screen.getByText(/Home Page/i);
+    const message = screen.getByText(/Dessert Society/i);
 
-		expect(message).toBeInTheDocument();
-	});
+    expect(message).toBeInTheDocument();
+  });
 });

web/tailwind.config.js

@@ -17,7 +17,8 @@ export default {
         'pink': '#B04F61',
         'gray': '#3D3F4B',
         'brown': '#472A25',
-        'yellow': '#FCBA04'
+        'yellow': '#FCBA04',
+        'light-brown': '#5F4444',
       },
     },
   },