Fix meet the team

src/pages/general/photo-gallery/PhotoGallery.tsx

@@ -74,7 +74,7 @@ export default class PhotoGallery extends React.Component<PhotoGalleryProps, {cu
 		const width = document.documentElement.style.getPropertyValue('--vh')
 
 		return (
-			<Styles.GalleryContainer id={this.props.id}>
+			<Styles.GalleryContainer className={this.props.className} id={this.props.id}>
 				<Styles.Title>{this.props.title ?? 'Photo Gallery'}</Styles.Title>
 				<Styles.Chevron as={BsChevronLeft} size={parseFloat(width) * 0.05} onClick={this.slideLeft}/>
 				<Styles.SlideContainer gridColumns={gridColumns}>
@@ -101,7 +101,7 @@ class GallerySlide extends React.Component<GallerySlideProps, never> {
 					<div className='gallery-image-container'>
 						<img src={gallery.image}/>
 					</div>
-					<h3>{gallery.title}</h3>
+					<h3 className='gallery-title'>{gallery.title}</h3>
 					<p>{gallery.description}</p>
 				</Styles.ImageContainer>
 			)

src/pages/general/photo-gallery/PhotoGalleryStyles.tsx

@@ -11,6 +11,7 @@ export interface GalleryImage {
 export type PhotoGalleryProps = {
 	id?: string,
 	title?: string,
+	className?: string,
 	galleryInfo: GalleryImage[]
 }
 
@@ -69,15 +70,17 @@ export default class PhotoGalleryStyles {
 
 		& > h3 {
 			${FONT_FAMILY.SECONDARY_TITLE}
+			font-size: calc(var(--vh) * 0.03);
 			text-align: center;
 		}
 
 		& > .gallery-image-container {
 			overflow: hidden;
+			border-radius: calc(var(--vh) * 0.01);
 		}
 
 		& > .gallery-image-container > img {
-			width:100%;
+			width: 100%;
 			min-height: 100%;
 			object-fit: cover;
 		}

src/pages/robotic-mining/RoboticMining.tsx

@@ -6,7 +6,7 @@ import PhotoGallery from '../general/photo-gallery/PhotoGallery'
 import Contact from '../general/contact/Contact'
 
 // Custom styles
-import Styles from './RoboticMiningStyles'
+import Styles, { MEET_THE_TEAM } from './RoboticMiningStyles'
 import GALLERY_INFO from '../../data/RoboticsPhotoGalleryInfo'
 
 // Images
@@ -17,7 +17,6 @@ import outreachPhoto2 from '../../assets/pics/outreach/expo.jpeg'
 import outreachPhoto3 from '../../assets/pics/outreach/interview.jpeg'
 import title from '../../assets/pics/logos/robotics-red.png'
 import RmcDescription from './SectionDescription'
-//import JaredsFace from '../../assets/pics/Leads/jareds_face.jpg'
 
 const RoboticMining = (): React.ReactElement => {
 	return (
@@ -43,6 +42,8 @@ const RoboticMining = (): React.ReactElement => {
 				video/>
 
 			<Styles.SpaceBackground>
+				<Styles.MeetTheTeam className='meet-the-team-gallery' galleryInfo={ MEET_THE_TEAM } title={ 'Meet the Team' }/>
+
 				<Styles.OutreachGallery>
 					<h2>Outreach and Events</h2>
 					<div className='outreach-slide'>

src/pages/robotic-mining/RoboticMiningStyles.tsx

@@ -1,6 +1,19 @@
 import styled from 'styled-components'
-import { FONT_FAMILY } from '../../tools/Constants'
+import { FONT_FAMILY, RMC_TEAM } from '../../tools/Constants'
+import { GalleryImage } from '../general/photo-gallery/PhotoGalleryStyles'
 import spaceBackground from '../../assets/pics/outreach/space-background.jpeg'
+import PhotoGallery from '../general/photo-gallery/PhotoGallery'
+
+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: 'Jared Levin', description: 'Electrical Lead' },
+	{ image: RMC_TEAM[4], title: 'Alessia Smith', description: 'Mechanical Lead' },
+	{ image: RMC_TEAM[5], title: 'Nasier Fowlkes', description: 'Web Manager' },
+	{ image: RMC_TEAM[6], title: 'Brian Ervin', description: 'Programming Lead' },
+	{ image: RMC_TEAM[7], title: 'Tanishka Shah', description: 'Project Manager' }
+]
 
 export default class RoboticMiningStyles {
 	static readonly RmcContainer = styled.div`
@@ -9,7 +22,7 @@ export default class RoboticMiningStyles {
 		grid-template-rows: 
 			calc(var(--vh) * .4)    /* Intro heading */
 			calc(var(--vh) * .4)    /* Robot and competition description */
-			calc(var(--vh) * 1.7)   /* Outreach gallery and photo gallery */
+			calc(var(--vh) * 2.15)  /* Outreach gallery and photo gallery */
 			max(calc(var(--vh) * .15), 100px);  /* Contact info */
 		justify-content: center;
 		align-content: center;
@@ -90,8 +103,14 @@ export default class RoboticMiningStyles {
 		background-size: cover;
 		display: grid;
 		grid-template-columns: 100%;
-		grid-template-rows: calc(var(--vh) * 1.2) calc(var(--vh) * 0.5);
+		grid-template-rows: calc(var(--vh) * 0.45) calc(var(--vh) * 1.2) calc(var(--vh) * 0.5);
 		justify-items: center;
 		align-items: center;
 	`
+
+	static readonly MeetTheTeam = styled(PhotoGallery)`
+		& .gallery-title {
+			font-size: calc(var(--vh) * .02) !important;
+		}
+	`
 }

src/pages/sponsors/Sponsors.tsx

@@ -22,7 +22,7 @@ const Sponsors = (): React.ReactElement => {
 				<h2 className='title'>Sponsors</h2>
 				<AiOutlineDash/>
 			</Styles.TitleContainer>
-			<div className='img-container centered-img'>
+			<div className='img-container' id='centered-img'>
 				<h1 className='title'>Current Sponsors</h1>
 				<Button source={'https://forms.gle/pAfv3VBYJJXooiU38'}
 					text='become a sponsor' size='large' className='becomeSponsor'/>
@@ -34,7 +34,7 @@ const Sponsors = (): React.ReactElement => {
 				<Amtrack/>
 			</div>
 
-			<div className='img-container centered-img'>
+			<div className='img-container' id='centered-img'>
 				<h1 className='title'>Previous Sponsors</h1>
 			</div>
 

src/pages/sponsors/SponsorsStyles.tsx

@@ -5,7 +5,7 @@ export class SponsorImages {
 	static readonly arrow = require('../../assets/pics/sponsors/arrow.png')
 	static readonly nasa = require('../../assets/pics/sponsors/nasa-name.png')
 	static readonly hillock = require('../../assets/pics/sponsors/hillock-anodizing.png')
-	static readonly Amtrack = require('../../assets/pics/sponsors/Amtrack-png.svg')
+	static readonly Amtrack = require('../../assets/pics/sponsors/Amtrak.svg')
 }
 
 export default class SponsorsStyles {
@@ -42,13 +42,13 @@ export default class SponsorsStyles {
 			text-align: center;
 		}
 
-        .centered-img {
+        & > #centered-img {
             background: #000000a0;
-            display: 'flex';
-            justify-content: 'center';
-            align-items: 'center';
-            flex-direction: 'column';
-			row-gap: '3rem';
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+			row-gap: 3rem;
         }
 	`
 

src/tools/Constants.tsx

@@ -30,6 +30,17 @@ export class COLORS {
 	static readonly SECONDARY_SCROLLBAR: Color = '#9d22357f'
 }
 
+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/jareds_face.jpg'),
+	require('../assets/pics/Leads/Alessia_headshot.png'),
+	require('../assets/pics/Leads/Nasiers_face.jpg'),
+	require('../assets/pics/Leads/Brians_face.jpg'),
+	require('../assets/pics/Leads/Tanishkas_face.jpg')
+]
+
 export const RMC_PHOTO_GALLERY = [
 	require('../assets/pics/photo-gallery/rmc/comp-team-2023.jpg'),
 	require('../assets/pics/photo-gallery/rmc/arena-3.jpeg'),
@@ -102,6 +113,7 @@ export class FONT_FAMILY {
 		font-size: calc(var(--vh) * .05);
 		letter-spacing: 1px;
 		line-height: 1.1;
+		margin: 0;
 	`
 
 	static readonly SECONDARY_TITLE = `