From 87849f35718a33a60c367029ebc8fed1226f0caf Mon Sep 17 00:00:00 2001
From: zohair <Zohair.ul.hasan@gmail.com>
Date: Wed, 9 Mar 2022 19:32:20 -0500
Subject: [PATCH] added lia's changes
---
src/App.js | 3 +-
src/pages/about-us/about-us.js | 10 +++
src/pages/home/Home.js | 30 +++++---
src/pages/home/components/Banner.css | 12 +++
src/pages/home/components/Banner.js | 12 +++
src/pages/home/components/Hamburger.js | 77 +++++++++++++++++++
.../home/components/Hamburger.module.css | 55 +++++++++++++
7 files changed, 186 insertions(+), 13 deletions(-)
create mode 100644 src/pages/about-us/about-us.js
create mode 100644 src/pages/home/components/Banner.css
create mode 100644 src/pages/home/components/Banner.js
create mode 100644 src/pages/home/components/Hamburger.js
create mode 100644 src/pages/home/components/Hamburger.module.css
diff --git a/src/App.js b/src/App.js
index 83e49d5..2a1d90b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import { Switch, Route } from "react-router-dom"
import Home from "./pages/home/Home"
import Results from "./pages/results/Results"
import Recipe from "./pages/recipe/Recipe.js"
-
+import AboutUs from "./pages/about-us/about-us"
function App() {
return (
@@ -13,6 +13,7 @@ function App() {
<Route exact path="/"><Home /></Route>
<Route path="/results"><Results /></Route>
<Route path="/recipe/:id"><Recipe /></Route>
+ <Route path="/about"><AboutUs /></Route>
</Switch>
</div>
)
diff --git a/src/pages/about-us/about-us.js b/src/pages/about-us/about-us.js
new file mode 100644
index 0000000..632e0a6
--- /dev/null
+++ b/src/pages/about-us/about-us.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+function AboutUs() {
+ return (
+ <><h1>About Us</h1><h2>Data Statement</h2><p>Group L is committed to protecting the privacy and accuracy of confidential information to the extent possible, subject to provisions of state and federal law. Other than as required by laws that guarantee public access to certain types of information, or in response to subpoenas or other legal instruments that authorize access, personally-identifiable information is not actively shared. In particular, we do not re-distribute or sell personal information collected on our website.</p></>
+
+ )
+}
+
+export default AboutUs;
\ No newline at end of file
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
index 8130c9d..433c2a9 100644
--- a/src/pages/home/Home.js
+++ b/src/pages/home/Home.js
@@ -3,21 +3,27 @@ import Heading from "./components/Heading"
import Form from "./components/Form"
import Container from "@mui/material/Container";
import { Box } from '@mui/system';
+import Banner from "./components/Banner";
+import Hamburger from "./components/Hamburger";
function Home() {
return (
- <Container maxWidth="sm">
- <Box sx={{ my: 20 }}>
- <Heading
- variant="h2"
- sx={{
- my: 10,
- textAlign: "center"
- }}
- />
- <Form />
- </Box>
- </Container>
+ <>
+ <Hamburger />
+ <Banner />
+ <Container maxWidth="sm">
+ <Box sx={{ my: 20 }}>
+ <Heading
+ variant="h2"
+ sx={{
+ my: 10,
+ textAlign: "center"
+ }}
+ />
+ <Form />
+ </Box>
+ </Container>
+ </>
)
}
diff --git a/src/pages/home/components/Banner.css b/src/pages/home/components/Banner.css
new file mode 100644
index 0000000..f4ca5e4
--- /dev/null
+++ b/src/pages/home/components/Banner.css
@@ -0,0 +1,12 @@
+.videoWrapper {
+ position: relative;
+ padding-bottom: 5%; /* 16:9 */
+ height: 0;
+ }
+ .videoWrapper video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
\ No newline at end of file
diff --git a/src/pages/home/components/Banner.js b/src/pages/home/components/Banner.js
new file mode 100644
index 0000000..b4b4cb2
--- /dev/null
+++ b/src/pages/home/components/Banner.js
@@ -0,0 +1,12 @@
+import React from "react"
+import styles from "./Banner.css";
+
+function Banner() {
+ return <div className={styles.videoWrapper}>
+ <video autoPlay muted className={styles.video}>
+ <source src="banner.mov" type="video/mp4" />
+ </video>
+ </div>
+}
+
+export default Banner;
\ No newline at end of file
diff --git a/src/pages/home/components/Hamburger.js b/src/pages/home/components/Hamburger.js
new file mode 100644
index 0000000..2064537
--- /dev/null
+++ b/src/pages/home/components/Hamburger.js
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import styles from "./Hamburger.module.css";
+
+const Hamburger = () => {
+ const [translatePosition, setTranslatePosition] = useState({
+ transform: "translateX(-100%)",
+ });
+ const [open, setOpen] = useState(false);
+
+ const handleTranslate = () => {
+ console.log("onClick...");
+ if (!open) {
+ setTranslatePosition({
+ transform: "translateX(0)",
+ });
+ setOpen(!open);
+ } else {
+ setTranslatePosition({
+ transform: "translateX(-100%)",
+ });
+ setOpen(!open);
+ }
+ };
+ return (
+ <div className={styles.navContainer}>
+ <button className={styles.button} onClick={() => handleTranslate(!open)}>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="black"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ style={{ color: "black", width: "20px" }}
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M4 6h16M4 12h16M4 18h16"
+ />
+ </svg>
+ </button>
+ <div className={styles.leftSidebar} style={translatePosition}>
+ <button
+ className={styles.closeButton}
+ onClick={() => handleTranslate(!open)}
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ className={styles.closeButtonSVG}
+ style={{ color: "black", width: "20px" }}
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M6 18L18 6M6 6l12 12"
+ />
+ </svg>
+ </button>
+ <Link to="/" className={styles.link}>
+ Home
+ </Link>
+ <Link to="/about" className={styles.link}>
+ About Us
+ </Link>
+ </div>
+ </div>
+ );
+};
+
+export default Hamburger;
\ No newline at end of file
diff --git a/src/pages/home/components/Hamburger.module.css b/src/pages/home/components/Hamburger.module.css
new file mode 100644
index 0000000..7bfa725
--- /dev/null
+++ b/src/pages/home/components/Hamburger.module.css
@@ -0,0 +1,55 @@
+.navContainer {
+ width: 100%;
+
+ background: transparent;
+ }
+
+ .button {
+ background: transparent;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ z-index: 10;
+ }
+
+ .leftSidebar {
+ display: flex;
+ flex-direction: column;
+ background: white;
+ width: 20%;
+ justify-content: start;
+ position: fixed;
+ padding: 40px 20px;
+ height: 100vh;
+ z-index: 20;
+ box-shadow: 0 8px 30px rgb(0, 0, 0, 0.12);
+ transition: all 0.3s ease-in-out;
+
+ /* transform: translateX(-100%); */
+ }
+
+ .link {
+ box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
+ rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ text-decoration: none;
+ color: black;
+ }
+
+ .closeButton {
+ background: none;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ }
+
+ .closeButtonSVG {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
\ No newline at end of file
--
GitLab