From 3c1f2c82d3baccaeaf2fe759cb44d1476f868858 Mon Sep 17 00:00:00 2001
From: GaneshArumugam05 <ganesharumugam2k@gmail.com>
Date: Wed, 10 Dec 2025 18:47:01 +0530
Subject: [PATCH 1/2] re usable components

day 01
src folder added
---
 frontend/src/App.jsx                          | 199 ++++++++++++---
 frontend/src/Pages/LandingPage.jsx            |  71 ++++++
 frontend/src/Pages/ProductsDetails.jsx        |   0
 frontend/src/Pages/ProductsPage.jsx           |   0
 frontend/src/data/Productsdata.js             | 240 ++++++++++++++++++
 frontend/src/index.css                        |  76 +-----
 .../src/reusableComponents/BannerCard.jsx     |  88 +++++++
 frontend/src/reusableComponents/BentoGrid.jsx | 124 +++++++++
 frontend/src/reusableComponents/Button.jsx    |  19 ++
 .../src/reusableComponents/CarouselSlider.jsx |  62 +++++
 .../src/reusableComponents/FeaturesList.jsx   |  36 +++
 .../src/reusableComponents/FilterOption.jsx   |  44 ++++
 frontend/src/reusableComponents/Footer.jsx    |  76 ++++++
 frontend/src/reusableComponents/Input.jsx     |  15 ++
 frontend/src/reusableComponents/ListCards.jsx |  46 ++++
 .../src/reusableComponents/ModalPopup.jsx     |  43 ++++
 frontend/src/reusableComponents/Navbar.jsx    |  93 +++++++
 .../src/reusableComponents/ProductCard.jsx    | 231 +++++++++++++++++
 frontend/src/reusableComponents/SearchBar.jsx |  18 ++
 .../src/reusableComponents/TechnicianCard.jsx | 146 +++++++++++
 20 files changed, 1535 insertions(+), 92 deletions(-)
 create mode 100644 frontend/src/Pages/LandingPage.jsx
 create mode 100644 frontend/src/Pages/ProductsDetails.jsx
 create mode 100644 frontend/src/Pages/ProductsPage.jsx
 create mode 100644 frontend/src/data/Productsdata.js
 create mode 100644 frontend/src/reusableComponents/BannerCard.jsx
 create mode 100644 frontend/src/reusableComponents/BentoGrid.jsx
 create mode 100644 frontend/src/reusableComponents/Button.jsx
 create mode 100644 frontend/src/reusableComponents/CarouselSlider.jsx
 create mode 100644 frontend/src/reusableComponents/FeaturesList.jsx
 create mode 100644 frontend/src/reusableComponents/FilterOption.jsx
 create mode 100644 frontend/src/reusableComponents/Footer.jsx
 create mode 100644 frontend/src/reusableComponents/Input.jsx
 create mode 100644 frontend/src/reusableComponents/ListCards.jsx
 create mode 100644 frontend/src/reusableComponents/ModalPopup.jsx
 create mode 100644 frontend/src/reusableComponents/Navbar.jsx
 create mode 100644 frontend/src/reusableComponents/ProductCard.jsx
 create mode 100644 frontend/src/reusableComponents/SearchBar.jsx
 create mode 100644 frontend/src/reusableComponents/TechnicianCard.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f67355a..2a4cb67 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,35 +1,174 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+// src/App.jsx
+import React from "react";
+import LandingPage from "./Pages/LandingPage";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <div className="min-h-screen bg-gray-50">
+      <LandingPage />
+    </div>
+  );
 }
 
