Website progress

src/App.tsx

@@ -26,6 +26,7 @@ import spaceBackground from './assets/pics/outreach/space-background.jpeg'
 // Images
 import backgroundVideo1 from './assets/vids/nasa-vid-1.webm'
 import { PATHS } from './tools/Constants'
+import MeetTheLeads from './pages/meet-the-leads/MeetTheLeads'
 
 class Styles {
 	static readonly AppContainer = styled.div<{height: number}>`
@@ -77,6 +78,7 @@ const App = (): React.ReactElement => {
 								<Route path={PATHS.SPONSORS} element={<Sponsors/>}/>
 								<Route path={PATHS.ROCKSAT} element={<Rocksat/>}/>
 								<Route path={PATHS.BALLOONING} element={<Ballooning/>}/>
+								<Route path={PATHS.MEETTHELEADS} element={<MeetTheLeads/>}/>
 								{/* If no path was matched, go to 404 page */}
 								<Route path='*' element={<NoMatch404/>}/>
 							</Routes>

src/data/EventSignUpInfo.tsx

@@ -2,7 +2,7 @@ import { EventSignUpProps } from '../pages/events/EventSignUpStyles'
 
 const EVENT_SIGNUP_INFO: EventSignUpProps[] = [
 	{
-		title: 'Robotics Sign Up',
+		title: 'Robotics Sign Up ',
 		description: 'Sign up for the club!',
 		src: 'https://docs.google.com/forms/d/e/1FAIpQLSea1tnIeueKhYVQjzDB4B3Eu9SW2346thjVDTSs5X0GFM-5vQ/viewform?usp=sf_link'
 	}

src/data/EventsDatabase.tsx

@@ -1,40 +1,40 @@
 import { EventObject } from '../tools/CustomTypes'
 
-const semesterEnd = '05/20/23'
+// const semesterEnd = '12/11/23'
 
 const EVENT_INFO: EventObject[] = [
 	{
 		title: 'Weekly Programming Meeting',
 		description: 'The weekly meeting for the programming sub-team. Take a look at the code for the robot and ',
-		date: new Date('02/15/23'),
-		time: '5:30 PM',
+		date: new Date(''),
+		time: '',
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		// endDate: new Date(semesterEnd)
 	},
 	{
 		title: 'Weekly Electrical Meeting',
 		description: 'The weekly meeting for the electrical sub-team. Talk about improved batteries, wiring, and more!',
-		date: new Date('02/16/23'),
-		time: '5:00 PM',
+		date: new Date(''),
+		time: '',
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		// endDate: new Date(semesterEnd)
 	},
 	{
 		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('02/15/23'),
-		time: '1:00 PM',
+		date: new Date(''),
+		time: '',
 		location: 'The ideas hub (second floor of the engineering building)',
 		weekly: true,
-		endDate: new Date(semesterEnd)
+		// endDate: new Date(semesterEnd)
 	},
 	{
 		title: 'First GBM of the Spring Semester',
 		description: `Learn more about the club and what we do! If you have any interest at all,
 			we highly recommend you joining us!`,
-		date: new Date('2/12/22'),
+		date: new Date(''),
 		time: '',
 		location: 'The ideas hub (second floor of the engineering building)'
 	},

src/pages/general/button/Button.tsx

@@ -22,6 +22,7 @@ export default class Button extends React.Component<ButtonProps, never> {
 		}
 
 		if (!local) {
+			// if the button takes you outside of this websiite
 			return (
 				<div>
 					<Styles.ButtonContainer className={this.props.className} id={this.props.id}

src/pages/general/navigation/Navigation.tsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import { Navbar, NavLink } 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'
@@ -16,7 +17,10 @@ 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
+		78ecbb-62f3-4b2c-bda7-7488eca908ee&tenantId=716e81ef-b522-4473-8e31-10bd02ccf6e5`
 	return (
+
 		<>
 			{/* The rest of the navigation bar. The className is dependent on whether the navbar is expanded or not */}
 			<Styles.NavigationBar id='navbar-transition'
@@ -36,12 +40,15 @@ const Navigation = (): React.ReactElement => {
 				<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>
 						<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>
 					</Styles.NavbarLinks>
 				</Navbar.Collapse>
 			</Styles.NavigationBar>

src/pages/home/Home.tsx

@@ -12,7 +12,9 @@ import Button from '../general/button/Button'
 // Images
 import nasaLogo from '../../assets/pics/logos/nasa.png'
 import HOME_CAROUSEL_INFO from '../../data/HomeCarouselInfo'
-
+import TOwl from '../../assets/pics/logos/TransRoboOwl.svg'
+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`
 const Home = (): React.ReactElement => {
 	return (
 		<Styles.HomeContainer>
@@ -23,8 +25,8 @@ const Home = (): React.ReactElement => {
 				<Styles.LargeText>Shoot for the moon with us!</Styles.LargeText>
 				<Styles.SmallText>Visit us in the</Styles.SmallText>
 				<Styles.Header>
-					NASA space exploration and embedded systems lab <br/>
-					(second floor of the engineering building)
+					NASA Space Exploration and Embedded Systems Lab <br/>
+					(Located in the College of Engineering IDEAS Hub)
 				</Styles.Header>
 			</Styles.TitleContainer>
 
@@ -35,9 +37,27 @@ const Home = (): React.ReactElement => {
 			</Styles.VideoSource>
 
 			<Styles.SectionHeader>
-				<h2>Program</h2>
+				<h2>
+					<img src={TOwl}
+						alt='Owl'
+						style={{
+							width: '150px',   // Set the width of the image
+							height: '150px', // Set the height of the image
+							margin: '0 0 0 -100px',// Set the margin around the image
+							float: 'left'
+							// us a .docx
+
+						}}
+					/>
+						Sign up and contact us on teams!</h2>
+				<div className='button-container'>
+					<Button text={'Sign up here!'} size={'large'} source={'https://forms.gle/rp6BY6h4doLkZQ2E8'}/>
+					<Button text='Join Teams Here!' source={TEAMS}/>
+				</div>
 			</Styles.SectionHeader>
 
+
+
 			<Carousel slideInfo={HOME_CAROUSEL_INFO}/>
 
 			<Styles.SectionHeader>

src/pages/home/HomeStyles.tsx

@@ -75,6 +75,7 @@ export default class HomeStyles {
 			display: flex;
 			column-gap: 10%;
 			justify-content: center;
+			align-items: center;
 		}
 	`
 

src/pages/meet-the-leads/MeetTheLeads.tsx

@@ -0,0 +1,105 @@
+// Third party
+import React from 'react'
+import { AiOutlineDash } from 'react-icons/ai'
+
+// Custom components
+import Contact from '../general/contact/Contact'
+//import SectionDescription from '../robotic-mining/SectionDescription'
+
+// Custom styles
+import Styles from './MeetTheLeadsStyles'
+
+// Images
+import JaredsFace from '../../assets/pics/Leads/jareds_face.jpg'
+import JaysFace from '../../assets/pics/Leads/Jays_Face.jpg'
+import StevensFace from '../../assets/pics/Leads/Stevens_Face.jpg'
+import GraysonsFace from '../../assets/pics/Leads/Graysons_face.jpg'
+import TanishkasFace from '../../assets/pics/Leads/Tanishkas_face.jpg'
+import RoccosFace from '../../assets/pics/Leads/roccos_face.jpg'
+import NasiersFace from '../../assets/pics/Leads/Nasiers_face.jpg'
+// a separator is needed for some reason, troubleshoot this or create a very small section div or style this like the robotics page
+//use robotics format
+//bakround is implemented but sections are not made to be compatible, change to gallery sections
+const MeetTheLeads = (): React.ReactElement => {
+	return (
+
+		<Styles.MeetTheLeadsContainer>
+			<Styles.TitleContainer className='title-container'>
+				<h2 className='title'>Meet The Leads</h2>
+				<AiOutlineDash/>
+			</Styles.TitleContainer>
+
+			<Styles.SpaceBackground>
+				<Styles.LeadsGallery>
+					<div className='leads-slide'>
+						<h2>Meet our President!</h2>
+						<p>
+							Jared Levin and any info
+						</p>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ JaredsFace } />
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ JaysFace }/>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our vice president!</h2>
+						<p>
+							Jay Pande
+						</p>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our Electrical Lead!</h2>
+						<p>
+							Grayson Cooper
+						</p>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ GraysonsFace}/>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ StevensFace}/>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our Mechanical Lead!</h2>
+						<p>
+							Steven Miller
+						</p>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our Web Manager!</h2>
+						<p>
+							Nasier Fowlkes
+						</p>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ NasiersFace }/>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ RoccosFace }/>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our Workshop Manager</h2>
+						<p>
+							Rocco Guzman
+						</p>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our project Manager</h2>
+						<p>
+							Tanishka Shah
+						</p>
+					</div>
+					<div className='Leads-img-container'>
+						<img src={ TanishkasFace }/>
+					</div>
+
+				</Styles.LeadsGallery>
+			</Styles.SpaceBackground>
+			<Contact/>
+		</Styles.MeetTheLeadsContainer>
+	)
+}
+
+export default MeetTheLeads

