Sajini feature new

frontend/src/App.js

@@ -9,6 +9,7 @@ import Sprite from "./pages/Sprite";
 import ShakeBeer from "./pages/ShakeBeer";
 import Admin from "./pages/Admin";
 import AuthForm from "./pages/AuthForm";
+import OurStory from "./pages/OurStory";
 
 function App() {
   return (
@@ -22,6 +23,7 @@ function App() {
         <Route path="/ShakeBeer" element={<ShakeBeer />} />
         <Route path="/Admin" element={<Admin />} />
         <Route path="/auth" element={<AuthForm />} />
+        <Route path="/ourstory" element={<OurStory />} />
       </Routes>
       <Footer />
     </Router>

frontend/src/components/Navbar.jsx

@@ -18,10 +18,11 @@ const Navbar = () => {
           LOGO
         </h1>
 
+
         {/* Desktop Menu */}
         <ul className="hidden md:flex space-x-6 text-lg font-semibold">
           <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/")}>HOME</li>
-          <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/about")}>ABOUT</li>
+          <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/ourstory")}>ABOUT</li>
           <li className="hover:text-orange-500 cursor-pointer" onClick={() => navigate("/contact")}>CONTACT</li>
         </ul>
 
@@ -51,7 +52,7 @@ const Navbar = () => {
               </button>
               <button
                 className="block px-4 py-2 w-full text-left hover:bg-gray-200"
-                onClick={() => navigate("/register")}
+                onClick={() => navigate("/auth")}
               >
                 Register
               </button>

frontend/src/components/about.jsx

@@ -3,30 +3,30 @@ import React from "react";
 const About = () => {
   return (
     <section className="flex flex-col md:flex-row items-center justify-center    bg-black">
-      
-    
+
+
       <div className="w-full md:w-1/2">
-        <img 
-          src="/background.png" 
-          alt="About Us" 
+        <img
+          src="/background.png"
+          alt="About Us"
           className="w-full h-auto rounded-lg shadow-lg"
         />
       </div>
 
-    
+
       <div className="w-full  pr-6 mr-6 md:w-1/2 md:pl-12 mt-6 md:mt-0 text-center md:text-left">
-        <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 text-center">ABOUT US</h2>
+        {/* <h2 className="text-3xl md:text-4xl font-bold text-white mb-4 text-center">ABOUT US</h2> */}
         <p className="text-white text-lg  p-1 leading-relaxed text-center">
-          We are a passionate team dedicated to delivering the best products and services. 
-          Our mission is to create meaningful experiences for our customers through 
+          We are a passionate team dedicated to delivering the best products and services.
+          Our mission is to create meaningful experiences for our customers through
           innovation, quality, and commitment.
         </p>
         <p className="text-white text-lg mt-4 text-center">
-          Established in 2020, we have been serving our clients with utmost dedication. 
+          Established in 2020, we have been serving our clients with utmost dedication.
           Join us in our journey and be a part of something amazing!
         </p>
       </div>
-      
+
     </section>
   );
 };

frontend/src/pages/AuthForm.jsx

@@ -3,50 +3,134 @@ import { FaUser, FaLock, FaEnvelope } from "react-icons/fa";
 
 const AuthForm = () => {
     const [isSignIn, setIsSignIn] = useState(true);
+    const [formData, setFormData] = useState({
+        firstName: "",
+        lastName: "",
+        email: "",
+        username: "",
+        password: "",
+    });
+
+    const [errors, setErrors] = useState({});
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...formData, [name]: value });
+        setErrors({ ...errors, [name]: "" }); // clear error on change
+    };
+
+    const validateForm = () => {
+        const newErrors = {};
+        if (!formData.username.trim()) newErrors.username = "Username is required";
+        if (!formData.password.trim()) newErrors.password = "Password is required";
+
+        if (!isSignIn) {
+            if (!formData.firstName.trim()) newErrors.firstName = "First name is required";
+            if (!formData.lastName.trim()) newErrors.lastName = "Last name is required";
+            if (!formData.email.trim()) {
+                newErrors.email = "Email is required";
+            } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+                newErrors.email = "Invalid email format";
+            }
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (validateForm()) {
+            console.log("Form submitted:", formData);
+            // Proceed with submission or API call here
+        }
+    };
 
     return (
         <div
             className="min-h-screen bg-cover bg-center flex items-center justify-center"
-            style={{ backgroundImage: "url('/bg.jpg')" }}
+            style={{ backgroundImage: "url('/auth-bg.png')" }}
         >
-            <div className="bg-[#2c0f0f]/90 p-8 rounded-2xl w-full max-w-md text-white shadow-2xl backdrop-blur transition-all duration-300 h-[540px] flex flex-col">
+            <div className="bg-[#2c0f0f]/90 p-0 rounded-2xl w-full max-w-md text-white shadow-2xl backdrop-blur transition-all duration-300 h-[540px] flex flex-col">
                 {/* Tabs */}
-                <div className="flex justify-between border-b border-orange-500 mb-6">
+                <div className="flex justify-between bg-[#1e0a0a] rounded-t-2xl">
                     <button
-                        className={`w-1/2 text-lg font-semibold py-2 ${isSignIn
-                            ? "border-b-2 border-orange-500 text-white"
-                            : "text-gray-400"
+                        className={`w-1/2 text-lg font-semibold py-3 relative transition-colors duration-300 ${isSignIn ? "text-white" : "text-gray-400"
                             }`}
-                        onClick={() => setIsSignIn(true)}
+                        onClick={() => {
+                            setIsSignIn(true);
+                            setErrors({});
+                        }}
                     >
                         Sign in
+                        {isSignIn && (
+                            <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/3 h-[3px] bg-orange-500 rounded-full" />
+                        )}
                     </button>
                     <button
-                        className={`w-1/2 text-lg font-semibold py-2 ${!isSignIn
-                            ? "border-b-2 border-orange-500 text-white"
-                            : "text-gray-400"
+                        className={`w-1/2 text-lg font-semibold py-3 relative transition-colors duration-300 ${!isSignIn ? "text-white" : "text-gray-400"
                             }`}
-                        onClick={() => setIsSignIn(false)}
+                        onClick={() => {
+                            setIsSignIn(false);
+                            setErrors({});
+                        }}
                     >
                         Sign up
+                        {!isSignIn && (
+                            <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/3 h-[3px] bg-orange-500 rounded-full" />
+                        )}
                     </button>
                 </div>
 
-                {/* Form Content - Centered */}
-                <div className="transition-all duration-300 flex-1 flex flex-col justify-center">
+                {/* Form */}
+                <form onSubmit={handleSubmit} className="p-8 flex-1 flex flex-col justify-center">
                     {!isSignIn && (
                         <>
-                            <InputBox icon={<FaUser />} placeholder="First Name" />
-                            <InputBox icon={<FaUser />} placeholder="Last Name" />
-                            <InputBox icon={<FaEnvelope />} placeholder="Email" type="email" />
+                            <InputBox
+                                icon={<FaUser />}
+                                placeholder="First Name"
+                                name="firstName"
+                                value={formData.firstName}
+                                onChange={handleInputChange}
+                                error={errors.firstName}
+                            />
+                            <InputBox
+                                icon={<FaUser />}
+                                placeholder="Last Name"
+                                name="lastName"
+                                value={formData.lastName}
+                                onChange={handleInputChange}
+                                error={errors.lastName}
+                            />
+                            <InputBox
+                                icon={<FaEnvelope />}
+                                placeholder="Email"
+                                type="email"
+                                name="email"
+                                value={formData.email}
+                                onChange={handleInputChange}
+                                error={errors.email}
+                            />
                         </>
                     )}
 
                     <InputBox
                         icon={<FaUser />}
                         placeholder={isSignIn ? "User Name" : "Username"}
+                        name="username"
+                        value={formData.username}
+                        onChange={handleInputChange}
+                        error={errors.username}
+                    />
+                    <InputBox
+                        icon={<FaLock />}
+                        placeholder="Password"
+                        type="password"
+                        name="password"
+                        value={formData.password}
+                        onChange={handleInputChange}
+                        error={errors.password}
                     />
-                    <InputBox icon={<FaLock />} placeholder="Password" type="password" />
 
                     {/* Options */}
                     {isSignIn ? (
@@ -68,36 +152,53 @@ const AuthForm = () => {
                         </div>
                     )}
 
-                    {/* Action */}
-                    <button className="w-full bg-orange-500 text-white py-2 rounded-full font-semibold hover:bg-orange-600 transition">
+                    <button
+                        type="submit"
+                        className="w-full bg-orange-500 text-white py-2 rounded-full font-semibold hover:bg-orange-600 transition"
+                    >
                         {isSignIn ? "Sign in" : "Create Account"}
                     </button>
 
-                    {/* Toggle Form */}
                     <button
                         onClick={() => setIsSignIn(!isSignIn)}
+                        type="button"
                         className="text-sm mt-4 text-center block w-full text-gray-300 hover:text-white"
                     >
                         {isSignIn
                             ? "Don’t have an account?"
                             : "Already have an account?"}
                     </button>
-                </div>
+                </form>
             </div>
         </div>
     );
 };
 
-const InputBox = ({ icon, placeholder, type = "text", marginBottom = "mb-4" }) => (
-    <div className={`flex items-center gap-3 bg-white/10 rounded-full px-4 py-2 ${marginBottom}`}>
-        <span className="text-white">{icon}</span>
-        <input
-            type={type}
-            placeholder={placeholder}
-            className="bg-transparent outline-none text-white w-full placeholder-gray-300"
-        />
+// Reusable InputBox component
+const InputBox = ({
+    icon,
+    placeholder,
+    type = "text",
+    name,
+    value,
+    onChange,
+    error,
+    marginBottom = "mb-4",
+}) => (
+    <div className={`${marginBottom}`}>
+        <div className={`flex items-center gap-3 bg-white/10 rounded-full px-4 py-2`}>
+            <span className="text-white">{icon}</span>
+            <input
+                type={type}
+                name={name}
+                value={value}
+                onChange={onChange}
+                placeholder={placeholder}
+                className="bg-transparent outline-none text-white w-full placeholder-gray-300"
+            />
+        </div>
+        {error && <p className="text-sm text-red-400 mt-1 ml-2">{error}</p>}
     </div>
 );
 
-
 export default AuthForm;