Katelyn/update about format

package.json

@@ -38,6 +38,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-scroll-parallax": "^3.4.2",
     "react-slick": "^0.28.1",
     "sharp": "^0.30.5",
     "slick-carousel": "^1.8.1",

src/components/PhotoPage/Banner.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { ParallaxBanner } from 'react-scroll-parallax';
+// import { ParallaxBannerLayer } from 'react-scroll-parallax';
+// import { Parallax } from 'react-scroll-parallax';
+// import { HackGroupPhoto } from './hackGroup.jpg';
+// import { graphql } from 'gatsby';
+import PageTitle from '../PageTitle/PageTitle';
+
+const useStyles = makeStyles(theme => ({
+	container: {
+		marginTop: theme.spacing(4),
+		marginBottom: theme.spacing(4),
+		width: '0.7',
+		height: '400px',
+		margin: 'auto',
+		// marginTop: '55%',
+		position: 'relative',
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	text: {
+		display: 'flex',
+		textAlign: 'center',
+		marginLeft: theme.spacing(4),
+		marginRight: theme.spacing(4),
+		fontFamily: theme.typography.body1.fontFamily,
+		fontSize: theme.typography.fontSize * 1.3,
+		lineHeight: 1.76,
+		[theme.breakpoints.down('xs')]: {
+			fontSize: theme.typography.fontSize,
+			lineHeight: 1.57
+		}
+	},
+	wordmark: {
+		// height: 385.25,
+		width: 'auto',
+		overflow: 'auto',
+		[theme.breakpoints.down('sm')]: {
+			width: 240
+		},
+		[theme.breakpoints.down('xs')]: {
+			width: 180,
+			display: 'block'
+		}
+	}
+}));
+
+export function Banner() {
+	const classes = useStyles();
+	return (
+		<div>
+			<ParallaxBanner
+				layers={[
+					{ image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg', speed: -30 },
+					{
+						speed: -20,
+						children: <PageTitle align='center'>Who We Are</PageTitle>
+					}
+					//   { image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png", speed: -10 },
+				]}
+				className={classes.container}
+			>
+				<div className={classes.container}>
+					<PageTitle align='center'>Who We Are</PageTitle>
+					<p className={classes.text}>
+						We aim to empower and connect the UCLA community by providing
+						the means to build amazing things through code.
+					</p>
+				</div>
+			</ParallaxBanner>
+		</div>
+	);
+}
+
+Banner.propTypes = {
+	classes: PropTypes.object.isRequired
+};
+
+export default Banner;

src/components/PhotoPage/PhotoPage.js

@@ -10,7 +10,9 @@ import Grid from '@material-ui/core/Grid';
 import Profile from './Profile';
 import PageTitle from '../PageTitle/PageTitle';
 
-import { teamIntro, officers } from '../../data/profiles';
+import { ourMission, ourValues, officers } from '../../data/profiles';
+import Banner from './Banner';
+import { ParallaxProvider } from 'react-scroll-parallax';
 
 const styles = theme => ({
 	container: {
@@ -42,6 +44,23 @@ const styles = theme => ({
 			fontSize: theme.typography.fontSize * 1.2,
 			borderWidth: `0 0 ${theme.typography.fontSize * 0.6}px 0`
 		}
+	},
+	values: {
+		fontFamily: ['Poppins', 'sans-serif'],
+		fontWeight: 700,
+		fontSize: theme.typography.fontSize * 3,
+		// borderStyle: 'solid',
+		// borderWidth: `0 0 ${theme.typography.fontSize * 1.5}px 0`,
+		// borderColor: theme.palette.secondary.main,
+		width: 'fit-content',
+		margin: theme.spacing(4, 'auto'),
+		[theme.breakpoints.down('xs')]: {
+			fontSize: theme.typography.fontSize * 1.2,
+			borderWidth: `0 0 ${theme.typography.fontSize * 0.6}px 0`
+		}
+	},
+	mission: {
+		// center
 	}
 });
 
@@ -94,8 +113,12 @@ function PhotoPage({ classes }) {
 
 	return (
 		<Container maxWidth="md" classes={{ root: classes.content }}>
+			<ParallaxProvider><Banner /></ParallaxProvider>
+			{/* 385.25 px height */}
 			<PageTitle align='center'>Who We Are</PageTitle>
-			{teamIntro}
+			<div className={classes.mission}>{ourMission}</div>
+			<div className={classes.values}>Our Values</div>
+			{ourValues}
 			<div className={classes.team}>The Team</div>
 			<Grid container>
 				{profiles}

src/data/profiles.js

@@ -1,8 +1,9 @@
-const teamIntro = `We are a group of hackers, designers, and engineers all working to improve UCLA's
-hacking community. We believe in moving fast, having fun, and being passionate
-about using technology to solve problems that are relevant to us. We have a high
-bar for success, and are willing to work incredibly hard, balancing school and
-many other things, to improve the experience of other students around us.`;
+const ourMission = `We aim to empower and connect the UCLA community by providing the means to build
+amazing things through code.`;
+const ourValues = `We hold ourselves to a high bar of success in all of our endeavors—whether this
+is organizing hackathons or crafting workshops. We work hard and emphasize a good balance between
+learning new things and taking time to chill. Through it all, we value moving fast, having fun,
+and creating cool things with our homies. 😎`;
 
 /* eslint-disable max-len */
 // The id field must be sync'd with the name of the file.
@@ -107,16 +108,6 @@ const officers = [
 		for ChatGPT and full stack development. I enjoy making piano covers and partying with friends. I
 		also commonly take late night walks on the UCLA campus.`
 	},
-	{
-		role: 'Officer',
-		name: 'Anan Wang',
-		pronouns: 'he/him',
-		id: 'anan',
-		description: `Hi there! My name is Anan and I'm a 4th-year CS major. I'm an avid snowboarder
-		and outdoor enthusiast. When I'm not shredding the slopes, you can find me planning my next adventure.
-		I'm always up for a good movie or a game night with friends. And of course, I never turn down a slice
-		of pizza or boba. Let's ChatGPT and see where the conversation takes us :P`
-	},
 	{
 		role: 'Officer',
 		name: 'Jenna Wang',
@@ -158,4 +149,4 @@ const officers = [
 ];
 /* eslint-enable max-len */
 
-module.exports = { teamIntro, officers };
+module.exports = { ourMission, ourValues, officers };