src/pages/meet-the-leads/MeetTheLeadsStyles.tsx

@@ -0,0 +1,109 @@
+import styled from 'styled-components'
+import { FONT_FAMILY } from '../../tools/Constants'
+import spaceBackground from '../../assets/pics/outreach/space-background.jpeg'
+
+export default class MeetTheLeadsStyles {
+	static readonly MeetTheLeadsContainer = styled.div`
+		display: grid;
+		grid-template-columns: 100%;
+		grid-template-rows: 
+			calc(var(--vh) * .2)    /* Intro heading */  
+			calc(var(--vh) * 2.39)   /* Outreach gallery and photo gallery */
+			max(calc(var(--vh) * .15), 100px);  /* Contact info */
+		justify-content: center;
+		align-content: center;
+
+		@media (max-width: 718px) {
+			display: grid;
+			grid-template-columns: 100%;
+			grid-template-rows: 
+			calc(var(--vh) * .2)    /* Intro heading */  
+			calc(var(--vh) * 2.65)   /* Outreach gallery and photo gallery */
+			max(calc(var(--vh) * .15), 100px);  /* Contact info */
+		justify-content: center;
+		align-content: center;
+
+		}
+
+
+	`
+
+	static readonly TitleContainer = styled.div`
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		& > .title {
+			${FONT_FAMILY.PAGE_TITLE}
+			font-size: calc(var(--vh) * .08);
+		}
+	`
+
+	static readonly LeadsGallery = styled.div`
+	    //grid of leads text and img squares
+		display: grid;
+		grid-template-columns: repeat(2	, minmax(0, 1fr));
+		grid-template-rows: calc(var(--vh) * .4) repeat(6, minmax(0, 1fr)); 
+		row-gap: 20px;
+		column-gap: 4%;
+		justify-items: center;
+		align-items: center;
+		text-align: center;
+		margin-top: auto;
+
+		& > h2 {
+			${FONT_FAMILY.TITLE}
+			grid-column-start: 1;
+			grid-column-end: 3;
+			text-align: center;
+			margin: 0;
+		}
+
+		& > .Leads-img-container {
+			height: 100%;
+			overflow: hidden;
+		}
+
+		& > .Leads-img-container > img,
+		& > .Leads-img-container > video {
+			width:100%;
+			min-height: 100%;
+			object-fit: cover;
+
+			@media (max-width: 718px) {
+				object-fit: cover;
+		}
+
+		}
+
+		& > .Leads-slide > h2 {
+			${FONT_FAMILY.SECONDARY_TITLE}
+			margin-bottom: 5%;
+		}
+
+		& > .Leads-slide > p {
+			padding-left: 20%;
+			padding-right: 20%;
+		}
+
+	`
+
+	static readonly SpaceBackground = styled.div`
+		background-image: url(${spaceBackground});
+		background-attachment: fixed;
+		background-position: center;
+		background-size: cover;
+		display: grid;
+		grid-template-columns: 100%;
+		grid-template-rows: calc(var(--vh) * 1.4) calc(var(--vh) * 1);
+		height: inherit;
+		justify-items: center;
+		align-items: center;
+
+
+	`
+
+
+}