From aeadaf23feba393da5eb6b11e560fea15e71108d Mon Sep 17 00:00:00 2001
From: Rupam Barui <rupambarui.17@gmail.com>
Date: Thu, 6 Jun 2024 21:03:34 +0530
Subject: [PATCH] added contact page, nav bar, and preloader

---
 src/App.js                             |  16 ++--
 src/Layout.js                          |   2 +-
 src/components/NavBar/NavBar.jsx       | 114 +++++++++++++++++++++++--
 src/components/PreLoader/PreLoader.css |  98 +++++++++++++++++++++
 src/components/PreLoader/PreLoader.jsx |  24 ++++--
 src/pages/About.jsx                    |   9 ++
 src/pages/Contact.jsx                  |  92 ++++++++++++++++++++
 7 files changed, 338 insertions(+), 17 deletions(-)
 create mode 100644 src/components/PreLoader/PreLoader.css
 create mode 100644 src/pages/About.jsx
 create mode 100644 src/pages/Contact.jsx

diff --git a/src/App.js b/src/App.js
index 06c8761..e568d0a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,7 @@
 import { Route, Routes } from "react-router-dom";
 import Layout from "./Layout";
+import About from "./pages/About";
+import Contact from "./pages/Contact";
 import Home from "./pages/Home";
 
 function App() {
@@ -8,18 +10,22 @@ function App() {
 			<Route
 				path="/"
 				element={<Layout />}
-				>
+			>
 				<Route
 					index
 					element={<Home />}
 				/>
-				{/* <Route
-					path="/contact-us"
+				<Route
+					path="/contact"
 					element={<Contact />}
-				/> */}
+				/>
+				<Route
+					path="/about"
+					element={<About />}
+				/>
 			</Route>
 		</Routes>
 	);
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/Layout.js b/src/Layout.js
index 10bf9c5..2b13e44 100644
--- a/src/Layout.js
+++ b/src/Layout.js
@@ -22,7 +22,7 @@ export default function Layout() {
 	) : (
 		<div className="body">
 			<NavBar />
-			<main className="pt-24 min-h-[95vh]">
+			<main>
 				<Container>
 					<Outlet />
 				</Container>
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index bfeef46..0a0c47c 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,9 +1,113 @@
-import React from 'react'
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import MenuIcon from '@mui/icons-material/Menu';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';  // Assuming you are using react-router-dom
+
+const drawerWidth = 240;
+const navItems = [
+  { text: 'Home', href: '/' },
+  { text: 'About', href: '/about' },
+  { text: 'Contact', href: '/contact' },
+];
+
+function NavBar(props) {
+  const { window } = props;
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  const handleDrawerToggle = () => {
+    setMobileOpen((prevState) => !prevState);
+  };
+
+  const drawer = (
+    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
+      <Typography variant="h6" sx={{ my: 2 }}>
+        QUES HAI
+      </Typography>
+      <Divider />
+      <List>
+        {navItems.map((item) => (
+          <ListItem key={item.text} disablePadding>
+            <ListItemButton sx={{ textAlign: 'center' }} component={Link} to={item.href}>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  const container = window !== undefined ? () => window().document.body : undefined;
 
-const NavBar = () => {
   return (
-    <div>NavBar</div>
-  )
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar component="nav">
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="start"
+            onClick={handleDrawerToggle}
+            sx={{ mr: 2, display: { sm: 'none' } }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+          >
+            QUES HAI
+          </Typography>
+          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+            {navItems.map((item) => (
+              <Button key={item.text} sx={{ color: '#fff' }} component={Link} to={item.href}>
+                {item.text}
+              </Button>
+            ))}
+          </Box>
+        </Toolbar>
+      </AppBar>
+      <nav>
+        <Drawer
+          container={container}
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{
+            display: { xs: 'block', sm: 'none' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+          }}
+        >
+          {drawer}
+        </Drawer>
+      </nav>
+    </Box>
+  );
 }
 
-export default NavBar
\ No newline at end of file
+NavBar.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  window: PropTypes.func,
+};
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/components/PreLoader/PreLoader.css b/src/components/PreLoader/PreLoader.css
new file mode 100644
index 0000000..f25f36c
--- /dev/null
+++ b/src/components/PreLoader/PreLoader.css
@@ -0,0 +1,98 @@
+.spinner {
+	position: absolute;
+	top: 50%;
+    left: 50%;
+	width: 9px;
+	height: 9px;
+}
+
+.spinner div {
+	position: absolute;
+	width: 50%;
+	height: 150%;
+	background: #000000;
+	transform: rotate(calc(var(--rotation) * 1deg))
+		translate(0, calc(var(--translation) * 1%));
+	animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
+}
+
+.spinner div:nth-child(1) {
+	--delay: 0.1;
+	--rotation: 36;
+	--translation: 150;
+}
+
+.spinner div:nth-child(2) {
+	--delay: 0.2;
+	--rotation: 72;
+	--translation: 150;
+}
+
+.spinner div:nth-child(3) {
+	--delay: 0.3;
+	--rotation: 108;
+	--translation: 150;
+}
+
+.spinner div:nth-child(4) {
+	--delay: 0.4;
+	--rotation: 144;
+	--translation: 150;
+}
+
+.spinner div:nth-child(5) {
+	--delay: 0.5;
+	--rotation: 180;
+	--translation: 150;
+}
+
+.spinner div:nth-child(6) {
+	--delay: 0.6;
+	--rotation: 216;
+	--translation: 150;
+}
+
+.spinner div:nth-child(7) {
+	--delay: 0.7;
+	--rotation: 252;
+	--translation: 150;
+}
+
+.spinner div:nth-child(8) {
+	--delay: 0.8;
+	--rotation: 288;
+	--translation: 150;
+}
+
+.spinner div:nth-child(9) {
+	--delay: 0.9;
+	--rotation: 324;
+	--translation: 150;
+}
+
+.spinner div:nth-child(10) {
+	--delay: 1;
+	--rotation: 360;
+	--translation: 150;
+}
+
+@keyframes spinner-fzua35 {
+	0%,
+	10%,
+	20%,
+	30%,
+	50%,
+	60%,
+	70%,
+	80%,
+	90%,
+	100% {
+		transform: rotate(calc(var(--rotation) * 1deg))
+			translate(0, calc(var(--translation) * 1%));
+	}
+
+	50% {
+		transform: rotate(calc(var(--rotation) * 1deg))
+			translate(0, calc(var(--translation) * 1.5%));
+	}
+}
diff --git a/src/components/PreLoader/PreLoader.jsx b/src/components/PreLoader/PreLoader.jsx
index 4a83576..3d31857 100644
--- a/src/components/PreLoader/PreLoader.jsx
+++ b/src/components/PreLoader/PreLoader.jsx
@@ -1,9 +1,21 @@
-import React from 'react'
+import React from "react";
+import "./PreLoader.css";
 
 const PreLoader = () => {
-  return (
-    <div>PreLoader</div>
-  )
-}
+	return (
+		<div class="spinner">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	);
+};
 
-export default PreLoader
\ No newline at end of file
+export default PreLoader;
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
new file mode 100644
index 0000000..bea4d72
--- /dev/null
+++ b/src/pages/About.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div>About</div>
+  )
+}
+
+export default About
\ No newline at end of file
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
new file mode 100644
index 0000000..aa4de15
--- /dev/null
+++ b/src/pages/Contact.jsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Button, Typography, Input, InputLabel, FormControl, FormHelperText } from '@mui/material';
+
+const Contact = () => {
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm({
+      ...form,
+      [name]: value,
+    });
+  };
+
+  const validate = () => {
+    let tempErrors = {};
+    tempErrors.name = form.name.length >= 3 ? "" : "Name should be at least 3 characters long";
+    tempErrors.email = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email) ? "" : "Email must be a valid email address";
+    tempErrors.message = form.message.length >= 10 ? "" : "Message should be at least 10 characters long";
+
+    setErrors(tempErrors);
+    return Object.values(tempErrors).every(x => x === "");
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (validate()) {
+      console.log(form);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center h-screen p-4">
+      <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md w-full max-w-lg">
+        <Typography variant="h2" className="text-2xl font-bold mb-6 text-center">Contact Us</Typography>
+
+        <div className="mb-4">
+          <FormControl fullWidth>
+            <InputLabel>Name</InputLabel>
+            <Input
+              name="name"
+              value={form.name}
+              onChange={handleChange}
+              error={!!errors.name}
+            />
+            <FormHelperText error>{errors.name}</FormHelperText>
+          </FormControl>
+        </div>
+
+        <div className="mb-4">
+          <FormControl fullWidth>
+            <InputLabel>Email</InputLabel>
+            <Input
+              name="email"
+              value={form.email}
+              onChange={handleChange}
+              error={!!errors.email}
+            />
+            <FormHelperText error>{errors.email}</FormHelperText>
+          </FormControl>
+        </div>
+
+        <div className="mb-4">
+          <FormControl fullWidth>
+            <InputLabel>Message</InputLabel>
+            <Input
+              name="message"
+              value={form.message}
+              onChange={handleChange}
+              error={!!errors.message}
+              multiline
+              rows={4}
+            />
+            <FormHelperText error>{errors.message}</FormHelperText>
+          </FormControl>
+        </div>
+
+        <Button type="submit" variant="contained" color="primary" fullWidth>
+          Send Message
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default Contact;
\ No newline at end of file