Merge branch 'main' into enhancement-gssoc

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";
@@ -13,9 +14,14 @@ import BackToTop from "./components/UI/BackToTop";
 import LocomotiveScroll from 'locomotive-scroll';
 import Classes from "./components/UI/Classes";
 import Diet from "./components/UI/Diet";
+
+import Register from "./components/UI/Register";
+import Login from "./components/UI/Login";
+
 import PrivacyPolicy from "./components/UI/privacypolicy";
 import Licensing from "./components/UI/Licensing";
 import TermsAndConditions from "./components/UI/termsandconditions";
+
 import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
 import Error from "./components/UI/Error";
 
@@ -50,11 +56,18 @@ function App() {
             <BackToTop />
           </div>} />
           <Route path="/classes" element={<Classes />} />
+          <Route path="/about" element={<About />} />
           <Route path="/diet" element={<Diet />} />
+
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+
           <Route path="/privacypolicy" element={<PrivacyPolicy />} />
           <Route path="/licensing" element={<Licensing />} />
           <Route path="/termsandconditions" element={<TermsAndConditions />} />
+
           <Route path="*" element={<Error />} />
+
         </Routes>
       </Router>
     </>

src/components/Header/Header.jsx

@@ -4,6 +4,7 @@ import logo from "../../assets/img/dumble.png";
 import { useEffect, useState } from "react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
+import { Link } from "react-router-dom";
 gsap.registerPlugin(useGSAP);
 
 const nav__links = [
@@ -172,10 +173,8 @@ s							onClick={byClick}	className={`fa ${isClicked ? 'fa-times' : 'fa-bars'} `
 						{/* Nav Right */}
 
 						<div className="nav_right">
-							<button className="register_btn">Register</button>
-							{/* <span className="mobile__menu">
-                <i className="ri-menu-line"></i>
-              </span> */}
+							<button className="register_btn" ><Link to="/register">Register</Link></button>
+							<button className="register_btn" ><Link to="/login">Login</Link></button>
 						</div>
 					</div>
 				</div>

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/components/UI/Login.jsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
+import "../../styles/register.css";
+import Lottie from "lottie-react";
+import ContactAnimation from "../../assets/JSON/contactus.json";
+
+const Login = () => {
+    const initialFormData = {
+        email: "",
+        password: "",
+    };
+    const [formData, setFormData] = useState(initialFormData);
+
+    const validateForm = () => {
+        if (formData.email === "" || formData.email === null) {
+            toast.error("Please enter your email");
+            return false;
+        } else if (!isValidEmail(formData.email)) {
+            toast.error("Please enter a valid email");
+            return false;
+        } else if (formData.password === "" || formData.password === null) {
+            toast.error("Please enter a password");
+            return false;
+        } else if (!isValidPassword(formData.password)) {
+            toast.error("Please enter a valid password");
+            return false;
+        } else {
+            return true;
+        }
+    };
+
+    const isValidEmail = (email) => {
+        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+        return emailPattern.test(email);
+    };
+
+    const isValidPassword = (password) => {
+        const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;
+        return passwordPattern.test(password);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (validateForm()) {
+            toast.success("Logged-in successfully", {
+                duration: 3000, // Duration in milliseconds (3 seconds)
+                position: "top-center",
+            }
+            );
+            console.log("Form data:", formData);
+            setFormData(initialFormData);
+        }
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+    };
+
+    return (
+        <section id="contact-us" className="form">
+            <Toaster />
+            <div className="w-full form grid justify-center items-center">
+            <div className="register-img">
+                    <img src="./image.png" width={500}></img>
+                </div>
+                <div className="contact-form-container">
+                    <h1 className="heading text-center">Login</h1>
+                    <form onSubmit={handleSubmit} className="contact-form">
+                        <div className="input-group">
+                            <input
+                                type="email"
+                                placeholder="Email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                        <div className="input-group">
+                            <input
+                                type="password"
+                                placeholder="Password"
+                                name="password"
+                                value={formData.password}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                        <div className="text-end">
+                            <button className="submit" type="submit">
+                                Login
+                            </button>
+                        </div>
+                        <div>
+                            <a href="/register">New user ? <span style={{fontWeight:900}}>Register Here.</span> </a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Login;