Merge pull request #19 from Team5599/main

Merge update into the beta website
Team5599 · Nov 9, 2023 · 015db17 · 015db17
2 parents a529301 + 6820cc0
commit 015db17
Show file tree

Hide file tree

Showing 26 changed files with 2,029 additions and 206 deletions.
diff --git a/.env.local.template b/.env.local.template
@@ -0,0 +1,5 @@
+# .env.local
+
+GOOGLE_CALENDAR_API=""
+
+# All .env variables are loaded in heroku's production environment. These exist only to help with local development.
diff --git a/app/AboutUs/page.js b/app/AboutUs/page.js
@@ -29,7 +29,7 @@ export default function AboutUs() {
 					</h1>
 				</div>
 			</Header>
-			<SubheaderShape>
+			<SubheaderShape size='sm'>
 				<div className='container'>
 					<p className='subheading' style={{color : '#fff'}}>
 						{ /* eslint-disable-next-line react/no-unescaped-entities */ }

diff --git a/app/Calendar/page.js b/app/Calendar/page.js
@@ -0,0 +1,63 @@
+'use client'
+
+import styles from './page.module.css'
+
+import { useState, useEffect } from 'react'
+
+import Navbar from '@components/Navbar/Navbar'
+import Footer from '@components/Footer/Footer'
+
+import GoogleCalendar from "@ericz1803/react-google-calendar";
+
+const API_KEY = ""
+const calendars = [
+	{
+		calendarID : '[email protected]'
+	}
+]
+
+export default function Calendar() {
+
+	const [loaded, setLoaded] = useState(false);
+
+	useEffect(() => {
+		setLoaded(true);
+	}, [])
+
+
+	return (
+		<div>
+			<Navbar/>
+			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 120, paddingBottom : 120, maxWidth : 1200, justifyContent : 'center',  textAlign : 'justify'}}>
+				{
+					(loaded) ?
+					<GoogleCalendar calendars={calendars}/>
+					: <div
+						style={{
+							backgroundColor : '#eee',
+							width : '100%',
+							maxWidth : 1200,
+							height : '50vh',
+							display: 'flex',
+							justifyContent : 'center',
+							alignItems : 'center'
+						}}
+					>
+						<span
+							style={{
+								fontSize : 22,
+								fontWeight : 600,
+								backgroundColor : '#000',
+								padding : '20px 80px',
+								color : '#fff'
+							}}
+						>
+							Loading Calendar
+						</span>
+					</div>
+				}
+			</div>
+			<Footer/>
+		</div>
+	)
+}
diff --git a/app/Calendar/page.module.css b/app/Calendar/page.module.css
@@ -0,0 +1,5 @@
+.headerOne {
+    background-image : url('/images/headers/header.jpg');
+    background-position: 50% 80%;
+    filter: brightness(75%) contrast(115%);
+}
diff --git a/app/Contact/page.js b/app/Contact/page.js
@@ -1,31 +1,273 @@
+'use client'
+
 import styles from './page.module.css'
 
 import Navbar from '@components/Navbar/Navbar'
 import Header from '@components/Header/Header'
 import SubheaderShape from '@components/SubheaderShape/SubheaderShape'
