Fixed spelling

src/data/EventsDatabase.tsx

@@ -1,46 +1,49 @@
 import { EventObject } from '../tools/CustomTypes'
 
-const semesterEnd = '5/31/25'
+const semesterEnd = '5/08/25'
 const EVENT_INFO: EventObject[] = [
 	{
 		title: 'Weekly SolidWorks Workshop',
 		description: `The goal of these classes is to equip you with the skills to model and design on a professional
 			level, as well as create a common ground for all engineers to work together more efficiently and effectively`,
-		date: new Date('2025-02-17T17:30:00'),
+		date: new Date('2025-03-10T17:30:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 90 // 1 hour 30 minutes
 	},
 	{
 		title: 'General Body Meeting',
 		description: 'Updates on what happened since the last GBM and the plan for the rest of the semester as well as an activity',
 		date: new Date('2025-02-05T17:00:00'),
-		// location: 'The Fish Bowl (first floor pf the engineering building)'
 		location: '201A classroom (The ideas hub second floor of the engineering building)'
 	},
 	{
 		title: 'Weekly Programming Meeting',
 		description: 'The weekly meeting for the programming sub-team. Take a look at the code for the robot',
-		date: new Date('2025-02-12T17:00:00'),
+		date: new Date('2025-03-12T17:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	},
 	{
 		title: 'Weekly Electrical Meeting',
 		description: 'The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, and more!',
-		date: new Date('2025-02-12T18:00:00'),
+		date: new Date('2025-03-12T18:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	},
 	{
 		title: 'Weekly Mechanical Meeting',
 		description: 'The weekly meeting for the mechanical sub-team. Learn about the design aspects of robot and 3D model parts.',
-		date: new Date('2025-02-12T16:00:00'),
+		date: new Date('2025-03-12T16:00:00'),
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		endDate: new Date(semesterEnd),
+		duration: 60 // 1 hour
 	}
 ]
 

src/data/HomeCarouselInfo.tsx

@@ -1,23 +1,32 @@
 import React from 'react'
 
 import { SlideInfo } from '../pages/general/carousel/CarouselStyles'
-import slide1 from '../assets/pics/carousel/rocksat17.jpeg'
-import slide2 from '../assets/pics/carousel/rmc-team.jpeg'
-import slide3 from '../assets/pics/carousel/balloon-team.jpeg'
+import slide1 from '../assets/pics/photo-gallery/rmc/comp-team-2024.jpg'
+import slide2 from '../assets/pics/carousel/rocksat17.jpeg'
+import slide3 from '../assets/pics/carousel/rmc-team.jpeg'
+import slide4 from '../assets/pics/carousel/balloon-team.jpeg'
 import { COLORS, PATHS } from '../tools/Constants'
 import Button from '../pages/general/button/Button'
 
 const HOME_CAROUSEL_INFO: SlideInfo[] = [
 	{
 		image: slide1,
+		title: 'Robotics', description: `The Robotics teams designs, builds and competes with a mining robot every
+		year at the NASA Lunabotics Competition. Getting the chance to compete against other schools in Florida helps 
+		us improve our skills and represent Temple at a big event.`,
+		color: COLORS.PRIMARY, otherContent: <Button source={PATHS.ROBOTICS}
+			size={'medium'} text={'Learn More'} local/>
+	},
+	{
+		image: slide2,
 		title: 'ROCKSAT', description: `The RockSat Team designed a payload that will be placed inside of a sounding 
 		rocket which is provided by the Wallops Flight Facility. The rocket will launch at Wallops Island where it will follow a 
 		sub-orbital flight path into the Atlantic Ocean, reaching an estimated maximum height of 72 miles.`,
 		color: COLORS.GREEN, otherContent: <Button source={PATHS.ROCKSAT}
 			size={'medium'} text={'Learn More'} local/>
 	},
 	{
-		image: slide2, title: 'NASA RMC',
+		image: slide3, title: 'NASA RMC',
 		description: `The NASA Robotics Mining Competition is a university-level student competition 
 		to design and build a mining robot that can traverse the challenging simulated Martian terrain.
 		The mining robot must then excavate the regolith simulant and/or the ice simulant (gravel) and
@@ -27,7 +36,7 @@ const HOME_CAROUSEL_INFO: SlideInfo[] = [
 		otherContent: <Button source={PATHS.ROBOTICS} text={'Learn More'} size={'medium'} local/>
 	},
 	{
-		image: slide3, title: 'NASA BALLOONING',
+		image: slide4, title: 'NASA BALLOONING',
 		description: `The Temple NASA Ballooning Team will participate as one of over fifty teams 
 		responsible for the design and production of an HAB that is capable of recording and streaming live video footage to the NASA 
 		website, a task which has never been attempted for a solar eclipse.`,

src/pages/events/EventList.tsx

@@ -19,7 +19,7 @@ class EventList extends React.Component<{events: EventObject[], loading: boolean
 							<div className='date' style={{display: 'flex', flexDirection: 'column', rowGap: '13%'}}>
 								<p>{!isNaN(event.date.getMonth()) ? `${event.date.getMonth() + 1}/${event.date.getDate()}` : 'TBD'}</p>
 								<p className='day-of-week' style={{margin: '0'}}>
-									{event?.weekly ? `Weekly on ${dayOfWeek[event.date.getDay()]}'s` : ''}
+									{event?.weekly ? `Weekly on ${dayOfWeek[event.date.getDay()]}s` : ''}
 								</p>
 							</div>
 							<div className='location'>

src/pages/events/EventListStyles.tsx

@@ -10,6 +10,16 @@ export default class EventListStyles {
 		grid-template-rows: repeat(${props => props.rows}, minmax(0, 1fr));
 		grid-row-gap: 5%;
 		justify-items: center;
+
+		@media (max-width: 718px) {
+			display: grid;
+			grid-template-columns: 100%;
+			grid-template-rows:
+				calc(var(--vh) * .2)    /* Intro heading */
+				max(calc(var(--vh) * .15), 100px);  /* Contact info */
+			justify-content: center;
+			align-content: center;
+		}
 	`
 
 	static readonly EventItemContainer = styled.div`

src/pages/general/contact/Contact.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BsHeartFill } from 'react-icons/bs'
 import { FiFacebook, FiInstagram, FiLinkedin, FiMail, FiTwitter, FiYoutube } from 'react-icons/fi'
-import { RiSnapchatLine } from 'react-icons/ri'
+// import { RiSnapchatLine } from 'react-icons/ri'
 
 import IconButton from '../button/IconButton'
 import Styles from './ContactStyles'
@@ -16,7 +16,7 @@ export default class Contact extends React.Component<Record<string, never>, neve
 					<IconButton icon={<FiTwitter/>} source={'https://twitter.com/templerobotics'} />
 					<IconButton icon={<FiFacebook/>} source={'https://www.facebook.com/templerobotics'} />
 					<IconButton icon={<FiInstagram/>} source={'https://www.instagram.com/templerobotics/'} />
-					<IconButton icon={<RiSnapchatLine/>} source={'https://snapchat.com/add/templerobotics'} />
+					{/* <IconButton icon={<RiSnapchatLine/>} source={'https://snapchat.com/add/templerobotics'} /> */}
 					<IconButton icon={<FiYoutube/>} source={'https://www.youtube.com/channel/UCv59XUAVDLtgk0KA9r4RTsA'} />
 					<IconButton icon={<FiMail/>} source={'Mailto:Temple.Robotics@outlook.com'} />
 					<IconButton icon={<FiLinkedin/>} source={ 'https://www.linkedin.com/company/temple-robotics/posts/?feedView=all'}/>

src/pages/general/navigation/Navigation.tsx

@@ -1,8 +1,7 @@
 // Third party
-import React from 'react'
-import { Navbar, NavLink } from 'react-bootstrap'
+import React, { useState } from 'react'
+import { Navbar, NavLink, NavDropdown } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
-//import {motion} from 'framer-motion';  framer motion bug (maybe this project is just too outdated)
 
 // Custom styles
 import Styles from './NavigationStyles'
@@ -17,39 +16,82 @@ import nasaLogo from '../../../assets/pics/logos/nasa.png'
 const Navigation = (): React.ReactElement => {
 	const { scroll } = getScrollY()
 	const { width } = useWindowSize()
-	const  TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
+	const TEAMS = `https://teams.microsoft.com/l/team/19%3aeaf903fd81cd48eba95d8e769ed78544%40thread.tacv2/conversations?groupId=8f
 		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
-	return (
 
+	// State for handling dropdown visibility
+	const [showDropdown, setShowDropdown] = useState(false)
+
+	// Timeout variable to prevent flickering
+	let hideDropdownTimeout: NodeJS.Timeout
+
+	// Open dropdown when hovering over "Projects"
+	const handleMouseEnter = (): void => {
+		clearTimeout(hideDropdownTimeout) // Cancel hide if mouse enters again
+		setShowDropdown(true)
+	}
+
+	// Close dropdown when mouse leaves (with small delay)
+	const handleMouseLeave = (): void => {
+		hideDropdownTimeout = setTimeout(() => {
+			setShowDropdown(false)
+		}, 400) // Small delay before closing
+	}
+
+	// Close dropdown when clicking a project
+	const handleItemClick = (): void => {
+		setShowDropdown(false) // Close dropdown when a project is clicked
+		scrollToTop()
+	}
+
+	return (
 		<>
-			{/* The rest of the navigation bar. The className is dependent on whether the navbar is expanded or not */}
 			<Styles.NavigationBar id='navbar-transition'
-				transparency={ scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0 }
-				toggle={ width < Constants.MOBILE_SIZE ? 1 : 0 }
+				transparency={scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0}
+				toggle={width < Constants.MOBILE_SIZE ? 1 : 0}
 				sticky='top' bg='dark' variant='dark' expand='md' collapseOnSelect>
 				{/* Top left of the navigation bar */}
 				<Styles.Logo className='logo-and-title'>
 					<Link className='logo-container' to='/home'>
-						<img alt='logo' src={nasaLogo} id='web-logo' onClick={scrollToTop}/>
+						<img alt='logo' src={nasaLogo} id='web-logo' onClick={scrollToTop} />
 						<div>
 							<p>Temple Space</p>
 							<p>Exploration</p>
 						</div>
 					</Link>
 				</Styles.Logo>
+
 				<Navbar.Toggle aria-controls='basic-navbar-nav' />
 				<Navbar.Collapse className='basic-navbar-links'>
-					<Styles.NavbarLinks variant='pills' toggle={ width < Constants.MOBILE_SIZE ? 1 : 0 }>
-						<NavLink eventKey='7' as={Link} to={Constants.PATHS.HOME} onClick={() => location.href = TEAMS}>Teams</NavLink>
+					<Styles.NavbarLinks variant='pills' toggle={width < Constants.MOBILE_SIZE ? 1 : 0}>
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>
-						<NavLink eventKey='4' as={Link} to={Constants.PATHS.ROBOTICS} onClick={scrollToTop}>Robotics</NavLink>
-						<NavLink eventKey='5' as={Link} to={Constants.PATHS.ROCKSAT} onClick={scrollToTop}>RockSat</NavLink>
-						<NavLink eventKey='6' as={Link} to={Constants.PATHS.BALLOONING} onClick={scrollToTop}>NASA Ballooning</NavLink>
-						<NavLink eventKey='8' as={Link} to={Constants.PATHS.MEETTHELEADS} onClick={scrollToTop}>
-							Meet Our Robotics Leads
-						</NavLink>
+
+						{/* Projects Dropdown - Opens on Hover, Closes on Click */}
+						<div className='nav-item'
+							onMouseEnter={handleMouseEnter}
+							onMouseLeave={handleMouseLeave}>
+							<NavDropdown
+								title='Projects'
+								id='projects-dropdown'
+								show={showDropdown}
+								className='nav-link'>
+								<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.ROBOTICS} onClick={handleItemClick}>
+										Robotics
+									</NavDropdown.Item>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.ROCKSAT} onClick={handleItemClick}>
+										RockSat
+									</NavDropdown.Item>
+									<NavDropdown.Item as={Link} to={Constants.PATHS.BALLOONING} onClick={handleItemClick}>
+										NASA Ballooning
+									</NavDropdown.Item>
+								</div>
+							</NavDropdown>
+						</div>
+
+						<NavLink eventKey='7' as={Link} to={Constants.PATHS.HOME} onClick={() => location.href = TEAMS}>Teams</NavLink>
 					</Styles.NavbarLinks>
 				</Navbar.Collapse>
 			</Styles.NavigationBar>

src/pages/general/navigation/NavigationStyles.tsx

@@ -73,5 +73,43 @@ export default class NavigationStyles {
 			padding-left: 5%;
 			font-size: 18px;
 		}
+
+		/* Dropdown Styling */
+		.nav-item {
+			position: relative;
+			padding: 4px 8px 8px 8px;
+		}
+
+		div.nav-item{
+			position: relative;
+			padding: 2px 0px 0px 0px;
+		}
+
+		a.dropdown-toggle {
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			color: ${COLORS.TEXT} !important;
+			font-size: 17px;
+			padding: 6px 8px 8px 8px;
+		}
+
+		.dropdown-menu {
+			position: absolute;
+			background-color: ${COLORS.PRIMARY} !important;
+			padding: 0px 8px 8px 16px;
+			border: none;
+		}
+
+		.dropdown-item {
+			color: ${COLORS.TEXT} !important;
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			font-size: 15px;
+			border: none;
+			padding: 0px
+		}
+
+		.dropdown-item:hover {
+			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
+			color: ${COLORS.HOVER_TEXT} !important;
+		}
 	`
 }

src/pages/home/Home.tsx

@@ -38,9 +38,9 @@ const Home = (): React.ReactElement => {
 
 			<Styles.SectionHeaderGradient>
 				<Styles.SectionHeader>
-					<h2>Sign up for volunteering and contact us on teams!</h2>
+					<h2>Contact us on teams!</h2>
 					<div className='button-container'>
-						<Button text={'Sign up to Volunteer'} size={'large'} source={'https://forms.gle/1RcJw5DNXHVX2YzD8'}/>
+						{/* <Button text={'Sign up to Volunteer'} size={'large'} source={'https://forms.gle/1RcJw5DNXHVX2YzD8'}/> */}
 						<Button text='Join Teams Here!' source={TEAMS}/>
 					</div>
 				</Styles.SectionHeader>

src/pages/robotic-mining/RoboticMiningStyles.tsx

@@ -8,11 +8,11 @@ export const MEET_THE_TEAM: GalleryImage[] = [
 	{ image: RMC_TEAM[0], title: 'Dr. John Helferty', description: 'Head Advisor' },
 	{ image: RMC_TEAM[1], title: 'Rocco Gruzman', description: 'Robotic\'s President' },
 	{ image: RMC_TEAM[2], title: 'Malin Kussi', description: 'Vice President' },
-	{ image: RMC_TEAM[3], title: 'Javier Price-Butler', description: 'Chief of Development' },
-	{ image: RMC_TEAM[4], title: 'Jaden Howard', description: 'Electrical Lead' },
-	{ image: RMC_TEAM[5], title: 'Alessia Smith', description: 'Mechanical Lead' },
-	{ image: RMC_TEAM[6], title: 'Brian Ervin', description: 'Programming Lead' },
-	{ image: RMC_TEAM[7], title: 'Tanishka Shah', description: 'Project Manager' },
+	{ image: RMC_TEAM[3], title: 'Jaden Howard', description: 'Electrical Lead' },
+	{ image: RMC_TEAM[4], title: 'Alessia Smith', description: 'Mechanical Lead' },
+	{ image: RMC_TEAM[5], title: 'Brian Ervin', description: 'Programming Lead' },
+	{ image: RMC_TEAM[6], title: 'Tanishka Shah', description: 'Project Manager' },
+	{ image: RMC_TEAM[7], title: 'Javier Price-Butler', description: 'Chief of Development' },
 	{ image: RMC_TEAM[8], title: 'Jonah Tesler', description: 'Shop Manager' }
 ]
 

src/pages/sponsors/Sponsors.tsx

@@ -26,7 +26,7 @@ const Sponsors = (): React.ReactElement => {
 			<Styles.SectionHeader>
 				<div className='button-container'>
 					<Button text='Become a Sponsor' size='large' source={'https://forms.gle/pAfv3VBYJJXooiU38'}/>
-					<Button text='Temple Robotics Brochure' size='large' source={`https://1drv.ms/b/s!Amh3vGk
+					<Button text='Sponsorship Opportunities' size='large' source={`https://1drv.ms/b/s!Amh3vGk
 					fvOw1c48kx0hFRCY6Hf4?e=OK65qr`}/>
 				</div>
 			</Styles.SectionHeader>

src/tools/Constants.tsx

@@ -34,11 +34,11 @@ export const RMC_TEAM = [
 	require('../assets/pics/team/john-helferty.jpg'),
 	require('../assets/pics/Leads/roccos_face.jpg'),
 	require('../assets/pics/Leads/Malins_face.jpg'),
-	require('../assets/pics/Leads/Javi_face.png'),
 	require('../assets/pics/Leads/Jadens_face.jpg'),
 	require('../assets/pics/Leads/Alessia_headshot.png'),
 	require('../assets/pics/Leads/Brian_face.png'),
 	require('../assets/pics/Leads/Tanishkas_face.jpeg'),
+	require('../assets/pics/Leads/Javi_face.png'),
 	require('../assets/pics/Leads/Jonah_Face.jpg')
 ]
 

src/tools/CustomTypes.tsx

@@ -11,5 +11,6 @@ export type EventObject = {
 	description: string,
 	weekly?: boolean,
 	endDate?: Date,
-	tbd?: boolean
+	tbd?: boolean,
+	duration?: number
 }