Merge pull request #429 from Amruta7203/newTwo

Enhanced the Contact page in dark mode

src/App.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Aos from "aos";
 import "./App.css";
+import About from "./components/UI/About";
 import Header from "./components/Header/Header";
 import Exercises from "./components/UI/Exercises";
 import Footer from "./components/UI/Footer";
@@ -55,6 +56,7 @@ function App() {
             <BackToTop />
           </div>} />
           <Route path="/classes" element={<Classes />} />
+          <Route path="/about" element={<About />} />
           <Route path="/diet" element={<Diet />} />
 
           <Route path="/register" element={<Register />} />

src/components/UI/About.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import "../../styles/About.css";
+import Footer from "./Footer";
+import Header from "../Header/Header";
+import Hero from "./Hero";
+
+const About = () => {
+  const socialMediaLinks = [
+    {
+      icon: "fa fa-facebook-f",
+      link: "https://www.facebook.com/", // Replace with your Facebook link
+    },
+    {
+      icon: "fa fa-instagram",
+      link: "https://www.instagram.com/", // Replace with your Instagram link
+    },
+    {
+      icon: "fa fa-twitter",
+      link: "https://www.twitter.com/", // Replace with your Twitter link
+    },
+  ];
+
+  return (
+    <>
+    <Header />
+    <section id="about-us">
+      <div className="container">
+        <div className="about_top">
+          <h2 className="section_title">About Us</h2>
+          <p>
+            We are passionate about helping people achieve their health and
+            fitness goals. We believe that exercise is a
+            powerful tool for transformation, not just physically but also
+            mentally and emotionally.
+          </p>
+        </div>
+        <div className="about_content">
+          <p>
+            Our team consists of certified trainers who are not only
+            knowledgeable but also genuinely care about your success. They are
+            committed to providing personalized guidance, motivation, and
+            encouragement to help you push your limits and achieve results you
+            never thought possible.
+          </p>
+          <h3>Here's what sets us apart:</h3>
+          <ul>
+            <li>
+              <b>A welcoming and inclusive atmosphere:</b> We believe in creating a
+              space where everyone feels comfortable, regardless of their
+              fitness background.
+            </li>
+            <li>
+              <b>Variety and flexibility:</b> We offer a wide range of classes,
+              programs, and equipment to cater to different needs and
+              preferences. We understand that schedules can be busy, so we
+              provide flexible options to fit your lifestyle.
+            </li>
+            <li>
+              <b>Holistic approach to wellness:</b> We go beyond just physical
+              training. We offer resources and guidance to help you integrate
+              healthy habits into all aspects of your life.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <Footer/>
+    </>
+  );
+};
+
+export default About;

src/components/UI/Footer.jsx

@@ -47,7 +47,7 @@ const Footer = () => {
             <a href="/">
                 <li>Home</li>
               </a>
-              <a href="/#">
+              <a href="/about">
                 <li>About Us</li>
               </a>
               <a href="#contact-us">

src/styles/About.css

@@ -0,0 +1,55 @@
+/* Create styles specific to About Us page */
+#about-us {
+    padding: 5rem 0;
+  }
+
+  #about-us .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  #about-us .about_top {
+    text-align: center;
+  }
+
+  #about-us .about_top h2{
+    font-size: 3rem;
+    line-height: 60px;
+    margin-bottom: 20px;
+    color: var(--primary-color);
+  }
+
+  #about-us .section_title {
+    margin-bottom: 1rem;
+  }
+
+  #about-us p {
+    font-size: 1rem;
+    margin-bottom: 30px;
+    line-height: 30px;
+  }
+
+  #about-us .about_content p {
+    text-align: center;
+    font-size: 1rem;
+    margin-bottom: 50px;
+    line-height: 30px;
+  }
+
+  #about-us h3 {
+    color: var(--primary-color);
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  #about-us ul {
+    list-style: disc;
+    margin-bottom: 0;
+  }
+
+  #about-us ul li {
+    margin-bottom: 10px;
+    list-style: none;
+    line-height: 30px;
+  }
+

src/styles/contactUs.css

@@ -33,6 +33,7 @@ textarea {
   font: var(--font-name);
   background: none;
   color: inherit;
+  transition: 0.5s;
 }
 
 input {
@@ -43,6 +44,8 @@ input:focus,
 textarea:focus,
 select:focus {
   outline: none;
+  width: 520px;
+  border-color: var(--primary-color);
 }
 
 .text-end {