UI fixes

src/App.css

@@ -18,6 +18,10 @@
   box-sizing: border-box;
 }
 
+html, body {
+  overflow-x: hidden;
+  width: 100%;
+}
 
 /* Styles for light mode */
 .light-mode-app {

src/App.jsx

@@ -44,7 +44,7 @@ function App() {
             <Start />
             <Pricing />
             <Testimonials />
-            <ContactUs />
+            <ContactUs isDarkMode={isDarkMode} setDarkMode={setDarkMode} />
             <Footer />
             <BackToTop />
           </div>} />

src/components/Header/Header.jsx

@@ -52,9 +52,9 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 			document.documentElement.scrollTop > 80
 		) {
 			setHeaderBackground(isDarkMode ? "#111" : "#fff");
-			headerRef.current.classList.add("sticky_header");
+			headerRef.current.classList.add("fixed_header");
 		} else {
-			headerRef.current.classList.remove("sticky_header");
+			headerRef.current.classList.remove("fixed_header");
 		}
 	};
 
@@ -84,7 +84,7 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 		toggleMobileMenu();
 	};
 
-	const headerClass = isDarkMode ? "header dark-mode" : "header";
+	const headerClass = isDarkMode ? "header dark-mode sticky_header" : "header sticky_header";
 
 	return (
 		<header
@@ -141,7 +141,7 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 
 					{/*====Navigation bar====*/}
 
-					<div className="nav__links">
+					<div className={`${isDarkMode ? "nav__links dark_nav__links" : "nav__links"}`}>
 						<div className="navigation">
 							<ul className="menu">
 								{nav__links.map((item, index) => (

src/components/UI/ContactUs.jsx

@@ -4,7 +4,7 @@ import "../../styles/contactUs.css";
 import Lottie from "lottie-react";
 import ContactAnimation from "../../assets/JSON/contactus.json";
 
-const ContactUs = () => {
+const ContactUs = ({isDarkMode, setDarkMode}) => {
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -62,6 +62,7 @@ const ContactUs = () => {
                 name="name"
                 value={formData.name}
                 onChange={handleInputChange}
+                className={`${isDarkMode && "darkInput"}`}
               />
             </div>
             <div className="input-group">
@@ -71,6 +72,7 @@ const ContactUs = () => {
                 name="email"
                 value={formData.email}
                 onChange={handleInputChange}
+                className={`${isDarkMode && "darkInput"}`}
               />
             </div>
             <div className="input-group">
@@ -80,6 +82,7 @@ const ContactUs = () => {
                 rows={7}
                 value={formData.message}
                 onChange={handleInputChange}
+                className={`${isDarkMode && "darkInput"}`}
               />
             </div>
             <div className="text-end">

src/components/UI/Exercises.jsx

@@ -10,7 +10,7 @@ const Exercises = () => {
       <div className="container exercise_container">
         <div className="exercise_top">
           <h2 className="section_title">
-            Benifits of <span className="highlights">Exercise</span>
+            Benefits of <span className="highlights">Exercise</span>
           </h2>
           <p>
             You'll discover the transformative power it holds in shaping a life

src/styles/contactUs.css

@@ -45,6 +45,11 @@ select:focus {
   outline: none;
 }
 
+.darkInput {
+  color: rgb(216, 208, 208);
+  border-bottom: 1px rgb(120, 111, 111) solid;
+}
+
 .text-end {
   text-align: end;
 }

src/styles/header.css

@@ -163,8 +163,16 @@ ul {
     left: 0;
     z-index: 99;
     background: #fff;
-
-}
+  }
+
+  .fixed_header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 99;
+      background: #fff;
+  }
 
 .logo h2 a {
     text-decoration: none;
@@ -218,28 +226,50 @@ ul {
         flex-direction: column;
         width: 100%;
         color: #000000;
-        background-color: #ffff;
         transition: all 0.3s ease-in-out;
-        overflow-y: auto; 
+        overflow-y: auto;
         gap: 1rem;
         z-index: 99;
+        background: rgba(238, 227, 227, 0.966);
+        background-color: #f4f4f9f8;
+        backdrop-filter: blur(60px);
+        box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
+        border: 2px solid rgba(28, 26, 26, 0.327);
+        border-top: 0px;
     }
+
+    .dark_nav__links {
+        background-color: #1e1e1e;
+        color: #fff;
+        background: rgba(39, 39, 39, 0.966);
+        backdrop-filter: blur(60px);
+        box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
+        border: 2px solid rgba(255, 255, 255, 0.532);
+        border-top: 0px;
+        position: absolute;
+        top: 6.2rem;
+      }
 
     .menu {
         flex-direction: column;
     }
 
     #nav-check:not(:checked)~.nav__links {
         height: 0px;
+        border: 0px solid black;
+        width: 94vw;
     }
 
     #nav-check:checked~.nav__links {
         transition: all 0.75s ease-in-out;
+        padding-bottom: 2rem;
         height: 85vh;
         overflow-y: auto;
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         box-shadow: 0px 0px 1px 0px #000000a1;
+        width: 94vw;
+        z-index: 500;
     }
 
     .nav_item {