Merge branch 'main' into UADS-53-CMS

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/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:uoadessertsociety@gmail.com" 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

@@ -1,34 +1,38 @@
 import background from "../assets/pink_sponsor_background.png";
 
 export interface SponsorType {
-	name: string;
-	description: string;
-	image: string;
+  name: string;
+  description: string;
+  image: string;
 }
 
 interface SponsorCardProps {
-	sponsor: SponsorType;
+  sponsor: SponsorType;
 }
 
 export default function SponsorCard({ sponsor }: SponsorCardProps) {
-	const { name, description, image } = sponsor;
+  const { name, description, image } = sponsor;
 
-	return (
-		<>
-			<div className="w-96 h-52 bg-pink flex rounded-b-3xl overflow-hidden relative">
-				<div className="w-full absolute top-0">
-					<img src={background} alt="Pink Swiggly Background" />
-				</div>
+  return (
+    <>
+      <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>
 
-				<div className="w-2/5 pl-5 pt-10 pb-5 flex justify-center items-center">
-					<img src={image} alt="Sponsor Image" className="w-full h-full object-cover rounded-xl" />
-				</div>
+        <div className="w-2/5 pl-5 pt-10 pb-5 flex justify-center items-center">
+          <img
+            src={image}
+            alt="Sponsor Image"
+            className="w-full h-full object-cover rounded-xl"
+          />
+        </div>
 
-				<div className="w-3/5 h-full flex flex-col px-5 py-9 text-light-pink">
-					<h1 className="font-bold text-xl">{name}</h1>
-					<p className="font-bold text-sm">{description}</p>
-				</div>
-			</div>
-		</>
-	);
+        <div className="w-3/5 h-full flex flex-col px-5 py-9 text-light-pink">
+          <h1 className="font-bold text-xl">{name}</h1>
+          <p className="font-bold text-sm">{description}</p>
+        </div>
+      </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 />
 		</>
 	);