working on contact page

src/Components/Contact/Contact.css

@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap');
+
+.contact-container{
+    width: 100vw;
+    min-height: 100vh;
+    background-color: #041414;
+    overflow-y: hidden;
+}
+
+.contact-h{
+    font-size: 2.2rem;
+    width: 55vw;
+    margin: 0 auto;
+    text-align: center;
+    text-transform: capitalize;
+    font-weight: 800;
+    font-family: 'Times New Roman', Times, serif;
+    font-family: 'Source Code Pro', monospace;
+    margin-top: 30vh;
+}
+
+.next-btn{
+    border: none;
+    padding: 0.5rem 2rem;
+    border-radius: 20px;
+    color: #041414;
+    overflow-x: hidden;
+    background-color: #a2c2b5;
+    font-family: 'Times New Roman', Times, serif;
+    margin: 2rem auto;
+    font-weight:700;
+    margin-left: 50%;
+    transform: translateX(-50%);
+}
+
+.next-btn:hover{
+    cursor: pointer;
+}
+
+.next-btn-2{
+    border: none;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 20px;
+    color: #041414;
+    overflow-x: hidden;
+    background-color: #a2c2b5;
+    font-family: 'Times New Roman', Times, serif;
+    font-weight:700;
+    margin-left: 80%;
+    font-size: 1.5rem;
+    border-radius: 50%;
+    transform: translate(-85px,-40px);
+}
+
+.next-btn-2:hover{
+    cursor: pointer;
+}
+
+.dr{
+    padding: auto;
+    transform: translateY(-2px);
+}
+
+.c-form-inp{
+    background-color: transparent;
+    border: none;
+    color: #a2c2b5;
+    width: 100%;
+    border-bottom: 1px solid #a2c2b5;
+    font-size: 2rem;
+    width: 80%;
+
+}
+.c-form-inp::placeholder{
+    font-weight: 900;
+    border: hidden;
+    text-align: center;
+}
+
+.c-form-inp:focus{
+    outline: none;
+}

src/Components/Contact/Contact.jsx

@@ -0,0 +1,88 @@
+import "./Contact.css";
+import React, { useState, useEffect } from "react";
+import { AiOutlineDoubleRight } from "react-icons/ai";
+import { TiTick } from "react-icons/ti";
+
+export default function Contact() {
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [msg, setMsg] = useState("");
+  useEffect(() => {
+
+    if(count==4){
+      setTimeout(()=>{
+        window.location.reload();
+      }, 5000);
+
+    }
+
+  }, [count])
+
+  return (
+    <div id="contact" className="contact-container">
+      {count == 0 && (
+        <div className="contact-h">
+          Team MOSS is looking forward to getting in touch with you
+        </div>
+      )}
+      {count == 1 && (
+        <div className="contact-h">
+          Please Tell Us Your Name
+          <input
+            placeholder=""
+            onChange={(e) => setName(e.target.value)}
+            className="c-form-inp"
+          ></input>
+        </div>
+      )}
+      {count == 2 && (
+        <div className="contact-h">
+          Hi {name}, could you please provide your email address
+          <input
+            placeholder=""
+            onChange={(e) => setEmail(e.target.value)}
+            className="c-form-inp"
+          ></input>
+        </div>
+      )}
+      {count == 3 && (
+        <div className="contact-h">
+          What would you like to talk to us regarding?
+          <input
+            placeholder=""
+            onChange={(e) => setMsg(e.target.value)}
+            className="c-form-inp"
+          ></input>
+        </div>
+      )}
+      {count == 4 && (
+        <div className="contact-h">
+          Thank you for reaching out to us, we will get back to you shortly.
+        </div>
+      )}
+      <div className="">
+        {count == 0 && (
+          <button className="next-btn" onClick={() => setCount(count + 1)}>
+            NEXT >
+          </button>
+        )}
+        {count > 0 && count < 3 && (
+          <button className="next-btn-2" onClick={() => setCount(count + 1)}>
+            <AiOutlineDoubleRight className="dr" />
+          </button>
+        )}
+        {count == 3 && (
+          <button className="next-btn-2" onClick={() => setCount(count + 1)}>
+            <TiTick className="dr" />
+          </button>
+        )}
+      </div>
+      <>
+        {/* <video width="750" height="500" controls >
+      <source src={video} type="video/mp4"/>
+     </video> */}
+      </>
+    </div>
+  );
+}

src/Components/Navbar/Navbar.css

@@ -1,12 +1,19 @@
 #nav-cont{
     background-color: rgba(19, 36, 19, 0.9);
     height: 60px;
-
+    background-color: #041414;
+    overflow: hidden;
+    color: #a2c2b5;   
 }
 .nav-logo{
     height: 50px;
 }
-
+#nav-item2{
+    color: #a2c2b5;   
+}
+.active{
+    color: white !important;
+}
 #basic-navbar-nav{
     text-align: center;
 }

src/Components/Navbar/Navbar.jsx

@@ -14,11 +14,12 @@ export default function TopNav() {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center">
           <Nav className="mx-auto">
-            <Nav.Link className='mx-3' href="#home">Our Vision</Nav.Link>
-            <Nav.Link className='mx-3' href="#about">About Us</Nav.Link>
-            <Nav.Link className='mx-3' href="#blog">Blog</Nav.Link>
-            <Nav.Link className='mx-3' href="#events">Past Events</Nav.Link>
-            <Nav.Link className='mx-3' href="#contact">Contact Us</Nav.Link>
+            {/* <Nav.Link className='mx-3' id='nav-item'  href="#home">Our Vision</Nav.Link> */}
+            <Nav.Link className='mx-3' id='nav-item2' href="#about">About Us</Nav.Link>
+            <Nav.Link className='mx-3' id='nav-item2' href="#blog">Blog</Nav.Link>
+            <Nav.Link className='mx-3' id='nav-item2' href="#events">Past Events</Nav.Link>
+            <Nav.Link className='mx-3' id='nav-item2' href="#contact">Contact Us</Nav.Link>
+            <Nav.Link className='mx-3' id='nav-item2' href="./team">Team</Nav.Link>
 
 
           </Nav>

src/Pages/Home/Home.css

@@ -1,6 +1,5 @@
 .main-container{
-    background-color: rgba(19, 36, 19);
-    height: 100vh;
+    background-color: #041414;
     overflow-x: hidden;
-
+    color: #a2c2b5;
 }

src/Pages/Home/Home.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
+import Contact from '../../Components/Contact/Contact'
 import TopNav from '../../Components/Navbar/Navbar'
 import './Home.css'
 export default function Home() {
   return (
     <div className=''>
         <TopNav/>
         <div className='main-container'>
-
+        Hello world
+        <Contact/>
         </div>
     </div>
   )

src/Pages/Landing/Landing.css

@@ -103,9 +103,13 @@ padding-left: 1rem;
     width: 40vh;
     position: absolute;
     border: none;
-    /* border-radius: 50%; */
     z-index: 10;
     transform: translate(-50vh,10vh);
+    transition: 0.5s;
+}
+
+.arrow:hover{
+    transform: translate(-50vh,10vh) scale(1.05);
 }
 @keyframes rotate {
     0% {transform: rotate(360deg);}