-export default App
+export default App;
+
+
+
+// // src/App.jsx
+// import { useState } from "react";
+// import { motion } from "framer-motion";
+// import Button from "./reusableComponents/Button";
+// import Input from "./reusableComponents/Input";
+// import ProductCard from "./reusableComponents/ProductCard";
+// import Navbar from "./reusableComponents/Navbar";
+// import Footer from "./reusableComponents/Footer";
+// import BentoGrid from "./reusableComponents/BentoGrid";
+
+// import FilterOptions from "./reusableComponents/FilterOption";
+// import Modal from "./reusableComponents/ModalPopup";
+// import Carousel from "./reusableComponents/CarouselSlider";
+// import BannerCard from "./reusableComponents/BannerCard";
+// import SearchBar from "./reusableComponents/Searchbar";
+
+// const products = [
+//   { id: 1, name: "iPhone 15 Pro", price: 999, image: "https://images.unsplash.com/photo-1690489874296-ea89dd0ba3f3?w=300", category: "Electronics" },
+//   { id: 2, name: "MacBook Air", price: 1299, image: "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=300", category: "Electronics" },
+//   { id: 3, name: "Nike Air Max", price: 129, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300", category: "Clothing" },
+//   { id: 4, name: "Adidas Ultraboost", price: 189, image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=300", category: "Clothing" },
+//   { id: 5, name: "Coffee Maker", price: 79, image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=300", category: "Home" },
+//   { id: 6, name: "Yoga Mat", price: 39, image: "https://images.unsplash.com/photo-1588854337236-7947b26e6a62?w=300", category: "Sports" }
+// ];
+
+// function App() {
+//   const [cartCount, setCartCount] = useState(3);
+//   const [isModalOpen, setIsModalOpen] = useState(false);
+//   const [searchTerm, setSearchTerm] = useState("");
+//   const [filters, setFilters] = useState([]);
+//   const [email, setEmail] = useState("");
+
+//   const categories = ["Electronics", "Clothing", "Home", "Sports"];
+//   const carouselImages = [
+//     "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=1200",
+//     "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1200",
+//     "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200"
+//   ];
+
+//   const filteredProducts = products.filter(product => 
+//     product.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
+//     (filters.length === 0 || filters.includes(product.category))
+//   );
+
+//   return (
+//     <div className="min-h-screen bg-gray-50">
+//       {/* Navbar */}
+//       <Navbar cartCount={cartCount} />
+      
+//       <main className="max-w-7xl mx-auto px-4 py-12">
+//         {/* Hero Carousel */}
+//         <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-12">
+//           <Carousel images={carouselImages} />
+//         </motion.div>
+
+//         {/* Search + Filters Row */}
+//         <div className="flex flex-col lg:flex-row gap-6 mb-12">
+//           <SearchBar onSearch={setSearchTerm} />
+//           <FilterOptions categories={categories} onFilterChange={setFilters} />
+//         </div>
+
+//         {/* Banner Cards */}
+//         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+//           <BannerCard
+//             title="Summer Sale 50% OFF"
+//             subtitle="Limited time offer on all electronics"
+//             ctaText="Shop Electronics"
+//             image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400"
+//             onClick={() => setFilters(["Electronics"])}
+//           />
+//           <BannerCard
+//             title="Free Shipping"
+//             subtitle="On orders over $50"
+//             ctaText="Learn More"
+//             image="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400"
+//             onClick={() => alert("Free shipping on orders over $50!")}
+//           />
+//           <BannerCard
+//             title="New Arrivals"
+//             subtitle="Check out latest products"
+//             ctaText="Explore Now"
+//             image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400"
+//             onClick={() => setFilters([])}
+//           />
+//         </div>
+
+//         {/* Featured Products */}
+//         <section>
+//           <h2 className="text-3xl font-bold text-gray-900 mb-8">Featured Products</h2>
+//           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+//             {filteredProducts.map(product => (
+//               <ProductCard key={product.id} product={product} />
+//             ))}
+//           </div>
+//         </section>
+
+//         {/* Newsletter Signup */}
+//         <motion.section 
+//           initial={{ opacity: 0 }} 
+//           whileInView={{ opacity: 1 }} 
+//           className="mt-20 p-8 bg-white rounded-2xl shadow-xl"
+//         >
+//           <h3 className="text-2xl font-bold text-center mb-6">Stay Updated</h3>
+//           <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+//             <Input
+//               label=""
+//               type="email"
+//               placeholder="Enter your email"
+//               value={email}
+//               onChange={(e) => setEmail(e.target.value)}
+//             />
+//             <Button size="lg" onClick={() => alert("Subscribed!")}>Subscribe</Button>
+//           </div>
+//         </motion.section>
+
+//         {/* Bento Grid Demo */}
+//         <section className="mt-20">
+//           <h3 className="text-2xl font-bold mb-8">Dashboard Preview</h3>
+//           <BentoGrid />
+//         </section>
+
+//         {/* Demo Modal Trigger */}
+//         <div className="mt-12 text-center">
+//           <Button 
+//             size="lg" 
+//             onClick={() => setIsModalOpen(true)}
+//             className="bg-gradient-to-r from-purple-600 to-blue-600 text-white"
+//           >
+//             Quick Product View
+//           </Button>
+//         </div>
+//       </main>
+
+//       {/* Modal */}
+//       <Modal 
+//         isOpen={isModalOpen} 
+//         onClose={() => setIsModalOpen(false)} 
+//         title="iPhone 15 Pro - Quick View"
+//       >
+//         <div className="space-y-4">
+//           <img src="https://images.unsplash.com/photo-1690489874296-ea89dd0ba3f3?w=400" alt="iPhone" className="w-full h-48 object-cover rounded-lg" />
+//           <h3 className="text-xl font-bold">$999</h3>
+//           <p className="text-gray-600">Latest iPhone with A17 Pro chip and titanium design.</p>
+//           <div className="flex gap-3 pt-4">
+//             <Button className="flex-1">Add to Cart</Button>
+//             <Button variant="outline" className="flex-1">View Details</Button>
+//           </div>
+//         </div>
+//       </Modal>
+
+//       {/* Footer */}
+//       <Footer />
+//     </div>
+//   );
+// }
+
+// export default App;
+
diff --git a/frontend/src/Pages/LandingPage.jsx b/frontend/src/Pages/LandingPage.jsx
new file mode 100644
index 0000000..13ec2c1
--- /dev/null
+++ b/frontend/src/Pages/LandingPage.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { motion } from "framer-motion";
+import Navbar from "../reusableComponents/Navbar";
+import Carousel from "../reusableComponents/CarouselSlider";
+import ListCards from "../reusableComponents/ListCards";
+import Footer from "../reusableComponents/Footer";
+import ProductCard from "../reusableComponents/ProductCard";
+import FeatureList from "../reusableComponents/FeaturesList";
+import TechnicianCard from "../reusableComponents/TechnicianCard";
+import BentoGrid from "../reusableComponents/BentoGrid";
+import BannerCard from "../reusableComponents/BannerCard";
+
+const LandingPage = () => {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar cartCount={3} />
+
+      {/* Carousel */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mb-8 sm:mb-12"
+      >
+        <Carousel />
+      </motion.div>
+
+      <ListCards />
+
+      {/* Featured Products */}
+      <section className="py-12 sm:py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-10 sm:mb-14"
+          >
+            Featured Products
+          </motion.h2>
+          <ProductCard /> {/* Now renders all featured products internally */}
+        </div>
+      </section>
+
+      {/* Service Features */}
+      <section className="bg-gray-50">
+        <FeatureList />
+      </section>
+
+      {/* Technicians Section */}
+      <section className="py-12 sm:py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-10 sm:mb-14"
+          >
+            Our Top Skilled Technicians
+          </motion.h2>
+          <TechnicianCard /> {/* Now renders all technicians internally */}
+        </div>
+      </section>
+
+      <BentoGrid />
+      <BannerCard />
+      <Footer />
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/frontend/src/Pages/ProductsDetails.jsx b/frontend/src/Pages/ProductsDetails.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/Pages/ProductsPage.jsx b/frontend/src/Pages/ProductsPage.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/data/Productsdata.js b/frontend/src/data/Productsdata.js
new file mode 100644
index 0000000..402cbf1
--- /dev/null
+++ b/frontend/src/data/Productsdata.js
@@ -0,0 +1,240 @@
+ const products = [
+  {
+    id: 1,
+    name: "Ro Enrich Glory RO+UV+UF Copper Water Purifier",
+    brand: "Pureit",
+    rating: 4.6,
+    reviews: 112,
+    price: 11999,
+    mrp: 12599,
+    discount: "20% Off",
+    emi: "No-cost EMI from ₹2,084/mo",
+    image: "https://i.ibb.co/Ln7s2h9/ro1.jpg",
+    description:
+      "Getting pure and safe water for daily consumption is easy with the Aqua Fresh Copper 18 ltr Audi alkaline technology India no 01 Ro Water purifier. It uses RO + UV + UF + TDS + Copper purification to deliver 100% safe water. Auto-start and auto shut-off prevents overflow. 18 L tank ideal for medium-size families.",
+    deliveryText: "Delivery by DD/MM/YYYY. If you order before HH:MM",
+    offers: [
+      "HDFC Bank: 10% Instant Discount",
+      "SBI Credit Card: 10% Cashback",
+      "No-cost EMI Available",
+    ],
+    specifications: {
+      filtrationCapacity: "18 L/hr",
+      purificationCapacity: "2000 L",
+      purificationProcess: "RO + UV + UF + Copper",
+      coldWaterCapacity: "0 L",
+      hotWaterCapacity: "0 L",
+      uvLight: "Yes, in storage tank",
+      hotDispenser: "No",
+      coldDispenser: "No",
+      digitalDisplay: "Yes",
+      installationType: "Wall Mount",
+      stages: "7",
+    },
+  },
+
+  {
+    id: 2,
+    name: "Kent Grand Plus ZWW RO + UV + UF + TDS Controller",
+    brand: "Kent",
+    rating: 4.5,
+    reviews: 240,
+    price: 15000,
+    mrp: 16999,
+    discount: "18% Off",
+    emi: "EMI starting from ₹2,300/mo",
+    image: "https://i.ibb.co/8mMXrWb/ro2.jpg",
+    description:
+      "Kent Grand Plus comes with RO + UV + UF multistage purification for pure drinking water. TDS controller ensures natural minerals are retained. Suitable for borewell and tanker water.",
+    deliveryText: "Delivery within 2–3 days",
+    offers: ["SBI Card: ₹1500 Instant Discount", "Free installation"],
+    specifications: {
+      filtrationCapacity: "20 L/hr",
+      purificationCapacity: "2500 L",
+      purificationProcess: "RO + UV + UF",
+      coldWaterCapacity: "0 L",
+      hotWaterCapacity: "0 L",
+      uvLight: "Yes",
+      installationType: "Wall Mount",
+      stages: "7",
+    },
+  },
+
+  {
+    id: 3,
+    name: "Aquaguard Aura RO+UV+UF with Active Copper",
+    brand: "Eureka Forbes",
+    rating: 4.4,
+    reviews: 198,
+    price: 13999,
+    mrp: 15999,
+    discount: "12% Off",
+    emi: "EMI from ₹1,899/mo",
+    image: "https://i.ibb.co/vQyx4hv/ro3.jpg",
+    description:
+      "Aquaguard Aura with Active Copper Technology enhances immunity and improves taste. The RO + UV + UF purification ensures water is free from viruses, bacteria, and heavy metals.",
+    deliveryText: "Delivery in 3–5 days",
+    offers: ["HDFC: 5% Cashback", "Free Filter Replacement (1 Year)"],
+    specifications: {
+      filtrationCapacity: "15 L/hr",
+      purificationCapacity: "1800 L",
+      purificationProcess: "RO + UV + UF + Active Copper",
+      uvLight: "Yes",
+      installationType: "Wall Mount / Counter Top",
+      stages: "8",
+    },
+  },
+
+  {
+    id: 4,
+    name: "Livpure Glo RO + UV + Mineralizer",
+    brand: "Livpure",
+    rating: 4.3,
+    reviews: 310,
+    price: 10499,
+    mrp: 12999,
+    discount: "25% Off",
+    emi: "EMI from ₹1,400/mo",
+    image: "https://i.ibb.co/PtW4VWG/ro4.jpg",
+    description:
+      "Livpure Glo with RO + UV purification and a mineralizer ensures balanced and healthy drinking water. Ideal for all water sources.",
+    deliveryText: "Delivery in 2 days",
+    offers: ["Axis Bank 10% Discount", "Free Installation"],
+    specifications: {
+      filtrationCapacity: "12 L/hr",
+      purificationCapacity: "1600 L",
+      purificationProcess: "RO + UV + Mineralizer",
+      installationType: "Wall Mount",
+      stages: "6",
+    },
+  },
+
+  {
+    id: 5,
+    name: "HUL Pureit Classic RO+UV+MF Water Purifier",
+    brand: "Pureit",
+    rating: 4.2,
+    reviews: 180,
+    price: 9999,
+    mrp: 10999,
+    discount: "10% Off",
+    emi: "EMI from ₹1,299/mo",
+    image: "https://i.ibb.co/QQcNZk6/ro5.jpg",
+    description:
+      "Pureit Classic RO+UV+MF guarantees 100% RO filtered water with multi-stage purification.",
+    deliveryText: "Delivery within 48 hours",
+    offers: ["ICICI: 750 Cashback"],
+    specifications: {
+      filtrationCapacity: "10 L/hr",
+      purificationCapacity: "1500 L",
+      purificationProcess: "RO + UV + MF",
+      stages: "6",
+      installationType: "Wall Mount",
+    },
+  },
+
+  {
+    id: 6,
+    name: "Aqua Fresh Swift RO+UV+UF+TDS Controller",
+    brand: "AquaFresh",
+    rating: 4.1,
+    reviews: 105,
+    price: 8999,
+    mrp: 12999,
+    discount: "30% Off",
+    emi: "EMI from ₹999/mo",
+    image: "https://i.ibb.co/Y3Bgb7q/ro6.jpg",
+    description:
+      "Affordable RO purifier with UV + UF purification and TDS adjustments for borewell water.",
+    offers: ["Free Pre-Filter Kit"],
+    specifications: {
+      filtrationCapacity: "14 L/hr",
+      purificationCapacity: "1800 L",
+      purificationProcess: "RO + UV + UF + TDS",
+      stages: "7",
+    },
+  },
+
+  {
+    id: 7,
+    name: "Blue Star Excella RO+UF 6 L Purifier",
+    brand: "Blue Star",
+    rating: 4.3,
+    reviews: 155,
+    price: 8499,
+    mrp: 9990,
+    discount: "15% Off",
+    emi: "EMI from ₹1,150/mo",
+    image: "https://i.ibb.co/CJ0mpc6/ro7.jpg",
+    description:
+      "Blue Star’s Excella RO+UF provides pure and great-tasting drinking water with a 6-stage purification system.",
+    specifications: {
+      filtrationCapacity: "12 L/hr",
+      purificationCapacity: "1400 L",
+      purificationProcess: "RO + UF",
+      stages: "6",
+    },
+  },
+
+  {
+    id: 8,
+    name: "Faber Galaxy Fresh RO+UV+UF with Copper Guard",
+    brand: "Faber",
+    rating: 4.4,
+    reviews: 167,
+    price: 12999,
+    mrp: 14999,
+    discount: "14% Off",
+    emi: "EMI from ₹1,799/mo",
+    image: "https://i.ibb.co/fHbhkXM/ro8.jpg",
+    description:
+      "Faber Galaxy uses RO+UV+UF triple purification along with Copper Guard technology to ensure healthy drinking water.",
+    specifications: {
+      filtrationCapacity: "13 L/hr",
+      purificationCapacity: "1800 L",
+      stages: "7",
+    },
+  },
+
+  {
+    id: 9,
+    name: "AO Smith Z1 UV + UF + Hot Water Purifier",
+    brand: "AO Smith",
+    rating: 4.6,
+    reviews: 198,
+    price: 15999,
+    mrp: 18999,
+    discount: "15% Off",
+    emi: "EMI from ₹2,200/mo",
+    image: "https://i.ibb.co/0M4T4mJ/ro9.jpg",
+    description:
+      "AO Smith Z1 provides UV purification and hot water at 45°C and 80°C. Ideal for families, offices, and kitchens.",
+    specifications: {
+      purificationProcess: "UV + UF",
+      hotWaterCapacity: "Yes, 45°C and 80°C",
+      stages: "5",
+    },
+  },
+
+  {
+    id: 10,
+    name: "Havells Max Alkaline RO+UV Water Purifier",
+    brand: "Havells",
+    rating: 4.5,
+    reviews: 220,
+    price: 14999,
+    mrp: 16999,
+    discount: "12% Off",
+    emi: "EMI from ₹1,999/mo",
+    image: "https://i.ibb.co/F4WQzC3/ro10.jpg",
+    description:
+      "Havells Max Alkaline provides 100% RO purified alkaline water with balanced minerals and antioxidants.",
+    specifications: {
+      filtrationCapacity: "15 L/hr",
+      purificationProcess: "RO + UV + Alkaline",
+      stages: "8",
+    },
+  },
+];
+
+export default products;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08a3ac9..0326a3d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,68 +1,20 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+/* src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
+@layer components {
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg;
   }
-  button {
-    background-color: #f9f9f9;
+  
+  .product-card-hover {
+    @apply hover:shadow-xl hover:-translate-y-2 transition-all duration-300;
   }
 }
diff --git a/frontend/src/reusableComponents/BannerCard.jsx b/frontend/src/reusableComponents/BannerCard.jsx
new file mode 100644
index 0000000..1683241
--- /dev/null
+++ b/frontend/src/reusableComponents/BannerCard.jsx
@@ -0,0 +1,88 @@
+import { motion } from "framer-motion";
+
+export default function BannerCard() {
+  const bannerData = {
+    image: "https://images.unsplash.com/photo-1615484473812-66b5c0b8c63f?auto=format&fit=crop&w=1200&q=80",
+    title: "Exchange Your Old RO",
+    subtitle: "Get instant value for your old purifier. Upgrade to a new model with advanced filtration and smart design.",
+    ctaText: "Explore Exchange Offers"
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.8 }}
+      viewport={{ once: true }}
+      className="relative bg-gradient-to-br from-emerald-600 via-blue-600 to-purple-700 text-white rounded-2xl overflow-hidden shadow-2xl hover:shadow-3xl transition-all duration-500 group w-full my-8"
+    >
+      {/* Background RO Purifier Image - Right Corner */}
+      <div className="absolute top-0 right-0 w-1/2 h-full opacity-15">
+        <img 
+          src="https://images.unsplash.com/photo-1615484473812-66b5c0b8c63f?auto=format&fit=crop&w=800&q=80" 
+          alt="RO Purifier"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-l from-transparent via-black/20 to-black/40" />
+      </div>
+
+      {/* Content Section - Full Width */}
+      <div className="relative z-10 px-4 sm:px-6 lg:px-8 py-8 md:py-12">
+        <div className="max-w-7xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="text-xl md:text-2xl lg:text-3xl font-black mb-4 leading-tight bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent drop-shadow-lg"
+          >
+            {bannerData.title}
+          </motion.div>
+          
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            className="text-sm md:text-base mb-6 opacity-95 leading-relaxed max-w-2xl"
+          >
+            {bannerData.subtitle}
+          </motion.p>
+
+          <motion.button
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.6 }}
+            whileHover={{ scale: 1.05, boxShadow: "0 10px 25px rgba(0,0,0,0.3)" }}
+            whileTap={{ scale: 0.95 }}
+            className="group/cta relative bg-white/90 backdrop-blur-xl text-blue-700 px-6 py-2.5 md:px-8 md:py-3 rounded-xl font-semibold text-sm md:text-base shadow-xl border-2 border-white/50 hover:bg-white hover:text-blue-600 transition-all duration-300 overflow-hidden"
+          >
+            <span className="relative z-10 flex items-center gap-2">
+              {bannerData.ctaText}
+              <svg className="w-4 h-4 md:w-5 md:h-5 group-hover/cta:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              </svg>
+            </span>
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -skew-x-12 -translate-x-[100%] group-hover/cta:translate-x-[100%] transition-transform duration-700" />
+          </motion.button>
+        </div>
+      </div>
+
+      {/* RO Purifier Accent - Bottom Right Corner */}
+      <motion.div
+        initial={{ scale: 0, rotate: -10 }}
+        whileInView={{ scale: 1, rotate: 0 }}
+        transition={{ duration: 0.8, delay: 0.8 }}
+        className="absolute bottom-4 right-4 w-20 h-20 md:w-24 md:h-24 opacity-20"
+      >
+        <img 
+          src="https://images.unsplash.com/photo-1615484473812-66b5c0b8c63f?auto=format&fit=crop&w=300&q=80" 
+          alt="RO Purifier Accent"
+          className="w-full h-full object-contain drop-shadow-2xl"
+        />
+      </motion.div>
+
+      {/* Decorative particles */}
+      <div className="absolute top-4 left-4 w-16 h-16 bg-white/10 rounded-full blur-lg" />
+      <div className="absolute bottom-12 right-12 w-12 h-12 bg-white/5 rounded-full blur-xl animate-pulse" />
+    </motion.div>
+  );
+}
diff --git a/frontend/src/reusableComponents/BentoGrid.jsx b/frontend/src/reusableComponents/BentoGrid.jsx
new file mode 100644
index 0000000..b550d6d
--- /dev/null
+++ b/frontend/src/reusableComponents/BentoGrid.jsx
@@ -0,0 +1,124 @@
+import { motion } from "framer-motion";
+
+export default function BentoGrid() {
+  return (
+    <div className="flex h-full w-full items-center justify-center p-4">
+      <div
+        className="
+        grid h-full w-full 
+        grid-cols-3 grid-rows-2 
+        gap-4 p-4 rounded-lg
+      "
+      >
+        {/* 1️⃣ LEFT TALL CARD - Exchange Offer */}
+        <motion.div
+          className="
+            col-span-1 row-span-2 relative rounded-xl overflow-hidden text-white
+          "
+          style={{
+            backgroundImage:
+              "url('https://i.ibb.co/0KBJyVf/water-purifier-1.jpg')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+          whileHover={{ scale: 1.02 }}
+        >
+          <div className="absolute inset-0 bg-black/40"></div>
+
+          <div className="relative p-6 flex flex-col h-full justify-end">
+            <h2 className="text-2xl font-bold">Exchange Your Old Purifier</h2>
+            <p className="mt-2">
+              Save up to 30% when you trade in your old RO system. Keep your
+              home healthy with the latest models.
+            </p>
+
+            <button className="mt-4 bg-white text-black font-semibold px-4 py-2 rounded-lg w-fit">
+              Exchange Now
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 2️⃣ TOP MIDDLE - Freshness */}
+        <motion.div
+          className="
+            col-span-1 row-span-1 relative rounded-xl overflow-hidden text-white
+          "
+          style={{
+            backgroundImage:
+              "url('https://i.ibb.co/xMf8sYb/water-drop-bg.jpg')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+          whileHover={{ scale: 1.02 }}
+        >
+          <div className="absolute inset-0 bg-black/40"></div>
+
+          <div className="relative p-6">
+            <h2 className="text-xl font-bold">Experience the Freshness</h2>
+            <p className="mt-2">This Season, Stay Hydrated & Save Big!</p>
+
+            <button className="mt-4 bg-white text-black font-semibold px-4 py-2 rounded-lg w-fit">
+              Grab Offers
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 3️⃣ RIGHT TALL - Latest RO Purifiers */}
+        <motion.div
+          className="
+            col-span-1 row-span-2 relative rounded-xl overflow-hidden text-white
+          "
+          style={{
+            backgroundImage:
+              "url('https://i.ibb.co/6mSbMZC/ro-purifier-modern.jpg')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+          whileHover={{ scale: 1.02 }}
+        >
+          <div className="absolute inset-0 bg-black/40"></div>
+
+          <div className="relative p-6 flex flex-col h-full justify-end">
+            <h2 className="text-2xl font-bold">
+              Discover Our Latest RO Purifiers
+            </h2>
+            <p className="mt-2">
+              Energy-efficient, compact, and stylish. Designed for modern homes.
+            </p>
+
+            <button className="mt-4 bg-white text-black font-semibold px-4 py-2 rounded-lg w-fit">
+              Explore Exchange Offers
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 4️⃣ BOTTOM MIDDLE - Service Booking */}
+        <motion.div
+          className="
+            col-span-1 row-span-1 relative rounded-xl overflow-hidden text-white
+          "
+          style={{
+            backgroundImage:
+              "url('https://i.ibb.co/4R6HsxN/technician-ro.jpg')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+          whileHover={{ scale: 1.02 }}
+        >
+          <div className="absolute inset-0 bg-black/40"></div>
+
+          <div className="relative p-6">
+            <h2 className="text-xl font-bold">Book a Technician</h2>
+            <p className="mt-2">
+              Certified technicians at your doorstep — fast & reliable service.
+            </p>
+
+            <button className="mt-4 bg-white text-black font-semibold px-4 py-2 rounded-lg w-fit">
+              Book Service
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/Button.jsx b/frontend/src/reusableComponents/Button.jsx
new file mode 100644
index 0000000..7d94861
--- /dev/null
+++ b/frontend/src/reusableComponents/Button.jsx
@@ -0,0 +1,19 @@
+// Button.jsx
+export default function Button({ children, variant="primary", size="md", onClick, disabled, className="" }) {
+  const base = "px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700",
+    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
+    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
+  };
+  const sizes = { sm: "px-3 py-1.5 text-sm", md: "px-4 py-2", lg: "px-6 py-3 text-lg" };
+  
+  return (
+    <button 
+      className={`${base} ${variants[variant]} ${sizes[size]} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+      onClick={onClick} disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/frontend/src/reusableComponents/CarouselSlider.jsx b/frontend/src/reusableComponents/CarouselSlider.jsx
new file mode 100644
index 0000000..18e8aeb
--- /dev/null
+++ b/frontend/src/reusableComponents/CarouselSlider.jsx
@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function Carousel({ autoPlay = true }) {
+  const [current, setCurrent] = useState(0);
+  
+  const images = [
+    "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=1200&q=80",
+    "https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&q=80",
+    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=1200&q=80",
+  ];
+
+  useEffect(() => {
+    if (autoPlay) {
+      const interval = setInterval(() => {
+        setCurrent((current + 1) % images.length);
+      }, 4000);
+      return () => clearInterval(interval);
+    }
+  }, [current, autoPlay]);
+
+  return (
+    <div className="relative w-full h-96 rounded-2xl overflow-hidden shadow-xl">
+      <AnimatePresence mode="wait">
+        <motion.img
+          key={current}
+          src={images[current]}
+          className="w-full h-full object-cover"
+          initial={{ x: 100 }}
+          animate={{ x: 0 }}
+          exit={{ x: -100 }}
+          transition={{ duration: 0.5 }}
+        />
+      </AnimatePresence>
+      
+      <button
+        onClick={() => setCurrent((current + images.length - 1) % images.length)}
+        className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg"
+      >
+        ‹
+      </button>
+      <button
+        onClick={() => setCurrent((current + 1) % images.length)}
+        className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg"
+      >
+        ›
+      </button>
+      
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+        {images.map((_, idx) => (
+          <button
+            key={idx}
+            onClick={() => setCurrent(idx)}
+            className={`w-3 h-3 rounded-full transition-all ${
+              idx === current ? "bg-white scale-125" : "bg-white/50"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/FeaturesList.jsx b/frontend/src/reusableComponents/FeaturesList.jsx
new file mode 100644
index 0000000..8e63d9f
--- /dev/null
+++ b/frontend/src/reusableComponents/FeaturesList.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { motion } from "framer-motion"; // ✅ Added missing import
+import { FaNetworkWired, FaUndoAlt, FaCheckCircle, FaGift } from "react-icons/fa";
+
+export default function FeatureList() {
+  const serviceFeatures = [
+    { icon: FaNetworkWired, name: "Wide Service Network" },
+    { icon: FaUndoAlt, name: "Easy Return" },
+    { icon: FaCheckCircle, name: "Trusted Brand" },
+    { icon: FaGift, name: "Free 1 Year Warranty" },
+  ];
+
+  return (
+    <div className="py-12 sm:py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        {serviceFeatures.map((feature, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: index * 0.1 }}
+            viewport={{ once: true }}
+            className="flex flex-col items-center text-center p-6 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02]"
+          >
+            <div className="text-blue-500 text-4xl mb-4">
+              <feature.icon />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">
+              {feature.name}
+            </h3>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/FilterOption.jsx b/frontend/src/reusableComponents/FilterOption.jsx
new file mode 100644
index 0000000..42640c3
--- /dev/null
+++ b/frontend/src/reusableComponents/FilterOption.jsx
@@ -0,0 +1,44 @@
+// FilterOptions.jsx
+import { useState } from "react";
+
+export default function FilterOptions({ categories, onFilterChange }) {
+  const [selected, setSelected] = useState([]);
+
+  const toggleFilter = (category) => {
+    const newSelected = selected.includes(category)
+      ? selected.filter((c) => c !== category)
+      : [...selected, category];
+    setSelected(newSelected);
+    onFilterChange(newSelected);
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-md border">
+      <h3 className="font-semibold text-lg mb-4">Filters</h3>
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        {categories.map((category) => (
+          <label key={category} className="flex items-center gap-2 p-3 rounded-lg hover:bg-gray-50 cursor-pointer group">
+            <input
+              type="checkbox"
+              checked={selected.includes(category)}
+              onChange={() => toggleFilter(category)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+            />
+            <span className="text-sm font-medium group-hover:text-blue-600">{category}</span>
+          </label>
+        ))}
+      </div>
+      {selected.length > 0 && (
+        <button
+          onClick={() => {
+            setSelected([]);
+            onFilterChange([]);
+          }}
+          className="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"
+        >
+          Clear all ({selected.length})
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/Footer.jsx b/frontend/src/reusableComponents/Footer.jsx
new file mode 100644
index 0000000..bc4c32a
--- /dev/null
+++ b/frontend/src/reusableComponents/Footer.jsx
@@ -0,0 +1,76 @@
+export default function Footer() {
+  return (
+    <footer className="bg-[#0D5D9B] text-white pt-16 pb-8 mt-20">
+      
+      {/* Main Footer Grid */}
+      <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12">
+        
+        {/* Company Info */}
+        <div>
+          <h3 className="text-2xl font-bold mb-4">RO Purifier</h3>
+          <p className="text-gray-200 leading-relaxed">
+            Pure Water. Pure Trust.  
+            Delivering clean and safe drinking water for every home.
+          </p>
+        </div>
+
+        {/* Quick Links */}
+        <div>
+          <h4 className="text-lg font-semibold mb-5">Quick Links</h4>
+          <ul className="space-y-3 text-sm text-gray-100/80">
+            <li><a href="#" className="hover:text-white transition">Home</a></li>
+            <li><a href="#" className="hover:text-white transition">Shop</a></li>
+            <li><a href="#" className="hover:text-white transition">Find Technician</a></li>
+            <li><a href="#" className="hover:text-white transition">Contact</a></li>
+            <li><a href="#" className="hover:text-white transition">About Us</a></li>
+          </ul>
+        </div>
+
+        {/* Information */}
+        <div>
+          <h4 className="text-lg font-semibold mb-5">Information</h4>
+          <ul className="space-y-3 text-sm text-gray-100/80">
+            <li><a href="#" className="hover:text-white transition">Shipping & Delivery</a></li>
+            <li><a href="#" className="hover:text-white transition">Returns & Refunds</a></li>
+            <li><a href="#" className="hover:text-white transition">Terms & Conditions</a></li>
+            <li><a href="#" className="hover:text-white transition">Privacy Policy</a></li>
+            <li><a href="#" className="hover:text-white transition">FAQs</a></li>
+          </ul>
+        </div>
+
+        {/* Newsletter */}
+        <div>
+          <h4 className="text-lg font-semibold mb-5">Stay Connected</h4>
+          <p className="text-gray-200 text-sm mb-5">
+            Get updates, maintenance tips, and exclusive offers.
+          </p>
+
+          <form className="flex items-center gap-2">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              className="flex-1 px-4 py-2.5 rounded-lg text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 placeholder:text-gray-600"
+            />
+            <button
+              type="submit"
+              className="bg-blue-700 hover:bg-blue-800 px-6 py-2.5 rounded-lg text-sm font-medium transition"
+            >
+              Subscribe
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="w-full mt-14">
+        <hr className="border-gray-200/40" />
+      </div>
+
+      {/* Copyright */}
+      <div className="text-center text-gray-100/80 text-xs mt-4">
+        © {new Date().getFullYear()} PureFlow RO — All Rights Reserved.
+      </div>
+
+    </footer>
+  );
+}
diff --git a/frontend/src/reusableComponents/Input.jsx b/frontend/src/reusableComponents/Input.jsx
new file mode 100644
index 0000000..c0a88ed
--- /dev/null
+++ b/frontend/src/reusableComponents/Input.jsx
@@ -0,0 +1,15 @@
+// Input.jsx
+export default function Input({ label, type="text", value, onChange, error, className="" }) {
+  return (
+    <div className="space-y-1">
+      {label && <label className="text-sm font-medium text-gray-700">{label}</label>}
+      <input
+        type={type}
+        value={value}
+        onChange={onChange}
+        className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${error ? "border-red-500" : "border-gray-300"} ${className}`}
+      />
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/ListCards.jsx b/frontend/src/reusableComponents/ListCards.jsx
new file mode 100644
index 0000000..972e42d
--- /dev/null
+++ b/frontend/src/reusableComponents/ListCards.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { FaMapMarkerAlt, FaExchangeAlt } from "react-icons/fa";
+import { MdCompareArrows } from "react-icons/md";
+
+export default function ListCards() {
+  const cards = [
+    {
+      icon: FaMapMarkerAlt,
+      title: "Track Location",
+      content: "Track your product delivery in real-time.",
+    },
+    {
+      icon: MdCompareArrows,
+      title: "Compare Product",
+      content: "Compare features between multiple products.",
+    },
+    {
+      icon: FaExchangeAlt,
+      title: "Xchange Product",
+      content: "Exchange your products quickly and easily.",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-4">
+      {cards.map((card, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-4 bg-white dark:bg-gray-800 shadow-md p-4 rounded-xl hover:shadow-lg transition"
+        >
+          <div className="text-blue-600 text-3xl">
+            <card.icon />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {card.title}
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              {card.content}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/ModalPopup.jsx b/frontend/src/reusableComponents/ModalPopup.jsx
new file mode 100644
index 0000000..c414365
--- /dev/null
+++ b/frontend/src/reusableComponents/ModalPopup.jsx
@@ -0,0 +1,43 @@
+// Modal.jsx
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function Modal({ isOpen, onClose, children, title }) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+          />
+          <motion.div
+            className="fixed inset-0 flex items-center justify-center p-4 z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <motion.div
+              className="bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto"
+              initial={{ scale: 0.9, y: 50 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 50 }}
+              transition={{ type: "spring", damping: 25, stiffness: 300 }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="p-6 border-b">
+                <h2 className="text-xl font-bold">{title}</h2>
+                <button onClick={onClose} className="absolute top-6 right-6 text-gray-500 hover:text-gray-700">
+                  ✕
+                </button>
+              </div>
+              <div className="p-6">{children}</div>
+            </motion.div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/frontend/src/reusableComponents/Navbar.jsx b/frontend/src/reusableComponents/Navbar.jsx
new file mode 100644
index 0000000..cc68b08
--- /dev/null
+++ b/frontend/src/reusableComponents/Navbar.jsx
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { FaShoppingCart, FaUserCircle, FaSearch, FaTimes } from "react-icons/fa";
+import Button from './Button';
+
+
+export default function Navbar({ cartCount }) {
+  const [isSearchOpen, setSearchOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  return (
+    <nav className="bg-white shadow-sm sticky top-0 z-50">
+      <div className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+
+          {/* Left: Company Name */}
+          <div className="flex-1 flex items-center">
+            <div className="text-2xl font-bold text-blue-700 whitespace-nowrap">
+              Logo
+            </div>
+          </div>
+
+          {/* Center: Nav Links */}
+          <div className="flex-1 hidden md:flex justify-center space-x-8 text-gray-700 font-medium">
+            <a href="#" className="hover:text-blue-600 transition">Home</a>
+            <a href="#" className="hover:text-blue-600 transition">Shop</a>
+            <a href="#" className="hover:text-blue-600 transition">Contact</a>
+            <a href="#" className="hover:text-blue-600 transition">About Us</a>
+          </div>
+
+          {/* Right: Search Toggle, Cart, Profile */}
+          <div className="flex-1 flex items-center justify-end space-x-4">
+
+            {/* Search toggle and input */}
+            <div className="relative">
+              {isSearchOpen ? (
+                <>
+                  <input
+                    autoFocus
+                    type="text"
+                    value={searchTerm}
+                    onChange={e => setSearchTerm(e.target.value)}
+                    placeholder="Search products..."
+                    className="w-48 sm:w-64 border border-gray-300 rounded-full py-1.5 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                  />
+                  <button
+                    onClick={() => { setSearchOpen(false); setSearchTerm(""); }}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                    aria-label="Close search"
+                  >
+                    <FaTimes />
+                  </button>
+                </>
+              ) : (
+                <button
+                  onClick={() => setSearchOpen(true)}
+                  className="text-gray-700 hover:text-blue-600 transition"
+                  aria-label="Open search"
+                >
+                  <FaSearch size={20} />
+                </button>
+              )}
+            </div>
+
+            {/* Cart Icon */}
+            <div className="relative cursor-pointer text-gray-700 hover:text-blue-600 transition">
+              <FaShoppingCart size={24} />
+              {cartCount > 0 && (
+                <span className="absolute -top-1 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-bold">
+                  {cartCount}
+                </span>
+              )}
+            </div>
+
+            {/* User Profile Icon */}
+            <div className="cursor-pointer text-gray-700 hover:text-blue-600 transition">
+              <FaUserCircle size={28} />
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+
+      {/* Mobile Nav */}
+      <div className="md:hidden pb-4 flex justify-center space-x-6 text-gray-700 font-medium">
+        <a href="#" className="hover:text-blue-600 transition">Home</a>
+        <a href="#" className="hover:text-blue-600 transition">Shop</a>
+        <a href="#" className="hover:text-blue-600 transition">Contact</a>
+        <a href="#" className="hover:text-blue-600 transition">About Us</a>
+      </div>
+    </nav>
+  );
+}
diff --git a/frontend/src/reusableComponents/ProductCard.jsx b/frontend/src/reusableComponents/ProductCard.jsx
new file mode 100644
index 0000000..da325da
--- /dev/null
+++ b/frontend/src/reusableComponents/ProductCard.jsx
@@ -0,0 +1,231 @@
+import { motion } from "framer-motion";
+import { FiEye, FiCheck, FiStar, FiCreditCard } from "react-icons/fi";
+import { TbBasket } from "react-icons/tb";
+import Button from "./Button";
+
+export default function ProductCard() {
+  const featuredProducts = [
+    {
+      id: 0,
+      isPromo: true,
+      brand: "Latest",
+      name: "New Products",
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=500&q=80",
+      features: ["Latest Arrivals", "Best Deals"],
+    },
+    {
+      id: 1,
+      brand: "Pureit",
+      name: "Ro Enrich Glory RO+UV+UF Copper Water Purifier",
+      price: 11999,
+      originalPrice: 12599,
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=500&q=80",
+      isNew: true,
+      features: ["5 Year Free Service", "Free Delivery"],
+      rating: 4.6,
+      reviews: "98",
+      emi: 2084,
+    },
+    {
+      id: 2,
+      brand: "Aquaguard",
+      name: "Enhance RO+UV Water Purifier",
+      price: 8999,
+      originalPrice: 10999,
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=500&q=80",
+      features: ["3 Year Warranty", "Free Installation"],
+      rating: 4.4,
+      reviews: "156",
+      emi: 1673,
+    },
+    {
+      id: 3,
+      brand: "Kent",
+      name: "Grand Plus RO Water Purifier",
+      price: 14999,
+      image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=500&q=80",
+      isNew: true,
+      features: ["10 Year Free Service", "Free Delivery"],
+      rating: 4.8,
+      reviews: "234",
+      emi: 2499,
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 md:gap-8">
+      {featuredProducts.map((product, index) => (
+        <SingleProductCard key={product.id} product={product} index={index} />
+      ))}
+    </div>
+  );
+}
+
+function SingleProductCard({ product, index }) {
+  if (!product) {
+    return (
+      <div className="w-full h-[28rem] flex items-center justify-center p-4 text-gray-500 text-xs bg-gray-50 rounded-2xl shadow-lg border">
+        Product data missing
+      </div>
+    );
+  }
+
+  const discount = product.originalPrice
+    ? Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)
+    : 0;
+
+  return (
+    <motion.div
+      className="w-full h-[28rem] rounded-2xl shadow-lg overflow-hidden border border-gray-100 flex flex-col"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      viewport={{ once: true }}
+    >
+      {/* PROMO CARD */}
+      {product.isPromo ? (
+        <div className="relative w-full h-full flex flex-col justify-between bg-blue-900 text-white">
+          <div className="absolute inset-0">
+            <img
+              src={product.image}
+              alt="Promo"
+              className="w-full h-full object-cover opacity-25"
+            />
+            <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/70" />
+          </div>
+
+          <div className="relative z-10 p-4">
+            <span className="bg-white/20 backdrop-blur-lg px-4 py-1.5 rounded-full text-xs font-bold border border-white/30 shadow">
+              SPECIAL PROMOTION
+            </span>
+          </div>
+
+          <div className="relative z-10 text-center px-6">
+            <h2 className="text-xl font-extrabold leading-tight drop-shadow-lg">
+              {product.promoTitle || "Exclusive New Arrivals"}
+            </h2>
+            <p className="text-sm text-gray-200 mt-2">
+              {product.promoSubtitle || "Find the best new products curated just for you."}
+            </p>
+          </div>
+
+          <div className="relative z-10 p-4">
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.96 }}
+              className="w-full py-3 text-sm font-semibold bg-white text-blue-700 rounded-full shadow-lg border border-white hover:bg-gray-100"
+            >
+              Shop Now
+            </motion.button>
+          </div>
+        </div>
+      ) : (
+        /* NORMAL PRODUCT CARD */
+        <>
+          <div className="relative h-48 p-2 overflow-hidden rounded-t-2xl">
+            <motion.img
+              src={product.image}
+              alt={product.name}
+              className="w-full h-full object-cover rounded-xl"
+              whileHover={{ scale: 1.05 }}
+              transition={{ duration: 0.4 }}
+            />
+            {product.isNew && (
+              <span className="absolute top-3 left-3 bg-emerald-500 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-md">
+                NEW
+              </span>
+            )}
+            {discount > 0 && (
+              <span className="absolute top-3 right-3 bg-red-500 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-md">
+                {discount}% OFF
+              </span>
+            )}
+          </div>
+
+          <div className="flex-1 p-4 flex flex-col justify-between bg-white rounded-b-2xl">
+            <div className="pb-1">
+              <span className="px-4 py-1 rounded-full text-xs font-semibold inline-block bg-blue-50 text-blue-700">
+                {product.brand}
+              </span>
+              <h3 className="font-bold text-sm leading-5 line-clamp-2 mt-1.5 text-gray-900">
+                {product.name}
+              </h3>
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200/50 to-transparent" />
+            </div>
+
+            <div>
+              {product.features?.slice(0, 3).map((feature, idx) => (
+                <motion.div
+                  key={idx}
+                  className="flex items-center gap-2 text-xs text-gray-700 leading-4"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.25, delay: 0.1 + idx * 0.06 }}
+                >
+                  <FiCheck className="w-3.5 h-3.5 text-emerald-500" />
+                  <span>{feature}</span>
+                </motion.div>
+              ))}
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200/50 to-transparent mt-1" />
+            </div>
+
+            <div className="py-1.5">
+              <div className="flex justify-between items-end mb-1.5">
+                <div className="flex items-baseline gap-2">
+                  <span className="text-xl font-bold text-gray-900">
+                    ₹{product.price?.toLocaleString()}
+                  </span>
+                  {product.originalPrice && (
+                    <span className="text-xs text-gray-500 line-through">
+                      ₹{product.originalPrice.toLocaleString()}
+                    </span>
+                  )}
+                </div>
+
+                {product.rating && (
+                  <div className="flex items-center gap-0.5 text-xs font-bold bg-yellow-400 text-gray-900 px-2 py-1.5 rounded-lg shadow">
+                    <FiStar className="w-3 h-3" /> {product.rating}
+                  </div>
+                )}
+              </div>
+              <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
+            </div>
+
+            {product.emi && (
+              <div className="py-1">
+                <div className="px-4 bg-blue-50 rounded-lg border border-blue-100 shadow-sm">
+                  <div className="flex items-center gap-2 text-xs font-semibold text-blue-800">
+                    <FiCreditCard className="w-2 h-2" />
+                    No Cost EMI ₹{product.emi}/mo
+                  </div>
+                </div>
+                <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent mt-2" />
+              </div>
+            )}
+
+            <div className="pt-2">
+              <div className="flex gap-2 items-center">
+                <motion.button
+                  whileHover={{ scale: 1.04 }}
+                  whileTap={{ scale: 0.95 }}
+                  className="flex-1 flex items-center justify-center gap-2 bg-gradient-to-r from-green-50 to-emerald-50 border border-emerald-300 text-emerald-700 text-sm py-2.5 rounded-full shadow hover:bg-emerald-100"
+                >
+                  <TbBasket className="w-4 h-4" />
+                  Add to Cart
+                </motion.button>
+
+                <motion.button
+                  whileHover={{ scale: 1.12, rotate: 4 }}
+                  whileTap={{ scale: 0.92 }}
+                  className="p-2 bg-gray-100 hover:bg-gray-200 rounded-full shadow border border-gray-200 flex items-center justify-center"
+                >
+                  <FiEye className="w-4 h-4 text-gray-700" />
+                </motion.button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </motion.div>
+  );
+}
diff --git a/frontend/src/reusableComponents/SearchBar.jsx b/frontend/src/reusableComponents/SearchBar.jsx
new file mode 100644
index 0000000..b837293
--- /dev/null
+++ b/frontend/src/reusableComponents/SearchBar.jsx
@@ -0,0 +1,18 @@
+// SearchBar.jsx
+export default function SearchBar({ onSearch }) {
+  return (
+    <div className="w-full max-w-md">
+      <div className="relative">
+        <input 
+          type="search" 
+          placeholder="Search products..." 
+          className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-full focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          onChange={(e) => onSearch(e.target.value)}
+        />
+        <svg className="absolute left-4 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/reusableComponents/TechnicianCard.jsx b/frontend/src/reusableComponents/TechnicianCard.jsx
new file mode 100644
index 0000000..5d3e3ec
--- /dev/null
+++ b/frontend/src/reusableComponents/TechnicianCard.jsx
@@ -0,0 +1,146 @@
+import { motion } from "framer-motion";
+import { FiEye, FiStar } from "react-icons/fi";
+import { TbCalendarCheck } from "react-icons/tb";
+
+export default function TechnicianCard() {
+  const technicians = [
+    {
+      id: 1,
+      name: "Rajesh Kumar",
+      image: "https://randomuser.me/api/portraits/men/32.jpg",
+      rating: 4.8,
+      reviews: 220,
+      experience: 6,
+      location: "Chennai",
+      services: ["Leakage Repair", "Filter Change"],
+      startingPrice: 499,
+      availableToday: true,
+    },
+    {
+      id: 2,
+      name: "Suresh Reddy",
+      image: "https://randomuser.me/api/portraits/men/45.jpg",
+      rating: 4.5,
+      reviews: 180,
+      experience: 5,
+      location: "Bangalore",
+      services: ["Pipe Replacement", "RO Servicing"],
+      startingPrice: 599,
+      availableToday: false,
+    },
+    {
+      id: 3,
+      name: "Anita Sharma",
+      image: "https://randomuser.me/api/portraits/women/65.jpg",
+      rating: 4.7,
+      reviews: 150,
+      experience: 7,
+      location: "Mumbai",
+      services: ["Filter Change", "RO Installation"],
+      startingPrice: 549,
+      availableToday: true,
+    },
+    {
+      id: 4,
+      name: "Vikram Singh",
+      image: "https://randomuser.me/api/portraits/men/78.jpg",
+      rating: 4.6,
+      reviews: 200,
+      experience: 6,
+      location: "Delhi",
+      services: ["Leakage Repair", "Pipe Replacement"],
+      startingPrice: 499,
+      availableToday: false,
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 md:gap-8">
+      {technicians.map((tech, index) => (
+        <SingleTechnicianCard key={tech.id} technician={tech} index={index} />
+      ))}
+    </div>
+  );
+}
+
+function SingleTechnicianCard({ technician, index }) {
+  if (!technician) {
+    return (
+      <div className="w-full h-72 flex items-center justify-center p-4 text-gray-500 text-xs bg-gray-50 rounded-2xl shadow-lg border">
+        Technician data missing
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="w-full h-72 rounded-2xl shadow-lg overflow-hidden border border-gray-100 flex flex-col"
+      initial={{ y: 15, opacity: 0 }}
+      whileInView={{ y: 0, opacity: 1 }}
+      whileHover={{ y: -6 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.4, delay: index * 0.05 }}
+    >
+      <div className="relative h-40 p-2 overflow-hidden rounded-t-2xl">
+        <img
+          src={technician.image}
+          alt={technician.name}
+          className="w-full h-full object-cover rounded-xl"
+        />
+        {technician.availableToday && (
+          <span className="absolute top-3 left-3 bg-green-500 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-md flex items-center gap-1">
+            <TbCalendarCheck className="w-3 h-3" /> Available Today
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 p-4 flex flex-col justify-between bg-white rounded-b-2xl">
+        <div className="pb-2">
+          <h3 className="font-bold text-sm leading-5 text-gray-900">{technician.name}</h3>
+          <div className="flex items-center gap-2 text-xs text-gray-700 mt-1">
+            <div className="flex items-center gap-1">
+              <FiStar className="w-3 h-3 text-yellow-400" />
+              {technician.rating} ({technician.reviews})
+            </div>
+            <span>• {technician.experience} yrs</span>
+          </div>
+          <div className="text-xs text-gray-500 mt-1">{technician.location}</div>
+        </div>
+
+        <div className="flex flex-wrap gap-1 text-xs text-gray-700">
+          {technician.services?.map((service, idx) => (
+            <span
+              key={idx}
+              className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full"
+            >
+              {service}
+            </span>
+          ))}
+        </div>
+
+        <div className="mt-2 text-sm font-semibold text-gray-900">
+          ₹{technician.startingPrice} onwards
+        </div>
+
+        <div className="pt-2 flex gap-2">
+          <motion.button
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 0.95 }}
+            className="flex-1 flex items-center justify-center gap-2 bg-gray-100 text-gray-700 text-sm py-2 rounded-full shadow hover:bg-gray-200"
+          >
+            <FiEye className="w-4 h-4" />
+            View Profile
+          </motion.button>
+
+          <motion.button
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 0.95 }}
+            className="flex-1 flex items-center justify-center gap-2 bg-green-500 text-white text-sm py-2 rounded-full shadow hover:bg-green-600"
+          >
+            Book Now
+          </motion.button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

From dac45a41324d3d6f7d441a127157795866c808c2 Mon Sep 17 00:00:00 2001
From: GaneshArumugam05 <ganesharumugam2k@gmail.com>
Date: Wed, 10 Dec 2025 18:51:52 +0530
Subject: [PATCH 2/2] missing file added

product details file added
---
 frontend/src/Pages/ProductsDetails.jsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/Pages/ProductsDetails.jsx b/frontend/src/Pages/ProductsDetails.jsx
index e69de29..90ff424 100644
--- a/frontend/src/Pages/ProductsDetails.jsx
+++ b/frontend/src/Pages/ProductsDetails.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ProductsDetails = () => {
+  return (
+    <div>ProductsDetails</div>
+  )
+}
+
+export default ProductsDetails
\ No newline at end of file