Merge pull request #47 from templerobotics/addedNewLeads

Added new leads

Author: monty2464

src/assets/pics/Leads/Brian_face.png

@@ -13,10 +13,11 @@ import Styles from './MeetTheLeadsStyles'
 import TanishkasFace from '../../assets/pics/Leads/Tanishkas_face.jpg'
 import RoccosFace from '../../assets/pics/Leads/roccos_face.jpg'
 import MalinsFace from '../../assets/pics/Leads/Malins_face.jpg'
-import BriansFace from '../../assets/pics/Leads/Brians_face.jpg'
+import BriansFace from '../../assets/pics/Leads/Brian_face.png'
 import AlessiasFace from '../../assets/pics/Leads/Alessia_headshot.png'
 import JonahsFace from '../../assets/pics/Leads/Jonah_Face.jpg'
 import JadensFace from '../../assets/pics/Leads/Jadens_face.jpg'
+import JavisFace from '../../assets/pics/Leads/Javi_face.png'
 // 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
@@ -93,6 +94,15 @@ const MeetTheLeads = (): React.ReactElement => {
 					<div className='Leads-img-container'>
 						<img src={ JonahsFace }/>
 					</div>
+					<div className='Leads-img-container'>
+						<img src={ JavisFace }/>
+					</div>
+					<div className='leads-slide'>
+						<h2>Meet our Chief of Marketing & Development!</h2>
+						<p>
+							Javier Price-Butler
+						</p>
+					</div>
 				</Styles.LeadsGallery>
 			</Styles.SpaceBackground>
 			<Contact/>

src/assets/pics/Leads/Brians_face.jpg

@@ -8,7 +8,7 @@ export default class MeetTheLeadsStyles {
 		grid-template-columns: 100%;
 		grid-template-rows:
 			calc(var(--vh) * .2)    /* Intro heading */
-			calc(var(--vh) * 2.39)   /* Outreach gallery and photo gallery */
+			calc(var(--vh) * 0.3904 * 7)   /* Outreach gallery and photo gallery */
 			max(calc(var(--vh) * .15), 100px);  /* Contact info */
 		justify-content: center;
 		align-content: center;
@@ -17,15 +17,12 @@ export default class MeetTheLeadsStyles {
 			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;
-
+				calc(var(--vh) * .2)    /* Intro heading */
+				calc(var(--vh) * 0.4282 * 7)   /* Outreach gallery and photo gallery */
+				max(calc(var(--vh) * .15), 100px);  /* Contact info */
+			justify-content: center;
+			align-content: center;
 		}
-
-
 	`
 
 	static readonly TitleContainer = styled.div`
@@ -45,20 +42,34 @@ export default class MeetTheLeadsStyles {
 	    //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));
+		grid-template-rows: calc(var(--vh) * .4) repeat(7, minmax(0, 1fr));
 		row-gap: 20px;
 		column-gap: 4%;
 		justify-items: center;
 		align-items: center;
 		text-align: center;
 		margin-top: auto;
 
-		& > h2 {
+		& p {
+			font-size: calc(var(--vh) * 0.023);
+			margin-top: 50px;
+			@media (max-width: 718px) {
+				font-size: calc(var(--vh) * 0.023);
+				margin-top: 10px;
+			}
+		}
+
+
+		& h2 {
 			${FONT_FAMILY.TITLE}
+			font-size: calc(var(--vh) * 0.042);
 			grid-column-start: 1;
 			grid-column-end: 3;
 			text-align: center;
-			margin: 0;
+			@media (max-width: 718px) {
+				font-size: calc(var(--vh) * 0.042);
+			}
+			margin-bottom: 10px;
 		}
 
 		& > .Leads-img-container {
@@ -88,6 +99,7 @@ export default class MeetTheLeadsStyles {
 			padding-right: 20%;
 		}
 
+		
 	`
 
 	static readonly SpaceBackground = styled.div`

src/assets/pics/Leads/Javi_face.png

@@ -8,11 +8,12 @@ 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: '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: 'Jonah Tesler', description: 'Shop Manager' }
+	{ 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[8], title: 'Jonah Tesler', description: 'Shop Manager' }
 ]
 
 export default class RoboticMiningStyles {

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

@@ -34,9 +34,10 @@ 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/Brians_face.jpg'),
+	require('../assets/pics/Leads/Brian_face.png'),
 	require('../assets/pics/Leads/Tanishkas_face.jpg'),
 	require('../assets/pics/Leads/Jonah_Face.jpg')
 ]