contact-page created successfully

PatilHarshh · May 25, 2024 · a5b2667 · a5b2667
1 parent f2290fd
commit a5b2667
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 1 deletion.
diff --git a/client/index.html b/client/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <script type="module" src="../client/src/main.jsx"></script>
+  <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -17,6 +17,7 @@
     "@mui/material": "^5.15.18",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -21,6 +21,7 @@ import About from "./components/About/About";
 
 import { useEffect, useState } from "react";
 import Loader from "./components/Loader";
+import Contact from "./components/Contact/contact";
 
 function Layout() {
   const { user } = useSelector((state) => state.user);
@@ -56,6 +57,7 @@ function App() {
       <Routes>
         <Route element={<Layout />}>
           <Route element={<About />} path="/about" />
+          <Route element={<Contact />} path="/contact-us" />
           <Route
             path='/'
             element={

diff --git a/client/src/components/Contact/Contact.jsx b/client/src/components/Contact/Contact.jsx
@@ -0,0 +1,62 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import {
+    Box,
+    Container,
+    Grid,
+    Typography,
+    TextField,
+    Button,
+} from "@mui/material";
+import Lottie from "lottie-react";
+import contactAnimation from "../lottie-animation/contactAnimation.json";
+const Contact = () => {
+
+    return <div >
+        <Box sx={{ mt: "2rem", mb: '50px' }}>
+            <Grid container spacing={2}>
+                <Grid item xs={12} md={6}>
+                    <Lottie animationData={contactAnimation} style={{ height: '500px' }} />
+                </Grid>
+                <Grid
+                    item
+                    xs={12}
+                    md={6}
+                    sx={{ display: "flex", alignItems: "center" }}
+                >
+                    <form >
+                        <TextField
+                            label="Name"
+                            fullWidth
+                            margin="normal"
+
+                        />
+                        <TextField
+                            label="Email"
+                            fullWidth
+                            margin="normal"
+
+                        />
+                        <TextField
+                            label="Message"
+                            fullWidth
+                            multiline
+                            rows={4}
+                            margin="normal"
+
+                        />
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            sx={{ mt: "1rem", fontSize: "1.2rem" }}
+                            type="submit"
+                        >
+                            Submit
+                        </Button>
+                    </form>
+                </Grid>
+            </Grid>
+        </Box></div>;
+};
+
+export default Contact;
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -128,6 +128,9 @@ const Navbar = () => {
             <li>
               <Link to='/blogs'>Blogs</Link>
             </li>
+            <li>
+              <Link to='/contact-us'>Contact Us</Link>
+            </li>
 
           </ul>
 
@@ -166,6 +169,7 @@ const Navbar = () => {
           <Link to='/companies'>Companies</Link>
           <Link to='/candidates'>Candidates</Link>
           <Link to='/blogs'>Blogs</Link>
+          <Link to='/contact-us'>Contact Us</Link>
           <Link
             onClick={handleCloseNavbar}
             to={

diff --git a/client/src/components/lottie-animation/contactAnimation.json b/client/src/components/lottie-animation/contactAnimation.json