+import Footer from '@components/Footer/Footer'
+
+import {useRef, useState} from 'react';
+
+const contactInformation = [
+	{
+		icon : "PHONE",
+		text : "(347) 858 5959"
+	},
+	{
+		icon : "EMAIL",
+		text : "[email protected]"
+	},
+	{
+		icon : "PIN",
+		text : "123 ADDRESS LANE\nBAYSIDE, NEW YORK 11365"
+	}
+]
+
+const ContactInput = ({inputRef, onChange, value, label}) => {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection : 'column',
+				flex : 1
+			}}
+		>
+			<span
+				style={{
+					fontSize: '0.8rem',
+					fontWeight : 600
+				}}
+			>
+				{label}
+			</span>
+			<input
+				ref={inputRef}
+				onChange={(e, value) => {
+					onChange(value);
+				}}
+				value={value}
+				style={{
+					border : 0,
+					borderStyle : null,
+					borderBottomWidth : 2,
+					borderBottomColor : '#ddd',
+					height : 32,
+					padding : 0,
+					margin : 0,
+					fontSize : 22
+				}}
+			/>
+		</div>
+	)
+}
+
+const ContactSubjectContainer = () => {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection : 'column',
+				gap : 10
+			}}
+		>
+			<span
+				style={{
+					fontSize: '0.8rem',
+					fontWeight : 600
+				}}
+			>
+				Subject
+			</span>
+			<div
+				style={{
+					display: 'flex',
+					justifyContent : 'space-between',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						gap : 5,
+						justifyContent : 'center'
+					}}
+				>
+					<input type="radio" name="choice" value="general" style={{transform: 'scale(1)'}}/>
+					<span
+						style={{
+							fontSize : 14,
+							marginTop : 2
+						}}
+					>
+						General Inquiry
+					</span>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						gap : 5,
+						justifyContent : 'center'
+					}}
+				>
+					<input type="radio" name="choice" value="sponsorship" style={{transform: 'scale(1)'}}/>
+					<span
+						style={{
+							fontSize : 14,
+							marginTop : 2
+						}}
+					>
+						Sponsorship
+					</span>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						gap : 5,
+						justifyContent : 'center'
+					}}
+				>
+					<input type="radio" name="choice" value="technical" style={{transform: 'scale(1)'}}/>
+					<span
+						style={{
+							fontSize : 14,
+							marginTop : 2
+						}}
+					>
+						Technical Inquiry (?)
+					</span>
+				</div>
+			</div>
+		</div>
+	)
+}
 
 export default function Contact() {
+
+	const inputFirstNameRef = useRef(null);
+	const inputLastNameRef = useRef(null);
+	const inputEmailRef = useRef(null);
+	const inputPhoneRef = useRef(null);
+
+
+	const [inputFirstName, setInputFirstName] = useState("");
+	const [inputLastName, setInputLastName] = useState("");
+	const [inputEmail, setInputEmail] = useState("");
+	const [inputPhone, setInputPhone] = useState("");
+
 	return (
 		<div>
 			<Navbar/>
-			<Header size='lg' imageClass={styles.headerOne} gradient={true}>
+			<Header size='sm' imageClass={styles.headerOne} gradient={true}>
 				<div className='container restrictHeader' style={{color : '#fff'}}>
 					<h1 style={{fontWeight : 900, marginBottom : 20}}>
-						WE ARE THE SENTINELS
+						Contact Us
 					</h1>
-					<h2>
-						FIRST (C) Robotics Competition Team 5599, from Benjamin N. Cardozo High School in Bayside, New York
-					</h2>
 				</div>
 			</Header>
-			<SubheaderShape>
-				<div className='container'>
-					<p className='subheading' style={{color : '#fff'}}>
-						{ /* eslint-disable-next-line react/no-unescaped-entities */ }
-						The Sentinels are Benjamin N. Cardozo High School's Robotics Team. We compete in various annual robotics competitions against high schools across the globe, raising awareness for Science, Technology, Engineering, and Mathematics (STEM), along with teaching students aspects behind business and marketing, logistics, and media. We also participate in various community and school events.
-					</p>
+			<SubheaderShape size='sm'/>
+			<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify', backgroundColor : '#fdfdfd'}}>
+				<div
+					style={{
+						display: 'flex',
+						minHeight : 500,
+						outline : '1px solid #000',
+						marginTop : 80,
+						marginBottom : 80
+					}}
+				>
+					<div
+						style={{
+							backgroundColor : '#000',
+							flex : 2,
+							color : '#fff',
+							padding : 40,
+							display: 'flex',
+							flexDirection : 'column',
+							justifyContent : 'space-between'
+						}}
+					>
+						<div>
+							<h5>
+								Contact Information
+							</h5>
+						</div>
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								gap : 40
+							}}
+						>
+							{
+								contactInformation.map((contactItem, index) => {
+									return <div
+										key={index}
+										style={{
+											display: 'flex',
+											gap : 20,
+											alignItems : 'center'
+										}}
+									>
+										<span
+											style={{
+												width : 40,
+												height : 40,
+												backgroundColor: '#aaa'
+											}}
+										>
+											ICON
+										</span>
+										<span
+											style={{
+												whiteSpace: 'pre'
+											}}
+										>
+											{contactItem.text}
+										</span>
+									</div>
+								})
+							}
+						</div>
+						<div>
+							<span>
+								Social Media Icons
+							</span>
+						</div>
+
+					</div>
+					<div
+						style={{
+							backgroundColor: '#fff',
+							flex : 3,
+							padding : 40,
+							display: 'flex',
+							flexDirection : 'column',
+							gap : 40
+						}}
+					>
+						<div
+							style={{
+								display: 'flex',
+								gap : 40
+							}}
+						>
+							<ContactInput inputRef={inputFirstNameRef} onChange={setInputFirstName} value={inputFirstName} label={"First Name"}/>
+							<ContactInput inputRef={inputLastNameRef} onChange={setInputLastName} value={inputLastName} label={"Last Name"}/>
+						</div>
+						<div
+							style={{
+								display: 'flex',
+								gap : 40
+							}}
+						>
+							<ContactInput inputRef={inputEmailRef} onChange={setInputEmail} value={inputEmail} label={"Email Address"}/>
+							<ContactInput inputRef={inputPhoneRef} onChange={setInputPhone} value={inputPhone} label={"Phone Number (Optional)"}/>
+						</div>
+						<ContactSubjectContainer/>
+					</div>
 				</div>
-			</SubheaderShape>
+			</div>
+			<Footer/>
 		</div>
 	)
 }