Merge branch 'main' of https://github.com/acmhack/landing-page

acmhack · Jun 28, 2023 · 4b7b32e · 4b7b32e
2 parents 53e0fa2 + 7453886
commit 4b7b32e
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 48 deletions.
diff --git a/pages/api/Email.tsx b/pages/api/Email.tsx
@@ -6,10 +6,9 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     try {
         const client = await clientPromise;
         const db = client.db("pickhacks_2024");
-        const body = req.query;
-
+
         const post = await db.collection("MailingList").insertOne({
-            email: body.email,
+            email: req.body.email,
         });
 
         res.json(post)

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,14 +1,38 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
-import React from 'react';
-import styles from '../styles/Home.module.css';
-import { useMediaQuery } from 'usehooks-ts';
 import { IoSendSharp } from 'react-icons/io5';
-import { MouseParallax, ScrollParallax } from 'react-just-parallax';
+import { MouseParallax } from 'react-just-parallax';
+import { useMediaQuery } from 'usehooks-ts';
+import styles from '../styles/Home.module.css';
+import { useState } from 'react';
+import axios from 'axios';
 
 const Home: NextPage = () => {
-	const matches = useMediaQuery('(min-width: 950px)');
+	const matches = useMediaQuery('(max-width: 1440px)');
+	const [email, setEmail] = useState<string>('');
+	const [success, setSuccess] = useState<boolean>(false);
+	const [error, setError] = useState<boolean>(false);
+
+
+	const submitEmail = () => {
+		if (email.toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)){
+			axios.post('/api/Email', {
+				email
+			})
+			.then((resp) => {
+				setEmail('');
+				setError(false);
+				setSuccess(true);
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+		}
+		else {
+			setError(true);
+			setSuccess(false);
+		}
+	}
 
 	return (
 		<div className={styles.container}>
@@ -27,20 +51,20 @@ const Home: NextPage = () => {
 					</div>
 					<div className={styles.mailing}>
 						<p className={styles.text}>Interested? Join our mailing list!</p>
-						<form action="/api/Email">
+						<form>
 							<input
 								type="text"
 								placeholder="Enter email address"
-								id="email"
-								name="email"
-								pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
-								title="please submit a valid email address"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
 								required
 							/>
-							<button className={styles.submit}>
+							<button className={styles.submit} onClick={(e) => {e.preventDefault(); submitEmail()}}>
 								<IoSendSharp color="#0A4C72" />
 							</button>
 						</form>
+						{success && <p className={styles.success}>Your email has successfully been added!</p>}
+						{error && <p className={styles.error}>Your email is invalid. Please try again.</p>}
 					</div>
 					<div className={styles.socials}>
 						<p>Check out our socials</p>
@@ -57,17 +81,17 @@ const Home: NextPage = () => {
 						</div>
 					</div>
 				</div>
-				{matches && (
-					<div style={{ width: '40%', height: '100%' }}>
-						<MouseParallax
-                            strength={.01}
-                            isAbsolutelyPositioned
-                        >
-							<object
-								type="image/svg+xml"
-								data="line.svg"
-								className={styles.svg}
-							></object>
+				{!matches && (
+					<div
+						style={{ width: '40%', height: '100%', overflow: 'visible' }}
+						ref={(elem) => {
+							if (elem) {
+								(elem.children[0] as any).style.overflow = 'visible';
+								(elem.children[0].children[0] as any).style.overflow = 'visible';
+							}
+					}}>
+						<MouseParallax strength={0.03} isAbsolutelyPositioned>
+							<iframe src="line.svg" height={1125} width={2350} className={styles.svg}></iframe>
 						</MouseParallax>
 					</div>
 				)}
@@ -76,3 +100,4 @@ const Home: NextPage = () => {
 	);
 };
 export default Home;
+
diff --git a/public/line.svg b/public/line.svg
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -20,17 +20,19 @@
 	justify-content: center;
 	align-items: center;
 	flex-wrap: wrap;
+	z-index: 99;
 }
 
 .svg {
-  position: absolute;
-  top: 0;
-  right: -5em;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  width: 100em;
-  overflow: visible;
+	position: absolute;
+	top: -8em;
+	right: -10em;
+	margin: 0;
+	padding: 0;
+	pointer-events: none;
+	width: 120em;
+	overflow: visible;
+	border: none;
 }
 
 .logo {
@@ -48,6 +50,7 @@
 	align-items: center;
 	gap: 3.75em;
 	height: 100%;
+	z-index: 999;
 }
 
 .main p {
@@ -170,15 +173,15 @@
 	justify-content: center;
 	outline: none;
 	height: 100%;
-	width: 21em;
+	width: 100%;
 	padding: 0 1em;
 	color: #93c0c6;
 	font-weight: bold;
 	font-size: 1.1em;
 }
 
 .submit {
-	border-radius: 0.625em;
+	border-radius: 0.8em;
 	outline: none;
 	background-image: linear-gradient(to right, #61aa6d, #4294bf, #4294bf, #61aa6d);
 	background-size: 300% 100%;
@@ -207,7 +210,29 @@
 	font-family: 'Gilam Bold';
 }
 
-@media screen and (max-width: 949px) {
+.success {
+	color: #77b770;
+}
+
+.error {
+	color: #FF6565;
+}
+
+@media screen and (max-width: 1600px) {
+	.svg {
+		width: 110em;
+	}
+}
+
+@media screen and (max-width: 1450px) {
+	.svg {
+		width: 100em;
+		top: -10em;
+	}
+}
+
+
+@media screen and (max-width: 1440px) {
 	.info {
 		width: 100%;
 	}
@@ -224,12 +249,12 @@
 		top: 1em;
 	}
 
-  .info {
-    gap: 4em;
-  }
+	.info {
+		gap: 4em;
+	}
 
 	.title {
-    font-size: 5em;
+		font-size: 5em;
 	}
 
 	.textContainer {
@@ -246,12 +271,13 @@
 		width: 25em;
 	}
 
-  .submit {
-    border-radius: 0.75em;
-  }
+	.submit {
+		border-radius: 0.75em;
+	}
 
 	.socials {
 		margin-top: auto;
-    font-size: 1.5em;
+		font-size: 1.5em;
 	}
 }
+
diff --git a/styles/globals.css b/styles/globals.css
@@ -4,7 +4,6 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    font-size: 1vw;
 }
 
 a {

diff --git a/yarn.lock b/yarn.lock
@@ -2427,4 +2427,4 @@ yocto-queue@^0.1.0:
 zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
-  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+  integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==