Create Events Page!

src/App.tsx

@@ -1,4 +1,5 @@
 import { VStack } from '@chakra-ui/react';
+import Events from "./routes/Events";
 import '@fontsource/kufam';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Info from "./components/Home/Info";
@@ -27,6 +28,7 @@ function ProdRoutes() {
 				<NavBar />
 				<Header />
 				<Info/>
+				<Events/>
 				<FAQ/>
 				<Footer/>
 			</VStack>}> 
@@ -46,7 +48,8 @@ function DevRoutes() {
 			<Route path="/schedule/" element={<Temp text="schedule" />}> </Route>
 			<Route path="/questions/" element={<Temp text="questions" />}> </Route>
 			<Route path="/" element={<MainPage/>} />
-			<Route path="*" element={<PageNotFound/>} />
+			<Route path="/events" element={<Events/>}></Route>
+			<Route path="*" element={<Temp text="404" />} />
 		</Routes>
 	);
 }

src/components/Events/EventCard.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Box, Flex, HStack, Text } from "@chakra-ui/react";
+import CardBg from "../../assets/events_assets/event_card.svg";
+import CardHead from "../../assets/events_assets/event_card_head.svg";
+import { ChevronDownIcon } from '@chakra-ui/icons';
+
+interface EventCardProps {
+  title: string;
+  location: string;
+  time: string;
+  description: string;
+}
+
+const EventCard: React.FC<EventCardProps> = ({ title, location, time, description }) => {
+	const [isExtended, setIsExtended] = useState(false);
+
+	const toggleCard = () => {
+		setIsExtended(!isExtended);
+	};
+
+	return (
+		<Box
+			maxWidth="900px"
+			width="96vw"
+			minHeight={isExtended ? "300px" : "150px"}
+			// paddingTop={isExtended ? "35px" : "35px"}
+
+			marginY='10px'
+			marginX='2vw'
+			backgroundImage={`url(${CardBg})`}
+			bgSize="100% 100%"
+			backgroundPosition="center"
+			backgroundRepeat="no-repeat"
+			cursor="pointer"
+			onClick={toggleCard}
+			transition="min-height 0.2s linear" // Smooth transition for all properties
+		>
+			<Box 
+				marginTop='15px'
+				marginLeft='4%'
+				minHeight='30px'
+				width='92%'
+				backgroundImage={`url(${CardHead})`}
+				bgSize="100% 100%"
+				backgroundPosition="center"
+				backgroundRepeat="no-repeat"/>
+			<Flex 
+				flexDirection="column" 
+				alignItems="flex-start"
+				height="100%" 
+				width="100%"
+				paddingLeft='4%'
+			>
+				<Text 
+					fontSize="xl" 
+					color="#0A0F7E" 
+					fontFamily='Kufam' 
+					fontWeight="800" 
+					fontStyle="italic" 
+					mr="3%" 
+					mt="1%" 
+					textAlign="left"
+				>
+					{title}
+				</Text>
+				<Text fontSize="md" color="black" fontFamily='Kufam'>{location}</Text>
+				<HStack width='88vw' maxWidth="835px" mb={isExtended ? "2%" : "4%"}>
+					<Text fontSize="md" color="black" fontFamily='Kufam'>{time}</Text>
+					<ChevronDownIcon width='30px' height='30px' transform={`translateY(-10px) rotate(${isExtended ? 180 : 0 }deg)`} ml={'auto'} borderRadius='50%' color='black' transition='all 0.3s' />
+				</HStack>
+
+
+				{isExtended && (
+					<Text fontSize="md" color="black" textAlign="left" mr="5%" mb="7%">{description}</Text>
+				)}
+			</Flex>
+		</Box>
+	);
+};
+
+export default EventCard;

src/components/Events/EventTab.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tab, useMediaQuery } from "@chakra-ui/react";
+import UnselectedTabBg from "../../assets/events_assets/date_unselected.svg";
+import SelectedTabBg from "../../assets/events_assets/date_selected.svg";
+
+interface EventTabProps {
+  day: string;
+}
+
+const EventTab: React.FC<EventTabProps> = ({ day }) => {
+	const [isSmall] = useMediaQuery("(max-width: 800px)");
+
+	return (
+		<Tab 
+			bgImage={UnselectedTabBg}
+			backgroundPosition="center" 
+			backgroundRepeat="no-repeat" 
+			fontWeight='bold'
+			fontSize={isSmall ? "3vw" : "20px"}
+			padding={isSmall ? "8vw" : "20px"}
+			margin="5px"
+			bgSize="100% 100%"
+			width={isSmall ? "7vw" : "100px"}
+			_selected={{ bgImage: SelectedTabBg }}>
+			{day}
+		</Tab>
+	);
+};
+
+export default EventTab;

