Second Commit

package.json

@@ -10,10 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
+    "firebase": "^10.12.2",
+    "flowbite-react": "^0.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "swiper": "^11.1.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/App.jsx

@@ -2,16 +2,138 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "./App.css";
 import Cart from "./Pages/Cart/Cart";
 import { Home } from "./Pages/Home/Home";
-
+import Products from "./Components/Products/Products";
+import Login from "./Pages/Login/Login";
+import SignUp from "./Pages/SignUp/SignUp";
+import { useEffect, useState } from "react";
+import Navbar from "./Components/Navbar/Navbar";
+import Footer from "./Components/Footer/Footer";
+import toast, { Toaster } from 'react-hot-toast';
+import { onAuthStateChanged } from "firebase/auth";
+import { auth } from "./Firebase/Firebase";
+import SingleProduct from "./Pages/SingleProduct/SingleProduct";
+import About from "./Components/About/About";
+import Contact from "./Components/Contact/Contact";
 function App() {
+  const [cart, setCart] = useState([]);
+  const [promoCode, setPromoCode] = useState("")
+  const [discount, setDiscount] = useState(0)
+const [invalid, setInvalid] = useState("*Invalid Promo-Code*")
+
+const [userName, setUserName] = useState("")
+
+
+  // Add To Cart Function
+
+  const AddToCart = (product) => {
+    const isProductExist = cart.find((findItem) => findItem.id === product.id);
+    if (isProductExist) {
+      const updateCart = cart.map((item) =>
+        item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
+      );
+      setCart(updateCart);
+    } else {
+      setCart([...cart, { ...product, quantity: 1 }]);
+      toast.success("Product added to cart sucessfully")
+    }
+  };
+
+  // handle Increase To Cart Function
+
+  const handleIncrease = (id) => {
+    const incQuantity = cart.map((item) =>
+      item.id === id ? { ...item, quantity: item.quantity + 1 } : item
+    );
+    setCart(incQuantity);
+  };
+
+  // handle Decrease To Cart Function
+
+  const handleDecrease = (id) => {
+    const decQuantity = cart.map((item) =>
+      item.id === id && item.quantity > 1
+        ? { ...item, quantity: item.quantity - 1 }
+        : item
+    );
+    setCart(decQuantity);
+  };
+
+  // handle Remove To Cart Function
+
+  const handleRemove = (id) => {
+    const updateByFilter = cart.filter((filterItem)=> filterItem.id !== id)
+    setCart(updateByFilter);
+  }
+
+  // Calculate Total Cost of Products in Cart Section
+
+  const getTotalPRice = ()=> {
+    const totalPrice =  cart.reduce((total, cartReduceItem) => {
+      return total + cartReduceItem.price * cartReduceItem.quantity
+    }, 0)
+    return totalPrice - discount
+  }
+
+  // Apply Coupon Function
+
+const applyPromoCode = () => {
+  if (promoCode === "DISCOUNT10") {
+    setDiscount(getTotalPRice()*0.1)
+    setPromoCode("")
+  }else{
+setInvalid(invalid)
+  }
+}
+
+// User Name Display
+
+useEffect(()=> {
+onAuthStateChanged(auth, (user)=>{
+  if (user) {
+    setUserName(user.displayName)
+  }else{
+    setUserName("")
+  }
+})
+}, [])
+
+
   return (
     <>
       <div>
         <BrowserRouter>
+        <Navbar cart = {cart} userName={userName}/>
           <Routes>
-            <Route path="/" element={<Home/>} />
-            <Route path="/Cart" element={<Cart/>} />
+            <Route path="/" element={<Home AddToCart={AddToCart}/>} />
+            <Route
+              path="/Cart"
+              element={
+                <Cart
+                  cart={cart}
+                  handleDecrease={handleDecrease}
+                  handleIncrease={handleIncrease}
+                  handleRemove={handleRemove}
+                  getTotalPRice = {getTotalPRice}
+                  applyPromoCode = {applyPromoCode}
+                  promoCode = {promoCode}
+                  setPromoCode = {setPromoCode}
+                  invalid = {invalid}
+                />
+              }
+            />
+            <Route
+              path="/allproducts"
+              element={<Products AddToCart={AddToCart} />}
+            />
+            <Route path="/about" element={<About />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/singleproduct/:productId" element={<SingleProduct AddToCart={AddToCart}/>} />
+
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<SignUp />} />
           </Routes>
+          <Toaster/>
+          <Footer/>
         </BrowserRouter>
       </div>
     </>

src/Components/About/About.jsx

@@ -0,0 +1,80 @@
+  import React from 'react'
+  import LoginImg from "../../assets/LoginImg.jpg";
+  import AboutUsImg from "../../assets/AboutUsImg.jpg"
+  import AboutUsImg2 from "../../assets/AboutUsImg2.avif"
+import { useNavigate } from 'react-router-dom';
+
+  const About = () => {
+    const nevigate = useNavigate()
+    return (
+      <>
+      {/* Image Section */}
+      <div className="relative mt-[70px]">
+            <img
+              src={LoginImg}
+              alt="Login"
+              className="w-full object-cover object-center h-[200px] mt-5 opacity-[0.8]"
+            />
+            <div className="w-full h-[200px] bg-black absolute top-0 left-0 opacity-[.4]"></div>
+            <h2 className="absolute top-[40%] left-[45%] text-white font-semibold text-3xl md:text-5xl">
+              About Us
+            </h2>
+          </div>
+
+          {/* About us Section */}
+          <div>
+          <section className="text-gray-600 body-font">
+    <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+      <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
+        <img className="object-cover object-center rounded" alt="hero" src={AboutUsImg}/>
+      </div>
+      <div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
+        <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Who we are ?
+          <br className="hidden lg:inline-block"/>
+        </h1>
+        <p className="mb-8 leading-relaxed">The Buy Buzzar Group is one of India's leading digital e-commerce entities and includes group companies Buy Buzzar, Myntra, Buy Buzzar Wholesale, Buy Buzzar Health+ and Cleartrip. The Group is also a majority shareholder in PhonePe, one of the leading Payments Apps in India.
+
+Started in 2007, Buy Buzzar has enabled millions of consumers, sellers, merchants, and small businesses to be a part of India's digital commerce revolution, with a registered customer base of more than 400 million, offering over 150 million products across 80+ categories. Our efforts to democratize commerce in India, drive access and affordability, delight customers, create lakhs of jobs in the ecosystem, and empower generations of entrepreneurs and MSMEs have inspired us to innovate on many industry firsts. Buy Buzzar is known for pioneering services such as Cash on Delivery, No Cost EMI and easy returns – customer-centric innovations have made online shopping more accessible and affordable for millions of Indians. Together with its group companies, Buy Buzzar is committed to transforming commerce in India through technology.
+
+With Catapult, Buy Buzzar aims to provide an umbrella solution to a budding brand's financing & marketing needs. The program offers marketing solutions and capital for new age direct-to-consumer brands to leapfrog into their next phase of growth. The offering goes beyond financing the brands by providing creative services and effective acquisition cost reduction solutions.</p>
+      </div>
+    </div>
+  </section>
+          </div>
+
+          <div>
+          <section className="text-gray-600 body-font">
+  <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+    <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+      <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Technology at <span className='text-yellow-500 font-extralight'>Buy</span> <span className='text-red-500'>Buzzar</span>
+        <br className="hidden lg:inline-block"/>Innovation !
+      </h1>
+      <p className="mb-8 leading-relaxed">Welcome to Buy-Buzzar, where innovation meets technology to redefine your online shopping experience. At Buy-Buzzar, we believe that the future of e-commerce lies in harnessing cutting-edge technology to create a seamless, personalized, and efficient platform for our customers.
+
+Our journey began with a vision to transform the way people shop online, and today, we are proud to be at the forefront of this revolution. Leveraging the power of advanced technologies such as Artificial Intelligence, Machine Learning, and Big Data, Buy-Buzzar offers a shopping experience that is tailored to your unique preferences and needs. Buy Buzzar technology drives path-breaking, customer 
+        level innovation that makes half qualify products 
+        accesible to indian shoppers, besides making the online shopping experience convenientand sameless.
+        <p className='font-semibold font-serif'>
+        Join us at Buy-Buzzar, and experience the trendy fashion with great deals today!
+      </p>
+      </p>
+
+    </div>
+    <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+      <img className="object-cover object-center rounded" alt="hero" src={AboutUsImg2}/>
+    </div>
+  </div>
+    <div className='w-full text-center mb-11'>
+      <button className="border-none px-[5rem] md:px-[9rem] lg:px-[10rem] py-2 rounded-full bg-fuchsia-500 text-white font-semibold
+        hover:bg-fuchsia-600"
+        onClick={()=>nevigate("/allproducts")}>
+          continue shopping
+          </button>
+    </div>
+</section>
+          </div>
+      </>
+    )
+  }
+
+  export default About

src/Components/AllProducts/AllProducts.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AllProducts = () => {
+  return (
+    <div>AllProducts</div>
+  )
+}
+
+export default AllProducts

src/Components/CartEmpty/CartEmpty.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+const CartEmpty = () => {
+  return (
+    <>
+    <div className='w-[80%] h-[70vh] mt-[80px]
+    container mx-auto px-4 py-4 shadow-lg rounded-md mb-7 
+    flex justify-center items-center'> 
+    <div className='flex items-center flex-col'>
+        <img 
+        src="https://rukminim2.flixcart.com/www/800/800/promos/16/05/2019/d438a32e-765a-4d8b-b4a6-520b560971e8.png?q=90" 
+        alt="" 
+        className="w-[300px] mb-10"
+        />
+        <h1 
+        className='text-center text-2xl font-semibold mt-3'>
+          Your Cart is empty!</h1>
+
+          <Link to="/allproducts">
+          <button className="text-white
+        bg-yellow-400 border-0 py-1 px-1 md:px-3 focus:outline-none 
+          hover:bg-yellow-500 rounded mt-4">
+            shop now
+            </button>
+            </Link> 
+    </div>
+      </div>
+    </>
+  )
+}
+
+export default CartEmpty