src/components/Events/EventTabs.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { Tabs, TabList, TabPanels, TabPanel, Flex } from "@chakra-ui/react";
+import axios from 'axios';
+
+import EventCard from './EventCard';
+import EventTab from './EventTab';
+
+enum EventType {
+	SPEAKER = "SPEAKER",
+	CORPORATE = "CORPORATE",
+	SPECIAL = "SPECIAL",
+	PARTNERS = "PARTNERS",
+	MEALS = "MEALS",
+}
+
+interface Event {
+  eventId: string;
+  name: string;
+  startTime: string;
+  endTime: string;
+  points: number;
+  description: string;
+  isVirtual: boolean;
+  imageUrl?: string | null;
+  location?: string | null;
+  eventType: EventType;
+}
+
+const startDate = new Date('2024-09-18'); // September 18 (Wednesday)
+const endDate = new Date('2024-09-23'); // September 22 (Sunday) -- not sure why this only works if I set endDate to 9/23/2024
+
+// Function to check if an event falls within the date range
+const isWithinDateRange = (date: Date): boolean => {
+	return date >= startDate && date <= endDate;
+};
+
+// Function to get the day of the week (e.g., "Wed", "Thu") from a Date object
+const getDayOfWeek = (date: Date): string => {
+	return date.toLocaleDateString('en-US', { weekday: 'short' });
+};
+
+// Fetch events from the API
+const fetchEvents = async (): Promise<Event[]> => {
+	try {
+		const response = await axios.get<Event[]>('https://api.reflectionsprojections.org/events');
+		return response.data;
+	} catch (error) {
+		console.error("Failed to fetch events:", error);
+		return [];
+	}
+};
+
+export const EventTabs = () => {
+	const [events, setEvents] = useState<Event[]>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+
+	useEffect(() => {
+		const getEvents = async () => {
+			const fetchedEvents = await fetchEvents();
+			setEvents(fetchedEvents);
+			setLoading(false);
+		};
+		getEvents();
+	}, []);
+
+	// Filter events by the specific day and within the date range
+	const filterEventsByDay = (day: string) => {
+		return events.filter(event => {
+			const eventDate = new Date(event.startTime);
+			return isWithinDateRange(eventDate) && getDayOfWeek(eventDate) === day;
+		});
+	};
+
+	return (
+		<Tabs variant='unstyled'>
+			<Flex 
+				flexDirection="column"
+				alignItems="center"
+				textColor='black'
+				height="100%" 
+				width="100%">
+
+				<TabList>
+					<EventTab day="WED"/>
+					<EventTab day="THUR"/>
+					<EventTab day="FRI"/>
+					<EventTab day="SAT"/>
+					<EventTab day="SUN"/>
+				</TabList>
+
+			</Flex>
+
+			<TabPanels>
+				{['Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(day => (
+					<TabPanel key={day}>
+						<Flex flexDirection="column" alignItems="center" height="100%" width="100%">
+							{loading ? (
+								<p>Loading events...</p>
+							) : (
+								filterEventsByDay(day).map(event => (
+									<EventCard
+										key={event.eventId}
+										title={event.name}
+										location={event.location ?? 'Virtual'}
+										time={new Date(event.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
+										description={event.description}
+									/>
+								))
+							)}
+						</Flex>
+					</TabPanel>
+				))}
+			</TabPanels>
+		</Tabs>
+	);
+};
+export default EventTabs;

src/components/Footer.tsx

@@ -1,28 +1,28 @@
 import { Box, Image, Link, Text, HStack, useMediaQuery } from '@chakra-ui/react';
 
 function Footer() {
-  const [isSmall] = useMediaQuery("(max-width: 600px)");
-  return (
-    <Box
-      as="footer"
-      width="100%"
-      backgroundColor="#00456D"
-      borderTop="solid 3px #003B5C"
-      padding="1rem"
-      position="relative"
-      bottom="0"
-    >
-      <HStack spacing={4} width="100%" alignItems="center" justify="space-between" height={"min-content"}>
-        <Image src="/rp_logo.svg" alt="Logo" height="auto" maxW="40px" padding="0.5rem" />
-        <Text fontWeight="bold" color="white" fontSize={"1em"}>
+	const [isSmall] = useMediaQuery("(max-width: 600px)");
+	return (
+		<Box
+			as="footer"
+			width="100%"
+			backgroundColor="#00456D"
+			borderTop="solid 3px #003B5C"
+			padding="1rem"
+			position="relative"
+			bottom="0"
+		>
+			<HStack spacing={4} width="100%" alignItems="center" justify="space-between" height={"min-content"}>
+				<Image src="/rp_logo.svg" alt="Logo" height="auto" maxW="40px" padding="0.5rem" />
+				<Text fontWeight="bold" color="white" fontSize={"1em"}>
           &copy; 2024 by {isSmall ? "R|P" : "Reflections | Projections"}
-        </Text>
+				</Text>
 
-        <Text fontSize={"1em"}> Got questions? Email us at <Link href="mailto:[email protected]" color="white">[email protected]</Link> </Text>
+				<Text fontSize={"1em"}> Got questions? Email us at <Link href="mailto:[email protected]" color="white">[email protected]</Link> </Text>
 
-      </HStack>
-    </Box>
-  );
+			</HStack>
+		</Box>
+	);
 }
 
 export default Footer;

src/components/Home/FAQbox.tsx

@@ -22,7 +22,11 @@ const CollapsibleSection = ({
 			borderRadius="md"
 			boxShadow="md"
 			position="relative"
-			transition="background-color 0.6s ease, border-radius 0.6s ease"
+			transition={{
+				duration: 0.6,
+				ease: "easeInOut",
+				properties: ["background-color", "border-radius"]
+			  }}			  
 			mx="auto" 
 		>
 			<MotionBox
@@ -43,7 +47,11 @@ const CollapsibleSection = ({
 				style={{
 					cursor: "pointer",
 				}}
-				transition="height 0.6s ease, border-radius 0.6s ease"
+				transition={{ 
+					duration: 0.6, 
+					ease: "easeInOut",
+					properties: ["height", "border-radius"]
+				  }}
 			>
 				<Text
 					// fontSize={{ base: "md", md: "lg" }}