From 86754f64cdcf3b80ccdf7c62511c5fff6051ce3a Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Fri, 15 Nov 2024 21:34:10 +0600
Subject: [PATCH 01/22] update

---
 src/Components/Overview/Sidebar/index.jsx | 79 ++++++++++++++++-------
 src/index.css                             |  2 +-
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/Components/Overview/Sidebar/index.jsx b/src/Components/Overview/Sidebar/index.jsx
index ad5478f..f5d6c75 100644
--- a/src/Components/Overview/Sidebar/index.jsx
+++ b/src/Components/Overview/Sidebar/index.jsx
@@ -24,7 +24,7 @@ const index = ({ startContent, setStartContent }) => {
     if (sidebarRef.current) {
       const activeElement = sidebarRef.current.querySelector('.border-primary');
       if (activeElement) {
-        activeElement.scrollIntoView({ 
+        activeElement.scrollIntoView({
           behavior: 'instant',
           block: 'center'
         });
@@ -37,7 +37,7 @@ const index = ({ startContent, setStartContent }) => {
           className="py-6 px-10 border-r h-[89vh] border-border flex-col gap-4 overflow-y-scroll sticky top-18 left-0 w-[320px] bg-secondary z-20 1024px:flex hidden">
 
         {/*  get starts  */}
-        <ul className='getStarted flex flex-col gap-[12px]'>
+        <ul className='getStarted flex flex-col gap-[12px] mb-4'>
 
           <Link onClick={() => setStartContent(0)} to='/docs/overview' className={`${startContent === 0 && '!text-blue-600'} flex items-center group gap-[8px] hover:text-blue-600 text-[0.950rem] font-[500] cursor-pointer capitalize text-gray-600`}>
             <span className={`${startContent === 0 && 'bg-blue-600 border-blue-600'} border p-[6px] rounded-md border-blue-200 group-hover:bg-blue-600 group-hover:border-blue-600 transition-all duration-200`}>
@@ -117,7 +117,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* inputs */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 FORM
               </Link>
@@ -256,7 +256,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* buttons */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest  font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest  font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 BUTTONS
               </Link>
@@ -308,7 +308,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* SURFACES */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
               >
                 SURFACES
               </Link>
@@ -402,7 +402,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* navigation */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
               >
                 NAVIGATION
               </Link>
@@ -496,7 +496,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* FEEDBACK */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase border-l border-border !text-[0.750rem] `}
               >
                 FEEDBACK
               </Link>
@@ -587,7 +587,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* data display */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 DATA DISPLAY
               </Link>
@@ -646,10 +646,51 @@ const index = ({ startContent, setStartContent }) => {
 
               </Link>
 
+                {/* e-commerce */}
+                <Link
+                    to={""}
+                    className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                >
+                    E-COMMERCE
+                </Link>
+
+                <Link
+                    to={"/components/code"}
+                    className={`${
+                        startContent === 39 &&
+                        "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] `}
+                    onClick={() => setStartContent(39)}
+                >
+                    Product Card
+                </Link>
+
+                <Link
+                    to={"/components/code"}
+                    className={`${
+                        startContent === 39 &&
+                        "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] `}
+                    onClick={() => setStartContent(39)}
+                >
+                    Ads Card
+                </Link>
+
+                <Link
+                    to={"/components/code"}
+                    className={`${
+                        startContent === 39 &&
+                        "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] `}
+                    onClick={() => setStartContent(39)}
+                >
+                    Offer Grid
+                </Link>
+
               {/* Randoms */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 RANDOMS
               </Link>
@@ -717,7 +758,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* sections */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 SECTIONS
               </Link>
@@ -762,21 +803,9 @@ const index = ({ startContent, setStartContent }) => {
               >
                 Responsive Footer
               </Link>
-              {/*<Link*/}
-              {/*    to={"/blocks/testimonial-section"}*/}
-              {/*    className={`${*/}
-              {/*        startContent === 46 &&*/}
-              {/*        "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"*/}
-              {/*    }   border-l border-[#9caebc]`}*/}
-              {/*    onClick={() => setStartContent(46)}*/}
-              {/*>*/}
-              {/*  Testimonial Section*/}
-              {/*</Link>*/}
-
-              {/* Forms */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 FORM
               </Link>
@@ -825,7 +854,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* empty pages */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 EMPTY PAGES
               </Link>
@@ -854,7 +883,7 @@ const index = ({ startContent, setStartContent }) => {
               {/* Randoms */}
               <Link
                   to={""}
-                  className={`sectionHeader tracking-widest  font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                  className={`sectionHeader tracking-widest  font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
               >
                 RANDOM
               </Link>
diff --git a/src/index.css b/src/index.css
index 8227a00..9fe6a70 100644
--- a/src/index.css
+++ b/src/index.css
@@ -200,7 +200,7 @@ aside ul a:not(.getStarted a) {
   text-transform: capitalize;
 }
 
-aside ul a:not(.getStarted a):hover {
+aside ul a:not(.getStarted a, .sectionHeader):hover {
   background-color: #e5eaf2;
   font-weight: 500;
   border-left: 1px solid #9caebc;

From 26fae61934473c8167daae54159de6cb371ca0db Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 16 Nov 2024 12:21:14 +0600
Subject: [PATCH 02/22] update: codes refactor and e-commerce component and
 pages define

---
 index.html                                    |   3 -
 src/App.jsx                                   |  69 +++++----
 .../Overview/Sidebar/MobileSidebar.jsx        |  47 +++++++
 src/Components/Overview/Sidebar/index.jsx     |  31 ++--
 .../Content/ECommerce/AdsCard.jsx             |  11 ++
 .../Content/ECommerce/OfferGrid.jsx           |  11 ++
 .../Content/ECommerce/ProductCard.jsx         | 132 ++++++++++++++++++
 .../Components/ECommerce/AdsCardPage.jsx      |  29 ++++
 .../Components/ECommerce/OfferGridPage.jsx    |  29 ++++
 .../Components/ECommerce/ProductCardPage.jsx  |  29 ++++
 10 files changed, 345 insertions(+), 46 deletions(-)
 create mode 100644 src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
 create mode 100644 src/Pages/Components/ECommerce/AdsCardPage.jsx
 create mode 100644 src/Pages/Components/ECommerce/OfferGridPage.jsx
 create mode 100644 src/Pages/Components/ECommerce/ProductCardPage.jsx

diff --git a/index.html b/index.html
index dfb64d5..6ec8e7c 100644
--- a/index.html
+++ b/index.html
@@ -42,9 +42,6 @@
 
     <script type="module" src="/src/main.jsx"></script>
 
-    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1598509834815662"
-            crossorigin="anonymous"></script>
-
     <script type="text/javascript">
       (function (w, d, s, o) {
         var js = d.createElement(s);
diff --git a/src/App.jsx b/src/App.jsx
index 879841d..d97c2f3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,13 +6,12 @@ import {Route, Routes} from "react-router-dom";
 // home page
 import HomePage from "./Pages/HomePage";
 
-// components page
-import ComponentsPage from "./Pages/ComponentsPage";
-
 // documentation page
 import OverviewPage from "./Pages/OverviewPage";
-import FaqPage from "./Pages/FaqPage";
+import InstallationPage from "./Pages/InstallationPage.jsx";
 import TempletePage from "./Pages/TempletePage";
+import ResourcesPage from "./Pages/ResourcesPage.jsx";
+import ReactCustomHooksPage from "./Pages/ReactCustomHooksPage.jsx";
 
 // inputs
 import InputTextPage from "./Pages/Components/Inputs/InputTextPage";
@@ -21,10 +20,15 @@ import InputRadioPage from "./Pages/Components/Inputs/InputRadioPage";
 import InputSwitchPage from "./Pages/Components/Inputs/InputSwitchPage";
 import InputSelectPage from "./Pages/Components/Inputs/InputSelectPage";
 import InputFilePage from "./Pages/Components/Inputs/InputFilePage";
+import NumberInputPage from "./Pages/Components/Inputs/NumberInputPage.jsx";
+import StrongPasswordPage from "./Pages/Components/Inputs/StrongPasswordPage.jsx";
+import CheckboxInputPage from "./Pages/Components/Inputs/CheckboxInputPage.jsx";
+import InputSliderPage from "./Pages/Components/Inputs/InputSliderPage.jsx";
 
 // buttons pages
 import NormalPage from "./Pages/Components/Buttons/NormalPage";
 import AnimatedButtonPage from "./Pages/Components/Buttons/AnimatedButtonPage";
+import AuthButtonPage from "./Pages/Components/Buttons/AuthButtonPage.jsx";
 
 // all components
 import AllComponentsPage from "./Pages/Components/AllComponentsPage";
@@ -34,6 +38,10 @@ import PaginationPage from "./Pages/Components/Navigation/PaginationPage";
 import TabsPage from "./Pages/Components/Navigation/TabsPage";
 import ModalPage from "./Pages/Components/Navigation/ModalPage";
 import ChipPage from "./Pages/Components/Navigation/ChipPage";
+import StepsPage from "./Pages/Components/Navigation/StepsPage.jsx";
+import BreadcrumbPage from "./Pages/Components/Navigation/BreadcrumbPage.jsx";
+import RatingPage from "./Pages/Components/Navigation/RatingPage.jsx";
+import ProgressBarPage from "./Pages/Components/Navigation/ProgressBarPage.jsx";
 
 // feedback pages
 import SkeletonPage from "./Pages/Components/Feedback/SkeletonPage";
@@ -42,10 +50,15 @@ import DialogPage from "./Pages/Components/Feedback/DialogPage";
 import TestimonialPage from "./Pages/Components/Feedback/TestimonialPage";
 import NotificationPage from "./Pages/Components/Feedback/NotificationPage";
 import LoaderPage from "./Pages/Components/Feedback/LoaderPage";
+import ContextMenuPage from "./Pages/Components/Feedback/ContextMenuPage.jsx";
+import TreeDropdownPage from "./Pages/Components/Feedback/TreeDropdownPage.jsx";
 
 // data display
 import BadgePage from "./Pages/Components/Data Display/BadgePage";
 import TooltipPage from "./Pages/Components/Data Display/TooltipPage";
+import TimelinePage from "./Pages/Components/Data Display/TimelinePage.jsx";
+import TablePage from "./Pages/Components/Data Display/TablePage.jsx";
+import PieChartPage from "./Pages/Components/Data Display/PieChartPage.jsx";
 
 // surface pages
 import CardPage from "./Pages/Components/Surfaces/CardPage";
@@ -53,6 +66,13 @@ import AnimatedCardsPage from "./Pages/Components/Surfaces/AnimatedCardsPage.jsx
 import ImageGalleryPage from "./Pages/Components/Surfaces/ImageGalleryPage";
 import AccordingPage from "./Pages/Components/Surfaces/AccordingPage";
 import AppbarPage from "./Pages/Components/Surfaces/AppbarPage";
+import DragAndDropPage from "./Pages/Components/Surfaces/DragAndDropPage.jsx";
+import CarouselPage from "./Pages/Components/Surfaces/CarouselPage.jsx";
+
+// e-commerce
+import ProductCardPage from "./Pages/Components/ECommerce/ProductCardPage.jsx";
+import OfferGridPage from "./Pages/Components/ECommerce/OfferGridPage.jsx";
+import AdsCardPage from "./Pages/Components/ECommerce/AdsCardPage.jsx";
 
 // randoms
 import CodeSnippetPage from "./Pages/Components/Randoms/CodeSnippetPage";
@@ -67,44 +87,28 @@ import OtpInputPage from "./Pages/Components/Inputs/OtpInputPage.jsx";
 // blocks
 import ResponsiveNavbarPage from "./Pages/Blocks/Sections/ResponsiveNavbarPage.jsx";
 import AllBlocksPage from "./Pages/Blocks/AllBlocksPage.jsx";
+import WrongUrlErrorPage from "./Pages/Blocks/EmptyPages/WrongRoutePage.jsx";
+import WrongRoutePage from "./Pages/Blocks/EmptyPages/EmptyPage.jsx";
 import HeroSectionPage from "./Pages/Blocks/Sections/HeroSectionPage.jsx";
-import ProgressBarPage from "./Pages/Components/Navigation/ProgressBarPage.jsx";
 import ContactFormPage from "./Pages/Blocks/Forms/ContactFormPage.jsx";
 import ResponsiveSearchbarPage from "./Pages/Blocks/Randoms/ResponsiveSearchbarPage.jsx";
-import BreadcrumbPage from "./Pages/Components/Navigation/BreadcrumbPage.jsx";
-import RatingPage from "./Pages/Components/Navigation/RatingPage.jsx";
-import TimelinePage from "./Pages/Components/Data Display/TimelinePage.jsx";
-import NumberInputPage from "./Pages/Components/Inputs/NumberInputPage.jsx";
-import StrongPasswordPage from "./Pages/Components/Inputs/StrongPasswordPage.jsx";
-import CheckboxInputPage from "./Pages/Components/Inputs/CheckboxInputPage.jsx";
+import ResponsiveFooterPage from "./Pages/Blocks/Randoms/ResponsiveFooterPage.jsx";
+import PricingSectionPage from "./Pages/Blocks/Sections/PricingSectionPage.jsx";
+import NewsletterSectionPage from "./Pages/Blocks/Forms/NewsletterSectionPage.jsx";
+import MultipageFormPage from "./Pages/Blocks/Forms/MultipageFormPage.jsx";
+import ResponsiveSidebarPage from "./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx";
+
+// ZenUI wrong route page
 import EmptyPage from "./Pages/EmptyPage.jsx"
-import StepsPage from "./Pages/Components/Navigation/StepsPage.jsx";
 
 // icons page
 import IconsPage from './Pages/IconsPages/IconsPage.jsx'
-import ResponsiveFooterPage from "./Pages/Blocks/Randoms/ResponsiveFooterPage.jsx";
-import AuthButtonPage from "./Pages/Components/Buttons/AuthButtonPage.jsx";
 
+// opacity palette
 import OpacityPalettePage from "./Pages/OpacityPalettePage.jsx"
-import WrongUrlErrorPage from "./Pages/Blocks/EmptyPages/WrongRoutePage.jsx";
-import WrongRoutePage from "./Pages/Blocks/EmptyPages/EmptyPage.jsx";
-import PricingSectionPage from "./Pages/Blocks/Sections/PricingSectionPage.jsx";
-import NewsletterSectionPage from "./Pages/Blocks/Forms/NewsletterSectionPage.jsx";
-import MultipageFormPage from "./Pages/Blocks/Forms/MultipageFormPage.jsx";
-import ResponsiveSidebarPage from "./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx";
-import InputSliderPage from "./Pages/Components/Inputs/InputSliderPage.jsx";
 
 // layout playground page
 import LayoutPlaygroundPage from "./Pages/LayoutPlaygroundPage.jsx";
-import TreeDropdownPage from "./Pages/Components/Feedback/TreeDropdownPage.jsx";
-import InstallationPage from "./Pages/InstallationPage.jsx";
-import DragAndDropPage from "./Pages/Components/Surfaces/DragAndDropPage.jsx";
-import ResourcesPage from "./Pages/ResourcesPage.jsx";
-import ContextMenuPage from "./Pages/Components/Feedback/ContextMenuPage.jsx";
-import ReactCustomHooksPage from "./Pages/ReactCustomHooksPage.jsx";
-import TablePage from "./Pages/Components/Data Display/TablePage.jsx";
-import PieChartPage from "./Pages/Components/Data Display/PieChartPage.jsx";
-import CarouselPage from "./Pages/Components/Surfaces/CarouselPage.jsx";
 
 
 const App = () => {
@@ -261,6 +265,11 @@ const App = () => {
                 <Route path="/components/tooltip" element={<TooltipPage/>}/>
                 <Route path="/components/timeline" element={<TimelinePage/>}/>
 
+                {/* e-commerce */}
+                <Route path="/components/product-card" element={<ProductCardPage/>}/>
+                <Route path="/components/offer-grid" element={<OfferGridPage/>}/>
+                <Route path="/components/ads-card" element={<AdsCardPage/>}/>
+
                 {/* randoms */}
                 <Route path="/components/code" element={<CodeSnippetPage/>}/>
                 <Route path="/components/snippet" element={<SnippetPage/>}/>
diff --git a/src/Components/Overview/Sidebar/MobileSidebar.jsx b/src/Components/Overview/Sidebar/MobileSidebar.jsx
index bf7c376..f65aedd 100644
--- a/src/Components/Overview/Sidebar/MobileSidebar.jsx
+++ b/src/Components/Overview/Sidebar/MobileSidebar.jsx
@@ -601,6 +601,53 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
 
                             </Link>
 
+                            {/* e-commerce */}
+                            <Link
+                                to={""}
+                                className={`sectionHeader tracking-widest font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                            >
+                                E-COMMERCE
+                            </Link>
+
+                            <Link
+                                to={"/components/code"}
+                                className={`${
+                                    startContent === 39 &&
+                                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(39)}
+                            >
+                                Product Card
+
+                                <NewBadge/>
+                            </Link>
+
+                            <Link
+                                to={"/components/code"}
+                                className={`${
+                                    startContent === 39 &&
+                                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(39)}
+                            >
+                                Ads Card
+
+                                <NewBadge/>
+                            </Link>
+
+                            <Link
+                                to={"/components/code"}
+                                className={`${
+                                    startContent === 39 &&
+                                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(39)}
+                            >
+                                Offer Grid
+
+                                <NewBadge/>
+                            </Link>
+
                             {/* Randoms */}
                             <Link
                                 to={""}
diff --git a/src/Components/Overview/Sidebar/index.jsx b/src/Components/Overview/Sidebar/index.jsx
index f5d6c75..6cae5a5 100644
--- a/src/Components/Overview/Sidebar/index.jsx
+++ b/src/Components/Overview/Sidebar/index.jsx
@@ -18,7 +18,6 @@ const index = ({ startContent, setStartContent }) => {
   const [components, setComponents] = useState(true);
   const [blocks, setBlocks] = useState(true);
   const sidebarRef = useRef(null);
-  // Automatically scrolls the active sidebar element into view when startContent changes
 
   useEffect(() => {
     if (sidebarRef.current) {
@@ -655,36 +654,42 @@ const index = ({ startContent, setStartContent }) => {
                 </Link>
 
                 <Link
-                    to={"/components/code"}
+                    to={"/components/product-card"}
                     className={`${
-                        startContent === 39 &&
+                        startContent === 108 &&
                         "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                    }   border-l border-[#9caebc] `}
-                    onClick={() => setStartContent(39)}
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(108)}
                 >
                     Product Card
+
+                    <NewBadge/>
                 </Link>
 
                 <Link
-                    to={"/components/code"}
+                    to={"/components/ads-card"}
                     className={`${
-                        startContent === 39 &&
+                        startContent === 109 &&
                         "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                    }   border-l border-[#9caebc] `}
-                    onClick={() => setStartContent(39)}
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(109)}
                 >
                     Ads Card
+
+                    <NewBadge/>
                 </Link>
 
                 <Link
-                    to={"/components/code"}
+                    to={"/components/offer-grid"}
                     className={`${
-                        startContent === 39 &&
+                        startContent === 110 &&
                         "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                    }   border-l border-[#9caebc] `}
-                    onClick={() => setStartContent(39)}
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(110)}
                 >
                     Offer Grid
+
+                    <NewBadge/>
                 </Link>
 
               {/* Randoms */}
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
new file mode 100644
index 0000000..5c2aec2
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const AdsCard = () => {
+    return (
+        <div>
+            
+        </div>
+    );
+};
+
+export default AdsCard;
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
new file mode 100644
index 0000000..050f8cb
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const OfferGrid = () => {
+    return (
+        <div>
+            
+        </div>
+    );
+};
+
+export default OfferGrid;
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
new file mode 100644
index 0000000..bc7ecca
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+
+// react helmet
+import { Helmet } from "react-helmet";
+
+// components
+import ContentHeader from "../../../../../Shared/ContentHeader";
+import Showcode from "../../../../../Shared/ShowCode";
+import OverviewFooter from "../../../../../Shared/OverviewFooter";
+
+// contents for scrollspy
+import { dialogContents } from '../../../../../Utils/ContentsConfig/FeedbackContents';
+import { useScrollSpy } from '../../../../../CustomHooks/useScrollSpy';
+
+// icons
+import { FaPlus } from "react-icons/fa6";
+import { FaUser } from "react-icons/fa";
+import { RxCross1 } from "react-icons/rx";
+
+const ProductCard = () => {
+    const sectionIds = dialogContents.map(item => item.href.slice(1));
+    const activeSection = useScrollSpy(sectionIds);
+
+    // backgroundPreview
+    const [basicDialogPreview, setBasicDialogPreview] = useState(true);
+    const [basicDialogCode, setBasicDialogCode] = useState(false);
+
+    const handleBasicDialogPreview = () => {
+        setBasicDialogPreview(true);
+        setBasicDialogCode(false);
+    };
+
+    const handleBasicDialogCode = () => {
+        setBasicDialogCode(true);
+        setBasicDialogPreview(false);
+    };
+
+    // handle dialog message
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [dialogValue, setDialogValue] = useState("please select");
+
+    const handleDialogAction = (e) => {
+        let element = e.target;
+        setDialogValue(element.innerText);
+        setIsDialogOpen(false);
+    };
+
+    return (
+        <>
+            <aside className='flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10'>
+                <div>
+                    <ContentHeader text={'basic dialog'} id={'basic_dialog'} />
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <OverviewFooter
+                        backUrl='/components/alert-message'
+                        backName='alert message'
+                        forwardName='testimonial'
+                        forwardUrl='/components/testimonials'
+                    />
+                </div>
+
+                <div className='1024px:flex hidden flex-col gap-4 sticky top-4 right-0 w-[20%]'>
+                    <h2 className='text-[0.9rem] font-[600] text-text tracking-widest'>
+                        CONTENTS
+                    </h2>
+                    {dialogContents.map((item) => (
+                        <a
+                            key={item.id}
+                            href={item.href}
+                            className={`${
+                                activeSection === item.href.slice(1) &&
+                                '!text-primary !border-primary'
+                            } text-[0.9rem] text-text border-l border-transparent pl-4`}
+                        >
+                            {item.title}
+                        </a>
+                    ))}
+                </div>
+            </aside>
+            <Helmet>
+                <title>Feedback - Product Card</title>
+            </Helmet>
+        </>
+    );
+};
+
+export default ProductCard;
diff --git a/src/Pages/Components/ECommerce/AdsCardPage.jsx b/src/Pages/Components/ECommerce/AdsCardPage.jsx
new file mode 100644
index 0000000..c5669e4
--- /dev/null
+++ b/src/Pages/Components/ECommerce/AdsCardPage.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+// components
+import Navbar from "../../../Components/Home/Navbar";
+import Sidebar from "../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import AdsCard from "../../../Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx";
+
+const AdsCardPage = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={109} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={109}/>
+                    <AdsCard />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default AdsCardPage;
diff --git a/src/Pages/Components/ECommerce/OfferGridPage.jsx b/src/Pages/Components/ECommerce/OfferGridPage.jsx
new file mode 100644
index 0000000..460104d
--- /dev/null
+++ b/src/Pages/Components/ECommerce/OfferGridPage.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+// components
+import Navbar from "../../../Components/Home/Navbar";
+import Sidebar from "../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import OfferGrid from "../../../Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx";
+
+const OfferGridPage = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={110} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={110}/>
+                    <OfferGrid />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default OfferGridPage;
diff --git a/src/Pages/Components/ECommerce/ProductCardPage.jsx b/src/Pages/Components/ECommerce/ProductCardPage.jsx
new file mode 100644
index 0000000..6b810df
--- /dev/null
+++ b/src/Pages/Components/ECommerce/ProductCardPage.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+// components
+import Navbar from "../../../Components/Home/Navbar";
+import Sidebar from "../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import ProductCard from "../../../Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx";
+
+const ProductCardPage = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={108} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={108}/>
+                    <ProductCard />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ProductCardPage;

From eedb596e047a021b159564013404f3f98897e487 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 16 Nov 2024 21:25:27 +0600
Subject: [PATCH 03/22] update: card examples added in product card tab

---
 .../Content/ECommerce/ProductCard.jsx         | 384 +++++++++++++++++-
 1 file changed, 364 insertions(+), 20 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
index bc7ecca..d9f48a1 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
 
 // react helmet
-import { Helmet } from "react-helmet";
+import {Helmet} from "react-helmet";
 
 // components
 import ContentHeader from "../../../../../Shared/ContentHeader";
@@ -9,13 +9,16 @@ import Showcode from "../../../../../Shared/ShowCode";
 import OverviewFooter from "../../../../../Shared/OverviewFooter";
 
 // contents for scrollspy
-import { dialogContents } from '../../../../../Utils/ContentsConfig/FeedbackContents';
-import { useScrollSpy } from '../../../../../CustomHooks/useScrollSpy';
+import {dialogContents} from '../../../../../Utils/ContentsConfig/FeedbackContents';
+import {useScrollSpy} from '../../../../../CustomHooks/useScrollSpy';
 
 // icons
-import { FaPlus } from "react-icons/fa6";
-import { FaUser } from "react-icons/fa";
-import { RxCross1 } from "react-icons/rx";
+import {FaPlus} from "react-icons/fa6";
+import {FaHeart, FaRegHeart, FaStar, FaUser} from "react-icons/fa";
+import {RxCross1} from "react-icons/rx";
+import {FiMinus, FiPlus} from "react-icons/fi";
+import {IoCartOutline} from "react-icons/io5";
+import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
 
 const ProductCard = () => {
     const sectionIds = dialogContents.map(item => item.href.slice(1));
@@ -35,21 +38,347 @@ const ProductCard = () => {
         setBasicDialogPreview(false);
     };
 
-    // handle dialog message
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogValue, setDialogValue] = useState("please select");
+    // all actions
 
-    const handleDialogAction = (e) => {
-        let element = e.target;
-        setDialogValue(element.innerText);
-        setIsDialogOpen(false);
-    };
+    const [rating, setRating] = useState(5);
+    const [isFavorite, setIsFavorite] = useState(false);
+    const [count, setCount] = useState(0);
+
+    const handleIncrement = () => {
+        setCount(prevValue => prevValue + 1);
+    }
+
+    const handleDecrement = () => {
+        setCount(prevValue => prevValue - 1);
+    }
+
+    const handleInputValueChange = (e) => {
+        setCount(Number(e.target.value));
+    }
 
     return (
         <>
             <aside className='flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10'>
                 <div>
-                    <ContentHeader text={'basic dialog'} id={'basic_dialog'} />
+                    <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='border border-gray-300 rounded-md p-5'>
+
+                                    {/* product image */}
+                                    <img alt='product/image' src='https://i.ibb.co.com/VN5sNHX/Link-14-png.png'
+                                         className='w-[250px] mt-2'/>
+
+                                    {/* product details */}
+                                    <div className='mt-3'>
+                                        <h3 className='text-[1.1rem] font-semibold'>Frooti Mango Drink</h3>
+
+                                        {/* rating area */}
+                                        <div className='flex items-center gap-[10px] mt-2'>
+                                            <div className="flex items-center space-x-1">
+                                                {[...Array(5)].map((_, index) => {
+                                                    const starRating = index + 1;
+                                                    return (
+                                                        <FaStar
+                                                            key={starRating}
+                                                            className={`cursor-pointer ${
+                                                                starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                                            }`}
+                                                            size={16}
+                                                            onClick={() => setRating(starRating)}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                            <span className='text-[0.9rem] text-gray-500'>(43)</span>
+                                        </div>
+
+                                        <div className='flex items-end justify-between mt-2'>
+                                            <div>
+                                                <p className='text-[0.9rem] text-gray-500'>1 KG</p>
+                                                <p className='text-[1rem] font-semibold mt-1 text-[#0FABCA]'>$ 80.00</p>
+                                            </div>
+
+                                            <button
+                                                className='py-2 px-4 bg-[#0FABCA] text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0195af] transition-all duration-200'>
+                                                Add
+                                                <FaPlus/>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='relative border w-[50%] border-gray-300 rounded-md p-5'>
+
+                                    {/* favorite icon */}
+                                    <FaHeart onClick={() => setIsFavorite(false)}
+                                             className={` ${isFavorite ? 'opacity-100 scale-[1] z-10' : 'opacity-0 scale-[0.7] z-[-1]'} text-[1.4rem] absolute top-3 text-red-500 right-3 cursor-pointer transition-all duration-300`}/>
+                                    <FaRegHeart onClick={() => setIsFavorite(true)}
+                                                className={`${isFavorite ? 'opacity-0 scale-[0.7] z-[-1]' : 'opacity-100 scale-[1] z-10'} text-[1.4rem] absolute top-3 right-3 text-gray-600 cursor-pointer transition-all duration-300`}/>
+
+
+                                    {/* product image */}
+                                    <img alt='product/image' src='https://i.ibb.co.com/p0CjNLD/Link-11-png.png'
+                                         className='w-[150px] mt-2 mx-auto'/>
+
+                                    {/* product details */}
+                                    <div className='mt-8'>
+
+                                        {/* rating area */}
+                                        <div className="flex items-center space-x-1">
+                                            {[...Array(5)].map((_, index) => {
+                                                const starRating = index + 1;
+                                                return (
+                                                    <FaStar
+                                                        key={starRating}
+                                                        className={`cursor-pointer ${
+                                                            starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                                        }`}
+                                                        size={16}
+                                                        onClick={() => setRating(starRating)}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+
+                                        <h3 className='text-[1.1rem] font-medium mt-1.5'>Cucumber</h3>
+
+                                        <div className='flex items-center gap-[10px]'>
+                                            <p className='text-[1rem] font-semibold mt-1 text-[#0FABCA]'>$70.21</p>
+                                            <del className='text-[1rem] font-normal mt-1 text-gray-500 '>$80.50</del>
+                                        </div>
+
+                                        <div className='flex items-center w-full justify-between mt-4'>
+
+                                            <div className='flex items-center border border-gray-200 rounded-md'>
+                                                <button
+                                                    className='bg-gray-100 p-[9px] rounded-l-md text-gray-600 text-[1.1rem]'
+                                                    onClick={handleDecrement}><FiMinus/></button>
+                                                <input type='number' value={count}
+                                                       className='w-[50px] py-[4px] outline-none text-gray-600 focus:ring-0 border-none text-center text-[1.1rem]'
+                                                       onInput={handleInputValueChange}/>
+                                                <button
+                                                    className='bg-gray-100 p-[9px] rounded-r-md text-gray-600 text-[1.1rem]'
+                                                    onClick={handleIncrement}><FiPlus/></button>
+                                            </div>
+
+                                            <button
+                                                className='py-2 px-4 bg-[#0FABCA] text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0195af] transition-all duration-200'>
+                                                <IoCartOutline className='text-[1.3rem]'/>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='border border-gray-300 rounded-xl p-2 w-[60%]'>
+
+                                    {/* product image */}
+                                    <div className='relative'>
+                                        <img alt='product/image' src='https://i.ibb.co.com/cTTfNRw/Link-1.png' className='w-full'/>
+
+                                        {/* favorite icon */}
+                                        <div className='p-2 rounded-full bg-gray-600 absolute top-2 right-2'>
+                                            {
+                                                isFavorite ? (
+                                                    <IoIosHeart onClick={()=> setIsFavorite(false)} className={`text-[#0FABCA] text-[1.2rem] cursor-pointer`}/>
+                                                ): (
+                                                    <IoMdHeartEmpty onClick={()=> setIsFavorite(true)} className={` text-white text-[1.2rem] cursor-pointer`}/>
+                                                )
+                                            }
+
+                                        </div>
+                                    </div>
+
+                                    {/* product details */}
+                                    <div className='mt-2 pt-0 p-1'>
+                                        <h3 className='text-[1.1rem] font-medium line-clamp-1'>Criphin - Contemporary Business Keynote</h3>
+
+                                        {/* authors & reviews */}
+                                        <div className='flex items-center justify-between mt-1'>
+                                            <p className='text-gray-400 text-[0.9rem]'>by <span className='text-black'>Criphin</span> in <span className='text-black'>Graphics</span></p>
+
+                                            {/* review area */}
+                                            <div className='flex items-center gap-[10px]'>
+                                                <div className="flex items-center space-x-1">
+                                                    {[...Array(5)].map((_, index) => {
+                                                        const starRating = index + 1;
+                                                        return (
+                                                            <FaStar
+                                                                key={starRating}
+                                                                className={`cursor-pointer ${
+                                                                    starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                                                }`}
+                                                                size={15}
+                                                                onClick={() => setRating(starRating)}
+                                                            />
+                                                        );
+                                                    })}
+                                                </div>
+                                                <span className='text-[0.8rem] text-gray-500'>(4.8)</span>
+                                            </div>
+                                        </div>
+
+                                        {/* price and action btn */}
+                                        <div className='flex items-end justify-between mt-5'>
+                                            <div>
+                                                <span className='text-gray-400 text-[0.9rem]'>168 Sales</span>
+                                                <p className='text-[1.150rem] font-semibold text-[#0FABCA]'>$52.00</p>
+                                            </div>
+
+                                            <div className='flex items-center gap-[10px]'>
+                                                <button
+                                                    className='py-2 px-4 border border-[#0FABCA] text-white rounded-md flex items-center group gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200'>
+                                                    <IoCartOutline className='text-[1.3rem] group-hover:text-white text-[#0FABCA]'/>
+                                                </button>
+
+                                                <button
+                                                    className='py-2 px-4 border border-[#0FABCA] text-[#0FABCA] hover:text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200'>
+                                                    Preview
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
                         This is a dialog component. Display important messages, prompts, or
@@ -84,7 +413,22 @@ const ProductCard = () => {
                         </div>
                         {basicDialogPreview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[50%] relative rounded-md overflow-hidden'>
+
+                                    {/* badge */}
+                                    <span className='bg-red-500 rounded-sm px-3 py-1 text-[0.9rem] text-white absolute top-3 left-3'>Best</span>
+
+                                    {/* product image */}
+                                    <img alt='product/image' src='https://i.ibb.co.com/wrYPvfd/Link-31-jpg.png' className='w-full'/>
 
+                                    {/* product details */}
+                                    <div className='mt-2'>
+                                        <span className='text-gray-400 text-[0.9rem]'>Biography</span>
+                                        <h3 className='text-[1.1rem] font-medium mt-2'>Home Decor Lucky Deer Family Matte Finish Ceramic Figures</h3>
+                                        <p className='text-[0.9rem] text-gray-400 mt-1'>By Ellie Thomson, Henry</p>
+                                        <p className='text-[1.1rem] font-semibold mt-1 text-[#0FABCA]'>$80.00</p>
+                                    </div>
+                                </div>
                             </div>
                         )}
 
@@ -97,10 +441,10 @@ const ProductCard = () => {
                     </div>
 
                     <OverviewFooter
-                        backUrl='/components/alert-message'
-                        backName='alert message'
-                        forwardName='testimonial'
-                        forwardUrl='/components/testimonials'
+                        backUrl='/components/timeline'
+                        backName='timeline'
+                        forwardName='ads card'
+                        forwardUrl='/components/ads-card'
                     />
                 </div>
 

From dfc9089b29c10d9b11b5ed5c41f86d6e9ffb8c47 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sun, 17 Nov 2024 23:31:51 +0600
Subject: [PATCH 04/22] add: new animated product card added

---
 .../Content/ECommerce/ProductCard.jsx         | 313 +++++++++++++++++-
 1 file changed, 300 insertions(+), 13 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
index d9f48a1..4694979 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -15,10 +15,13 @@ import {useScrollSpy} from '../../../../../CustomHooks/useScrollSpy';
 // icons
 import {FaPlus} from "react-icons/fa6";
 import {FaHeart, FaRegHeart, FaStar, FaUser} from "react-icons/fa";
-import {RxCross1} from "react-icons/rx";
-import {FiMinus, FiPlus} from "react-icons/fi";
-import {IoCartOutline} from "react-icons/io5";
+import {RiHeartAddLine, RiHeartFill} from "react-icons/ri";
+import {FiArrowUpRight, FiMinus, FiPlus} from "react-icons/fi";
+import {IoBagHandleOutline, IoCartOutline, IoEyeOutline, IoGift} from "react-icons/io5";
 import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
+import {MdLocalShipping} from "react-icons/md";
+import {HiArrowsUpDown} from "react-icons/hi2";
+import {LuEye} from "react-icons/lu";
 
 const ProductCard = () => {
     const sectionIds = dialogContents.map(item => item.href.slice(1));
@@ -44,6 +47,12 @@ const ProductCard = () => {
     const [isFavorite, setIsFavorite] = useState(false);
     const [count, setCount] = useState(0);
 
+    const [wishlistVisible, setWishlistVisible] = useState(false);
+    const [compareVisible, setCompareVisible] = useState(false);
+    const [quickViewVisible, setQuickViewVisible] = useState(false);
+
+    const [productCardHover, setProductCardHover] = useState(false);
+
     const handleIncrement = () => {
         setCount(prevValue => prevValue + 1);
     }
@@ -67,6 +76,173 @@ const ProductCard = () => {
                         actions in a focused modal window.
                     </p>
 
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[45%] group'>
+
+                                    {/* image & action buttons */}
+                                    <div onMouseOver={()=> setProductCardHover(true)} onMouseOut={()=> setProductCardHover(false)} className='w-full relative cursor-pointer overflow-hidden'>
+                                        <img alt='product/image'
+                                             src={
+                                                 productCardHover
+                                                     ? '//wpbingo-fashow.myshopify.com/cdn/shop/products/63.jpg?v=1665549687'
+                                                     : '//wpbingo-fashow.myshopify.com/cdn/shop/products/62.jpg?v=1665549687'
+                                             }
+                                             className='w-full'/>
+
+                                        <div className='absolute bottom-0 left-0 w-full'>
+                                            {/* quick action buttons */}
+                                            <div className='flex items-center gap-[15px] justify-center'>
+
+                                                <div onMouseOver={()=> setWishlistVisible(true)} onMouseOut={()=> setWishlistVisible(false)} className='relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <IoMdHeartEmpty className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${wishlistVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Wishlist
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+
+                                                <div onMouseOver={()=> setCompareVisible(true)} onMouseOut={()=> setCompareVisible(false)} className='relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <HiArrowsUpDown className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${compareVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Compare
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+
+                                                <div onMouseOver={()=> setQuickViewVisible(true)} onMouseOut={()=> setQuickViewVisible(false)} className='relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <IoEyeOutline className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${quickViewVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Quick View
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+                                            </div>
+
+                                            {/* quantity & add cart */}
+                                            <div className='w-full flex mt-6 items-center opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 translate-y-[60px] bg-[rgb(0,0,0,0.5)]'>
+
+                                                {/* quantity */}
+                                                <div className='flex w-[50%] justify-center px-2 py-0.5 items-center border-r border-gray-400 text-white'>
+                                                    <button
+                                                        className='active:bg-gray-100 p-[6px] rounded-full text-white transition-all duration-300 active:text-gray-700 text-[0.9rem]'
+                                                        onClick={handleDecrement}><FiMinus/></button>
+                                                    <input type='number' value={count}
+                                                           className='w-[40px] py-2.5 outline-none focus:ring-0 border-none text-center text-[0.9rem] bg-transparent'
+                                                           onInput={handleInputValueChange}/>
+                                                    <button
+                                                        className='active:bg-gray-100 p-[6px] rounded-full text-white transition-all duration-300 active:text-gray-700 text-[0.9rem]'
+                                                        onClick={handleIncrement}><FiPlus/></button>
+                                                </div>
+
+                                                {/* add to cart */}
+                                                <button className='py-[13px] overflow-hidden before:w-full before:h-full before:bg-[#0FABCA] before:absolute before:top-0 z-0 before:z-[-1] before:translate-x-[-150px] hover:before:translate-x-0 before:transition-all before:duration-300 before:left-0 relative flex items-center justify-center grow text-white'>
+                                                    <IoBagHandleOutline className='text-[1.3rem]'/>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {/* product details */}
+                                    <div className='mt-4'>
+
+                                        {/* review area */}
+                                        <div className='flex items-center justify-center gap-[10px] mt-2'>
+                                            <div className="flex items-center space-x-1">
+                                                {[...Array(5)].map((_, index) => {
+                                                    const starRating = index + 1;
+                                                    return (
+                                                        <FaStar
+                                                            key={starRating}
+                                                            className={`cursor-pointer ${
+                                                                starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                                            }`}
+                                                            size={16}
+                                                            onClick={() => setRating(starRating)}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                            <span className='text-[0.9rem] text-gray-500'>(43)</span>
+                                        </div>
+
+                                        <h3 className='text-[1rem] font-medium text-center mt-0.5 text-gray-900'>Drop-shoulder synthetic</h3>
+                                        <p className='text-center mt-0.5 text-[0.9rem] text-gray-900'>Tk 1,800.00</p>
+
+                                        <div className='flex items-center gap-[10px] justify-center mt-3'>
+                                            <div className='w-4 h-4 rounded-full bg-red-500 outline outline-1 outline-red-500 outline-offset-2 cursor-pointer'></div>
+                                            <div className='w-4 h-4 rounded-full bg-green-500 cursor-pointer'></div>
+                                            <div className='w-4 h-4 rounded-full bg-blue-500 cursor-pointer'></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
                         <div className='relative'>
                             <div
@@ -300,15 +476,18 @@ const ProductCard = () => {
 
                                     {/* product image */}
                                     <div className='relative'>
-                                        <img alt='product/image' src='https://i.ibb.co.com/cTTfNRw/Link-1.png' className='w-full'/>
+                                        <img alt='product/image' src='https://i.ibb.co.com/cTTfNRw/Link-1.png'
+                                             className='w-full'/>
 
                                         {/* favorite icon */}
                                         <div className='p-2 rounded-full bg-gray-600 absolute top-2 right-2'>
                                             {
                                                 isFavorite ? (
-                                                    <IoIosHeart onClick={()=> setIsFavorite(false)} className={`text-[#0FABCA] text-[1.2rem] cursor-pointer`}/>
-                                                ): (
-                                                    <IoMdHeartEmpty onClick={()=> setIsFavorite(true)} className={` text-white text-[1.2rem] cursor-pointer`}/>
+                                                    <IoIosHeart onClick={() => setIsFavorite(false)}
+                                                                className={`text-[#0FABCA] text-[1.2rem] cursor-pointer`}/>
+                                                ) : (
+                                                    <IoMdHeartEmpty onClick={() => setIsFavorite(true)}
+                                                                    className={` text-white text-[1.2rem] cursor-pointer`}/>
                                                 )
                                             }
 
@@ -317,11 +496,14 @@ const ProductCard = () => {
 
                                     {/* product details */}
                                     <div className='mt-2 pt-0 p-1'>
-                                        <h3 className='text-[1.1rem] font-medium line-clamp-1'>Criphin - Contemporary Business Keynote</h3>
+                                        <h3 className='text-[1.1rem] font-medium line-clamp-1'>Criphin - Contemporary
+                                            Business Keynote</h3>
 
                                         {/* authors & reviews */}
                                         <div className='flex items-center justify-between mt-1'>
-                                            <p className='text-gray-400 text-[0.9rem]'>by <span className='text-black'>Criphin</span> in <span className='text-black'>Graphics</span></p>
+                                            <p className='text-gray-400 text-[0.9rem]'>by <span
+                                                className='text-black'>Criphin</span> in <span
+                                                className='text-black'>Graphics</span></p>
 
                                             {/* review area */}
                                             <div className='flex items-center gap-[10px]'>
@@ -354,7 +536,8 @@ const ProductCard = () => {
                                             <div className='flex items-center gap-[10px]'>
                                                 <button
                                                     className='py-2 px-4 border border-[#0FABCA] text-white rounded-md flex items-center group gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200'>
-                                                    <IoCartOutline className='text-[1.3rem] group-hover:text-white text-[#0FABCA]'/>
+                                                    <IoCartOutline
+                                                        className='text-[1.3rem] group-hover:text-white text-[#0FABCA]'/>
                                                 </button>
 
                                                 <button
@@ -416,15 +599,18 @@ const ProductCard = () => {
                                 <div className='w-[50%] relative rounded-md overflow-hidden'>
 
                                     {/* badge */}
-                                    <span className='bg-red-500 rounded-sm px-3 py-1 text-[0.9rem] text-white absolute top-3 left-3'>Best</span>
+                                    <span
+                                        className='bg-red-500 rounded-sm px-3 py-1 text-[0.9rem] text-white absolute top-3 left-3'>Best</span>
 
                                     {/* product image */}
-                                    <img alt='product/image' src='https://i.ibb.co.com/wrYPvfd/Link-31-jpg.png' className='w-full'/>
+                                    <img alt='product/image' src='https://i.ibb.co.com/wrYPvfd/Link-31-jpg.png'
+                                         className='w-full'/>
 
                                     {/* product details */}
                                     <div className='mt-2'>
                                         <span className='text-gray-400 text-[0.9rem]'>Biography</span>
-                                        <h3 className='text-[1.1rem] font-medium mt-2'>Home Decor Lucky Deer Family Matte Finish Ceramic Figures</h3>
+                                        <h3 className='text-[1.1rem] font-medium mt-2'>Home Decor Lucky Deer Family
+                                            Matte Finish Ceramic Figures</h3>
                                         <p className='text-[0.9rem] text-gray-400 mt-1'>By Ellie Thomson, Henry</p>
                                         <p className='text-[1.1rem] font-semibold mt-1 text-[#0FABCA]'>$80.00</p>
                                     </div>
@@ -440,6 +626,107 @@ const ProductCard = () => {
                         )}
                     </div>
 
+                    <div className='mt-8'>
+                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a dialog component. Display important messages, prompts, or
+                        actions in a focused modal window.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='border border-gray-300 w-[60%] relative rounded-2xl overflow-hidden'>
+
+                                    {/* badge */}
+                                    <span
+                                        className='bg-red-500 rounded-b-md px-3 py-1 text-[0.9rem] text-white absolute top-0 left-4'>Best Value</span>
+
+                                    {/* product image */}
+                                    <img alt='product/image' src='https://i.ibb.co.com/z4BV3S2/image-1.png'
+                                         className='w-full mt-6'/>
+
+                                    {/* product details */}
+                                    <div className='p-4 pt-0'>
+                                        <h3 className='text-[1.4rem] font-semibold mb-1 mt-2'>Apple</h3>
+
+                                        <span className='text-[0.9rem] font-normal text-gray-500 line-clamp-2'>2020 Apple MacBook Pro with Apple M1 Chip (13-inch, 8GB RAM, 256GB SSD Storage) - Silver</span>
+
+                                        {/* price & discount offer */}
+                                        <div className='flex items-center mt-3 gap-[15px]'>
+                                            <p className='text-[1.150rem] font-semibold mt-1'>$1024.99+</p>
+
+                                            <p className='border text-green-600 text-[0.8rem] border-green-400 px-2 py-1 rounded-md'>35% Off</p>
+                                        </div>
+
+                                        {/* shipping offers */}
+                                        <div className='flex items-center border-t border-gray-300 mt-3 gap-[15px] pt-[5px]'>
+                                            <div className='flex items-center gap-[6px] text-gray-400 text-[0.9rem]'>
+                                                <MdLocalShipping/>
+                                                <p>Free shipping</p>
+                                            </div>
+                                            <div className='flex items-center gap-[6px] text-gray-400 text-[0.9rem]'>
+                                                <IoGift/>
+                                                <p>Free gift</p>
+                                            </div>
+                                        </div>
+
+                                        {/* actions */}
+                                        <div className='flex items-center justify-between mt-7 gap-[15px]'>
+                                            <button className='py-[9px] px-4 text-white rounded-2xl grow justify-center flex items-center gap-[0.5rem] hover:bg-[#01849b] text-[1rem] bg-[#0FABCA] transition-all duration-200'>
+                                                View Deal
+                                                <FiArrowUpRight className='text-[1.3rem]'/>
+                                            </button>
+                                            <button className='p-[9px] rounded-full border-2 border-[#0FABCA]'>
+                                                {
+                                                    isFavorite ? (
+                                                        <RiHeartFill onClick={()=> setIsFavorite(false)} className='text-[#0FABCA] text-[1.3rem]'/>
+                                                    ): (
+                                                        <RiHeartAddLine onClick={()=> setIsFavorite(true)} className='text-[#0FABCA] text-[1.3rem]'/>
+                                                    )
+                                                }
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
                     <OverviewFooter
                         backUrl='/components/timeline'
                         backName='timeline'

From 58762f35d38082faefeb97a92a657cb09c1e7244 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Mon, 18 Nov 2024 22:15:31 +0600
Subject: [PATCH 05/22] update: product card complete and ads card some card
 added

---
 .../Content/ECommerce/AdsCard.jsx             | 208 +++++++++-
 .../Content/ECommerce/ProductCard.jsx         | 373 ++++++++++++++++--
 src/Utils/ContentsConfig/ECommerceContents.js |  48 +++
 3 files changed, 583 insertions(+), 46 deletions(-)
 create mode 100644 src/Utils/ContentsConfig/ECommerceContents.js

diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
index 5c2aec2..68ecac7 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
@@ -1,10 +1,210 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+// components
+import OverviewFooter from '../../../../../Shared/OverviewFooter';
+import ContentHeader from '../../../../../Shared/ContentHeader';
+
+// contents for scrollspy
+import { radioInputContents } from '../../../../../Utils/ContentsConfig/InputContents';
+import { useScrollSpy } from '../../../../../CustomHooks/useScrollSpy';
+
+// react helmet
+import { Helmet } from 'react-helmet';
+
+// showing the code
+import Showcode from '../../../../../Shared/ShowCode';
+import {BsArrowRight} from "react-icons/bs";
 
 const AdsCard = () => {
+    // const [contentActiveTab, setContentActiveTab] = useState(0);
+    const sectionIds = radioInputContents.map((item) => item.href.slice(1));
+    const activeSection = useScrollSpy(sectionIds);
+
+    // circle radio
+    const [circlePreview, setCirclePreview] = useState(true);
+    const [circleCode, setCircleCode] = useState(false);
+
+    const handleCirclePreview = () => {
+        setCirclePreview(true);
+        setCircleCode(false);
+    };
+
+    const handleCircleCode = () => {
+        setCircleCode(true);
+        setCirclePreview(false);
+    };
+
+    // square radio
+    const [squarePreview, setSquarePreview] = useState(true);
+    const [squareCode, setSquareCode] = useState(false);
+
+    const handleSquarePreview = () => {
+        setSquarePreview(true);
+        setSquareCode(false);
+    };
+
+    const handleSquareCode = () => {
+        setSquareCode(true);
+        setSquarePreview(false);
+    };
+
     return (
-        <div>
-            
-        </div>
+        <>
+            <aside className='flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10'>
+                <div>
+                    <ContentHeader text={'circle radio'} id={'circle_radio'} />
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a circle radio button component. Select options with a click
+                        on the elegant circular design.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    circlePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    circlePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleCirclePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    circleCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleCircleCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {circlePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[62%] bg-[#F7E99E] rounded-md p-6 text-center'>
+                                    <img alt='product/image' src='https://i.ibb.co.com/qrzTZqK/Image-5.png' className='w-[150px] mx-auto'/>
+                                    <h3 className='text-[1.6rem] leading-[35px] font-semibold'>Xiaomi True Wireless Earbuds</h3>
+                                    <p className='text-gray-700 mt-2'>Escape the noise, It’s time to hear the magic with Xiaomi Earbuds.</p>
+                                    <div className='flex items-center justify-center my-5 gap-[10px]'>
+                                        <p className='text-[1rem] text-gray-700'>Only for:</p>
+                                        <span className='py-1.5 px-3 bg-white rounded-md font-semibold text-gray-900 text-[0.9rem]'>$299 USD</span>
+                                    </div>
+                                    <button className='group flex items-center gap-[10px] w-full bg-[#FA8232] text-white py-2.5 rounded-md hover:bg-[#DE732D] transition-all duration-300 px-4 justify-center'>
+                                        Shop now
+                                        <BsArrowRight className='group-hover:ml-1 transition-all duration-300'/>
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+                        {circleCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'Square Radio'} id={'square_radio'} />
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        This is a square radio button component. Choose options by clicking
+                        on the modern, square design.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    squarePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    squarePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleSquarePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    squareCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleSquareCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {squarePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='bg-[#F2F4F5] p-8 gap-[15px] w-full rounded-md flex items-center justify-between'>
+                                    <div className='w-[55%]'>
+                                        <span className='py-1.5 px-4 text-[0.8rem] rounded-md bg-blue-400 text-white'>INTRODUCING</span>
+                                        <h3 className='text-[1.4rem] font-semibold text-gray-900 my-2'>New Apple Homepod Mini</h3>
+                                        <p className='text-[0.9rem] text-gray-700 mb-4'>Jam-packed with innovation, HomePod mini delivers unexpectedly.</p>
+                                        <button
+                                            className='group w-max flex items-center gap-[10px] bg-[#FA8232] text-white py-2.5 rounded-md hover:bg-[#DE732D] transition-all duration-300 px-8 justify-center'>
+                                            Shop now
+                                            <BsArrowRight className='group-hover:ml-1 transition-all duration-300'/>
+                                        </button>
+                                    </div>
+                                    <div className='w-[40%]'>
+                                        <img alt='product/image' src='https://i.ibb.co.com/jyffZqg/image-6.png'
+                                             className=''/>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {squareCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
+                    <OverviewFooter
+                        backUrl='/components/input-select'
+                        backName='select'
+                        forwardName='range'
+                        forwardUrl='/components/input-range'
+                    />
+                </div>
+
+                <div className='1024px:flex hidden flex-col gap-4 sticky top-4 right-0 w-[40%]'>
+                    <h2 className='text-[0.9rem] font-[600] text-text tracking-widest'>
+                        CONTENTS
+                    </h2>
+                    {radioInputContents.map((item) => (
+                        <a
+                            key={item.id}
+                            href={item.href}
+                            className={`${
+                                activeSection === item.href.slice(1) &&
+                                '!text-primary !border-primary'
+                            } text-[0.9rem] capitalize transition-all duration-300 text-text border-l border-transparent pl-4`}
+                        >
+                            {item.title}
+                        </a>
+                    ))}
+                </div>
+            </aside>
+            <Helmet>
+                <title>Form - Radio</title>
+            </Helmet>
+        </>
     );
 };
 
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
index 4694979..88bc4c8 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -21,10 +21,10 @@ import {IoBagHandleOutline, IoCartOutline, IoEyeOutline, IoGift} from "react-ico
 import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
 import {MdLocalShipping} from "react-icons/md";
 import {HiArrowsUpDown} from "react-icons/hi2";
-import {LuEye} from "react-icons/lu";
+import {productCardsContents} from "../../../../../Utils/ContentsConfig/ECommerceContents.js";
 
 const ProductCard = () => {
-    const sectionIds = dialogContents.map(item => item.href.slice(1));
+    const sectionIds = productCardsContents.map(item => item.href.slice(1));
     const activeSection = useScrollSpy(sectionIds);
 
     // backgroundPreview
@@ -69,11 +69,10 @@ const ProductCard = () => {
         <>
             <aside className='flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10'>
                 <div>
-                    <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                    <ContentHeader text={'clothing product card'} id={'clothing_product_card'}/>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Clothing product card with name, price, sizes, colors, and quick action buttons for easy shopping.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -104,10 +103,12 @@ const ProductCard = () => {
                         </div>
                         {basicDialogPreview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[45%] group'>
+                                <div className='w-[50%] group'>
 
                                     {/* image & action buttons */}
-                                    <div onMouseOver={()=> setProductCardHover(true)} onMouseOut={()=> setProductCardHover(false)} className='w-full relative cursor-pointer overflow-hidden'>
+                                    <div onMouseOver={() => setProductCardHover(true)}
+                                         onMouseOut={() => setProductCardHover(false)}
+                                         className='w-full relative cursor-pointer overflow-hidden'>
                                         <img alt='product/image'
                                              src={
                                                  productCardHover
@@ -120,7 +121,9 @@ const ProductCard = () => {
                                             {/* quick action buttons */}
                                             <div className='flex items-center gap-[15px] justify-center'>
 
-                                                <div onMouseOver={()=> setWishlistVisible(true)} onMouseOut={()=> setWishlistVisible(false)} className='relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300'>
+                                                <div onMouseOver={() => setWishlistVisible(true)}
+                                                     onMouseOut={() => setWishlistVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300'>
                                                     <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
                                                         <IoMdHeartEmpty className='text-[1.3rem]'/>
                                                     </p>
@@ -135,7 +138,9 @@ const ProductCard = () => {
                                                     </p>
                                                 </div>
 
-                                                <div onMouseOver={()=> setCompareVisible(true)} onMouseOut={()=> setCompareVisible(false)} className='relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]'>
+                                                <div onMouseOver={() => setCompareVisible(true)}
+                                                     onMouseOut={() => setCompareVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]'>
                                                     <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
                                                         <HiArrowsUpDown className='text-[1.3rem]'/>
                                                     </p>
@@ -150,7 +155,9 @@ const ProductCard = () => {
                                                     </p>
                                                 </div>
 
-                                                <div onMouseOver={()=> setQuickViewVisible(true)} onMouseOut={()=> setQuickViewVisible(false)} className='relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]'>
+                                                <div onMouseOver={() => setQuickViewVisible(true)}
+                                                     onMouseOut={() => setQuickViewVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]'>
                                                     <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
                                                         <IoEyeOutline className='text-[1.3rem]'/>
                                                     </p>
@@ -167,10 +174,12 @@ const ProductCard = () => {
                                             </div>
 
                                             {/* quantity & add cart */}
-                                            <div className='w-full flex mt-6 items-center opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 translate-y-[60px] bg-[rgb(0,0,0,0.5)]'>
+                                            <div
+                                                className='w-full flex mt-6 items-center opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 translate-y-[60px] bg-[rgb(0,0,0,0.5)]'>
 
                                                 {/* quantity */}
-                                                <div className='flex w-[50%] justify-center px-2 py-0.5 items-center border-r border-gray-400 text-white'>
+                                                <div
+                                                    className='flex w-[50%] justify-center px-2 py-0.5 items-center border-r border-gray-400 text-white'>
                                                     <button
                                                         className='active:bg-gray-100 p-[6px] rounded-full text-white transition-all duration-300 active:text-gray-700 text-[0.9rem]'
                                                         onClick={handleDecrement}><FiMinus/></button>
@@ -183,7 +192,8 @@ const ProductCard = () => {
                                                 </div>
 
                                                 {/* add to cart */}
-                                                <button className='py-[13px] overflow-hidden before:w-full before:h-full before:bg-[#0FABCA] before:absolute before:top-0 z-0 before:z-[-1] before:translate-x-[-150px] hover:before:translate-x-0 before:transition-all before:duration-300 before:left-0 relative flex items-center justify-center grow text-white'>
+                                                <button
+                                                    className='py-[13px] overflow-hidden before:w-full before:h-full before:bg-[#0FABCA] before:absolute before:top-0 z-0 before:z-[-1] before:translate-x-[-150px] hover:before:translate-x-0 before:transition-all before:duration-300 before:left-0 relative flex items-center justify-center grow text-white'>
                                                     <IoBagHandleOutline className='text-[1.3rem]'/>
                                                 </button>
                                             </div>
@@ -213,11 +223,13 @@ const ProductCard = () => {
                                             <span className='text-[0.9rem] text-gray-500'>(43)</span>
                                         </div>
 
-                                        <h3 className='text-[1rem] font-medium text-center mt-0.5 text-gray-900'>Drop-shoulder synthetic</h3>
+                                        <h3 className='text-[1rem] font-medium text-center mt-0.5 text-gray-900'>Drop-shoulder
+                                            synthetic</h3>
                                         <p className='text-center mt-0.5 text-[0.9rem] text-gray-900'>Tk 1,800.00</p>
 
                                         <div className='flex items-center gap-[10px] justify-center mt-3'>
-                                            <div className='w-4 h-4 rounded-full bg-red-500 outline outline-1 outline-red-500 outline-offset-2 cursor-pointer'></div>
+                                            <div
+                                                className='w-4 h-4 rounded-full bg-red-500 outline outline-1 outline-red-500 outline-offset-2 cursor-pointer'></div>
                                             <div className='w-4 h-4 rounded-full bg-green-500 cursor-pointer'></div>
                                             <div className='w-4 h-4 rounded-full bg-blue-500 cursor-pointer'></div>
                                         </div>
@@ -235,12 +247,11 @@ const ProductCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                        <ContentHeader text={'juice product card'} id={'juice_product_card'}/>
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Juice product card with name, price, flavors, size options, and quick action buttons for easy purchase.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -327,12 +338,11 @@ const ProductCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                        <ContentHeader text={'Grocery product card'} id={'grocery_product_card'}/>
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Grocery product card with name, price, weight, category, and quick action buttons for easy shopping.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -363,7 +373,7 @@ const ProductCard = () => {
                         </div>
                         {basicDialogPreview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='relative border w-[50%] border-gray-300 rounded-md p-5'>
+                                <div className='relative border w-[55%] border-gray-300 rounded-md p-5'>
 
                                     {/* favorite icon */}
                                     <FaHeart onClick={() => setIsFavorite(false)}
@@ -436,12 +446,11 @@ const ProductCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                        <ContentHeader text={'digital product card'} id={'digital_product_card'}/>
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Digital product card with name, price, file size, format, and quick action buttons for instant download.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -472,7 +481,7 @@ const ProductCard = () => {
                         </div>
                         {basicDialogPreview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='border border-gray-300 rounded-xl p-2 w-[60%]'>
+                                <div className='border border-gray-300 rounded-xl p-2 w-[70%]'>
 
                                     {/* product image */}
                                     <div className='relative'>
@@ -560,12 +569,11 @@ const ProductCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                        <ContentHeader text={'book product card'} id={'book_product_card'}/>
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Book product card with title, price, author, genre, and quick action buttons for easy purchase.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -596,7 +604,7 @@ const ProductCard = () => {
                         </div>
                         {basicDialogPreview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[50%] relative rounded-md overflow-hidden'>
+                                <div className='w-[55%] relative rounded-md overflow-hidden'>
 
                                     {/* badge */}
                                     <span
@@ -627,12 +635,11 @@ const ProductCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'basic dialog'} id={'basic_dialog'}/>
+                        <ContentHeader text={'gadget product card 1'} id={'gadget_product_card_1'}/>
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a dialog component. Display important messages, prompts, or
-                        actions in a focused modal window.
+                        Gadget product card with name, price, features, available colors, and quick action buttons for easy purchase.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -683,11 +690,13 @@ const ProductCard = () => {
                                         <div className='flex items-center mt-3 gap-[15px]'>
                                             <p className='text-[1.150rem] font-semibold mt-1'>$1024.99+</p>
 
-                                            <p className='border text-green-600 text-[0.8rem] border-green-400 px-2 py-1 rounded-md'>35% Off</p>
+                                            <p className='border text-green-600 text-[0.8rem] border-green-400 px-2 py-1 rounded-md'>35%
+                                                Off</p>
                                         </div>
 
                                         {/* shipping offers */}
-                                        <div className='flex items-center border-t border-gray-300 mt-3 gap-[15px] pt-[5px]'>
+                                        <div
+                                            className='flex items-center border-t border-gray-300 mt-3 gap-[15px] pt-[5px]'>
                                             <div className='flex items-center gap-[6px] text-gray-400 text-[0.9rem]'>
                                                 <MdLocalShipping/>
                                                 <p>Free shipping</p>
@@ -700,16 +709,19 @@ const ProductCard = () => {
 
                                         {/* actions */}
                                         <div className='flex items-center justify-between mt-7 gap-[15px]'>
-                                            <button className='py-[9px] px-4 text-white rounded-2xl grow justify-center flex items-center gap-[0.5rem] hover:bg-[#01849b] text-[1rem] bg-[#0FABCA] transition-all duration-200'>
+                                            <button
+                                                className='py-[9px] px-4 text-white rounded-2xl grow justify-center flex items-center gap-[0.5rem] hover:bg-[#01849b] text-[1rem] bg-[#0FABCA] transition-all duration-200'>
                                                 View Deal
                                                 <FiArrowUpRight className='text-[1.3rem]'/>
                                             </button>
                                             <button className='p-[9px] rounded-full border-2 border-[#0FABCA]'>
                                                 {
                                                     isFavorite ? (
-                                                        <RiHeartFill onClick={()=> setIsFavorite(false)} className='text-[#0FABCA] text-[1.3rem]'/>
-                                                    ): (
-                                                        <RiHeartAddLine onClick={()=> setIsFavorite(true)} className='text-[#0FABCA] text-[1.3rem]'/>
+                                                        <RiHeartFill onClick={() => setIsFavorite(false)}
+                                                                     className='text-[#0FABCA] text-[1.3rem]'/>
+                                                    ) : (
+                                                        <RiHeartAddLine onClick={() => setIsFavorite(true)}
+                                                                        className='text-[#0FABCA] text-[1.3rem]'/>
                                                     )
                                                 }
                                             </button>
@@ -727,6 +739,283 @@ const ProductCard = () => {
                         )}
                     </div>
 
+                    <div className='mt-8'>
+                        <ContentHeader text={'gadget product card 2'} id={'gadget_product_card_2'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        Gadget product card with name, price, features, available colors, and quick action buttons for easy purchase.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='border border-gray-300 w-[60%] relative rounded-2xl overflow-hidden'>
+
+                                    {/* badge */}
+                                    <span
+                                        className='bg-red-500 rounded-sm px-3 py-1 z-10 text-[0.9rem] text-white absolute top-3 left-3'>HOT</span>
+
+                                    {/* product image */}
+                                    <div className='group relative overflow-hidden cursor-pointer'>
+                                        <img alt='product/image' src='https://i.ibb.co.com/kcYX9md/Image-2.png'
+                                             className='w-[240px] mx-auto mt-5'/>
+
+                                        {/* action buttons */}
+                                        <div className='absolute bg-[rgb(0,0,0,0.3)] z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-0 left-0 flex items-center justify-center w-full h-full'>
+                                            <div className='flex items-center gap-[15px] justify-center'>
+
+                                                <div onMouseOver={() => setWishlistVisible(true)}
+                                                     onMouseOut={() => setWishlistVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <IoMdHeartEmpty className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${wishlistVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Wishlist
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+
+                                                <div onMouseOver={() => setCompareVisible(true)}
+                                                     onMouseOut={() => setCompareVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <HiArrowsUpDown className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${compareVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Compare
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+
+                                                <div onMouseOver={() => setQuickViewVisible(true)}
+                                                     onMouseOut={() => setQuickViewVisible(false)}
+                                                     className='relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]'>
+                                                    <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                        <IoEyeOutline className='text-[1.3rem]'/>
+                                                    </p>
+
+                                                    {/* tooltip */}
+                                                    <p className={`${quickViewVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                        Quick View
+
+                                                        {/* arrow */}
+                                                        <span
+                                                            className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {/* product details */}
+                                    <div className='p-4 pt-6'>
+
+                                        {/* review area */}
+                                        <div className='flex items-center gap-[10px]'>
+                                            <div className="flex items-center space-x-1">
+                                                {[...Array(5)].map((_, index) => {
+                                                    const starRating = index + 1;
+                                                    return (
+                                                        <FaStar
+                                                            key={starRating}
+                                                            className={`cursor-pointer ${
+                                                                starRating <= rating ? "text-[#FA8232]" : "text-gray-300"
+                                                            }`}
+                                                            size={15}
+                                                            onClick={() => setRating(starRating)}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                            <span className='text-[0.8rem] text-gray-500'>(738)</span>
+                                        </div>
+
+                                        <h3 className='text-[1.1rem] text-gray-900 font-medium mb-2 mt-2'>TOZO T6 True
+                                            Wireless
+                                            Earbuds Bluetooth Headphon</h3>
+                                        <p className='text-[1.150rem] font-medium text-[#0FABCA] mt-1'>$70</p>
+
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'product list card 1'} id={'product_list_card_1'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        Product list card with name, price, image, and quick action buttons for easy browsing and purchase.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[80%] border border-gray-300 rounded-md px-4 flex items-center gap-[10px]'>
+                                    <img alt='product/image' src='https://i.ibb.co.com/FDsyM7X/Image-4.png' className='w-[120px]'/>
+
+                                    <div>
+                                        <h3 className='text-[1.1rem] font-medium line-clamp-2'>Portable Wshing Machine, 11lbs capacity Model 18NMF</h3>
+                                        <p className='text-[1rem] font-medium text-[#0FABCA] mt-1'>$1,500</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'product list card 2'} id={'product_list_card_2'}/>
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        Product list card with name, price, image, and quick action buttons for easy browsing and purchase.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    basicDialogPreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[107px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    basicDialogPreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleBasicDialogPreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    basicDialogCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleBasicDialogCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {basicDialogPreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[80%] justify-center flex items-center gap-[10px]'>
+                                    <img alt='product/image' src='https://i.ibb.co.com/HHP2J04/7-jpg.png' className='w-[80px] rounded-md'/>
+
+                                    <div>
+                                        <h3 className='text-[1.1rem] font-medium line-clamp-2'>Good Life Raw Peanuts</h3>
+
+                                        {/* review area */}
+                                        <div className='flex items-center gap-[10px] mb-2'>
+                                            <div className="flex items-center space-x-1">
+                                                {[...Array(5)].map((_, index) => {
+                                                    const starRating = index + 1;
+                                                    return (
+                                                        <FaStar
+                                                            key={starRating}
+                                                            className={`cursor-pointer ${
+                                                                starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                                            }`}
+                                                            size={15}
+                                                            onClick={() => setRating(starRating)}
+                                                        />
+                                                    );
+                                                })}
+                                            </div>
+                                            <span className='text-[0.8rem] text-gray-500'>(4.8)</span>
+                                        </div>
+
+                                        <p className='text-[1rem] font-medium text-[#0FABCA] mt-1'>$85.00</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {basicDialogCode && (
+                            <Showcode
+                                code='
+          '
+                            />
+                        )}
+                    </div>
+
                     <OverviewFooter
                         backUrl='/components/timeline'
                         backName='timeline'
@@ -735,18 +1024,18 @@ const ProductCard = () => {
                     />
                 </div>
 
-                <div className='1024px:flex hidden flex-col gap-4 sticky top-4 right-0 w-[20%]'>
+                <div className='1024px:flex hidden flex-col gap-4 sticky top-4 right-0 w-[40%]'>
                     <h2 className='text-[0.9rem] font-[600] text-text tracking-widest'>
                         CONTENTS
                     </h2>
-                    {dialogContents.map((item) => (
+                    {productCardsContents.map((item) => (
                         <a
                             key={item.id}
                             href={item.href}
                             className={`${
                                 activeSection === item.href.slice(1) &&
                                 '!text-primary !border-primary'
-                            } text-[0.9rem] text-text border-l border-transparent pl-4`}
+                            } text-[0.9rem] capitalize transition-all duration-300 text-text border-l border-transparent pl-4`}
                         >
                             {item.title}
                         </a>
diff --git a/src/Utils/ContentsConfig/ECommerceContents.js b/src/Utils/ContentsConfig/ECommerceContents.js
new file mode 100644
index 0000000..2fa867c
--- /dev/null
+++ b/src/Utils/ContentsConfig/ECommerceContents.js
@@ -0,0 +1,48 @@
+// Normal Button contents
+export const productCardsContents = [
+    {
+        id: 1,
+        title: 'clothing product card',
+        href: '#clothing_product_card',
+    },
+    {
+        id: 2,
+        title: 'juice product card',
+        href: '#juice_product_card',
+    },
+    {
+        id: 3,
+        title: 'Grocery product card',
+        href: '#grocery_product_card',
+    },
+    {
+        id: 4,
+        title: 'digital product card',
+        href: '#digital_product_card',
+    },
+    {
+        id: 5,
+        title: 'book product card',
+        href: '#book_product_card',
+    },
+    {
+        id: 6,
+        title: 'gadget product card 1',
+        href: '#gadget_product_card_1',
+    },
+    {
+        id: 7,
+        title: 'gadget product card 2',
+        href: '#gadget_product_card_2',
+    },
+    {
+        id: 8,
+        title: 'product list card 1',
+        href: '#product_list_card_1',
+    },
+    {
+        id: 9,
+        title: 'product list card 2',
+        href: '#product_list_card_2',
+    },
+];

From cbf7e24fcb2161dcf29a6da8948b5789fed4775c Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Wed, 20 Nov 2024 22:32:07 +0600
Subject: [PATCH 06/22] update: ads component completed and offer grid block
 added

---
 src/App.jsx                                   |   8 +-
 .../Overview/Sidebar/MobileSidebar.jsx        |  64 +++-
 src/Components/Overview/Sidebar/index.jsx     |  64 +++-
 .../Blocks/E-Commerce/OfferGrid.jsx           | 208 +++++++++++++
 .../Content/ECommerce/AdsCard.jsx             | 279 +++++++++++++++++-
 .../Content/ECommerce/OfferGrid.jsx           |  11 -
 .../E-Commerce}/OfferGridPage.jsx             |   7 +-
 src/Utils/ContentsConfig/ECommerceContents.js |  36 ++-
 8 files changed, 619 insertions(+), 58 deletions(-)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
 delete mode 100644 src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
 rename src/Pages/{Components/ECommerce => Blocks/E-Commerce}/OfferGridPage.jsx (85%)

diff --git a/src/App.jsx b/src/App.jsx
index d97c2f3..2f0fcef 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -71,7 +71,6 @@ import CarouselPage from "./Pages/Components/Surfaces/CarouselPage.jsx";
 
 // e-commerce
 import ProductCardPage from "./Pages/Components/ECommerce/ProductCardPage.jsx";
-import OfferGridPage from "./Pages/Components/ECommerce/OfferGridPage.jsx";
 import AdsCardPage from "./Pages/Components/ECommerce/AdsCardPage.jsx";
 
 // randoms
@@ -98,6 +97,9 @@ import NewsletterSectionPage from "./Pages/Blocks/Forms/NewsletterSectionPage.js
 import MultipageFormPage from "./Pages/Blocks/Forms/MultipageFormPage.jsx";
 import ResponsiveSidebarPage from "./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx";
 
+// e-commerce blocks
+import OfferGridPage from "./Pages/Blocks/E-Commerce/OfferGridPage.jsx";
+
 // ZenUI wrong route page
 import EmptyPage from "./Pages/EmptyPage.jsx"
 
@@ -267,7 +269,6 @@ const App = () => {
 
                 {/* e-commerce */}
                 <Route path="/components/product-card" element={<ProductCardPage/>}/>
-                <Route path="/components/offer-grid" element={<OfferGridPage/>}/>
                 <Route path="/components/ads-card" element={<AdsCardPage/>}/>
 
                 {/* randoms */}
@@ -289,6 +290,9 @@ const App = () => {
                 <Route path="/blocks/responsive-sidebar" element={<ResponsiveSidebarPage/>}/>
                 <Route path="/blocks/empty-page" element={<WrongRoutePage/>}/>
 
+                {/* e-commerce blocks */}
+                <Route path="/blocks/offer-grid" element={<OfferGridPage/>}/>
+
 
                 {/*  icons  */}
                 <Route path="/icons" element={<IconsPage/>}/>
diff --git a/src/Components/Overview/Sidebar/MobileSidebar.jsx b/src/Components/Overview/Sidebar/MobileSidebar.jsx
index f65aedd..4596850 100644
--- a/src/Components/Overview/Sidebar/MobileSidebar.jsx
+++ b/src/Components/Overview/Sidebar/MobileSidebar.jsx
@@ -29,7 +29,7 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
 
     return (
         <>
-            <div className='w-full 1024px:hidden bg-border mt-[4.9rem] 425px:mt-[4.3rem] py-3 fixed 425px:top-0 top-[-10px] px-6 640px:px-10 z-30'>
+            <div className='w-full 1024px:hidden bg-border mt-[4.9rem] 425px:mt-[4.3rem] py-3 fixed 425px:top-0 top-[-10px] px-6 640px:px-10 640px:pr-7 z-30'>
                 <CiMenuFries className='text-[1.7rem] rotate-[180deg] text-text mobilesidebarIcon' onClick={() => setSidebarOpen(true)} />
             </div>
             <aside className={` ${sidebarOpen ? 'translate-x-0 opacity-100 z-40' : 'translate-x-[-200px] opacity-0 z-[-1]'} py-6 pt-[6rem] px-6 640px:px-10 border-r h-[100vh] border-border flex-col gap-4 overflow-y-scroll fixed top-0 left-0 w-[80%] 640px:w-[320px] bg-secondary z-20 flex mobileSidebar transition-all duration-500`}>
@@ -635,19 +635,6 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 <NewBadge/>
                             </Link>
 
-                            <Link
-                                to={"/components/code"}
-                                className={`${
-                                    startContent === 39 &&
-                                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
-                                onClick={() => setStartContent(39)}
-                            >
-                                Offer Grid
-
-                                <NewBadge/>
-                            </Link>
-
                             {/* Randoms */}
                             <Link
                                 to={""}
@@ -839,6 +826,55 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 Empty Page
                             </Link>
 
+                            {/* e-commerce blocks */}
+                            <Link
+                                to={""}
+                                className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                            >
+                                E-COMMERCE
+                            </Link>
+
+                            <Link
+                                to={"/blocks/offer-grid"}
+                                className={`${startContent === 200 &&
+                                "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(200)}
+                            >
+                                Offer Grid
+                                <NewBadge/>
+                            </Link>
+                            <Link
+                                to={"/blocks/product-details-page"}
+                                className={`${startContent === 201 &&
+                                "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(201)}
+                            >
+                                Product Details Page
+                                <NewBadge/>
+                            </Link>
+                            <Link
+                                to={"/blocks/product-filter-page"}
+                                className={`${startContent === 202 &&
+                                "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(202)}
+                            >
+                                Product Filter Page
+                                <NewBadge/>
+                            </Link>
+                            <Link
+                                to={"/blocks/checkout-page"}
+                                className={`${startContent === 203 &&
+                                "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                                onClick={() => setStartContent(203)}
+                            >
+                                Checkout Page
+                                <NewBadge/>
+                            </Link>
+
                             {/* Randoms */}
                             <Link
                                 to={""}
diff --git a/src/Components/Overview/Sidebar/index.jsx b/src/Components/Overview/Sidebar/index.jsx
index 6cae5a5..207f9f7 100644
--- a/src/Components/Overview/Sidebar/index.jsx
+++ b/src/Components/Overview/Sidebar/index.jsx
@@ -33,7 +33,7 @@ const index = ({ startContent, setStartContent }) => {
   return (
       <aside
           ref={sidebarRef}
-          className="py-6 px-10 border-r h-[89vh] border-border flex-col gap-4 overflow-y-scroll sticky top-18 left-0 w-[320px] bg-secondary z-20 1024px:flex hidden">
+          className="py-6 px-10 pr-7 border-r h-[89vh] border-border flex-col gap-4 overflow-y-scroll sticky top-18 left-0 w-[320px] bg-secondary z-20 1024px:flex hidden">
 
         {/*  get starts  */}
         <ul className='getStarted flex flex-col gap-[12px] mb-4'>
@@ -679,19 +679,6 @@ const index = ({ startContent, setStartContent }) => {
                     <NewBadge/>
                 </Link>
 
-                <Link
-                    to={"/components/offer-grid"}
-                    className={`${
-                        startContent === 110 &&
-                        "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
-                    onClick={() => setStartContent(110)}
-                >
-                    Offer Grid
-
-                    <NewBadge/>
-                </Link>
-
               {/* Randoms */}
               <Link
                   to={""}
@@ -885,6 +872,55 @@ const index = ({ startContent, setStartContent }) => {
                 Empty Page
               </Link>
 
+                {/* e-commerce blocks */}
+                <Link
+                    to={""}
+                    className={`sectionHeader tracking-widest font-[500] hover:font-[500] relative mt-4 uppercase  border-l border-border !text-[0.750rem] `}
+                >
+                    E-COMMERCE
+                </Link>
+
+                <Link
+                    to={"/blocks/offer-grid"}
+                    className={`${startContent === 200 &&
+                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(200)}
+                >
+                    Offer Grid
+                    <NewBadge/>
+                </Link>
+                <Link
+                    to={"/blocks/product-details-page"}
+                    className={`${startContent === 201 &&
+                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(201)}
+                >
+                    Product Details Page
+                    <NewBadge/>
+                </Link>
+                <Link
+                    to={"/blocks/product-filter-page"}
+                    className={`${startContent === 202 &&
+                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(202)}
+                >
+                    Product Filter Page
+                    <NewBadge/>
+                </Link>
+                <Link
+                    to={"/blocks/checkout-page"}
+                    className={`${startContent === 203 &&
+                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
+                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
+                    onClick={() => setStartContent(203)}
+                >
+                    Checkout Page
+                    <NewBadge/>
+                </Link>
+
               {/* Randoms */}
               <Link
                   to={""}
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
new file mode 100644
index 0000000..67267a9
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
@@ -0,0 +1,208 @@
+import React, {useState} from "react";
+
+// components
+import ContentHeader from "../../../../../Shared/ContentHeader";
+import {Helmet} from "react-helmet";
+import BlocksShowCode from "../../../../../Shared/BlocksShowCode.jsx";
+
+// icons
+import BlocksFooter from "../../../../../Shared/BlocksFooter.jsx";
+
+// toggle card view
+import {useToggleCardView} from "../../../../../CustomHooks/ButtonToggle.js";
+import {HiArrowRight} from "react-icons/hi";
+
+
+const OfferGrid = () => {
+
+    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
+    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
+
+    const toggleCardView = useToggleCardView()
+
+    return (
+        <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
+            <div>
+                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+
+                            <div className='grid grid-cols-2 gap-[15px] w-[80%] min-h-[550px]'>
+
+                                <div
+                                    className='col-span-1 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-[#f2f4f6] h-full py-8'>
+                                    <div className='px-8'>
+                                        <h4 className='text-[1.5rem] font-medium text-gray-900'>Living Room</h4>
+                                        <button
+                                            className='flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b'>
+                                            Shop Now
+                                            <HiArrowRight className='group-hover:ml-1 transition-all duration-200'/>
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/sJvBCfN/Paste-image.png'
+                                         className='w-[500px]'/>
+                                </div>
+
+                                <div
+                                    className='bg-[#f2f4f6] rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden'>
+
+                                    <div className='px-6 mt-auto pb-9'>
+                                        <h4 className='text-[1.5rem] font-medium text-gray-900'>Bedroom</h4>
+                                        <button
+                                            className='flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b'>
+                                            Shop Now
+                                            <HiArrowRight className='group-hover:ml-1 transition-all duration-200'/>
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/qRMf20H/Paste-image.png'
+                                         className='w-[200px] h-[200px]'/>
+
+                                </div>
+
+                                <div
+                                    className='bg-[#f2f4f6] rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden'>
+
+                                    <div className='px-6 mt-auto pb-9'>
+                                        <h4 className='text-[1.5rem] font-medium text-gray-900'>Kitchen</h4>
+                                        <button
+                                            className='flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b'>
+                                            Shop Now
+                                            <HiArrowRight className='group-hover:ml-1 transition-all duration-200'/>
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/L9QXpt6/Paste-image.png'
+                                         className='w-[200px] h-max'/>
+
+                                </div>
+
+                            </div>
+
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+
+                            <div className='grid grid-cols-2 rounded-md'>
+
+                                <img alt='product/image' src='https://i.ibb.co.com/wpZ3Vhc/Paste-image.png'
+                                     className='w-full h-full rounded-l-md'/>
+
+                                <div className='bg-[#ffd37c] rounded-r-md p-12'>
+                                    <span className='text-[0.9rem] font-semibold text-blue-600'>PROMOTION</span>
+                                    <h4 className='text-[1.8rem] font-medium mt-2'>Hurry up! 40% OFF</h4>
+                                    <p className='text-[0.9rem] font-normal text-gray-900 mt-2'>Thousands of high tech are waiting for you</p>
+
+                                    <div className='mt-5'>
+                                        <p className='text-[0.9rem] font-normal text-gray-900'>Offer expires in:</p>
+                                        <div className='flex items-center gap-[10px] mt-2'>
+                                            <div className='flex items-center justify-center flex-col'>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>02</h5>
+                                                <span className='text-[0.7rem]'>Days</span>
+                                            </div>
+                                            <div className='flex items-center justify-center flex-col'>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>12</h5>
+                                                <span className='text-[0.7rem]'>Hours</span>
+                                            </div>
+                                            <div className='flex items-center justify-center flex-col'>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>45</h5>
+                                                <span className='text-[0.7rem]'>Minutes</span>
+                                            </div>
+                                            <div className='flex items-center justify-center flex-col'>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>05</h5>
+                                                <span className='text-[0.7rem]'>Seconds</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <button className='py-2 px-6 rounded-md bg-black text-white mt-5 text-[1rem]'>Shop Now</button>
+                                </div>
+
+                            </div>
+
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
+                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+            </div>
+
+
+            <Helmet>
+                <title>Blocks - Offer Grid</title>
+            </Helmet>
+        </aside>
+    );
+};
+
+export default OfferGrid;
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
index 68ecac7..a6e87ee 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
@@ -14,10 +14,15 @@ import { Helmet } from 'react-helmet';
 // showing the code
 import Showcode from '../../../../../Shared/ShowCode';
 import {BsArrowRight} from "react-icons/bs";
+import {MdKeyboardArrowRight} from "react-icons/md";
+import {HiArrowRight} from "react-icons/hi";
+
+// sidebar contents
+import {adsCardContents} from "../../../../../Utils/ContentsConfig/ECommerceContents.js";
 
 const AdsCard = () => {
     // const [contentActiveTab, setContentActiveTab] = useState(0);
-    const sectionIds = radioInputContents.map((item) => item.href.slice(1));
+    const sectionIds = adsCardContents.map((item) => item.href.slice(1));
     const activeSection = useScrollSpy(sectionIds);
 
     // circle radio
@@ -52,11 +57,10 @@ const AdsCard = () => {
         <>
             <aside className='flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10'>
                 <div>
-                    <ContentHeader text={'circle radio'} id={'circle_radio'} />
+                    <ContentHeader text={'ads card 1'} id={'ads_card_1'} />
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a circle radio button component. Select options with a click
-                        on the elegant circular design.
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -112,12 +116,11 @@ const AdsCard = () => {
                     </div>
 
                     <div className='mt-8'>
-                        <ContentHeader text={'Square Radio'} id={'square_radio'} />
+                        <ContentHeader text={'ads card 2'} id={'ads_card_2'} />
                     </div>
 
                     <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
-                        This is a square radio button component. Choose options by clicking
-                        on the modern, square design.
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
                     </p>
 
                     <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
@@ -175,11 +178,263 @@ const AdsCard = () => {
                         )}
                     </div>
 
+                    <div className='mt-8'>
+                        <ContentHeader text={'ads card 3'} id={'ads_card_3'} />
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    squarePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    squarePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleSquarePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    squareCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleSquareCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {squarePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[80%] relative'>
+
+                                    {/* offer details */}
+                                    <div className='bg-white rounded-l-md rounded-r-[60px] absolute top-3 left-3 pl-3.5 pr-6 py-1.5'>
+                                        <p className='text-[1rem] text-[#0BAF9A] leading-[15px] mt-1.5'>Hot Deals!</p>
+                                        <span className='text-gray-600 text-[0.9rem] tracking-wider'>Fruit & Vegetables</span>
+                                    </div>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/h7Jfs7s/div-offer-banner-1.png' className='rounded-xl'/>
+
+                                    {/* action button */}
+                                    <button className='absolute bottom-3 right-3 py-[8px] px-5 text-white bg-[#0BAF9A] rounded-full font-medium'>View Offer</button>
+                                </div>
+                            </div>
+                        )}
+
+                        {squareCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'ads card 4'} id={'ads_card_4'} />
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    squarePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    squarePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleSquarePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    squareCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleSquareCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {squarePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[60%] overflow-hidden flex items-center justify-center flex-col pt-12 p-6 bg-[#0BAF9A] rounded-xl'>
+
+                                    <h4 className='text-center text-[1.2rem] font-medium text-white'>Fresh & 100% Organic</h4>
+                                    <p className='text-[1rem] text-center text-[#FFFFFF]'>farmer's market</p>
+
+                                    <button className='py-2 px-6 rounded-md bg-white text-[#0BAF9A] font-[400] text-[1rem] mx-auto mb-5 mt-4'>Shop Now</button>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/xfp5R3W/basket-png.png' className='w-[400px] mx-auto'/>
+
+                                </div>
+                            </div>
+                        )}
+
+                        {squareCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'ads card 5'} id={'ads_card_5'} />
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    squarePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    squarePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleSquarePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    squareCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleSquareCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {squarePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[70%] relative'>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/PC8s3B6/Link-2.png'
+                                         className='w-full'/>
+
+                                    <div className='absolute top-[50%] transform translate-y-[-50%] left-8'>
+                                        <p className='text-[1rem] font-[300] text-gray-900'>Today Special</p>
+                                        <h4 className='text-[1.3rem] mt-2 font-semibold text-gray-900'>Fruits Juice
+                                            Series</h4>
+
+                                        <button
+                                            className='py-2 text-[#239698] font-semibold mt-2 group hover:underline text-[1rem] flex items-center gap-[10px]'>
+                                            Shop Now
+                                            <MdKeyboardArrowRight className='text-[1.3rem] group-hover:ml-1 transition-all duration-300'/>
+                                        </button>
+                                    </div>
+
+                                </div>
+                            </div>
+                        )}
+
+                        {squareCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
+                    <div className='mt-8'>
+                        <ContentHeader text={'ads card 6'} id={'ads_card_6'} />
+                    </div>
+
+                    <p className='w-full 425px:w-[80%] text-text text-[1rem]'>
+                        E-commerce ad cards highlight products with an image, price, discount, and a "Buy Now" button for easy shopping.
+                    </p>
+
+                    <div className='w-full 425px:w-[80%] border border-border rounded mt-8'>
+                        <div className='relative'>
+                            <div
+                                className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
+                                    squarePreview
+                                        ? 'translate-x-[0px] !w-[100px]'
+                                        : 'translate-x-[105px] rounded-br'
+                                }`}
+                            ></div>
+                            <button
+                                className={`${
+                                    squarePreview && 'text-tabTextColor'
+                                } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                                onClick={handleSquarePreview}
+                            >
+                                Preview
+                            </button>
+                            <button
+                                className={`${
+                                    squareCode && 'text-tabTextColor'
+                                } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                                onClick={handleSquareCode}
+                            >
+                                Code
+                            </button>
+                        </div>
+                        {squarePreview && (
+                            <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
+                                <div className='w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-12'>
+
+                                    {/* coupon */}
+                                    <span className='py-2 font-semibold px-4 rounded-md absolute right-6 z-20 top-6 bg-[#EFD33D]'>29% OFF</span>
+
+                                    {/* offer details */}
+                                    <div className='w-[45%]'>
+                                        <p className='text-[1rem] font-[300] text-[#EBC80C]'>Summer Sales</p>
+                                        <h4 className='text-[1.5rem] mt-2 font-medium text-white'>New Google Pixel 6 Pro</h4>
+
+                                        <button
+                                            className='py-2 px-5 text-white font-medium mt-5 group hover:bg-[#ed6104] transition-all duration-300 text-[1rem] flex items-center gap-[10px] bg-[#FA8232] rounded-md'>
+                                            Shop Now
+                                            <HiArrowRight
+                                                className='text-[1.3rem] group-hover:ml-1 transition-all duration-300'/>
+                                        </button>
+                                    </div>
+
+                                    {/* product image */}
+                                    <img alt='product/image' src='https://i.ibb.co.com/WWTSSbm/image-5-1.png'
+                                         className='w-[220px] absolute right-0 bottom-0'/>
+
+                                </div>
+                            </div>
+                        )}
+
+                        {squareCode && (
+                            <Showcode
+                                code='
+                '
+                            />
+                        )}
+                    </div>
+
                     <OverviewFooter
-                        backUrl='/components/input-select'
-                        backName='select'
-                        forwardName='range'
-                        forwardUrl='/components/input-range'
+                        backUrl='/components/product-card'
+                        backName='product card'
+                        forwardName='offer grid'
+                        forwardUrl='/components/offer-grid'
                     />
                 </div>
 
@@ -187,7 +442,7 @@ const AdsCard = () => {
                     <h2 className='text-[0.9rem] font-[600] text-text tracking-widest'>
                         CONTENTS
                     </h2>
-                    {radioInputContents.map((item) => (
+                    {adsCardContents.map((item) => (
                         <a
                             key={item.id}
                             href={item.href}
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
deleted file mode 100644
index 050f8cb..0000000
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const OfferGrid = () => {
-    return (
-        <div>
-            
-        </div>
-    );
-};
-
-export default OfferGrid;
diff --git a/src/Pages/Components/ECommerce/OfferGridPage.jsx b/src/Pages/Blocks/E-Commerce/OfferGridPage.jsx
similarity index 85%
rename from src/Pages/Components/ECommerce/OfferGridPage.jsx
rename to src/Pages/Blocks/E-Commerce/OfferGridPage.jsx
index 460104d..2647088 100644
--- a/src/Pages/Components/ECommerce/OfferGridPage.jsx
+++ b/src/Pages/Blocks/E-Commerce/OfferGridPage.jsx
@@ -1,11 +1,10 @@
-import React from "react";
 
 // components
 import Navbar from "../../../Components/Home/Navbar";
 import Sidebar from "../../../Components/Overview/Sidebar";
 import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
 import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
-import OfferGrid from "../../../Components/Overview/SidebarContent/Content/ECommerce/OfferGrid.jsx";
+import OfferGrid from "../../../Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx";
 
 const OfferGridPage = () => {
     return (
@@ -14,11 +13,11 @@ const OfferGridPage = () => {
             <MobileNavbar/>
             <div className="flex w-full mx-auto max-w-[1700px]">
                 <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
-                    <Sidebar startContent={110} />
+                    <Sidebar startContent={200} />
                 </div>
 
                 <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
-                    <MobileSidebar startContent={110}/>
+                    <MobileSidebar startContent={200}/>
                     <OfferGrid />
                 </div>
             </div>
diff --git a/src/Utils/ContentsConfig/ECommerceContents.js b/src/Utils/ContentsConfig/ECommerceContents.js
index 2fa867c..b0c8787 100644
--- a/src/Utils/ContentsConfig/ECommerceContents.js
+++ b/src/Utils/ContentsConfig/ECommerceContents.js
@@ -1,4 +1,4 @@
-// Normal Button contents
+// productCardsContents
 export const productCardsContents = [
     {
         id: 1,
@@ -46,3 +46,37 @@ export const productCardsContents = [
         href: '#product_list_card_2',
     },
 ];
+
+// adsCardContents
+export const adsCardContents = [
+    {
+        id: 1,
+        title: 'ads card 1',
+        href: '#ads_card_1',
+    },
+    {
+        id: 2,
+        title: 'ads card 2',
+        href: '#ads_card_2',
+    },
+    {
+        id: 3,
+        title: 'ads card 3',
+        href: '#ads_card_3',
+    },
+    {
+        id: 4,
+        title: 'ads card 4',
+        href: '#ads_card_4',
+    },
+    {
+        id: 5,
+        title: 'ads card 5',
+        href: '#ads_card_5',
+    },
+    {
+        id: 6,
+        title: 'ads card 6',
+        href: '#ads_card_6',
+    },
+];

From 1ab8da0f8a40f6ad146d4ff86aaf83bc2678a3c1 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 23 Nov 2024 12:36:03 +0600
Subject: [PATCH 07/22] update: offer grid design completed

---
 .../Blocks/E-Commerce/OfferGrid.jsx           | 331 +++++++++++++++++-
 1 file changed, 325 insertions(+), 6 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
index 67267a9..69399d3 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 
 // components
 import ContentHeader from "../../../../../Shared/ContentHeader";
@@ -20,6 +20,36 @@ const OfferGrid = () => {
 
     const toggleCardView = useToggleCardView()
 
+    const [timeLeft, setTimeLeft] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+    });
+    const targetDate = '2024-12-31T23:59:59'
+
+    useEffect(() => {
+        const calculateTimeLeft = () => {
+            const difference = new Date(targetDate) - new Date();
+
+            if (difference > 0) {
+                setTimeLeft({
+                    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+                    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+                    minutes: Math.floor((difference / 1000 / 60) % 60),
+                    seconds: Math.floor((difference / 1000) % 60)
+                });
+            }
+        };
+
+        const timer = setInterval(calculateTimeLeft, 1000);
+        calculateTimeLeft(); // Initial call
+
+        return () => clearInterval(timer);
+    }, [targetDate]);
+
+    const formatNumber = (number) => number.toString().padStart(2, '0');
+
     return (
         <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
             <div>
@@ -124,6 +154,225 @@ const OfferGrid = () => {
                     navigation links to guide them back to the homepage or other sections.
                 </p>
 
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+
+                            <div className='grid grid-cols-4 gap-[15px] w-[80%] min-h-[400px]'>
+
+                                <div
+                                    className='col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-black h-full py-8 relative'>
+
+                                    <div className='px-8 absolute bottom-8 z-20 w-[70%]'>
+                                        <h4 className='text-[1.1rem] font-medium text-white'>PlayStation 5</h4>
+                                        <p className='text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]'>Black and White version of the PS5 coming out on sale.</p>
+                                        <button
+                                            className='w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-3 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b'>
+                                            Shop Now
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/g9qmJxg/ps5-slim-goedkope-playstation-large-1.png'
+                                         className='w-[350px] absolute bottom-0 left-[50%] transform translate-x-[-50%]'/>
+                                </div>
+
+                                <div
+                                    className='bg-black rounded-sm col-span-2 flex justify-between items-center px-4 overflow-hidden relative min-h-[190px]'>
+
+                                    <div className='absolute bottom-6 left-6 z-20 w-[50%]'>
+                                        <h4 className='text-[1.1rem] font-medium text-white'>Women’s Collections</h4>
+                                        <p className='text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]'>Featured woman collections that give you another vibe.</p>
+                                        <button
+                                            className='w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-3 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b'>
+                                            Shop Now
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/7ghML0N/attractive-woman-wearing-hat-posing-black-background-1.png'
+                                         className='w-[300px] absolute bottom-0 right-0'/>
+
+                                </div>
+
+                                <div
+                                    className='bg-black rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden relative min-h-[180px]'>
+
+                                    <div className='absolute bottom-4 z-20 w-[90%]'>
+                                        <h4 className='text-[1.1rem] font-medium text-white'>Speakers</h4>
+                                        <p className='text-[0.8rem] mt-0.5 text-[#FAFAFA] font-[300]'>Amazon wireless speakers</p>
+                                        <button
+                                            className='w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-2 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b'>
+                                            Shop Now
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/fd8DJYZ/69-694768-amazon-echo-png-clipart-transparent-amazon-echo-png-1.png'
+                                         className='w-[120px] absolute top-[50%] left-[50%] transform translate-y-[-50%] translate-x-[-50%]'/>
+
+                                </div>
+
+                                <div
+                                    className='bg-black rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden relative min-h-[180px]'>
+
+                                    <div className='absolute bottom-4 z-20 w-[90%]'>
+                                        <h4 className='text-[1.1rem] font-medium text-white'>Perfume</h4>
+                                        <p className='text-[0.8rem] mt-0.5 text-[#FAFAFA] font-[300]'>GUCCI INTENSE OUD EDP</p>
+                                        <button
+                                            className='w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-2 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b'>
+                                            Shop Now
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/WxYLjFy/652e82cd70aa6522dd785109a455904c.png'
+                                         className='w-[130px] absolute top-[50%] left-[50%] transform translate-y-[-50%] translate-x-[-50%]'/>
+
+                                </div>
+
+                            </div>
+
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+
+                            <div className="grid grid-cols-4 w-full h-[450px]">
+
+                                <div
+                                    className='col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-white h-full py-8 relative'>
+
+                                    <div className='px-8 absolute top-[50%] translate-y-[-50%] right-7 z-20 w-[60%]'>
+                                        <h4 className='text-[1.5rem] font-medium text-gray-900'>PlayStation 5</h4>
+                                        <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>Incredibly powerful CPUs, GPUs, and an SSD with integrated I/O will redefine your PlayStation experience.</p>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/g9qmJxg/ps5-slim-goedkope-playstation-large-1.png'
+                                         className='w-[230px] absolute -left-12 top-[50%] transform translate-y-[-50%]'/>
+                                </div>
+
+                                <div
+                                    className='bg-[#EDEDED] rounded-sm col-span-2 flex justify-between items-center px-4 overflow-hidden h-full row-span-3 relative'>
+
+                                    <div className='pl-5 w-[60%]'>
+                                        <h4 className='text-[2rem] font-[300] text-gray-900'>Macbook <b className='text-gray-900 font-semibold'>Air</b></h4>
+                                        <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>The new 15‑inch MacBook Air makes room for more of what you love with a spacious Liquid Retina display.</p>
+                                        <button
+                                            className='w-max py-2 px-6 rounded-md border border-gray-900 text-gray-900 text-[0.9rem] hover:bg-gray-900 transition-all duration-300 hover:text-white mt-5'>
+                                            Shop Now
+                                        </button>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/JKqHn1w/Mac-Book-Pro-14.png'
+                                         className='w-[180px] absolute top-[50%] transform translate-y-[-50%] right-0'/>
+
+                                </div>
+
+                                <div
+                                    className='overflow-hidden flex justify-between flex-col rounded-sm bg-[#EDEDED] py-8 relative min-h-[140px]'>
+
+                                    <div className='absolute top-[50%] transform translate-y-[-50%] right-6 z-20 w-[50%]'>
+                                        <h4 className='text-[1.3rem] font-[300] text-gray-900'>Apple <br/>
+                                            AirPods <b className='font-semibold'>Max</b></h4>
+                                        <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>Computational audio. Listen, it's powerful</p>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/BKfpK5b/hero-gnfk5g59t0qe-xlarge-2x-1.png'
+                                         className='w-[80px] absolute top-[50%] left-0 transform translate-y-[-50%]'/>
+                                </div>
+
+                                <div
+                                    className='overflow-hidden flex justify-between flex-col rounded-sm bg-[#353535] py-8 relative min-h-[140px] h-full'>
+
+                                    <div className='absolute top-[50%] translate-y-[-50%] right-6 z-20 w-[50%]'>
+                                        <h4 className='text-[1.1rem] font-[300] text-white'>Apple <br/>
+                                            Vision <b className='font-semibold'>Pro</b></h4>
+                                        <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>An immersive way to experience entertainment</p>
+                                    </div>
+
+                                    <img alt='product/image'
+                                         src='https://i.ibb.co.com/Bq7NGbQ/image-36-1.png'
+                                         className='w-[100px] absolute left-0 top-[50%] transform translate-y-[-50%]'/>
+                                </div>
+
+                            </div>
+
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
@@ -156,25 +405,26 @@ const OfferGrid = () => {
                                 <div className='bg-[#ffd37c] rounded-r-md p-12'>
                                     <span className='text-[0.9rem] font-semibold text-blue-600'>PROMOTION</span>
                                     <h4 className='text-[1.8rem] font-medium mt-2'>Hurry up! 40% OFF</h4>
-                                    <p className='text-[0.9rem] font-normal text-gray-900 mt-2'>Thousands of high tech are waiting for you</p>
+                                    <p className='text-[0.9rem] font-normal text-gray-900 mt-2'>Thousands of high tech
+                                        are waiting for you</p>
 
                                     <div className='mt-5'>
                                         <p className='text-[0.9rem] font-normal text-gray-900'>Offer expires in:</p>
                                         <div className='flex items-center gap-[10px] mt-2'>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>02</h5>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.days)}</h5>
                                                 <span className='text-[0.7rem]'>Days</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>12</h5>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.hours)}</h5>
                                                 <span className='text-[0.7rem]'>Hours</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>45</h5>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.minutes)}</h5>
                                                 <span className='text-[0.7rem]'>Minutes</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>05</h5>
+                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.seconds)}</h5>
                                                 <span className='text-[0.7rem]'>Seconds</span>
                                             </div>
                                         </div>
@@ -193,6 +443,75 @@ const OfferGrid = () => {
                     }
                 </div>
 
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+
+                            <div className='flex justify-between items-center w-full py-4 px-8 rounded-md bg-[#FFE7D6]'>
+
+                                <div className='w-[30%] pl-6'>
+
+                                    <span className='bg-[#2DA5F3] rounded-sm py-1.5 px-3 text-[0.8rem] font-normal text-white'>SAVE UP TO $200.00</span>
+
+                                    <h4 className='text-[2rem] mt-2 font-semibold text-gray-800'>Macbook Pro</h4>
+
+                                    <p className='text-[1rem] mt-3 text-gray-700'>Apple M1 Max Chip. 32GB Unified Memory, 1TB SSD Storage</p>
+
+                                    <button
+                                        className='bg-[#FA8232] flex items-center gap-[10px] py-2 px-4 rounded-sm text-white text-[0.9rem] mt-3 uppercase group'>
+                                        Shop Now
+                                        <HiArrowRight className='group-hover:ml-1 transition-all duration-200'/>
+                                    </button>
+                                </div>
+
+                                <div className='relative'>
+
+                                    <p className='bg-[#FFCEAD] text-gray-900 p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center font-medium border-4 border-white absolute top-3 -left-3'>$1999</p>
+
+                                    <img alt='product/image' src='https://i.ibb.co.com/zSm0TRR/Image-6.png'
+                                         className='w-[350px] rounded-l-md'/>
+
+                                </div>
+
+                            </div>
+
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
                 <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
                               forwardUrl='/blocks/empty-page' forwardName='empty page'/>
             </div>

From 8b608cb4e04c7116da81872f683989a18f84b2f1 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 23 Nov 2024 21:52:41 +0600
Subject: [PATCH 08/22] update: product details page examples added

---
 src/App.jsx                                   |   5 +-
 .../ProductDetailsComponents/Index.jsx        | 121 +++++++++
 .../ProductDetailsExample1.jsx                | 210 +++++++++++++++
 .../ProductDetailsExample2.jsx                | 242 ++++++++++++++++++
 .../E-Commerce/ProductDetailsPages/Index.jsx  |  27 ++
 5 files changed, 604 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
 create mode 100644 src/Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 7931717..53e19c5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -42,6 +42,7 @@ import StepsPage from "./Pages/Components/Navigation/StepsPage.jsx";
 import BreadcrumbPage from "./Pages/Components/Navigation/BreadcrumbPage.jsx";
 import RatingPage from "./Pages/Components/Navigation/RatingPage.jsx";
 import ProgressBarPage from "./Pages/Components/Navigation/ProgressBarPage.jsx";
+import TimerPage from "./Pages/Components/Navigation/TimerPage.jsx";
 
 // feedback pages
 import SkeletonPage from "./Pages/Components/Feedback/SkeletonPage";
@@ -99,6 +100,7 @@ import ResponsiveSidebarPage from "./Pages/Blocks/Randoms/ResponsiveSidebarPage.
 
 // e-commerce blocks
 import OfferGridPage from "./Pages/Blocks/E-Commerce/OfferGridPage.jsx";
+import ProductDetailsPage from "./Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx";
 
 // ZenUI wrong route page
 import EmptyPage from "./Pages/EmptyPage.jsx"
@@ -114,7 +116,7 @@ import LayoutPlaygroundPage from "./Pages/LayoutPlaygroundPage.jsx";
 
 // become zenui hero docs
 import ZenUIHeroDocsPage from "./Pages/ZenUIHeroDocsPage.jsx";
-import TimerPage from "./Pages/Components/Navigation/TimerPage.jsx";
+
 
 
 const App = () => {
@@ -297,6 +299,7 @@ const App = () => {
 
                 {/* e-commerce blocks */}
                 <Route path="/blocks/offer-grid" element={<OfferGridPage/>}/>
+                <Route path="/blocks/product-details-page" element={<ProductDetailsPage/>}/>
 
 
                 {/*  icons  */}
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
new file mode 100644
index 0000000..d150238
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
@@ -0,0 +1,121 @@
+import React, {useEffect, useState} from "react";
+
+// components
+import ContentHeader from "../../../../../../Shared/ContentHeader";
+import {Helmet} from "react-helmet";
+import BlocksShowCode from "../../../../../../Shared/BlocksShowCode.jsx";
+
+// icons
+import BlocksFooter from "../../../../../../Shared/BlocksFooter.jsx";
+
+// toggle card view
+import {useToggleCardView} from "../../../../../../CustomHooks/ButtonToggle.js";
+
+// product details examples components
+import ProductDetailsExample1 from "./ProductDetailsExample1.jsx";
+import ProductDetailsExample2 from "./ProductDetailsExample2.jsx";
+
+
+const Index = () => {
+
+    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
+    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
+
+    const toggleCardView = useToggleCardView()
+
+    return (
+        <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
+            <div>
+                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <ProductDetailsExample1/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <ProductDetailsExample2/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
+                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+            </div>
+
+
+            <Helmet>
+                <title>Blocks - Product Details Page</title>
+            </Helmet>
+        </aside>
+    );
+};
+
+export default Index;
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
new file mode 100644
index 0000000..a0c9274
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
@@ -0,0 +1,210 @@
+import React, {useState} from 'react';
+
+// react icons
+import {BsHeart, BsHeartFill} from 'react-icons/bs'
+import {FiCpu, FiSmartphone} from 'react-icons/fi'
+import {IoMdCamera} from 'react-icons/io'
+import {MdBatteryChargingFull} from 'react-icons/md'
+import {GoVerified} from "react-icons/go";
+import {IoStorefrontOutline} from "react-icons/io5";
+import {CiDeliveryTruck} from "react-icons/ci";
+
+const ProductDetailsExample1 = () => {
+
+    const [selectedImage, setSelectedImage] = useState(0)
+    const [selectedColor, setSelectedColor] = useState('black')
+    const [selectedStorage, setSelectedStorage] = useState('1TB')
+    const [isFavorite, setIsFavorite] = useState(false)
+
+    const images = [
+        'https://i.ibb.co.com/k5JzbPr/Image-7.png',
+        'https://i.ibb.co.com/thxkk1x/image-320.png',
+        'https://i.ibb.co.com/MckV93r/image-320.png',
+        'https://i.ibb.co.com/ZGWRGDT/image-320.png'
+    ]
+
+    const colors = [
+        {name: 'black', class: 'bg-black'},
+        {name: 'purple', class: 'bg-purple-600'},
+        {name: 'red', class: 'bg-red-600'},
+        {name: 'yellow', class: 'bg-yellow-500'},
+        {name: 'gray', class: 'bg-gray-200'}
+    ]
+
+    const storage = ['128GB', '256GB', '512GB', '1TB']
+
+    return (
+        <div className="mx-auto px-8 py-12">
+            <div className="w-full grid grid-cols-2 gap-12">
+
+                {/* Left side - Image gallery */}
+                <div className="flex">
+
+                    {/* Thumbnails */}
+                    <div
+                        className="w-[30%] flex flex-col gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 pr-2">
+                        {images.map((image, index) => (
+                            <button
+                                key={index}
+                                onClick={() => setSelectedImage(index)}
+                                className={`relative w-20 h-20 border-2 p-2 rounded-lg overflow-hidden ${
+                                    selectedImage === index ? 'border-[#0FABCA]' : 'border-transparent'
+                                }`}
+                            >
+                                <img
+                                    src={image}
+                                    alt={`Product ${index + 1}`}
+                                    className="object-cover"
+                                />
+                            </button>
+                        ))}
+                    </div>
+
+                    {/* Main image */}
+                    <div className="w-[70%] relative flex-1 aspect-square">
+                        <img
+                            src={images[selectedImage]}
+                            alt="Product main image"
+                            className="object-cover mx-auto rounded-lg"
+                        />
+                    </div>
+                </div>
+
+                {/* Right side - Product details */}
+                <div className="flex flex-col gap-6">
+                    <div>
+                        <h1 className="text-[1.9rem] font-bold text-gray-800">Apple iPhone 14 Pro Max</h1>
+                        <div className="flex items-center gap-2 mt-5">
+                            <span className="text-3xl font-medium">$1399</span>
+                            <span className="text-xl text-gray-500 line-through">$1499</span>
+                        </div>
+                    </div>
+
+                    {/* Color selection */}
+                    <div className='flex items-center gap-[10px]'>
+                        <label className="text-sm font-medium">Select color:</label>
+                        <div className="flex gap-3">
+                            {colors.map((color) => (
+                                <button
+                                    key={color.name}
+                                    onClick={() => setSelectedColor(color.name)}
+                                    className={`w-8 h-8 rounded-full ${color.class} ${
+                                        selectedColor === color.name ? 'ring-2 ring-offset-2 ring-[#0FABCA]' : ''
+                                    }`}
+                                    aria-label={color.name}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Storage selection */}
+                    <div>
+                        <div className="grid grid-cols-4 gap-3">
+                            {storage.map((size) => (
+                                <button
+                                    key={size}
+                                    onClick={() => setSelectedStorage(size)}
+                                    className={`py-2 px-4 rounded-lg border ${
+                                        selectedStorage === size
+                                            ? 'border-[#0FABCA] bg-[#0FABCA]/10 text-[#0FABCA]'
+                                            : 'border-gray-200'
+                                    }`}
+                                >
+                                    {size}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Specifications */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <FiSmartphone className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Screen size</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">6.7"</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <FiCpu className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">CPU</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">Apple A16 Bionic</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <IoMdCamera className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Camera</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">48-12-12 MP</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <MdBatteryChargingFull className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Battery</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">4323 mAh</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-[0.9rem] text-gray-600">
+                        Enhanced capabilities thanks to an enlarged display of 6.7 inches and work without
+                        recharging throughout the day. Incredible photos in weak, yes and in bright light using
+                        the new system with two cameras...
+                        <button className="text-primary hover:underline">more...</button>
+                    </p>
+
+                    {/* Action buttons */}
+                    <div className="flex gap-4">
+                        <button
+                            onClick={() => setIsFavorite(!isFavorite)}
+                            className="flex-1 py-3 px-4 rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-50">
+                            <div className="flex items-center justify-center gap-2">
+                                {
+                                    isFavorite ? (
+                                            <BsHeartFill className="w-5 h-5 text-red-500"/>
+                                        )
+                                        : (
+                                            <BsHeart className="w-5 h-5"/>
+                                        )
+                                }
+                                Add to Wishlist
+                            </div>
+                        </button>
+                        <button className="flex-1 py-3 px-4 rounded-lg bg-[#0FABCA] text-white hover:bg-[#0FABCA]/90">
+                            Add to Card
+                        </button>
+                    </div>
+
+                    {/* Delivery info */}
+                    <div className="flex justify-between mt-2">
+                        <div className="flex items-center gap-3">
+                            <CiDeliveryTruck className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Free Delivery</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">1-2 day</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <IoStorefrontOutline className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">In Stock</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">Today</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <GoVerified className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Guaranteed</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">1 year</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsExample1;
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
new file mode 100644
index 0000000..18e6317
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
@@ -0,0 +1,242 @@
+import React, {useState, useEffect} from 'react';
+
+// react icons
+import {FaStar} from 'react-icons/fa6'
+import {FaHeart, FaRegHeart} from 'react-icons/fa'
+import {BiChevronLeft, BiChevronRight} from "react-icons/bi";
+
+const ProductDetailsExample2 = () => {
+
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [quantity, setQuantity] = useState(1)
+    const [selectedColor, setSelectedColor] = useState('black')
+    const [isFavorite, setIsFavorite] = useState(false)
+    const [timeLeft, setTimeLeft] = useState({
+        days: 2,
+        hours: 12,
+        minutes: 45,
+        seconds: 5
+    })
+
+    const images = [
+        'https://i.ibb.co.com/8ck41d5/Paste-image.png',
+        'https://i.ibb.co.com/0QhryRt/Paste-Image.png',
+        'https://i.ibb.co.com/JsJcVYZ/Paste-Image.png',
+        'https://i.ibb.co.com/n6sF5wz/Paste-Image.png',
+    ]
+
+    const colors = [
+        {name: 'black', value: 'bg-black'},
+        {name: 'beige', value: 'bg-[#D2C4B5]'},
+        {name: 'red', value: 'bg-red-500'},
+        {name: 'white', value: 'bg-white'},
+    ]
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTimeLeft(prev => {
+                if (prev.seconds > 0) {
+                    return {...prev, seconds: prev.seconds - 1}
+                } else if (prev.minutes > 0) {
+                    return {...prev, minutes: prev.minutes - 1, seconds: 59}
+                } else if (prev.hours > 0) {
+                    return {...prev, hours: prev.hours - 1, minutes: 59, seconds: 59}
+                } else if (prev.days > 0) {
+                    return {...prev, days: prev.days - 1, hours: 23, minutes: 59, seconds: 59}
+                }
+                return prev
+            })
+        }, 1000)
+
+        return () => clearInterval(timer)
+    }, [])
+
+    const nextImage = () => {
+        setCurrentImageIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const previousImage = () => {
+        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    const formatNumber = (number) => number.toString().padStart(2, '0');
+
+    return (
+        <div className="mx-auto px-8 py-12">
+            <div className="grid grid-cols-2 gap-12">
+
+                {/* Left side - Image gallery */}
+                <div className="space-y-4">
+
+                    <div className="relative aspect-square">
+
+                        {/* NEW and SALE tags */}
+                        <div className="absolute top-4 left-4 z-10 space-y-2">
+                              <span className="inline-block px-2 py-1 text-xs font-semibold bg-black text-white">
+                                NEW
+                              </span>
+                            <div className="inline-block px-2 py-1 text-xs font-semibold bg-emerald-500 text-white">
+                                -50%
+                            </div>
+                        </div>
+
+                        {/* Main image with navigation arrows */}
+                        <div className="relative h-full">
+                            <img
+                                src={images[currentImageIndex]}
+                                alt={`Product view ${currentImageIndex + 1}`}
+                                className="w-full h-full object-cover"
+                            />
+                            <button
+                                onClick={previousImage}
+                                className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white shadow-lg hover:bg-[#0FABCA] hover:text-white"
+                                aria-label="Previous image"
+                            >
+                                <BiChevronLeft className="w-6 h-6"/>
+                            </button>
+                            <button
+                                onClick={nextImage}
+                                className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white shadow-lg hover:bg-[#0FABCA] hover:text-white"
+                                aria-label="Next image"
+                            >
+                                <BiChevronRight className="w-6 h-6"/>
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Thumbnail images */}
+                    <div className="flex gap-4 justify-between">
+                        {images.map((image, index) => (
+                            <button
+                                key={index}
+                                onClick={() => setCurrentImageIndex(index)}
+                                className={`relative transition-all duration-300 w-[8rem] aspect-square ${
+                                    currentImageIndex === index
+                                        ? 'ring-2 ring-[#0FABCA]'
+                                        : 'hover:ring-2 hover:ring-[#0FABCA]'
+                                }`}
+                            >
+                                <img
+                                    src={image}
+                                    alt={`Thumbnail ${index + 1}`}
+                                    className="w-full h-full object-cover"
+                                />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Right side - Product details */}
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2">
+                        <div className="flex gap-0.5">
+                            {[...Array(5)].map((_, i) => (
+                                <FaStar key={i} className="w-4 h-4 fill-black"/>
+                            ))}
+                        </div>
+                        <span className="text-sm text-gray-600">11 Reviews</span>
+                    </div>
+
+                    <h1 className="text-[1.9rem] text-gray-800 font-semibold">Tray Table</h1>
+
+                    <p className="text-gray-600 text-[0.9rem]">
+                        Buy one or buy a few and make every space where you sit more convenient. Light and easy to
+                        move around with removable tray top, handy for serving snacks.
+                    </p>
+
+                    <div className="flex items-center gap-3">
+                        <span className="text-[1.5rem] text-gray-800 font-medium">$199.00</span>
+                        <span className="text-lg text-gray-500 line-through">$400.00</span>
+                    </div>
+
+                    <div className="pb-2">
+                        <p className="font-medium text-[0.9rem] text-gray-600">Offer expires in:</p>
+                        <div className='flex items-center gap-[10px] mt-2'>
+                            <div className='flex items-center justify-center flex-col gap-[0.2rem]'>
+                                <h5 className='py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold'>{formatNumber(timeLeft.days)}</h5>
+                                <span className='text-[0.7rem]'>Days</span>
+                            </div>
+                            <div className='flex items-center justify-center flex-col gap-[0.2rem]'>
+                                <h5 className='py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold'>{formatNumber(timeLeft.hours)}</h5>
+                                <span className='text-[0.7rem]'>Hours</span>
+                            </div>
+                            <div className='flex items-center justify-center flex-col gap-[0.2rem]'>
+                                <h5 className='py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold'>{formatNumber(timeLeft.minutes)}</h5>
+                                <span className='text-[0.7rem]'>Minutes</span>
+                            </div>
+                            <div className='flex items-center justify-center flex-col gap-[0.2rem]'>
+                                <h5 className='py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold'>{formatNumber(timeLeft.seconds)}</h5>
+                                <span className='text-[0.7rem]'>Seconds</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 border-t border-t-gray-200 pt-4">
+                        <p className="font-medium text-[0.9rem] text-gray-600">Measurements</p>
+                        <p className="text-gray-800">17 1/2×20 5/8 "</p>
+                    </div>
+
+                    <div className="space-y-2 pt-2">
+                        <p className="font-medium text-gray-600 text-[0.9rem]">Choose Color</p>
+                        <p className="font-semibold pb-1 text-gray-800 text-[0.9rem] capitalize">{selectedColor}</p>
+                        <div className="flex gap-2">
+                            {colors.map((color) => (
+                                <button
+                                    onClick={() => setSelectedColor(color.name)}
+                                    aria-label={color.name}
+                                    key={color.name}
+                                    className={`w-8 h-8 rounded-full ${color.value} ${
+                                        selectedColor === color.name ? 'ring-2 ring-offset-2 ring-[#0FABCA]' : ''
+                                    }`}
+                                >
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 items-center pt-6">
+                        <div className="flex items-center bg-gray-100 rounded-md">
+                            <button
+                                onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                                className="px-4 py-[0.560rem] text-[1.3rem] font-[300] hover:bg-gray-100 rounded-l-md"
+                            >
+                                −
+                            </button>
+                            <input
+                                type="number"
+                                value={quantity}
+                                onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+                                className="w-10 font-medium text-[0.9rem] bg-transparent text-center"
+                            />
+                            <button
+                                onClick={() => setQuantity(quantity + 1)}
+                                className="px-4 py-[0.560rem] text-[1.3rem] font-[300] hover:bg-gray-100 rounded-r-md"
+                            >
+                                +
+                            </button>
+                        </div>
+                        <button
+                            onClick={()=> setIsFavorite(!isFavorite)}
+                            className="py-3 border border-gray-200 rounded-md  flex items-center justify-center gap-[10px] grow hover:bg-gray-50">
+                            {
+                                isFavorite ? (
+                                        <FaHeart className="w-5 h-5 text-red-500"/>
+                                    )
+                                    : (
+                                        <FaRegHeart className="w-5 h-5 text-gray-800"/>
+                                    )
+                            }
+                            Wishlist
+                        </button>
+                    </div>
+
+                    <button className="w-full px-6 py-3 bg-[#0FABCA] text-white rounded-md hover:bg-[#0FABCA]/90">
+                        Add to Cart
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsExample2;
diff --git a/src/Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx b/src/Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx
new file mode 100644
index 0000000..f005881
--- /dev/null
+++ b/src/Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx
@@ -0,0 +1,27 @@
+// components
+import Navbar from "../../../../Components/Home/Navbar";
+import Sidebar from "../../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import ProductDetails from "../../../../Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx";
+
+const Index = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={201} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={201}/>
+                    <ProductDetails />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Index;

From 6b242d5bfaf344c719d337c93035e524cd06df66 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Tue, 26 Nov 2024 22:58:48 +0600
Subject: [PATCH 09/22] update: product details page example added

---
 src/App.jsx                                   |   9 +-
 .../ProductDetailsComponents/Index.jsx        |  42 ++++
 .../ProductDetailsExample1.jsx                |  10 +-
 .../ProductDetailsExample3.jsx                | 192 ++++++++++++++++++
 src/index.css                                 |   4 +
 5 files changed, 244 insertions(+), 13 deletions(-)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 532fa7b..4cde4f7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,7 +8,6 @@ import HomePage from "./Pages/HomePage";
 
 // documentation page
 import OverviewPage from "./Pages/OverviewPage";
-import FaqPage from "./Pages/FaqPage";
 import TempletePage from "./Pages/TempletePage";
 
 // inputs
@@ -50,8 +49,6 @@ import AnimatedCardsPage from "./Pages/Components/Surfaces/AnimatedCardsPage.jsx
 import ImageGalleryPage from "./Pages/Components/Surfaces/ImageGalleryPage";
 import AccordingPage from "./Pages/Components/Surfaces/AccordingPage";
 import AppbarPage from "./Pages/Components/Surfaces/AppbarPage";
-import DragAndDropPage from "./Pages/Components/Surfaces/DragAndDropPage.jsx";
-import CarouselPage from "./Pages/Components/Surfaces/CarouselPage.jsx";
 
 // e-commerce
 import ProductCardPage from "./Pages/Components/ECommerce/ProductCardPage.jsx";
@@ -70,8 +67,6 @@ import OtpInputPage from "./Pages/Components/Inputs/OtpInputPage.jsx";
 // blocks
 import ResponsiveNavbarPage from "./Pages/Blocks/Sections/ResponsiveNavbarPage.jsx";
 import AllBlocksPage from "./Pages/Blocks/AllBlocksPage.jsx";
-import WrongUrlErrorPage from "./Pages/Blocks/EmptyPages/WrongRoutePage.jsx";
-import WrongRoutePage from "./Pages/Blocks/EmptyPages/EmptyPage.jsx";
 import HeroSectionPage from "./Pages/Blocks/Sections/HeroSectionPage.jsx";
 import ProgressBarPage from "./Pages/Components/Navigation/ProgressBarPage.jsx";
 import ContactFormPage from "./Pages/Blocks/Forms/ContactFormPage.jsx";
@@ -82,15 +77,12 @@ import TimelinePage from "./Pages/Components/Data Display/TimelinePage.jsx";
 import NumberInputPage from "./Pages/Components/Inputs/NumberInputPage.jsx";
 import StrongPasswordPage from "./Pages/Components/Inputs/StrongPasswordPage.jsx";
 import CheckboxInputPage from "./Pages/Components/Inputs/CheckboxInputPage.jsx";
-import EmptyPage from "./Pages/EmptyPage.jsx"
 import StepsPage from "./Pages/Components/Navigation/StepsPage.jsx";
 
 // icons page
-import IconsPage from './Pages/IconsPages/IconsPage.jsx'
 import ResponsiveFooterPage from "./Pages/Blocks/Randoms/ResponsiveFooterPage.jsx";
 import AuthButtonPage from "./Pages/Components/Buttons/AuthButtonPage.jsx";
 
-import OpacityPalettePage from "./Pages/OpacityPalettePage.jsx"
 import WrongUrlErrorPage from "./Pages/Blocks/EmptyPages/WrongRoutePage.jsx";
 import WrongRoutePage from "./Pages/Blocks/EmptyPages/EmptyPage.jsx";
 import PricingSectionPage from "./Pages/Blocks/Sections/PricingSectionPage.jsx";
@@ -127,6 +119,7 @@ import CarouselPage from "./Pages/Components/Surfaces/CarouselPage.jsx";
 import ZenUIHeroDocsPage from "./Pages/ZenUIHeroDocsPage.jsx";
 import TimerPage from "./Pages/Components/Navigation/TimerPage.jsx";
 import ShortcutGeneratorPage from "./Pages/ShortcutGeneratorPage.jsx";
+import InputSliderPage from "./Pages/Components/Inputs/InputSliderPage.jsx";
 
 
 const App = () => {
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
index d150238..6ff0015 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
@@ -14,6 +14,7 @@ import {useToggleCardView} from "../../../../../../CustomHooks/ButtonToggle.js";
 // product details examples components
 import ProductDetailsExample1 from "./ProductDetailsExample1.jsx";
 import ProductDetailsExample2 from "./ProductDetailsExample2.jsx";
+import ProductDetailsExample3 from "./ProductDetailsExample3.jsx";
 
 
 const Index = () => {
@@ -106,6 +107,47 @@ const Index = () => {
                     }
                 </div>
 
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <ProductDetailsExample3/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
                 <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
                               forwardUrl='/blocks/empty-page' forwardName='empty page'/>
             </div>
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
index a0c9274..f50b40d 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
@@ -17,7 +17,7 @@ const ProductDetailsExample1 = () => {
     const [isFavorite, setIsFavorite] = useState(false)
 
     const images = [
-        'https://i.ibb.co.com/k5JzbPr/Image-7.png',
+        'https://i.ibb.co.com/GTGBw03/image-323.png',
         'https://i.ibb.co.com/thxkk1x/image-320.png',
         'https://i.ibb.co.com/MckV93r/image-320.png',
         'https://i.ibb.co.com/ZGWRGDT/image-320.png'
@@ -35,14 +35,14 @@ const ProductDetailsExample1 = () => {
 
     return (
         <div className="mx-auto px-8 py-12">
-            <div className="w-full grid grid-cols-2 gap-12">
+            <div className="w-full grid grid-cols-2 gap-6">
 
                 {/* Left side - Image gallery */}
                 <div className="flex">
 
                     {/* Thumbnails */}
                     <div
-                        className="w-[30%] flex flex-col gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 pr-2">
+                        className="w-[20%] flex flex-col gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 pr-2">
                         {images.map((image, index) => (
                             <button
                                 key={index}
@@ -61,11 +61,11 @@ const ProductDetailsExample1 = () => {
                     </div>
 
                     {/* Main image */}
-                    <div className="w-[70%] relative flex-1 aspect-square">
+                    <div className="w-[80%] bg-gray-100 rounded-sm h-[400px] relative flex items-center justify-center">
                         <img
                             src={images[selectedImage]}
                             alt="Product main image"
-                            className="object-cover mx-auto rounded-lg"
+                            className="object-cover w-[300px] rounded-lg"
                         />
                     </div>
                 </div>
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
new file mode 100644
index 0000000..8bed0bb
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
@@ -0,0 +1,192 @@
+import React, {useState} from 'react';
+
+// react icons
+import {IoHeart, IoHeartOutline, IoShareSocialOutline, IoStar} from "react-icons/io5";
+import {BiChevronLeft, BiChevronRight, BiStar} from "react-icons/bi";
+
+const ProductDetailsExample1 = () => {
+
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [isFavorite, setIsFavorite] = useState(false)
+    const [selectedSize, setSelectedSize] = useState('8')
+    const [selectedColor, setSelectedColor] = useState('Royal Brown')
+
+    const images = [
+        'https://i.ibb.co.com/LxyQVtG/image-19.png',
+        'https://i.ibb.co.com/d6RXLM2/image-22.png',
+        'https://i.ibb.co.com/17yKVQm/image-19.png',
+        'https://i.ibb.co.com/NCQFGJr/image-21.png',
+        'https://i.ibb.co.com/2tWVrdD/image-23.png'
+    ]
+
+    const sizes = ['6', '8', '10', '14', '18', '20']
+    const colors = [
+        { name: 'Royal Brown', class: 'bg-[#654321]' },
+        { name: 'Light Gray', class: 'bg-gray-200' },
+        { name: 'Steel Blue', class: 'bg-[#4682B4]' },
+        { name: 'Navy', class: 'bg-navy-900' }
+    ]
+
+    const nextImage = () => {
+        setCurrentImageIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const prevImage = () => {
+        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    const selectThumbnail = (index) => {
+        setCurrentImageIndex(index)
+    }
+
+    return (
+        <div className="p-8">
+            <div className="grid grid-cols-2 gap-12">
+                {/* Image Section */}
+                <div className="relative">
+                    <div className='flex'>
+                        <div className="flex items-center justify-center w-[90%] bg-gray-100 overflow-hidden rounded-md">
+                            <img
+                                src={images[currentImageIndex]}
+                                alt={`Product view ${currentImageIndex + 1}`}
+                                className="w-[300px] h-[400px] object-cover"
+                            />
+                        </div>
+                        <div className='flex flex-col justify-between gap-[15px] ml-[20px]'>
+
+                            <div className="flex flex-col gap-[10px]">
+                                <button className='bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200'>
+                                    <IoShareSocialOutline className="w-5 h-5"/>
+                                </button>
+
+                                <button
+                                    className='bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200'
+                                    onClick={() => setIsFavorite(!isFavorite)}
+                                >
+                                    {
+                                        isFavorite ? (
+                                            <IoHeart className='w-5 h-5 text-red-500'/>
+                                        ) : (
+                                            <IoHeartOutline className='w-5 h-5'/>
+                                        )
+                                    }
+                                </button>
+                            </div>
+
+                            <div className='flex flex-col gap-[10px]'>
+                                <button
+                                    onClick={prevImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Previous image"
+                                >
+                                    <BiChevronLeft className="w-6 h-6"/>
+                                </button>
+                                <button
+                                    onClick={nextImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Next image"
+                                >
+                                    <BiChevronRight className="w-6 h-6"/>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="scrollbar flex w-[87%] gap-2 mt-4 overflow-x-auto">
+                        {images.map((img, index) => (
+                            <button
+                                key={index}
+                                onClick={() => selectThumbnail(index)}
+                                className={`flex-shrink-0 bg-gray-100 w-20 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
+                                }`}
+                            >
+                                <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover"/>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Product Details Section */}
+                <div className="flex flex-col">
+                    <div className="flex justify-between items-start">
+                        <div className='w-full'>
+                            <p className="text-gray-400 text-[0.9rem]">John Lewis ANYDAY</p>
+                            <h1 className="text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
+                            <div className="flex items-center justify-between w-full gap-4 mb-4">
+                                <div className="flex items-center">
+                                    <span className="text-[1.4rem] font-semibold text-gray-800">£28.00</span>
+                                    <span className="text-gray-400 text-[1rem] line-through ml-2">£40.00</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <IoStar className='text-yellow-400 text-[1.1rem]'/>
+                                    <span className="text-gray-800 font-semibold">4.5</span>
+                                    <span className="text-gray-500">(1,238 Sold)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="mb-6 border-t-[2px] border-gray-200 border-dashed mt-1 pt-6">
+                        <h2 className="text-gray-700 font-semibold mb-2">Description:</h2>
+                        <p className="text-[0.9rem] text-gray-600">
+                            Boba etiam ut bulla tea est potus electus singulari compositione saporum et textuum, quae in
+                            Taiwan annis 1980 orta sunt. Boba refert ad pitas marnicas tapiocas in fundo potus inventas,
+                            quae typice lacte tea nigro sapiuntur.
+                            <button className="text-blue-600 hover:underline ml-1">See More...</button>
+                        </p>
+                    </div>
+
+                    <div className="mb-8">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Color: <span className='text-gray-700 font-semibold'>{selectedColor}</span></h2>
+                        </div>
+                        <div className="flex gap-2">
+                            {colors.map((color) => (
+                                <button
+                                    key={color.name}
+                                    onClick={() => setSelectedColor(color.name)}
+                                    className={` w-20 h-10 rounded-md border-2 transition-all duration-300 ${
+                                        selectedColor === color.name ? "border-[#0FABCA] p-1" : "border-transparent" } `}
+                                    aria-label={`Select ${color.name} color`}
+                                >
+                                    <div className={`w-full h-full rounded-md transition-all duration-300 ${color.class}`}></div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className='mb-10'>
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Size: <span className='font-semibold text-gray-700'>{selectedSize}</span></h2>
+                            <button className="text-gray-600 text-[0.8rem] underline">View Size Chart</button>
+                        </div>
+                        <div className="flex w-full flex-wrap gap-2">
+                            {sizes.map((size) => (
+                                <button
+                                    key={size}
+                                    onClick={() => setSelectedSize(size)}
+                                    className={
+                                        `px-4 py-2 grow rounded-md border ${selectedSize === size
+                                            ? "border-[#0FABCA] bg-[#0FABCA] text-white"
+                                            : "border-gray-200 hover:border-[#0FABCA]"}`}
+                                >
+                                    {size}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 mt-auto">
+                        <button className="grow py-3 px-6 bg-[#0FABCA] hover:bg-[#0FABCA]/90 rounded-md text-white">
+                            Add To Cart
+                        </button>
+                        <button className="grow py-3 px-6 border border-gray-300 text-gray-600 rounded-md">
+                            Checkout Now
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsExample1;
diff --git a/src/index.css b/src/index.css
index 3797fdc..9ebd875 100644
--- a/src/index.css
+++ b/src/index.css
@@ -419,4 +419,8 @@ input[type="number"] {
   50% {
     transform: translateY(-10px) rotate(-15deg);
   }
+}
+
+.scrollbar::-webkit-scrollbar {
+  height: 4px;
 }
\ No newline at end of file

From 676eb1d95f9c75d194344f9e15b4411c784a97b8 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Wed, 27 Nov 2024 20:38:54 +0600
Subject: [PATCH 10/22] update

---
 .../ProductDetailsComponents/ProductDetailsExample3.jsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
index 8bed0bb..71a4a50 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
@@ -96,7 +96,7 @@ const ProductDetailsExample1 = () => {
                             <button
                                 key={index}
                                 onClick={() => selectThumbnail(index)}
-                                className={`flex-shrink-0 bg-gray-100 w-20 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
+                                className={`flex-shrink-0 bg-gray-100 w-20 transition-all duration-300 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
                                 }`}
                             >
                                 <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover"/>

From ce97904468b683a33c341d56a32b2464799a61f1 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Wed, 27 Nov 2024 21:55:22 +0600
Subject: [PATCH 11/22] update: product filter page added

---
 src/App.jsx                                   |   2 +
 .../ProductFilterComponent/Index.jsx          |  77 +++++++
 .../ProductFilterExample1.jsx                 | 203 ++++++++++++++++++
 .../Blocks/E-Commerce/ProductFilterPage.jsx   |  28 +++
 4 files changed, 310 insertions(+)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/Index.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
 create mode 100644 src/Pages/Blocks/E-Commerce/ProductFilterPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 4cde4f7..a6d5f28 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -120,6 +120,7 @@ import ZenUIHeroDocsPage from "./Pages/ZenUIHeroDocsPage.jsx";
 import TimerPage from "./Pages/Components/Navigation/TimerPage.jsx";
 import ShortcutGeneratorPage from "./Pages/ShortcutGeneratorPage.jsx";
 import InputSliderPage from "./Pages/Components/Inputs/InputSliderPage.jsx";
+import ProductFilterPage from "./Pages/Blocks/E-Commerce/ProductFilterPage.jsx";
 
 
 const App = () => {
@@ -303,6 +304,7 @@ const App = () => {
                 {/* e-commerce blocks */}
                 <Route path="/blocks/offer-grid" element={<OfferGridPage/>}/>
                 <Route path="/blocks/product-details-page" element={<ProductDetailsPage/>}/>
+                <Route path="/blocks/product-filter-page" element={<ProductFilterPage/>}/>
 
 
                 {/*  icons  */}
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/Index.jsx
new file mode 100644
index 0000000..e4554a0
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/Index.jsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useState} from "react";
+
+// components
+import ContentHeader from "../../../../../../Shared/ContentHeader";
+import {Helmet} from "react-helmet";
+import BlocksShowCode from "../../../../../../Shared/BlocksShowCode.jsx";
+
+// icons
+import BlocksFooter from "../../../../../../Shared/BlocksFooter.jsx";
+
+// toggle card view
+import {useToggleCardView} from "../../../../../../CustomHooks/ButtonToggle.js";
+import ProductFilterExample1 from "./ProductFilterExample1.jsx";
+
+
+const Index = () => {
+
+    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
+    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
+
+    const toggleCardView = useToggleCardView()
+
+    return (
+        <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
+            <div>
+                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <ProductFilterExample1/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
+                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+            </div>
+
+
+            <Helmet>
+                <title>Blocks - Product Details Page</title>
+            </Helmet>
+        </aside>
+    );
+};
+
+export default Index;
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
new file mode 100644
index 0000000..267e199
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
@@ -0,0 +1,203 @@
+import React, {useEffect, useState} from 'react';
+import {IoSearch} from "react-icons/io5";
+import {IoIosArrowDown} from "react-icons/io";
+
+const ProductFilterExample1 = () => {
+
+    const [toggleId, setToggleId] = React.useState(null);
+    const [search, setSearch] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(null);
+
+    const categories = [
+        {
+            id: 1,
+            name: 'Electronics Devices',
+            slug: 'electronics_devices'
+        },
+        {
+            id: 2,
+            name: 'Computer & Laptop',
+            slug: 'computer_&_laptop'
+        },
+        {
+            name: 'Computer Accessories',
+            slug: 'computer_accessories'
+        },
+        {
+            id: 3,
+            name: 'SmartPhone',
+            slug: 'smart_phone'
+        },
+        {
+            id: 4,
+            name: 'Headphone',
+            slug: 'headphone'
+        },
+        {
+            id: 5,
+            name: 'Mobile Accessories',
+            slug: 'mobile_accessories'
+        },
+        {
+            id: 6,
+            name: 'Gaming Console',
+            slug: 'gaming_console'
+        },
+        {
+            id: 7,
+            name: 'Camera & Photo',
+            slug: 'camera_&_photo'
+        },
+        {
+            id: 8,
+            name: 'TV & Homes Appliances',
+            slug: 'tv_&_homes_appliances'
+        },
+        {
+            id: 9,
+            name: 'Watchs & Accessories',
+            slug: 'watchs_&_accessories'
+        },
+        {
+            id: 10,
+            name: 'GPS & Navigation',
+            slug: 'gps_&_navigation'
+        },
+    ]
+
+    const items = [
+        { id: 1, name: "Option 1" },
+        { id: 2, name: "Option 2" },
+        { id: 3, name: "Option 3" },
+        { id: 4, name: "Option 4" },
+        { id: 5, name: "Option 5" },
+    ];
+
+    const filteredItems = items.filter(item =>
+        item.name.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const isSelected = (item) => {
+        return selectedOptions?.id === item.id;
+    };
+
+    const toggleSelection = (item) => {
+        setSelectedOptions(item);
+    };
+
+    const handleBlur = () => {
+        setTimeout(() => {
+            setIsOpen(false);
+        }, 200);
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (event.target.closest(".custom-select")) return;
+            handleBlur();
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    return (
+        <section className='flex bg-white w-full gap-[20px] p-4'>
+
+            {/* left side */}
+            <aside className='w-[25%] min-[300px]'>
+                <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4'>Category</h5>
+                <div className='flex flex-col gap-[12px]'>
+                    {
+                        categories.map(category => (
+                            <label data-name='categoryCheckbox'
+                                   key={category.id}
+                                   className='flex items-center gap-[8px] text-[1rem] text-gray-800'>
+                                <input type='checkbox' name='categoryCheckbox' className='hidden'
+                                       checked={toggleId === category.id}
+                                       onChange={() => setToggleId(category.id)}/>
+                                <div
+                                    className={`${toggleId === category.id ? 'border-[#0FABCA]' : 'border-gray-300'} w-[20px] transition-all duration-300 h-[20px] rounded-full border relative`}>
+                                    <div
+                                        className={`${toggleId === category.id ? 'bg-[#0FABCA]' : 'bg-transparent'} w-[13px] h-[13.5px] transition-all duration-300 rounded-full absolute top-[50%] transform translate-y-[-50%] left-[50%] translate-x-[-50%]`}></div>
+                                </div>
+
+                                {category.name}
+                            </label>
+                        ))
+                    }
+                </div>
+
+                <div className='border-t border-gray-300 mt-6 pt-6'>
+                    <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4'>Price Range</h5>
+
+                    <div>
+
+                    </div>
+                </div>
+            </aside>
+
+            {/* right side */}
+            <main className='w-[75%]'>
+                <div className='flex items-center justify-between gap-[50px] w-full'>
+                    <div className='w-full relative'>
+                        <input type='text' placeholder='Search...'
+                               className='border border-[#e5eaf2] py-2 pl-4 pr-[65px] outline-none w-full rounded-md'/>
+
+                        <IoSearch className='text-[1.3rem] text-gray-600 absolute top-[50%] transform translate-y-[-50%] right-4'/>
+                    </div>
+
+                    <div className='flex items-center gap-[10px]'>
+                        <p className='text-[1rem] text-gray-700 font-medium'>Sort by:</p>
+                        <div className="relative custom-select flex-1">
+
+                            {/* Input field with search functionality */}
+                            <input
+                                type="text"
+                                placeholder="Search.."
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                onFocus={() => setIsOpen(true)}
+                                className={`w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none`}
+                            />
+
+                            <IoIosArrowDown
+                                className={`${isOpen ? "rotate-[180deg]" : "rotate-0"} transition-all duration-300 text-[1.3rem] absolute top-[50%] transform translate-y-[-50%] right-3 text-gray-500`}/>
+
+                            {/* Dropdown menu */}
+                            {isOpen && (
+                                <div
+                                    className="absolute left-0 w-full mt-1 border border-gray-200 rounded-md bg-white shadow-lg z-20">
+                                    <div className="w-full overflow-auto">
+                                        {filteredItems.map(item => (
+                                            <p
+                                                key={item.id}
+                                                onClick={() => toggleSelection(item)}
+                                                className="cursor-pointer px-3 py-2 flex items-center hover:bg-gray-200"
+                                            >
+                                                <img
+                                                    src="https://besnik-space.fra1.cdn.digitaloceanspaces.com/doplac/dYj3EG2tlN8jM29cWxiA1711341238.svg"
+                                                    alt="checkicon"
+                                                    className={`${isSelected(item) ? "scale-[1] opacity-100" : "scale-[0.5] opacity-0"} mr-2 transition-all duration-300 w-6 h-6`}
+                                                />
+                                                {item.name}
+                                            </p>
+                                        ))}
+
+                                        {
+                                            filteredItems?.length === 0 && (
+                                                <p className="text-center text-[0.9rem] text-text py-8">No search found!</p>
+                                            )
+                                        }
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </section>
+    );
+};
+
+export default ProductFilterExample1;
diff --git a/src/Pages/Blocks/E-Commerce/ProductFilterPage.jsx b/src/Pages/Blocks/E-Commerce/ProductFilterPage.jsx
new file mode 100644
index 0000000..495925b
--- /dev/null
+++ b/src/Pages/Blocks/E-Commerce/ProductFilterPage.jsx
@@ -0,0 +1,28 @@
+
+// components
+import Navbar from "../../../Components/Home/Navbar";
+import Sidebar from "../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import ProductFilter from "../../../Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/Index.jsx";
+
+const ProductFilterPage = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={202} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={202}/>
+                    <ProductFilter />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ProductFilterPage;

From 071b32852a8d36d7ddc9bce291f18cf02165ae77 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Tue, 3 Dec 2024 20:59:05 +0600
Subject: [PATCH 12/22] update

---
 src/App.jsx | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 26c2db3..c329fcd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -97,25 +97,11 @@ const NewsletterSectionPage = React.lazy(() => import("./Pages/Blocks/Forms/News
 const MultipageFormPage = React.lazy(() => import("./Pages/Blocks/Forms/MultipageFormPage.jsx"));
 const ResponsiveSidebarPage = React.lazy(() => import("./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx"));
 const InputSliderPage = React.lazy(() => import("./Pages/Components/Inputs/InputSliderPage.jsx"));
-import WrongUrlErrorPage from "./Pages/Blocks/EmptyPages/WrongRoutePage.jsx";
-import WrongRoutePage from "./Pages/Blocks/EmptyPages/EmptyPage.jsx";
-import PricingSectionPage from "./Pages/Blocks/Sections/PricingSectionPage.jsx";
-import NewsletterSectionPage from "./Pages/Blocks/Forms/NewsletterSectionPage.jsx";
-import MultipageFormPage from "./Pages/Blocks/Forms/MultipageFormPage.jsx";
-import ResponsiveSidebarPage from "./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx";
 
 // e-commerce blocks
 import OfferGridPage from "./Pages/Blocks/E-Commerce/OfferGridPage.jsx";
 import ProductDetailsPage from "./Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx";
-
-// ZenUI wrong route page
-import EmptyPage from "./Pages/EmptyPage.jsx"
-
-// icons page
-import IconsPage from './Pages/IconsPages/IconsPage.jsx'
-
-// opacity palette
-import OpacityPalettePage from "./Pages/OpacityPalettePage.jsx"
+import ProductFilterPage from "./Pages/Blocks/E-Commerce/ProductFilterPage.jsx";
 
 // layout playground page
 const LayoutPlaygroundPage = React.lazy(() => import("./Pages/LayoutPlaygroundPage.jsx"));

From 3681ee1906cf7e42bf6e9e7846cc4aca71c51ee7 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Wed, 4 Dec 2024 23:07:18 +0600
Subject: [PATCH 13/22] update: checkout page added

---
 src/App.jsx                                   |   2 +
 .../Overview/Sidebar/MobileSidebar.jsx        |  20 +-
 src/Components/Overview/Sidebar/index.jsx     |  20 +-
 .../CheckoutPages/CheckoutPageExample1.jsx    | 394 ++++++++++
 .../Blocks/E-Commerce/CheckoutPages/Index.jsx |  76 ++
 .../ProductFilterExample1.jsx                 | 672 +++++++++++++++++-
 src/Pages/Blocks/E-Commerce/CheckoutPage.jsx  |  28 +
 7 files changed, 1168 insertions(+), 44 deletions(-)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
 create mode 100644 src/Pages/Blocks/E-Commerce/CheckoutPage.jsx

diff --git a/src/App.jsx b/src/App.jsx
index c329fcd..c1c8242 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -102,6 +102,7 @@ const InputSliderPage = React.lazy(() => import("./Pages/Components/Inputs/Input
 import OfferGridPage from "./Pages/Blocks/E-Commerce/OfferGridPage.jsx";
 import ProductDetailsPage from "./Pages/Blocks/E-Commerce/ProductDetailsPages/Index.jsx";
 import ProductFilterPage from "./Pages/Blocks/E-Commerce/ProductFilterPage.jsx";
+import CheckoutPage from "./Pages/Blocks/E-Commerce/CheckoutPage.jsx";
 
 // layout playground page
 const LayoutPlaygroundPage = React.lazy(() => import("./Pages/LayoutPlaygroundPage.jsx"));
@@ -252,6 +253,7 @@ const App = () => {
                 <Route path="/blocks/offer-grid" element={<OfferGridPage/>}/>
                 <Route path="/blocks/product-details-page" element={<ProductDetailsPage/>}/>
                 <Route path="/blocks/product-filter-page" element={<ProductFilterPage/>}/>
+                <Route path="/blocks/checkout-page" element={<CheckoutPage/>}/>
 
 
                 {/*  icons  */}
diff --git a/src/Components/Overview/Sidebar/MobileSidebar.jsx b/src/Components/Overview/Sidebar/MobileSidebar.jsx
index bbbfe1d..7aa21dc 100644
--- a/src/Components/Overview/Sidebar/MobileSidebar.jsx
+++ b/src/Components/Overview/Sidebar/MobileSidebar.jsx
@@ -874,16 +874,16 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 Product Details Page
                                 <NewBadge/>
                             </Link>
-                            <Link
-                                to={"/blocks/product-filter-page"}
-                                className={`${startContent === 202 &&
-                                "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                                }   border-l border-[#9caebc] flex items-center gap-[10px]`}
-                                onClick={() => setStartContent(202)}
-                            >
-                                Product Filter Page
-                                <NewBadge/>
-                            </Link>
+                            {/*<Link*/}
+                            {/*    to={"/blocks/product-filter-page"}*/}
+                            {/*    className={`${startContent === 202 &&*/}
+                            {/*    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"*/}
+                            {/*    }   border-l border-[#9caebc] flex items-center gap-[10px]`}*/}
+                            {/*    onClick={() => setStartContent(202)}*/}
+                            {/*>*/}
+                            {/*    Product Filter Page*/}
+                            {/*    <NewBadge/>*/}
+                            {/*</Link>*/}
                             <Link
                                 to={"/blocks/checkout-page"}
                                 className={`${startContent === 203 &&
diff --git a/src/Components/Overview/Sidebar/index.jsx b/src/Components/Overview/Sidebar/index.jsx
index b2f2a26..159341d 100644
--- a/src/Components/Overview/Sidebar/index.jsx
+++ b/src/Components/Overview/Sidebar/index.jsx
@@ -913,16 +913,16 @@ const index = ({ startContent, setStartContent }) => {
                     Product Details Page
                     <NewBadge/>
                 </Link>
-                <Link
-                    to={"/blocks/product-filter-page"}
-                    className={`${startContent === 202 &&
-                    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"
-                    }   border-l border-[#9caebc] flex items-center gap-[10px]`}
-                    onClick={() => setStartContent(202)}
-                >
-                    Product Filter Page
-                    <NewBadge/>
-                </Link>
+                {/*<Link*/}
+                {/*    to={"/blocks/product-filter-page"}*/}
+                {/*    className={`${startContent === 202 &&*/}
+                {/*    "border-l  rounded-tr rounded-br border-primary bg-[#3B9DF8] text-secondary font-[500]"*/}
+                {/*    }   border-l border-[#9caebc] flex items-center gap-[10px]`}*/}
+                {/*    onClick={() => setStartContent(202)}*/}
+                {/*>*/}
+                {/*    Product Filter Page*/}
+                {/*    <NewBadge/>*/}
+                {/*</Link>*/}
                 <Link
                     to={"/blocks/checkout-page"}
                     className={`${startContent === 203 &&
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
new file mode 100644
index 0000000..88f16de
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
@@ -0,0 +1,394 @@
+import React, {useState} from 'react';
+import {IoChevronDown} from "react-icons/io5";
+
+const CheckoutPageExample1 = () => {
+    const [selectedPayment, setSelectedPayment] = useState('credit-card')
+    const [differentAddress, setDifferentAddress] = useState(false)
+    const [isChecked, setIsChecked] = useState(false)
+
+    const handleCheckboxChange = (event) => {
+        if(event.target.checked){
+            setIsChecked(true)
+        }else {
+            setIsChecked(false)
+        }
+    }
+
+    const inputStyles = 'border border-gray-200 w-full py-2 px-4 rounded-md mt-1 outline-none focus:border-[#0FABCA]'
+    const labelStyles = 'text-[14px] font-[400] text-gray-700'
+
+    const countries = ["United States", "Canada", "India", "Australia", "United Kingdom"];
+    const regions = ["California", "Ontario", "Maharashtra", "New South Wales", "England"];
+    const cities = ["Los Angeles", "Toronto", "Mumbai", "Sydney", "London"];
+
+    return (
+        <div className="grid gap-8 grid-cols-3 w-full">
+
+                    {/* Billing and Payment Form */}
+                    <div className="col-span-2 space-y-8 w-full">
+
+                            {/* Billing Information */}
+                            <div className='w-full'>
+                                <h2 className="text-[1.5rem] font-medium text-gray-700 mb-6">Billing Information</h2>
+
+                                <div className="grid grid-cols-1 gap-[16px]">
+                                    <div className='flex items-center gap-4'>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="firstName" className={`${labelStyles}`}>
+                                                First name
+                                            </label>
+                                            <input
+                                                placeholder='First name'
+                                                type="text"
+                                                id="firstName"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="lastName" className={`${labelStyles}`}>
+                                                Last name
+                                            </label>
+                                            <input
+                                                placeholder='Last name'
+                                                type="text"
+                                                id="lastName"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                    </div>
+                                    <div className="sm:col-span-2">
+                                        <label htmlFor="company" className={`${labelStyles}`}>
+                                            Company Name (Optional)
+                                        </label>
+                                        <input
+                                            placeholder='Company name'
+                                            type="text"
+                                            id="company"
+                                            className={`${inputStyles}`}
+                                        />
+                                    </div>
+                                    <div className="sm:col-span-2">
+                                        <label htmlFor="address" className={`${labelStyles}`}>
+                                            Address
+                                        </label>
+                                        <input
+                                            placeholder='Address'
+                                            type="text"
+                                            id="address"
+                                            className={`${inputStyles}`}
+                                        />
+                                    </div>
+
+                                    <div className='flex items-center gap-4 w-full'>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="country" className={`${labelStyles}`}>
+                                                Country
+                                            </label>
+                                            <InputSelect items={countries}/>
+                                        </div>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="state" className={`${labelStyles}`}>
+                                                Region/State
+                                            </label>
+                                            <InputSelect items={regions}/>
+                                        </div>
+                                    </div>
+                                    <div className='flex items-center gap-4 w-full'>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="city" className={`${labelStyles}`}>
+                                                City
+                                            </label>
+                                            <InputSelect items={cities}/>
+                                        </div>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="zipCode" className={`${labelStyles}`}>
+                                            Zip Code
+                                            </label>
+                                            <input
+                                                placeholder='Zip code'
+                                                type="text"
+                                                id="zipCode"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div className='flex items-center gap-4 w-full'>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="email" className={`${labelStyles}`}>
+                                                Email
+                                            </label>
+                                            <input
+                                                placeholder='Email address'
+                                                type="email"
+                                                id="email"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                        <div className='w-[50%]'>
+                                            <label htmlFor="phone" className={`${labelStyles}`}>
+                                                Phone Number
+                                            </label>
+                                            <input
+                                                placeholder='Phone number'
+                                                type="tel"
+                                                id="phone"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="mt-4">
+                                    <label className="flex items-center gap-[10px] cursor-pointer">
+                                        <input type="checkbox" className="hidden" onChange={handleCheckboxChange}/>
+                                        {
+                                            isChecked ? (
+                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                                     xmlns="http://www.w3.org/2000/svg">
+                                                    <g id="Group 335">
+                                                        <rect id="Rectangle 331" x="-0.00012207" y="6.10352e-05"
+                                                              width="20"
+                                                              height="20" rx="4" className="fill-[#0FABCA]"
+                                                              stroke="#0FABCA"></rect>
+                                                        <path id="Vector"
+                                                              d="M8.19594 15.4948C8.0646 15.4949 7.93453 15.4681 7.81319 15.4157C7.69186 15.3633 7.58167 15.2865 7.48894 15.1896L4.28874 11.8566C4.10298 11.6609 3.99914 11.3965 3.99988 11.1213C4.00063 10.8461 4.10591 10.5824 4.29272 10.3878C4.47953 10.1932 4.73269 10.0835 4.99689 10.0827C5.26109 10.0819 5.51485 10.1901 5.70274 10.3836L8.19591 12.9801L14.2887 6.6335C14.4767 6.4402 14.7304 6.3322 14.9945 6.33307C15.2586 6.33395 15.5116 6.44362 15.6983 6.63815C15.8851 6.83268 15.9903 7.09627 15.9912 7.37137C15.992 7.64647 15.8883 7.91073 15.7027 8.10648L8.90294 15.1896C8.8102 15.2865 8.7 15.3633 8.57867 15.4157C8.45734 15.4681 8.32727 15.4949 8.19594 15.4948Z"
+                                                              fill="white"></path>
+                                                    </g>
+                                                </svg>
+                                            ) : (
+                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                                     xmlns="http://www.w3.org/2000/svg">
+                                                    <g id="Group 335">
+                                                        <rect id="Rectangle 331" x="-0.00012207" y="6.10352e-05"
+                                                              width="20"
+                                                              height="20" rx="4" className="fill-transparent"
+                                                              stroke="#ccc"></rect>
+                                                    </g>
+                                                </svg>
+                                            )
+                                        }
+
+                                        <span className="text-[0.9rem] text-gray-700">Ship to a different address</span>
+                                    </label>
+                                </div>
+                            </div>
+
+                        {/* Payment Options */}
+                        <div className='border border-gray-200 rounded-md'>
+                            <h2 className="text-[1.2rem] font-medium text-gray-700 border-b border-gray-200 px-5 py-3">Payment Option</h2>
+                            <div className="grid grid-cols-2 gap-4 w-full p-5">
+                                <button
+                                    onClick={() => setSelectedPayment('cash')}
+                                    className={`flex flex-col items-center justify-center p-4 border rounded-lg ${
+                                        selectedPayment === 'cash' ? 'border-[#0FABCA]' : 'border-gray-200'
+                                    }`}
+                                >
+                                    <span className="text-2xl">💵</span>
+                                    <span
+                                        className="text-[0.9rem] text-gray-700 font-[500] mt-2">Cash on Delivery</span>
+                                </button>
+                                <button
+                                    onClick={() => setSelectedPayment('credit-card')}
+                                    className={`flex flex-col items-center justify-center p-4 border rounded-lg ${
+                                        selectedPayment === 'credit-card' ? 'border-[#0FABCA]' : 'border-gray-200'
+                                    }`}
+                                >
+                                    <span className="text-2xl">💳</span>
+                                    <span
+                                        className="text-[0.9rem] text-gray-700 font-[500] mt-2">Debit/Credit Card</span>
+                                </button>
+                            </div>
+
+                            {selectedPayment === 'credit-card' && (
+                                <div className=" px-5 pb-5 space-y-[16px]">
+                                    <div>
+                                        <label htmlFor="cardName" className={`${labelStyles}`}>
+                                            Name on Card
+                                        </label>
+                                        <input
+                                            placeholder='Name on card'
+                                                type="text"
+                                                id="cardName"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                        <div>
+                                            <label htmlFor="cardNumber" className={`${labelStyles}`}>
+                                                Card Number
+                                            </label>
+                                            <input
+                                                placeholder='Card number'
+                                                type="text"
+                                                id="cardNumber"
+                                                className={`${inputStyles}`}
+                                            />
+                                        </div>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <label htmlFor="expireDate" className={`${labelStyles}`}>
+                                                    Expire Date
+                                                </label>
+                                                <input
+                                                    type="text"
+                                                    id="expireDate"
+                                                    placeholder="MM/YY"
+                                                    className={`${inputStyles}`}
+                                                />
+                                            </div>
+                                            <div>
+                                                <label htmlFor="cvc" className={`${labelStyles}`}>
+                                                    CVC
+                                                </label>
+                                                <input
+                                                    placeholder='CVC'
+                                                    type="text"
+                                                    id="cvc"
+                                                    className={`${inputStyles}`}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Additional Information */}
+                            <div>
+                                <h2 className="text-[1.2rem] font-medium text-gray-700 mb-4">Additional Information</h2>
+                                <div>
+                                    <label htmlFor="notes" className={`${labelStyles}`}>
+                                        Order Notes (Optional)
+                                    </label>
+                                    <textarea
+                                        id="notes"
+                                        rows={4}
+                                        placeholder="Notes about your order e.g. special notes for delivery"
+                                        className={`${inputStyles} py-3`}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                    {/* Order Summary */}
+                    <div className="w-full">
+                        <div className="bg-white rounded-md border border-gray-200 p-6">
+                            <h2 className="text-[1.2rem] font-medium text-gray-700 mb-6">Order Summary</h2>
+                            <div className="space-y-4">
+                                <div className="flex items-center space-x-4">
+                                    <div className="flex-shrink-0">
+                                        <img
+                                            src="https://i.ibb.co.com/VNM4dX6/Image-24.png"
+                                            alt="product/image"
+                                            className="w-[50px] h-[50px] object-cover"
+                                        />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium text-gray-900 line-clamp-1">Canon EOS 1500D DSLR Camera Body+ 18</p>
+                                        <div className='flex items-center gap-[5px] mt-0.5'>
+                                            <p className='text-sm text-gray-500'>2 x </p>
+                                            <p className="text-sm text-[#0FABCA] font-[600]">$570</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="flex items-center space-x-4">
+                                    <div className="flex-shrink-0">
+                                        <img
+                                            src="https://i.ibb.co.com/F0bn52F/Image-25.png"
+                                            alt="product/image"
+                                            className="w-[50px] h-[50px] object-cover"
+                                        />
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium text-gray-900 line-clamp-1">Wired Over-Ear Gaming Headphones with U</p>
+                                        <div className='flex items-center gap-[5px] mt-0.5'>
+                                            <p className='text-sm text-gray-500'>1 x </p>
+                                            <p className="text-sm text-[#0FABCA] font-[600]">$100</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="pt-4 space-y-4">
+                                    <div className="flex justify-between text-sm">
+                                    <span className="text-gray-600">Sub-total</span>
+                                        <span className="font-medium text-gray-800">$670</span>
+                                    </div>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-gray-600">Shipping</span>
+                                        <span className="font-medium text-green-500">Free</span>
+                                    </div>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-gray-600">Discount</span>
+                                        <span className="font-medium text-gray-800">$20</span>
+                                    </div>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-gray-600">Tax</span>
+                                        <span className="font-medium text-gray-800">$650</span>
+                                    </div>
+                                </div>
+
+                                <div className="border-t border-gray-200 pt-4">
+                                    <div className="flex justify-between">
+                                        <span className="text-base font-medium text-gray-800">Total</span>
+                                        <span className="text-base font-medium text-gray-800">$357.99 USD</span>
+                                    </div>
+                                </div>
+
+                                <button
+                                    className="w-full bg-[#0FABCA] text-white py-3 px-4 rounded-lg hover:bg-[#0FABCA]/90 transition-colors">
+                                    PLACE ORDER
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    );
+};
+
+export default CheckoutPageExample1;
+
+const InputSelect = ({items}) => {
+    // close the dropdown is clicked outside
+    document.addEventListener("click", function (event) {
+        let target = event.target;
+
+        if (!target.closest(".dropdown")) {
+            setIsActive(false);
+        }
+    });
+
+    // actions
+    const [isActive, setIsActive] = useState(false);
+    const [content, setContent] = useState("Select Option");
+
+    return (
+        <button
+            className="bg-[#fff] border border-gray-200 rounded-md mt-1 justify-between px-3 py-2 flex items-center gap-8  relative cursor-pointer dropdown w-full"
+            onClick={() => setIsActive(!isActive)}
+        >
+            <p className={`${content === 'Select Option' && 'text-gray-400'}`}>{content}</p>
+            <IoChevronDown
+                className={`${
+                    isActive ? " rotate-[180deg]" : " rotate-0"
+                } transition-all duration-300 text-gray-600 text-[1.2rem]`}
+            />
+            <div
+                className={`${
+                    isActive ? " opacity-100 scale-[1]" : " opacity-0 scale-[0.8] z-[-1]"
+                } w-full absolute top-12 left-0 right-0 z-40 bg-[#fff] rounded-xl flex flex-col  overflow-hidden transition-all duration-200 ease-in-out py-1`}
+                style={{
+                    boxShadow: "0 15px 40px -15px rgba(0, 0, 0, 0.2)",
+                }}
+            >
+                {items?.map((option, index) => (
+                    <p
+                        className="py-2 px-4 text-left text-gray-800 hover:bg-gray-50 transition-all duration-200"
+                        key={index}
+                        onClick={(e) => setContent(e.target.textContent)}
+                    >
+                        {option}
+                    </p>
+                ))}
+            </div>
+        </button>
+    );
+};
+
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
new file mode 100644
index 0000000..cb81b04
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
@@ -0,0 +1,76 @@
+import React, {useEffect, useState} from "react";
+
+// components
+import ContentHeader from "../../../../../../Shared/ContentHeader";
+import {Helmet} from "react-helmet";
+import BlocksShowCode from "../../../../../../Shared/BlocksShowCode.jsx";
+
+// icons
+import BlocksFooter from "../../../../../../Shared/BlocksFooter.jsx";
+
+// toggle card view
+import {useToggleCardView} from "../../../../../../CustomHooks/ButtonToggle.js";
+import CheckoutPageExample1 from "./CheckoutPageExample1.jsx";
+
+const Index = () => {
+
+    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
+    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
+
+    const toggleCardView = useToggleCardView()
+
+    return (
+        <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
+            <div>
+                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8 flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <CheckoutPageExample1/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
+                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
+                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+            </div>
+
+
+            <Helmet>
+                <title>Blocks - Product Details Page</title>
+            </Helmet>
+        </aside>
+    );
+};
+
+export default Index;
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
index 267e199..7243619 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductFilterComponent/ProductFilterExample1.jsx
@@ -1,13 +1,263 @@
 import React, {useEffect, useState} from 'react';
-import {IoSearch} from "react-icons/io5";
-import {IoIosArrowDown} from "react-icons/io";
+import {IoEyeOutline, IoSearch} from "react-icons/io5";
+import {IoIosArrowDown, IoMdHeartEmpty} from "react-icons/io";
+import {HiArrowsUpDown} from "react-icons/hi2";
+import {FaStar} from "react-icons/fa";
 
 const ProductFilterExample1 = () => {
 
-    const [toggleId, setToggleId] = React.useState(null);
+    const products = [
+        {
+            id: "1",
+            name: "2020 M1 True Wireless Bluetooth Headphones",
+            price: 299.99,
+            rating: 4.5,
+            reviews: 128,
+            category: ["Electronics", "Audio", "Wireless Accessories"],
+            brand: "Apple",
+            image: "https://i.ibb.co.com/phjMmsG/Image-11.png",
+            labels: ["NEW"],
+            inStock: true,
+            specs: {
+                color: ["Black", "White"],
+                connectivity: ["Bluetooth 5.0"],
+                type: "In-ear"
+            }
+        },
+        {
+            id: "2",
+            name: "Samsung Electronics Ultrawide Gaming Monitor",
+            price: 499.99,
+            rating: 4.8,
+            reviews: 256,
+            category: ["Electronics", "Computer Accessories", "Monitors"],
+            brand: "Samsung",
+            image: "https://i.ibb.co.com/fdz6djB/Image-10.png",
+            labels: ["POPULAR"],
+            inStock: true,
+            specs: {
+                size: "34-inch",
+                type: "LED",
+                resolution: "3440x1440"
+            }
+        },
+        {
+            id: "3",
+            name: "Professional Gaming Mechanical Keyboard",
+            price: 159.99,
+            rating: 4.7,
+            reviews: 89,
+            category: ["Gaming", "Computer Accessories"],
+            brand: "Razer",
+            image: "https://i.ibb.co.com/Tk4kb93/Image-17.png",
+            labels: ["HOT"],
+            inStock: true,
+            specs: {
+                type: "Mechanical",
+                connectivity: ["Wired", "Wireless"]
+            }
+        },
+        {
+            id: "4",
+            name: "4K Ultra HD Smart TV",
+            price: 899.99,
+            rating: 4.6,
+            reviews: 312,
+            category: ["Electronics", "TV"],
+            brand: "LG",
+            image: "https://i.ibb.co.com/ZVsvWnM/Image-12.png",
+            inStock: true,
+            specs: {
+                size: "55-inch",
+                type: "OLED",
+                resolution: "3840x2160"
+            }
+        },
+        {
+            id: "5",
+            name: "Wireless Security Camera",
+            price: 79.99,
+            rating: 4.3,
+            reviews: 167,
+            category: ["Electronics", "Security"],
+            brand: "Xiaomi",
+            image: "https://i.ibb.co.com/nMgLvb1/Image-19.png",
+            labels: ["SALE"],
+            inStock: true,
+            specs: {
+                connectivity: ["Wi-Fi"],
+                type: "Indoor"
+            }
+        },
+        {
+            id: "6",
+            name: "Professional Noise-Cancelling Headphones",
+            price: 349.99,
+            rating: 4.9,
+            reviews: 423,
+            category: ["Electronics", "Audio"],
+            brand: "Sony",
+            image: "https://i.ibb.co.com/Nx6H5s3/Image-16.png",
+            inStock: true,
+            specs: {
+                color: ["Black", "Silver"],
+                connectivity: ["Bluetooth 5.0", "Wired"],
+                type: "Over-ear"
+            }
+        },
+        {
+            id: "7",
+            name: "High-Performance Gaming Laptop",
+            price: 1299.99,
+            rating: 4.7,
+            reviews: 89,
+            category: ["Electronics", "Computers", "Gaming"],
+            brand: "ASUS",
+            image: "https://i.ibb.co.com/H74t7f2/Image-21.png",
+            labels: ["NEW"],
+            inStock: true,
+            specs: {
+                processor: "Intel Core i7",
+                storage: "512GB SSD",
+                size: "15.6-inch"
+            }
+        },
+        {
+            id: "11",
+            name: "4K Action Camera",
+            price: 399.99,
+            rating: 4.8,
+            reviews: 178,
+            category: ["Electronics", "Cameras"],
+            brand: "GoPro",
+            image: "https://i.ibb.co.com/cgxVvgP/Image-20.png",
+            labels: ["HOT"],
+            inStock: true,
+            specs: {
+                resolution: "4K",
+                type: "Waterproof"
+            }
+        },
+        {
+            id: "14",
+            name: "Wireless Gaming Controller",
+            price: 59.99,
+            rating: 4.5,
+            reviews: 203,
+            category: ["Gaming", "Wireless Accessories"],
+            brand: "Microsoft",
+            image: "https://i.ibb.co.com/xS5hwjd/Image-22.png",
+            inStock: true,
+            specs: {
+                connectivity: ["Bluetooth"],
+                type: "Xbox-compatible"
+            }
+        },
+        {
+            id: "15",
+            name: "Smart Thermostat",
+            price: 249.99,
+            rating: 4.6,
+            reviews: 187,
+            category: ["Electronics", "Smart Home"],
+            brand: "Nest",
+            image: "https://i.ibb.co.com/b5c4Z7r/Image-23.png",
+            labels: ["POPULAR"],
+            inStock: true,
+            specs: {
+                connectivity: ["Wi-Fi"],
+                type: "Energy-saving"
+            }
+        }
+    ];
+
+    const [toggleId, setToggleId] = useState(null);
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [selectedOptions, setSelectedOptions] = useState(null);
+    const [activePriceRange, setActivePriceRange] = useState(null);
+    const [value, setValue] = useState(0);
+    const [activebrand, setActivebrand] = useState(null);
+    const [activeTag, setActiveTag] = useState(null);
+    const [rating, setRating] = useState(5);
+    const [wishlistVisible, setWishlistVisible] = useState(false);
+    const [compareVisible, setCompareVisible] = useState(false);
+    const [quickViewVisible, setQuickViewVisible] = useState(false);
+    const [allProducts, setAllProducts] = useState(products);
+
+    const [filters, setFilters] = useState({
+        search: '',
+        categories: [],
+        priceRange: { min: 0, max: Infinity },
+        brands: [],
+        tags: []
+    });
+
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+
+    const handleClick = (event) => {
+        const slider = event.target.getBoundingClientRect();
+        const newValue = ((event.clientX - slider.left) / slider.width) * 100;
+        setValue(Math.min(Math.max(newValue, 0), 5000));
+    };
+
+    const handleCheckboxChange = (event, data) => {
+        if(event.target.checked){
+            setActivebrand(data.id)
+        }
+    }
+
+    useEffect(() => {
+        let result = products.filter(product => {
+            // Search filter
+            const searchMatch = product.name.toLowerCase().includes(filters.search.toLowerCase());
+
+            // Category filter
+            const categoryMatch = filters.categories.length === 0 ||
+                filters.categories.some(cat => product.category.includes(cat));
+
+            // Price range filter
+            const priceMatch = product.price >= filters.priceRange.min &&
+                product.price <= filters.priceRange.max;
+
+            // Brand filter
+            const brandMatch = filters.brands.length === 0 ||
+                filters.brands.includes(product.brand);
+
+            // Tag filter
+            const tagMatch = filters.tags.length === 0 ||
+                filters.tags.some(tag => product.category.includes(tag));
+
+            return searchMatch && categoryMatch && priceMatch && brandMatch && tagMatch;
+        });
+
+        setAllProducts(result);
+    }, [filters, products]);
+
+    // Handler for updating filters
+    const updateFilter = (filterType, value) => {
+        setFilters(prev => ({
+            ...prev,
+            [filterType]: value
+        }));
+    };
+
+    // Toggle selection for multi-select filters
+    const toggleFilterSelection = (filterType, value) => {
+        setFilters(prev => {
+            const currentFilter = prev[filterType];
+            const isSelected = currentFilter.includes(value);
+
+            return {
+                ...prev,
+                [filterType]: isSelected
+                    ? currentFilter.filter(item => item !== value)
+                    : [...currentFilter, value]
+            };
+        });
+    };
 
     const categories = [
         {
@@ -74,6 +324,163 @@ const ProductFilterExample1 = () => {
         { id: 5, name: "Option 5" },
     ];
 
+    const priceRanges = [
+        {
+            id: 0,
+            name: 'All Price',
+            slug: 'all_price',
+            min: '',
+            max: ''
+        },
+        {
+            id: 1,
+            name: 'Under $20',
+            slug: 'under_20',
+            min: 0,
+            max: 20
+        },
+        {
+            id: 2,
+            name: '$25 to $100',
+            slug: '20_to_100',
+            min: 20,
+            max: 100
+        },
+        {
+            id: 3,
+            name: '$100 to $300',
+            slug: '100_to_300',
+            min: 100,
+            max: 300
+        },
+        {
+            id: 4,
+            name: '$300 to $500',
+            slug: '300_to_500',
+            min: 300,
+            max: 500
+        },
+        {
+            id: 5,
+            name: '$500 to $1,000',
+            slug: '500_to_1000',
+            min: 500,
+            max: 1000
+        },
+        {
+            id: 6,
+            name: '$1,000 to $10,000',
+            slug: '1000_to_10000',
+            min: 1000,
+            max: 10000
+        },
+    ]
+
+    const popularbrands = [
+        {
+            id: 0,
+            name: 'Apple',
+            slug: 'apple',
+        },
+        {
+            id: 1,
+            name: 'Microsoft',
+            slug: 'microsoft'
+        },
+        {
+            id: 2,
+            name: 'Google',
+            slug: 'google'
+        },
+        {
+            id: 3,
+            name: 'Samsung',
+            slug: 'samsung'
+        },
+        {
+            id: 4,
+            name: 'Dell',
+            slug: 'dell'
+        },
+        {
+            id: 5,
+            name: 'HP',
+            slug: 'hp'
+        },
+        {
+            id: 6,
+            name: 'Symphony',
+            slug: 'symphony'
+        },
+        {
+            id: 7,
+            name: 'Xiaomi',
+            slug: 'xiaomi'
+        },
+        {
+            id: 8,
+            name: 'Sony',
+            slug: 'sony'
+        },
+        {
+            id: 9,
+            name: 'Panasonic',
+            slug: 'panasonic'
+        },
+        {
+            id: 10,
+            name: 'LG',
+            slug: 'lg'
+        },
+    ]
+
+    const mostTags = [
+        {
+            name: 'Game',
+            slug: 'game'
+        },
+        {
+            name: 'iPhone',
+            slug: 'iPhone'
+        },
+        {
+            name: 'TV',
+            slug: 'tv'
+        },
+        {
+            name: 'Asus Laptops',
+            slug: 'asus_laptops'
+        },
+        {
+            name: 'Macbook ',
+            slug: 'macbook'
+        },
+        {
+            name: 'SSD',
+            slug: 'ssd'
+        },
+        {
+            name: 'Graphics Card',
+            slug: 'graphics_card'
+        },
+        {
+            name: 'Power Bank ',
+            slug: 'power_bank '
+        },
+        {
+            name: 'Smart TV',
+            slug: 'smart_tv'
+        },
+        {
+            name: 'Speaker',
+            slug: 'speaker'
+        },
+        {
+            name: 'Tablet',
+            slug: 'tablet'
+        },
+    ]
+
     const filteredItems = items.filter(item =>
         item.name.toLowerCase().includes(search.toLowerCase())
     );
@@ -106,45 +513,155 @@ const ProductFilterExample1 = () => {
 
             {/* left side */}
             <aside className='w-[25%] min-[300px]'>
+
+                {/* categories */}
                 <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4'>Category</h5>
                 <div className='flex flex-col gap-[12px]'>
-                    {
-                        categories.map(category => (
-                            <label data-name='categoryCheckbox'
-                                   key={category.id}
-                                   className='flex items-center gap-[8px] text-[1rem] text-gray-800'>
-                                <input type='checkbox' name='categoryCheckbox' className='hidden'
-                                       checked={toggleId === category.id}
-                                       onChange={() => setToggleId(category.id)}/>
-                                <div
-                                    className={`${toggleId === category.id ? 'border-[#0FABCA]' : 'border-gray-300'} w-[20px] transition-all duration-300 h-[20px] rounded-full border relative`}>
-                                    <div
-                                        className={`${toggleId === category.id ? 'bg-[#0FABCA]' : 'bg-transparent'} w-[13px] h-[13.5px] transition-all duration-300 rounded-full absolute top-[50%] transform translate-y-[-50%] left-[50%] translate-x-[-50%]`}></div>
-                                </div>
-
-                                {category.name}
-                            </label>
-                        ))
-                    }
+                    {categories.map(category => (
+                        <label key={category.id} className='flex items-center gap-2'>
+                            <input
+                                type='checkbox'
+                                checked={filters.categories.includes(category.name)}
+                                onChange={() => toggleFilterSelection('categories', category.name)}
+                            />
+                            {category.name}
+                        </label>
+                    ))}
                 </div>
 
-                <div className='border-t border-gray-300 mt-6 pt-6'>
+                {/* prices */}
+                <div className='border-t border-b border-gray-300 mt-6 py-6'>
                     <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4'>Price Range</h5>
 
                     <div>
+                        <div className='flex items-center justify-between mb-2'>
+                            <p className='text-[0.9rem] text-gray-700'>${value}</p>
+                            <p className='text-[0.9rem] text-gray-700'>${value}</p>
+                        </div>
+                        <div
+                            className="relative w-full h-2.5 bg-gray-300 rounded-full cursor-pointer"
+                            onClick={handleClick}
+                        >
+                            <input
+                                type="range"
+                                min="0"
+                                max="100"
+                                value={value}
+                                onChange={handleChange}
+                                className="absolute w-full h-2.5 top-0 z-20 opacity-0 cursor-pointer"
+                            />
+                            <div
+                                className="absolute top-0 h-2.5 bg-[#0FABCA] rounded-full"
+                                style={{
+                                    width: `${value}%`,
+                                }}
+                            />
+                            <div
+                                className="absolute top-[50%] w-[22px] h-[22px] transform bg-[#0FABCA] rounded-full -translate-x-1/2 translate-y-[-50%] cursor-pointer transition-transform duration-150 ease-in-out border-2 border-white"
+                                style={{
+                                    left: `${value}%`,
+                                }}
+                            />
+                        </div>
+                    </div>
+
+                    <div className='flex gap-2'>
+                        <input
+                            type='number'
+                            placeholder='Min Price'
+                            value={filters.priceRange.min}
+                            onChange={(e) => updateFilter('priceRange', {
+                                ...filters.priceRange,
+                                min: Number(e.target.value)
+                            })}
+                        />
+                        <input
+                            type='number'
+                            placeholder='Max Price'
+                            value={filters.priceRange.max === Infinity ? '' : filters.priceRange.max}
+                            onChange={(e) => updateFilter('priceRange', {
+                                ...filters.priceRange,
+                                max: e.target.value ? Number(e.target.value) : Infinity
+                            })}
+                        />
+                    </div>
+
+                    {/* price ranges */}
+                    <div className='flex flex-col gap-[12px] mt-[16px]'>
+                        {
+                            priceRanges.map(price => (
+                                <label data-name='categoryCheckbox'
+                                       key={price.id}
+                                       className='flex cursor-pointer items-center gap-[8px] text-[1rem] text-gray-800'>
+                                    <input type='checkbox' name='categoryCheckbox' className='hidden'
+                                           checked={toggleId === price.id}
+                                           onChange={() => setToggleId(price.id)}/>
+                                    <div
+                                        className={`${toggleId === price.id ? 'border-[#0FABCA]' : 'border-gray-300'} w-[20px] transition-all duration-300 h-[20px] rounded-full border relative`}>
+                                        <div
+                                            className={`${toggleId === price.id ? 'bg-[#0FABCA]' : 'bg-transparent'} w-[13px] h-[13.5px] transition-all duration-300 rounded-full absolute top-[50%] transform translate-y-[-50%] left-[50%] translate-x-[-50%]`}></div>
+                                    </div>
+
+                                    {price.name}
+                                </label>
+                            ))
+                        }
+                    </div>
+                </div>
 
+                {/* popular brands */}
+                <div className='mt-6 border-b border-gray-200 pb-6'>
+                    <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4 capitalize'>popular Brands</h5>
+
+                    <div className='grid grid-cols-2 gap-[15px]'>
+                        {popularbrands.map(brand => (
+                            <label key={brand.id} className='flex items-center gap-2'>
+                                <input
+                                    type='checkbox'
+                                    checked={filters.brands.includes(brand.name)}
+                                    onChange={() => toggleFilterSelection('brands', brand.name)}
+                                />
+                                {brand.name}
+                            </label>
+                        ))}
+                    </div>
+                </div>
+
+                <div className='mt-6'>
+                    <h5 className='text-[1.2rem] font-medium text-gray-800 mb-4 capitalize'>Popular Tag</h5>
+
+                    <div className='flex items-center flex-wrap gap-[8px]'>
+                        {mostTags.map(tag => (
+                            <button
+                                key={tag.slug}
+                                onClick={() => toggleFilterSelection('tags', tag.name)}
+                                className={`
+                                m-1 px-3 py-1 rounded 
+                                ${filters.tags.includes(tag.name)
+                                    ? 'bg-[#0FABCA] text-white'
+                                    : 'bg-gray-200'
+                                }
+                            `}
+                            >
+                                {tag.name}
+                            </button>
+                        ))}
                     </div>
                 </div>
             </aside>
 
             {/* right side */}
             <main className='w-[75%]'>
+
+                {/* topbar */}
                 <div className='flex items-center justify-between gap-[50px] w-full'>
                     <div className='w-full relative'>
                         <input type='text' placeholder='Search...'
+                               onInput={(e)=> updateFilter('search', e.target.value)}
                                className='border border-[#e5eaf2] py-2 pl-4 pr-[65px] outline-none w-full rounded-md'/>
 
-                        <IoSearch className='text-[1.3rem] text-gray-600 absolute top-[50%] transform translate-y-[-50%] right-4'/>
+                        <IoSearch
+                            className='text-[1.3rem] text-gray-600 absolute top-[50%] transform translate-y-[-50%] right-4'/>
                     </div>
 
                     <div className='flex items-center gap-[10px]'>
@@ -167,7 +684,7 @@ const ProductFilterExample1 = () => {
                             {/* Dropdown menu */}
                             {isOpen && (
                                 <div
-                                    className="absolute left-0 w-full mt-1 border border-gray-200 rounded-md bg-white shadow-lg z-20">
+                                    className="absolute left-0 w-full mt-1 border border-gray-200 rounded-md bg-white shadow-lg z-50">
                                     <div className="w-full overflow-auto">
                                         {filteredItems.map(item => (
                                             <p
@@ -195,6 +712,113 @@ const ProductFilterExample1 = () => {
                         </div>
                     </div>
                 </div>
+
+                <div className='grid grid-cols-3 gap-[16px] w-full mt-[20px]'>
+                    {
+                        allProducts?.map((product)=> (
+                            <div key={product?.id} className='border border-gray-200 w-full relative rounded-md overflow-hidden'>
+
+                                {/* product image */}
+                                <div className='group relative overflow-hidden cursor-pointer'>
+                                    <img alt='product/image' src={product?.image}
+                                         className='w-[240px] mx-auto mt-5'/>
+
+                                    {/* action buttons */}
+                                    <div
+                                        className='absolute bg-[rgb(0,0,0,0.3)] z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-0 left-0 flex items-center justify-center w-full h-full'>
+                                        <div className='flex items-center gap-[15px] justify-center'>
+
+                                            <div onMouseOver={() => setWishlistVisible(true)}
+                                                 onMouseOut={() => setWishlistVisible(false)}
+                                                 className='relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300'>
+                                                <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                    <IoMdHeartEmpty className='text-[1.3rem]'/>
+                                                </p>
+
+                                                {/* tooltip */}
+                                                <p className={`${wishlistVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                    Wishlist
+
+                                                    {/* arrow */}
+                                                    <span
+                                                        className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                </p>
+                                            </div>
+
+                                            <div onMouseOver={() => setCompareVisible(true)}
+                                                 onMouseOut={() => setCompareVisible(false)}
+                                                 className='relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]'>
+                                                <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                    <HiArrowsUpDown className='text-[1.3rem]'/>
+                                                </p>
+
+                                                {/* tooltip */}
+                                                <p className={`${compareVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                    Compare
+
+                                                    {/* arrow */}
+                                                    <span
+                                                        className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                </p>
+                                            </div>
+
+                                            <div onMouseOver={() => setQuickViewVisible(true)}
+                                                 onMouseOut={() => setQuickViewVisible(false)}
+                                                 className='relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]'>
+                                                <p className='rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer'>
+                                                    <IoEyeOutline className='text-[1.3rem]'/>
+                                                </p>
+
+                                                {/* tooltip */}
+                                                <p className={`${quickViewVisible ? 'opacity-100 z-[100] translate-y-0' : 'opacity-0 z-[-1] translate-y-[20px]'} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                                    Quick View
+
+                                                    {/* arrow */}
+                                                    <span
+                                                        className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* product details */}
+                                <div className='p-4 pt-6'>
+
+                                    {/* review area */}
+                                    <div className='flex items-center gap-[10px]'>
+                                        <div className="flex items-center space-x-1">
+                                            {[...Array(5)].map((_, index) => {
+                                                const starRating = index + 1;
+                                                return (
+                                                    <FaStar
+                                                        key={starRating}
+                                                        className={`cursor-pointer ${
+                                                            starRating <= rating ? "text-[#FA8232]" : "text-gray-300"
+                                                        }`}
+                                                        size={15}
+                                                        onClick={() => setRating(starRating)}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                        <span className='text-[0.8rem] text-gray-500'>({product.rating})</span>
+                                    </div>
+
+                                    <h3 className='text-[1.1rem] text-gray-900 font-medium mb-2 mt-2'>{product?.name}</h3>
+                                    <p className='text-[1.150rem] font-medium text-[#0FABCA] mt-1'>${product?.price}</p>
+
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+
+                {
+                    !allProducts?.length && (
+                        <div className='text-[1rem] text-gray-500 text-center mt-20'>No product found!</div>
+                    )
+                }
             </main>
         </section>
     );
diff --git a/src/Pages/Blocks/E-Commerce/CheckoutPage.jsx b/src/Pages/Blocks/E-Commerce/CheckoutPage.jsx
new file mode 100644
index 0000000..d50d93a
--- /dev/null
+++ b/src/Pages/Blocks/E-Commerce/CheckoutPage.jsx
@@ -0,0 +1,28 @@
+
+// components
+import Navbar from "../../../Components/Home/Navbar";
+import Sidebar from "../../../Components/Overview/Sidebar";
+import MobileNavbar from "../../../Components/Home/MobileNavbar.jsx";
+import MobileSidebar from "../../../Components/Overview/Sidebar/MobileSidebar.jsx";
+import CheckoutPages from "../../../Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx";
+
+const CheckoutPage = () => {
+    return (
+        <>
+            <Navbar />
+            <MobileNavbar/>
+            <div className="flex w-full mx-auto max-w-[1700px]">
+                <div className="1024px:w-[32%] 1260px:w-[28%] 1404px:w-[19%] 2000px:w-[18%] 1024px:mr-[3rem]">
+                    <Sidebar startContent={203} />
+                </div>
+
+                <div className="w-full max-h-[89vh] min-h-[89vh] overflow-y-auto pt-[5rem] 640px:pt-[5rem] 640px:py-[10rem] 1024px:py-[2rem] 1024px:px-[0.5rem] relative" style={{scrollbarWidth: 'none'}}>
+                    <MobileSidebar startContent={203}/>
+                    <CheckoutPages />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default CheckoutPage;

From de51490e475975a4a5c75111b40e613640068f1e Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Thu, 5 Dec 2024 00:04:53 +0600
Subject: [PATCH 14/22] update: navlink added

---
 src/Components/Home/Navbar.jsx | 64 ++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/src/Components/Home/Navbar.jsx b/src/Components/Home/Navbar.jsx
index 9dbc535..916f35e 100644
--- a/src/Components/Home/Navbar.jsx
+++ b/src/Components/Home/Navbar.jsx
@@ -18,6 +18,7 @@ const Navbar = () => {
     const navigate = useNavigate();
     const [isDeveloperKitHover, setIsDeveloperKitHover] = useState(false);
     const [isToolsHover, setIsToolsHover] = useState(false);
+    const [eCommerceHover, setECommerceHover] = useState(false)
 
     const handleSearchClick = () => {
         setIsSearchOpen(true);
@@ -220,6 +221,69 @@ const Navbar = () => {
                                     </motion.div>
                                 )}
                             </li>
+
+                            <li
+                                onMouseEnter={() => setECommerceHover(true)}
+                                onMouseLeave={() => setECommerceHover(false)}
+                                className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
+                            >
+                                E-Commerce
+                                <NewBadge/>
+                                <div className='w-[8px] h-[8px] bg-green-500 rounded-full absolute top-5 right-6 animate-[ping_1.5s_linear_infinite]'></div>
+                                <IoIosArrowDown className={`${eCommerceHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
+
+                                {eCommerceHover && (
+                                    <motion.div
+                                        initial={{opacity: 0, scale: 0.8}}
+                                        animate={{opacity: 1, scale: 1}}
+                                        exit={{opacity: 0, scale: 0.8}}
+                                        className="absolute top-[68px] left-0 gap-[30px] w-[600px] grid grid-cols-2 bg-white border border-gray-200 shadow-sm rounded-md p-6 mt-2"
+                                        onMouseEnter={() => setECommerceHover(true)}
+                                        onMouseLeave={() => setECommerceHover(false)}
+                                    >
+                                        <div className='flex flex-col text-[1rem]'>
+                                            <Link to='/components/product-card' className='p-[10px] transition-all duration-200 hover:bg-gray-100 rounded-md'>
+                                                <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                                    Product Card
+                                                </p>
+                                                <span className='text-[0.8rem] font-[300] text-gray-500'>Animated modern product cards.</span>
+                                            </Link>
+
+                                            <Link to='/blocks/offer-grid' className='p-[10px] transition-all duration-200 hover:bg-gray-100 rounded-md'>
+                                                <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                                    Offer Grid
+                                                </p>
+                                                <span className='text-[0.8rem] font-[300] text-gray-500'>Grid layout for showing product offers.</span>
+                                            </Link>
+
+                                            <Link to='/blocks/checkout-page' className='p-[10px] transition-all duration-200 hover:bg-gray-100 rounded-md'>
+                                                <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                                    Checkout Page
+                                                </p>
+                                                <span className='text-[0.8rem] font-[300] text-gray-500'>Checkout page with order summery.</span>
+                                            </Link>
+
+                                        </div>
+
+                                        <div className='flex flex-col text-[1rem]'>
+                                            <Link to='/components/ads-card' className='p-[10px] transition-all duration-200 hover:bg-gray-100 rounded-md'>
+                                                <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200 flex items-center gap-[10px]'>
+                                                    Ads Card
+                                                </p>
+                                                <span className='text-[0.8rem] font-[300] text-gray-500'>Modern ads cards.</span>
+                                            </Link>
+
+                                            <Link to='/blocks/product-details-page' className='p-[10px] transition-all duration-200 hover:bg-gray-100 rounded-md'>
+                                                <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                                    Product Details Page
+                                                </p>
+                                                <span className='text-[0.8rem] font-[300] text-gray-500'>Product Details with full functionality.</span>
+                                            </Link>
+
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </li>
                         </ul>
                     </div>
 

From ce5573eb54fc41c265edcdfcd5ca64aee0ef3ed4 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 7 Dec 2024 13:11:56 +0600
Subject: [PATCH 15/22] update: landing page design updated

---
 src/Components/Home/Hero.jsx                  |  53 ++++++++--
 src/Components/Home/MobileNavbar.jsx          | 100 +++++++++++++++++-
 src/Components/Home/Navbar.jsx                |  51 ++++++---
 src/Components/Home/SingleToolCard.jsx        |  43 ++++++++
 src/Components/Home/Team.jsx                  |   4 +-
 src/Components/Home/ZenUITools.jsx            |  59 +++++++++++
 .../AnimatedProductCard.jsx                   |  95 +++++++++++++++++
 src/Pages/HomePage.jsx                        |   4 +-
 src/index.css                                 |  16 +++
 9 files changed, 399 insertions(+), 26 deletions(-)
 create mode 100644 src/Components/Home/SingleToolCard.jsx
 create mode 100644 src/Components/Home/ZenUITools.jsx
 create mode 100644 src/Components/HomePageComponents/AnimatedProductCard.jsx

diff --git a/src/Components/Home/Hero.jsx b/src/Components/Home/Hero.jsx
index 2ec27f1..29558d6 100644
--- a/src/Components/Home/Hero.jsx
+++ b/src/Components/Home/Hero.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 
 // react icons
 import {CgTemplate} from "react-icons/cg";
@@ -22,7 +22,6 @@ import CountUp from "react-countup";
 import {FaArrowRightLong} from "react-icons/fa6";
 
 // components
-import AnimatedCard from "../HomePageComponents/AnimatedCard.jsx";
 import SwitchCard from "../HomePageComponents/Switch.jsx";
 import TabCard from "../HomePageComponents/Tab.jsx";
 import SelectCard from "../HomePageComponents/Select.jsx";
@@ -34,6 +33,7 @@ import BadgeCard from "../HomePageComponents/Badge.jsx";
 import AnimatedButtonCard from "../HomePageComponents/AnimatedButton.jsx";
 import ChipCard from "../HomePageComponents/Chip.jsx";
 import StrongPasswordCard from "../HomePageComponents/StrongPasswordCard.jsx";
+import AnimatedProductCard from "../HomePageComponents/AnimatedProductCard.jsx";
 
 const Hero = () => {
 
@@ -50,6 +50,38 @@ const Hero = () => {
 
     const navigate = useNavigate();
 
+    const [isAnimating, setIsAnimating] = useState(true);
+
+    useEffect(() => {
+        const animationCycle = () => {
+            setIsAnimating(true);
+
+            const stopTimeout = setTimeout(() => {
+                setIsAnimating(false);
+            }, 1200);
+
+            const restartTimeout = setTimeout(() => {
+                setIsAnimating(true);
+            }, 2000);
+
+            return () => {
+                clearTimeout(stopTimeout);
+                clearTimeout(restartTimeout);
+            };
+        };
+
+        const cleanupAnimation = animationCycle();
+
+        const interval = setInterval(animationCycle, 4000);
+
+        return () => {
+            clearInterval(interval);
+            if (typeof cleanupAnimation === 'function') {
+                cleanupAnimation();
+            }
+        };
+    }, []);
+
     return (
         <main className="w-full min-h-screen">
 
@@ -69,10 +101,17 @@ const Hero = () => {
                                 },
                             }}>
 
-                    <a href="https://github.com/Asfak00/zenui-library" target="_blank" className='flex items-center gap-[8px] bg-[#9A04F59E] hover:bg-[#9A04F5D2] transition-all duration-200 w-max py-[5px] px-[12px] text-white rounded-[6px] absolute top-[-10px] z-30 left-0 text-[1rem] cursor-pointer'>
-                      <FaGithub/>
-                       Star us on Github
-                      <FaArrowRightLong/>
+                    <a href="https://github.com/Asfak00/zenui-library" target="_blank" className='flex items-center gap-[10px] bg-[#9A04F59E] hover:bg-[#9A04F5D2] transition-all duration-200 w-max py-[5px] pr-[18px] pl-[12px] text-white rounded-[6px] absolute top-[-10px] z-30 left-0 text-[1rem] cursor-pointer'>
+                      <div className='flex items-center gap-[8px]'>
+                          <FaGithub/>
+                          Star us on Github
+                      </div>
+                        <FaArrowRightLong
+                            className={`
+          ${isAnimating ? 'animate-bounce-custom' : ''}
+          transition-transform duration-300
+        `}
+                        />
                     </a>
 
                     <div
@@ -194,7 +233,7 @@ const Hero = () => {
                     </div>
                     <div
                         className='animation-bounce1 absolute top-[35%] left-[33%] transform translate-y-[-50%] translate-x-[-50%]'>
-                        <AnimatedCard/>
+                        <AnimatedProductCard/>
                     </div>
                     <div
                         className='animation-bounce2 absolute top-[28%] right-[-20px] 1260px:right-12 transform translate-y-[-50%] translate-x-[-50%]'>
diff --git a/src/Components/Home/MobileNavbar.jsx b/src/Components/Home/MobileNavbar.jsx
index 4f1c136..4320ee3 100644
--- a/src/Components/Home/MobileNavbar.jsx
+++ b/src/Components/Home/MobileNavbar.jsx
@@ -9,7 +9,7 @@ import {FiGithub} from "react-icons/fi";
 // react router dom
 import {Link, useNavigate} from "react-router-dom";
 import Search from "./Search";
-import {motion} from "framer-motion";
+import {AnimatePresence, motion} from "framer-motion";
 import NewBadge from "../../Shared/NewBadge.jsx";
 
 const MobileNavbar = () => {
@@ -17,6 +17,9 @@ const MobileNavbar = () => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [developerKitDropdownOpen, setDeveloperKitDropdownOpen] = useState(false);
     const [toolsDropdownOpen, setToolsDropdownOpen] = useState(false);
+    const [eCommerceDropdownOpen, setECommerceDropdownOpen] = useState(false)
+
+    const [searchPlaceholderText, setSearchPlaceholderText] = useState("search component");
 
     const navigate = useNavigate();
 
@@ -44,6 +47,18 @@ const MobileNavbar = () => {
         }
     }, [])
 
+    useEffect(() => {
+        const placeholderTexts = ["Search components", "Search Blocks", "Explore templates", "Search E-commerce"];
+        let index = 0;
+
+        const interval = setInterval(() => {
+            setSearchPlaceholderText(placeholderTexts[index]);
+            index = (index + 1) % placeholderTexts.length;
+        }, 3000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     return (
         <>
             <nav
@@ -55,7 +70,7 @@ const MobileNavbar = () => {
                     <div className='relative'>
                         <span
                             className='px-2 absolute right-[-33px] text-[#a4a4a8] top-1 py-[1px] bg-[#f0f0f1] rounded-full text-[10px]'>
-                            v2.0
+                            v2.2
                         </span>
                         <img
                             src="/darklogo.png"
@@ -93,12 +108,25 @@ const MobileNavbar = () => {
                 <div className="zenuiSearchInput mt-[45px] relative w-full" onClick={handleSearchClick}>
                     <IoIosSearch
                         className={`text-gray-400 absolute left-3 top-[0.6rem] text-[1.5rem]`}/>
+
+                    <AnimatePresence>
+                        <motion.p
+                            key={searchPlaceholderText}
+                            initial={{opacity: 0, y: -10}}
+                            animate={{opacity: 1, y: 0}}
+                            exit={{opacity: 0, y: 10}}
+                            transition={{duration: 0.5}}
+                            className='text-[1rem] text-gray-400 absolute top-[10px] left-[40px]'
+                        >
+                            {searchPlaceholderText}
+                        </motion.p>
+                    </AnimatePresence>
+
                     <input
                         type="search"
                         name=""
                         id=""
                         readOnly={true}
-                        placeholder="Search..."
                         className={`py-[0.59rem] pl-10 border w-full bg-transparent border-gray-200 rounded-md focus:ring-0 outline-none`}
                     />
                     <span
@@ -208,6 +236,72 @@ const MobileNavbar = () => {
                             </motion.div>
                         )
                     }
+
+
+                    <li onClick={() => setECommerceDropdownOpen(!eCommerceDropdownOpen)}
+                        className='cursor-pointer relative flex items-center gap-[8px] mt-1.5'>
+                        E-Commerce
+                        <NewBadge/>
+                        <div className='w-[8px] h-[8px] bg-green-500 rounded-full absolute -top-1.5 right-6 animate-[ping_1.5s_linear_infinite]'></div>
+                        <IoIosArrowDown className={`${eCommerceDropdownOpen ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
+                    </li>
+
+                    {
+                        eCommerceDropdownOpen && (
+                            <motion.div
+                                initial={{opacity: 0, y: -20}}
+                                animate={{opacity: 1, y: 0}}
+                                exit={{opacity: 0, y: -20}}
+                                className="grid grid-cols-1 gap-[20px] ml-4"
+                            >
+                                <div className='flex flex-col gap-[20px] text-[1rem]'>
+                                    <Link to='/components/product-card'
+                                          className='!p-0'>
+                                        <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                            Product Card
+                                        </p>
+                                        <span className='text-[0.8rem] font-[300] text-gray-500'>Animated modern product cards.</span>
+                                    </Link>
+
+                                    <Link to='/blocks/offer-grid'
+                                          className='!p-0'>
+                                        <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                            Offer Grid
+                                        </p>
+                                        <span className='text-[0.8rem] font-[300] text-gray-500'>Grid layout for showing product offers.</span>
+                                    </Link>
+
+                                    <Link to='/blocks/checkout-page'
+                                          className='!p-0'>
+                                        <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                            Checkout Page
+                                        </p>
+                                        <span className='text-[0.8rem] font-[300] text-gray-500'>Checkout page with order summery.</span>
+                                    </Link>
+                                </div>
+
+                                <div className='flex flex-col gap-[20px] text-[1rem]'>
+                                    <Link to='/components/ads-card'
+                                          className='!p-0'>
+                                        <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200 flex items-center gap-[10px]'>
+                                            Ads Card
+                                        </p>
+                                        <span
+                                            className='text-[0.8rem] font-[300] text-gray-500'>Modern ads cards.</span>
+                                    </Link>
+
+                                    <Link to='/blocks/product-details-page'
+                                          className='!p-0'>
+                                        <p className='cursor-pointer leading-[20px] text-gray-600 transition-all duration-200'>
+                                            Product Details Page
+                                        </p>
+                                        <span className='text-[0.8rem] font-[300] text-gray-500'>Product Details with full functionality.</span>
+                                    </Link>
+
+                                </div>
+                            </motion.div>
+                        )
+                    }
                 </ul>
             </aside>
 
diff --git a/src/Components/Home/Navbar.jsx b/src/Components/Home/Navbar.jsx
index 916f35e..1457793 100644
--- a/src/Components/Home/Navbar.jsx
+++ b/src/Components/Home/Navbar.jsx
@@ -9,7 +9,7 @@ import Search from "./Search";
 import {FiGithub} from "react-icons/fi";
 import {RxDiscordLogo} from "react-icons/rx";
 
-import {motion} from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import NewBadge from "../../Shared/NewBadge.jsx";
 
 const Navbar = () => {
@@ -20,6 +20,8 @@ const Navbar = () => {
     const [isToolsHover, setIsToolsHover] = useState(false);
     const [eCommerceHover, setECommerceHover] = useState(false)
 
+    const [searchPlaceholderText, setSearchPlaceholderText] = useState("search component");
+
     const handleSearchClick = () => {
         setIsSearchOpen(true);
     };
@@ -90,6 +92,18 @@ const Navbar = () => {
         };
     }, []);
 
+    useEffect(() => {
+        const placeholderTexts = ["Search components", "Search Blocks", "Explore templates", "Search E-commerce"];
+        let index = 0;
+
+        const interval = setInterval(() => {
+            setSearchPlaceholderText(placeholderTexts[index]);
+            index = (index + 1) % placeholderTexts.length;
+        }, 3000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     return (
         <>
             <nav
@@ -106,7 +120,7 @@ const Navbar = () => {
                         <div className='relative mr-6'>
                             <span
                                 className='px-2.5 absolute right-[-40px] text-[#a4a4a8] top-0 py-0.5 bg-[#f0f0f1] rounded-full text-[12px]'>
-                                v2.0
+                                v2.2
                             </span>
                             <img
                                 src="/darklogo.png"
@@ -291,21 +305,32 @@ const Navbar = () => {
                         <div className="zenuiSearchInput relative w-full" onClick={handleSearchClick}>
                             <IoIosSearch
                                 className={`text-gray-400 absolute left-3 top-[0.6rem] text-[1.5rem]`}/>
-                            <input
-                                type="search"
-                                name=""
-                                id=""
-                                readOnly={true}
-                                placeholder="Search..."
-                                className={`py-[0.59rem] pl-10 border w-full bg-transparent border-gray-200 rounded-md focus:ring-0 outline-none`}
-                            />
+                            <AnimatePresence>
+                                <motion.p
+                                    key={searchPlaceholderText}
+                                    initial={{opacity: 0, y: -10}}
+                                    animate={{opacity: 1, y: 0}}
+                                    exit={{opacity: 0, y: 10}}
+                                    transition={{duration: 0.5}}
+                                    className='text-[1rem] text-gray-400 absolute top-[10px] left-[40px]'
+                                >
+                                    {searchPlaceholderText}
+                                </motion.p>
+                            </AnimatePresence>
+                                <input
+                                    type="search"
+                                    name=""
+                                    id=""
+                                    readOnly={true}
+                                    className={`py-[0.59rem] pl-10 border w-full bg-transparent border-gray-200 rounded-md focus:ring-0 outline-none`}
+                                />
                             <span
                                 className={`text-gray-500 bg-gray-50 border-gray-200 px-2 py-1 text-[0.8rem] font-[500] rounded-md h-[75%] absolute right-1.5 border top-[0.35rem] flex items-center justify-center`}>
-              Ctrl + S
-            </span>
+                                Ctrl + S
+                            </span>
                         </div>
                         <div className='flex items-center gap-2'>
-                        <a href='https://discord.gg/qbwytm4WUG' target='_blank'>
+                            <a href='https://discord.gg/qbwytm4WUG' target='_blank'>
                                 <RxDiscordLogo
                                     className={`text-[2.7rem] text-gray-400 rounded-md p-[6px] border border-gray-200 cursor-pointer`}/>
                             </a>
diff --git a/src/Components/Home/SingleToolCard.jsx b/src/Components/Home/SingleToolCard.jsx
new file mode 100644
index 0000000..fa5b8e2
--- /dev/null
+++ b/src/Components/Home/SingleToolCard.jsx
@@ -0,0 +1,43 @@
+import React, {useRef, useState} from 'react';
+import {Link} from "react-router-dom";
+
+const SingleToolCard = ({data, duration}) => {
+
+    const [isHovering, setIsHovering] = useState(false);
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+    const cardRef = useRef(null);
+
+    const handleMouseMove = (e) => {
+        if (cardRef.current) {
+            const rect = cardRef.current.getBoundingClientRect();
+            setMousePosition({
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            });
+        }
+    };
+
+    return (
+        <Link to={data.url}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            ref={cardRef}
+            data-aos="fade-up" data-aos-duration={duration}
+            className='p-[20px] relative overflow-hidden hover:border-[#0FABCA] transition-all duration-300 cursor-pointer rounded-md border-[2px] border-dashed flex-col border-gray-200 flex items-center'>
+            <h4 className='text-[1.3rem] font-semibold text-gray-700'>{data.title}</h4>
+            <p className='mt-[10px] text-[0.9rem] text-gray-500 text-center'>{data.description}</p>
+
+            {isHovering && (
+                <div
+                    className="absolute inset-0 pointer-events-none blur-[80px]"
+                    style={{
+                        background: `radial-gradient(circle 50px at ${mousePosition.x}px ${mousePosition.y}px, #DB06F9, transparent)`,
+                    }}
+                />
+            )}
+        </Link>
+    );
+};
+
+export default SingleToolCard;
diff --git a/src/Components/Home/Team.jsx b/src/Components/Home/Team.jsx
index ff7b410..19d6e2f 100644
--- a/src/Components/Home/Team.jsx
+++ b/src/Components/Home/Team.jsx
@@ -14,7 +14,7 @@ const Team = () => {
                 <div className='flex flex-col items-center justify-center mt-16 640px:mt-24'>
                     <h3 className='text-[1.9rem] mb-3 400px:mb-0 640px:text-[2.4rem] text-center 640px:text-start font-[600] text-gray-800'><span
                         className='text-[#9A04F5]'>Design</span> Contributors</h3>
-                    <p className='w-full 1404px:w-[60%] mx-auto 640px:text-center text-[1rem] text-gray-600'>Our design
+                    <p className='w-full 1404px:w-[60%] mx-auto text-center text-[1rem] text-gray-600'>Our design
                         contributors provide the creative foundation for our components and blocks, helping us innovate
                         and expand ZenUI’s offerings with their unique insights and designs.</p>
                 </div>
@@ -74,7 +74,7 @@ const Team = () => {
                 <div className='flex flex-col items-center justify-center mt-16 640px:mt-24'>
                     <h3 className='text-[1.9rem] mb-3 400px:mb-0 640px:text-[2.4rem] font-[600] text-gray-800'><span
                         className='text-[#9A04F5]'>Dev</span> Contributors</h3>
-                    <p className='w-full 1404px:w-[60%] mx-auto 640px:text-center text-[1rem] text-gray-600'>Our development contributors lay the technical groundwork for ZenUI, bringing our components and blocks to life with their expertise and innovation. Their work is essential to our platform's growth and stability.</p>
+                    <p className='w-full 1404px:w-[60%] mx-auto text-center text-[1rem] text-gray-600'>Our development contributors lay the technical groundwork for ZenUI, bringing our components and blocks to life with their expertise and innovation. Their work is essential to our platform's growth and stability.</p>
                 </div>
 
                 <div className='mt-16 flex flex-wrap gap-[40px] justify-center'>
diff --git a/src/Components/Home/ZenUITools.jsx b/src/Components/Home/ZenUITools.jsx
new file mode 100644
index 0000000..82febd5
--- /dev/null
+++ b/src/Components/Home/ZenUITools.jsx
@@ -0,0 +1,59 @@
+import React, {useEffect} from 'react';
+
+// import aos animation
+import "aos/dist/aos.css";
+import AOS from "aos";
+import SingleToolCard from "./SingleToolCard.jsx";
+
+const ZenUITools = () => {
+
+    useEffect(() => {
+        AOS.init({
+            duration: 1000,
+        });
+    }, []);
+
+    const cardData = [
+        {
+            title: "ShortKey",
+            duration: '700',
+            url: '/shortcut-generator',
+            description: "Type your custom shortcut to instantly generate a function with conditions, enabling specific logic execution when the shortcut keys are pressed. Make Simplify your workflow!"
+        },
+        {
+            title: "Icons",
+            duration: '1000',
+            url: '/icons',
+            description: "Explore and enjoy ZenUI Library's collection of free icons, designed for customization and easy integration. Download and use them to enhance your projects."
+        },
+        {
+            title: "Color Palette",
+            duration: '1300',
+            url: '/color-palette',
+            description: "Customize your color shades! Paste a color code to explore shades, view hex, RGB, and HSL codes, and copy them instantly for seamless integration into your projects."
+        }
+    ];
+
+    return (
+        <section className='pb-5 max-w-[1700px] mx-auto mt-9 640px:mt-0'>
+            <div data-aos="fade-zoom-in">
+                <h1 className='text-[1.5rem] 425px:text-[2.2rem] text-text font-[600] text-center px-8'>Introduce
+                    With <span
+                        className='heroText text-[#0FABCA] font-[500]'>ZenUI</span> Tools</h1>
+                <p className='text-[0.9rem] 640px:text-[1.1rem] text-center text-gray-500 px-8 w-full 1024px:w-[42%] mx-auto'>Streamline
+                    your workflow with a versatile color palette, an extensive icon library, and a dynamic keyboard
+                    shortcut generator.</p>
+            </div>
+
+            <div className='w-full px-8 425px:px-10 py-8 grid grid-cols-1 640px:grid-cols-2 1024px:grid-cols-3 gap-[20px] 1024px:w-[70%] 1024px:mt-[1rem] mx-auto'>
+                {
+                    cardData.map((card, index) => (
+                        <SingleToolCard duration={card.duration} key={index} data={card}/>
+                    ))
+                }
+            </div>
+        </section>
+    );
+};
+
+export default ZenUITools;
diff --git a/src/Components/HomePageComponents/AnimatedProductCard.jsx b/src/Components/HomePageComponents/AnimatedProductCard.jsx
new file mode 100644
index 0000000..4e89869
--- /dev/null
+++ b/src/Components/HomePageComponents/AnimatedProductCard.jsx
@@ -0,0 +1,95 @@
+import React, {useState} from 'react';
+import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
+import {HiArrowsUpDown} from "react-icons/hi2";
+import {IoBagHandleOutline, IoCartOutline, IoEyeOutline} from "react-icons/io5";
+import {FiMinus, FiPlus} from "react-icons/fi";
+import {FaStar} from "react-icons/fa";
+
+const AnimatedProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+    const [count, setCount] = useState(0);
+
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    return (
+        <div className='border border-gray-300 rounded-xl p-2 w-[70%]'>
+
+            {/* product image */}
+            <div className='relative'>
+                <img alt='product/image' src='https://i.ibb.co.com/cTTfNRw/Link-1.png'
+                     className='w-full'/>
+
+                {/* favorite icon */}
+                <div className='p-2 rounded-full bg-gray-600 absolute top-2 right-2'>
+                    {
+                        isFavorite ? (
+                            <IoIosHeart onClick={() => setIsFavorite(false)}
+                                        className={`text-[#0FABCA] text-[1.2rem] cursor-pointer`}/>
+                        ) : (
+                            <IoMdHeartEmpty onClick={() => setIsFavorite(true)}
+                                            className={` text-white text-[1.2rem] cursor-pointer`}/>
+                        )
+                    }
+
+                </div>
+            </div>
+
+            {/* product details */}
+            <div className='mt-2 pt-0 p-1'>
+                <h3 className='text-[1.1rem] font-medium line-clamp-1'>Criphin - Contemporary
+                    Business Keynote</h3>
+
+                {/* authors & reviews */}
+                <div className='flex items-center justify-between mt-1'>
+                    <p className='text-gray-400 text-[0.9rem]'>by <span
+                        className='text-black'>Criphin</span> in <span
+                        className='text-black'>Graphics</span></p>
+
+                    {/* review area */}
+                    <div className='flex items-center gap-[10px]'>
+                        <div className="flex items-center space-x-1">
+                            {[...Array(5)].map((_, index) => {
+                                const starRating = index + 1;
+                                return (
+                                    <FaStar
+                                        key={starRating}
+                                        className={`cursor-pointer ${
+                                            starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                        }`}
+                                        size={15}
+                                        onClick={() => setRating(starRating)}
+                                    />
+                                );
+                            })}
+                        </div>
+                        <span className='text-[0.8rem] text-gray-500'>(4.8)</span>
+                    </div>
+                </div>
+
+                {/* price and action btn */}
+                <div className='flex items-end justify-between mt-5'>
+                    <div>
+                        <span className='text-gray-400 text-[0.9rem]'>168 Sales</span>
+                        <p className='text-[1.150rem] font-semibold text-[#0FABCA]'>$52.00</p>
+                    </div>
+
+                    <div className='flex items-center gap-[10px]'>
+                        <button
+                            className='py-2 px-4 border border-[#0FABCA] text-white rounded-md flex items-center group gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200'>
+                            <IoCartOutline
+                                className='text-[1.3rem] group-hover:text-white text-[#0FABCA]'/>
+                        </button>
+
+                        <button
+                            className='py-2 px-4 border border-[#0FABCA] text-[#0FABCA] hover:text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200'>
+                            Preview
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AnimatedProductCard;
diff --git a/src/Pages/HomePage.jsx b/src/Pages/HomePage.jsx
index eac3ace..a7fd574 100644
--- a/src/Pages/HomePage.jsx
+++ b/src/Pages/HomePage.jsx
@@ -10,17 +10,19 @@ import TemplatesSlider from "../Components/Home/TemplatesSlider.jsx";
 import Sponsor from "../Components/Home/Sponsor.jsx";
 import Faq from "../Components/Home/Faq.jsx";
 import NewsBoard from "../Components/Home/NewsBoard.jsx";
+import ZenUITools from "../Components/Home/ZenUITools.jsx";
 
 
 const HomePage = () => {
 
     return (
         <>
-            <NewsBoard/>
+            {/*<NewsBoard/>*/}
             <Navbar/>
             <div className='overflow-x-hidden'>
                 <MobileNavbar/>
                 <Hero/>
+                <ZenUITools/>
                 <Feedback/>
                 <TemplatesSlider/>
                 <Faq/>
diff --git a/src/index.css b/src/index.css
index 9ebd875..c402ac8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -423,4 +423,20 @@ input[type="number"] {
 
 .scrollbar::-webkit-scrollbar {
   height: 4px;
+}
+
+@keyframes bounce-custom {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.animate-bounce-custom {
+  animation: bounce-custom 0.6s ease-in-out 2;
 }
\ No newline at end of file

From 0c591e979f43a48dc2ad17271a3f65f27c17efd1 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sat, 7 Dec 2024 19:43:38 +0600
Subject: [PATCH 16/22] update: checkout new example added

---
 src/Components/Home/PrivacyPolicy.jsx         |   2 +-
 .../Overview/Sidebar/MobileSidebar.jsx        |   7 -
 src/Components/Overview/Sidebar/index.jsx     |   7 -
 .../CheckoutPages/CheckoutPageExample2.jsx    | 212 ++++++++++++++++++
 .../Blocks/E-Commerce/CheckoutPages/Index.jsx |  42 ++++
 .../Content/ECommerce/AdsCard.jsx             |   6 +-
 .../Content/ECommerce/ProductCard.jsx         |   7 +-
 .../Content/Feedback/Notification.jsx         |   6 +-
 src/Utils/SearchData.js                       |  30 +++
 9 files changed, 294 insertions(+), 25 deletions(-)
 create mode 100644 src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx

diff --git a/src/Components/Home/PrivacyPolicy.jsx b/src/Components/Home/PrivacyPolicy.jsx
index a00d4af..cdd7cf8 100644
--- a/src/Components/Home/PrivacyPolicy.jsx
+++ b/src/Components/Home/PrivacyPolicy.jsx
@@ -9,7 +9,7 @@ const PrivacyPolicy = () => {
 
             <div className='max-w-[800px] text-gray-800'>
                 <h1 className="text-3xl font-bold mb-4 text-[#0FABCA]">Privacy Policy for Zenui Library</h1>
-                <p className="mb-4 !text-gray-500">Effective Date: January 1, 2024</p>
+                <p className="mb-4 !text-gray-500">Effective Date: January 1, 2025</p>
 
                 <p className="mb-4 !text-gray-500">
                     Welcome to Zenui Library. Your privacy is important to us. This Privacy Policy outlines how we
diff --git a/src/Components/Overview/Sidebar/MobileSidebar.jsx b/src/Components/Overview/Sidebar/MobileSidebar.jsx
index 7aa21dc..c06152a 100644
--- a/src/Components/Overview/Sidebar/MobileSidebar.jsx
+++ b/src/Components/Overview/Sidebar/MobileSidebar.jsx
@@ -377,8 +377,6 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 onClick={() => setStartContent(55)}
                             >
                                 Carousel
-
-                                <NewBadge/>
                             </Link>
 
                             {/* navigation */}
@@ -396,7 +394,6 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 onClick={() => setStartContent(22)}
                             >
                                 Pagination
-                                <UpdateBadge/>
                             </Link>
                             <Link
                                 to={"/components/progress-bar"}
@@ -427,8 +424,6 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 onClick={() => setStartContent(210)}
                             >
                                 Timer
-
-                                <NewBadge/>
                             </Link>
                             <Link
                                 to={"/components/breadcrumb"}
@@ -607,8 +602,6 @@ const MobileSidebar = ({ startContent, setStartContent }) => {
                                 onClick={() => setStartContent(140)}
                             >
                                 Pie Chart
-
-                                <NewBadge />
                             </Link>
                             <Link
                                 to={"/components/timeline"}
diff --git a/src/Components/Overview/Sidebar/index.jsx b/src/Components/Overview/Sidebar/index.jsx
index 159341d..bc6b004 100644
--- a/src/Components/Overview/Sidebar/index.jsx
+++ b/src/Components/Overview/Sidebar/index.jsx
@@ -394,8 +394,6 @@ const index = ({ startContent, setStartContent }) => {
                   onClick={() => setStartContent(55)}
               >
                 Carousel
-
-                  <NewBadge/>
               </Link>
 
               {/* navigation */}
@@ -414,7 +412,6 @@ const index = ({ startContent, setStartContent }) => {
                   onClick={() => setStartContent(22)}
               >
                 Pagination
-                  <UpdateBadge/>
               </Link>
               <Link
                   to={"/components/progress-bar"}
@@ -447,8 +444,6 @@ const index = ({ startContent, setStartContent }) => {
                   onClick={() => setStartContent(210)}
               >
                 Timer
-
-                  <NewBadge/>
               </Link>
               <Link
                   to={"/components/breadcrumb"}
@@ -643,8 +638,6 @@ const index = ({ startContent, setStartContent }) => {
                 onClick={() => setStartContent(140)}
               >
                 Pie Chart
-
-                <NewBadge/>
               </Link>
               <Link
                   to={"/components/timeline"}
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx
new file mode 100644
index 0000000..e8d783f
--- /dev/null
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import {AiOutlinePlus} from "react-icons/ai";
+
+const CheckoutPageExample2 = () => {
+    return (
+        <div className="w-full flex">
+
+            {/* Left Column - Order Summary */}
+            <div className='bg-gray-50 rounded-md p-8 flex-1'>
+
+                {/* order summery */}
+                <div>
+                    <h2 className="text-[1.2rem] text-gray-700 font-semibold mb-6">Your order</h2>
+                    <div className="border border-gray-200 rounded-md">
+                        <div className="flex items-center gap-4 p-4">
+                            <div className='border relative border-gray-200 rounded-md bg-white'>
+                                <img src="https://i.ibb.co.com/x6fq6nC/Rectangle-516.png" alt="Nike Air Zoom Pegasus 39"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className='px-[0.45rem] rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm'>1</span>
+                            </div>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className='flex items-center gap-[30px] mt-2'>
+                                    <p className="text-sm text-gray-500">Size: <b className='text-gray-800'>XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className='text-gray-800'>Blue</b>
+                                    </p>
+                                </div>
+                            </div>
+                            <span className="font-medium">$28.00</span>
+                        </div>
+                        <div className="flex items-center gap-4 border-t p-4 border-gray-200">
+                            <div className='border relative border-gray-200 rounded-md bg-white'>
+                                <img src="https://i.ibb.co.com/VJKrBt5/Rectangle-519.png"
+                                     alt="Nike React Pegasus Trail 4"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className='px-1.5 rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm'>3</span>
+                            </div>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className='flex items-center gap-[30px] mt-2'>
+                                    <p className="text-sm text-gray-500">Size: <b className='text-gray-800'>XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className='text-gray-800'>Blue</b>
+                                    </p>
+                                </div>
+                            </div>
+                            <span className="font-medium">$28.00</span>
+                        </div>
+                    </div>
+                    <div className="mt-6">
+                        <h3 className="font-medium mb-2 text-[1rem] text-gray-800">Discount Code</h3>
+                        <div className="flex gap-2 relative">
+                            <img alt='discount/png' src='https://i.ibb.co.com/r7rF8xK/ticket-discount.png'
+                                 className='w-[25px] absolute transform top-[50%] translate-y-[-50%] left-2'/>
+                            <input type="text" placeholder="BUYRI"
+                                   className="border w-full border-gray-200 bg-transparent outline-none focus:border-[#0FABCA] rounded pl-10 pr-3 py-2"/>
+                            <button
+                                className='absolute top-[50%] transform translate-y-[-50%] right-5 text-[0.9rem] text-[#0FABCA]'>Apply
+                            </button>
+                        </div>
+                    </div>
+                    <div className="mt-8 space-y-2 border-t border-gray-200 pt-6">
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Subtotal</span>
+                            <span className='text-[1rem] font-medium text-gray-800'>$56.00</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Shipping Cost</span>
+                            <span className='text-[1rem] font-medium text-gray-800'>$8.00</span>
+                        </div>
+                        <div className="flex justify-between pb-3">
+                            <span className="text-[1rem] text-gray-500">Discount (10%)</span>
+                            <span className='text-[1rem] font-medium text-gray-800'>-$13.00</span>
+                        </div>
+                        <div className="flex justify-between border-t border-gray-200 pt-5 font-medium">
+                            <span>Total</span>
+                            <span className='text-[1rem] font-medium text-gray-800'>$51.00</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Right Column - Checkout Form */}
+            <div className="flex-1 px-8">
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="email"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Email</label>
+                        <input type="email" id="email" placeholder="joylawson@gmail.com"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                    </div>
+                    <div>
+                        <label htmlFor="phone" className="text-[1rem] font-medium text-gray-800 mb-1">Phone
+                            number</label>
+                        <div className="flex gap-2">
+                            <select
+                                className="border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5 w-[100px]">
+                                <option value="us">🇺🇸 +1</option>
+                                <option value="uk">🇬🇧 +44</option>
+                                <option value="in">🇮🇳 +91</option>
+                                <option value="bd">🇧🇩 +880</option>
+                                <option value="au">🇦🇺 +61</option>
+                                <option value="ca">🇨🇦 +1</option>
+                                <option value="de">🇩🇪 +49</option>
+                                <option value="fr">🇫🇷 +33</option>
+                                <option value="jp">🇯🇵 +81</option>
+                                <option value="za">🇿🇦 +27</option>
+                            </select>
+                            <input type="tel" id="phone" placeholder="(201) 830-8210"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                    </div>
+                    <div>
+                        <div className='flex items-center justify-between mb-2'>
+                            <label className="text-[1rem] font-medium text-gray-800">Payment method</label>
+                            <button type="button" className="text-blue-600 text-right flex text-[0.9rem] items-center gap-[5px]">
+                                <AiOutlinePlus/>
+                                Add new
+                            </button>
+                        </div>
+                        <div className="flex w-full gap-4">
+                            <label
+                                className="flex-1 flex items-center justify-between gap-2 border-gray-200 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="card" className="form-radio"
+                                               defaultChecked/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className='flex items-center gap-[5px] pl-5 mt-0.5'>
+                                        <p className='text-[0.9rem] text-gray-500'>Visa •</p>
+                                        <p className='text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer'> Edit</p>
+                                    </div>
+                                </div>
+                                <img src="https://i.ibb.co.com/NFwm4jb/Visa.png" alt="Visa"
+                                     className="w-[50px]"/>
+                            </label>
+                            <label
+                                className="flex-1 flex items-center justify-between border-gray-200 gap-2 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="paypal" className="form-radio"/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className='flex items-center gap-[5px] pl-5 mt-0.5'>
+                                    <p className='text-[0.9rem] text-gray-500'>Paypal •</p>
+                                        <p className='text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer'> Edit</p>
+                                    </div>
+                                </div>
+                                <img src="https://i.ibb.co.com/W3ykxd5/paypal.png" alt="PayPal"
+                                     className="w-[50px]"/>
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                    <label htmlFor="cardHolder" className="text-[1rem] font-medium text-gray-800 mb-1">Card
+                            holder name</label>
+                        <input type="text" id="cardHolder" placeholder="Ex. Jane Cooper"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                    </div>
+                    <div>
+                        <label htmlFor="billingAddress"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Billing address</label>
+                        <select id="billingAddress"
+                                className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5">
+                            <option>United States</option>
+                            <option>United Kingdom</option>
+                            <option>India</option>
+                            <option>Bangladesh</option>
+                            <option>Australia</option>
+                            <option>Canada</option>
+                            <option>Germany</option>
+                            <option>France</option>
+                            <option>Japan</option>
+                            <option>South Africa</option>
+                        </select>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <label htmlFor="zipCode" className="text-[1rem] font-medium text-gray-800 mb-1">Zip
+                                code</label>
+                            <input type="text" id="zipCode" placeholder="Ex. 73923"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                        <div>
+                            <label htmlFor="city"
+                                   className="text-[1rem] font-medium text-gray-800 mb-1">City</label>
+                            <input type="text" id="city" placeholder="Ex. New York"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <input type="checkbox" id="sameAsShipping" className="form-checkbox"/>
+                        <label htmlFor="sameAsShipping" className="text-sm text-gray-600">Billing address is
+                            same as shipping</label>
+                    </div>
+                    <button type="submit"
+                            className="w-full bg-[#0FABCA] text-white py-3 rounded-lg hover:bg-[#0FABCA]/90">
+                        Pay $51.00
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default CheckoutPageExample2;
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
index cb81b04..4707479 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
@@ -11,6 +11,7 @@ import BlocksFooter from "../../../../../../Shared/BlocksFooter.jsx";
 // toggle card view
 import {useToggleCardView} from "../../../../../../CustomHooks/ButtonToggle.js";
 import CheckoutPageExample1 from "./CheckoutPageExample1.jsx";
+import CheckoutPageExample2 from "./CheckoutPageExample2.jsx";
 
 const Index = () => {
 
@@ -61,6 +62,47 @@ const Index = () => {
                     }
                 </div>
 
+                <div className='mt-8'>
+                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                </div>
+
+                <p className="w-full text-text text-[1rem]">
+                    A 404 page is a custom error page that informs users the requested page is not found, often offering
+                    navigation links to guide them back to the homepage or other sections.
+                </p>
+
+                <div className="w-full border border-border rounded mt-8">
+                    <div className="relative">
+                        <div
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                        <button
+                            className={`${
+                                wrongRoute1Preview && "text-tabTextColor"
+                            } px-6 py-2 border-b z-[2] relative text-text border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                        >
+                            Preview
+                        </button>
+                        <button
+                            className={`${
+                                wrongRoute1Code && "text-tabTextColor"
+                            } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
+                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                        >
+                            Code
+                        </button>
+                    </div>
+                    {wrongRoute1Preview && (
+                        <div className={`p-8 flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
+                            <CheckoutPageExample2/>
+                        </div>
+                    )}
+
+                    {wrongRoute1Code && <BlocksShowCode code='
+                    '/>
+                    }
+                </div>
+
                 <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
                               forwardUrl='/blocks/empty-page' forwardName='empty page'/>
             </div>
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
index a6e87ee..a8b32c9 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
@@ -433,8 +433,8 @@ const AdsCard = () => {
                     <OverviewFooter
                         backUrl='/components/product-card'
                         backName='product card'
-                        forwardName='offer grid'
-                        forwardUrl='/components/offer-grid'
+                        forwardName='Code'
+                        forwardUrl='/components/code'
                     />
                 </div>
 
@@ -457,7 +457,7 @@ const AdsCard = () => {
                 </div>
             </aside>
             <Helmet>
-                <title>Form - Radio</title>
+                <title>E-Commerce - Ads Card</title>
             </Helmet>
         </>
     );
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
index 88bc4c8..3bcaff0 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -9,19 +9,18 @@ import Showcode from "../../../../../Shared/ShowCode";
 import OverviewFooter from "../../../../../Shared/OverviewFooter";
 
 // contents for scrollspy
-import {dialogContents} from '../../../../../Utils/ContentsConfig/FeedbackContents';
 import {useScrollSpy} from '../../../../../CustomHooks/useScrollSpy';
+import {productCardsContents} from "../../../../../Utils/ContentsConfig/ECommerceContents.js";
 
 // icons
 import {FaPlus} from "react-icons/fa6";
-import {FaHeart, FaRegHeart, FaStar, FaUser} from "react-icons/fa";
+import {FaHeart, FaRegHeart, FaStar} from "react-icons/fa";
 import {RiHeartAddLine, RiHeartFill} from "react-icons/ri";
 import {FiArrowUpRight, FiMinus, FiPlus} from "react-icons/fi";
 import {IoBagHandleOutline, IoCartOutline, IoEyeOutline, IoGift} from "react-icons/io5";
 import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
 import {MdLocalShipping} from "react-icons/md";
 import {HiArrowsUpDown} from "react-icons/hi2";
-import {productCardsContents} from "../../../../../Utils/ContentsConfig/ECommerceContents.js";
 
 const ProductCard = () => {
     const sectionIds = productCardsContents.map(item => item.href.slice(1));
@@ -1043,7 +1042,7 @@ const ProductCard = () => {
                 </div>
             </aside>
             <Helmet>
-                <title>Feedback - Product Card</title>
+                <title>E-Commerce - Product Card</title>
             </Helmet>
         </>
     );
diff --git a/src/Components/Overview/SidebarContent/Content/Feedback/Notification.jsx b/src/Components/Overview/SidebarContent/Content/Feedback/Notification.jsx
index 8dde284..6d274b9 100644
--- a/src/Components/Overview/SidebarContent/Content/Feedback/Notification.jsx
+++ b/src/Components/Overview/SidebarContent/Content/Feedback/Notification.jsx
@@ -666,7 +666,7 @@ export default Notification;
                 <div
                   className={` ${
                     autoClose ? 'translate-y-0' : 'translate-y-[100px]'
-                  } transition-all duration-300  rounded-md bg-white fixed bottom-[20px] right-[20px] z-30 text-text notificationShadow border border-gray-200 flex items-start justify-between px-5 py-4 gap-[10px]`}
+                  } transition-all duration-300  rounded-md bg-white fixed bottom-[20px] right-[20px] z-[20000000000000] text-text notificationShadow border border-gray-200 flex items-start justify-between px-5 py-4 gap-[10px]`}
                 >
                   <div className='flex items-start gap-[10px]'>
                     <MdOutlineDone className='text-green-500 text-[1.3rem] mt-0.5 border border-green-500 rounded-full p-0.5' />
@@ -682,7 +682,7 @@ export default Notification;
                 <div
                   className={` ${
                     closeWithIcon ? 'translate-y-0' : 'translate-y-[100px]'
-                  } transition-all duration-300  rounded-md bg-white fixed bottom-[20px] right-[20px] z-30 text-text notificationShadow border border-gray-200 flex items-start justify-between px-5 py-4 gap-[10px] group`}
+                  } transition-all duration-300  rounded-md bg-white fixed bottom-[20px] right-[20px] z-[20000000000] text-text notificationShadow border border-gray-200 flex items-start justify-between px-5 py-4 gap-[10px] group`}
                 >
                   <div className='flex items-start gap-[10px] pr-[20px]'>
                     <BiError className='text-red-500 text-[1.2rem] mt-0.5' />
@@ -842,7 +842,7 @@ export default Notification;
                 <div
                   className={` ${
                     visible ? 'translate-y-0' : 'translate-y-[100px]'
-                  } transition-all duration-300  rounded-md bg-white fixed bottom-[20px] right-[20px] z-30 text-text notificationShadow flex items-start justify-between px-5 py-4 gap-[10px]`}
+                  } transition-all duration-300 rounded-md bg-white fixed bottom-[20px] right-[20px] z-[2000000000] text-text notificationShadow flex items-start justify-between px-5 py-4 gap-[10px]`}
                 >
                   <div className='flex items-start gap-[10px]'>
                     <MdOutlineDone className='text-green-500 text-[1.3rem] mt-0.5 border border-green-500 rounded-full p-0.5' />
diff --git a/src/Utils/SearchData.js b/src/Utils/SearchData.js
index 51b7011..ea84654 100644
--- a/src/Utils/SearchData.js
+++ b/src/Utils/SearchData.js
@@ -292,6 +292,18 @@ export const componentSearchData = [
         description: 'Chronological event or process visualization',
         url: '/components/timeline',
         tags: ['ui', 'display', 'chronology']
+    },
+    {
+        title: 'Product Card',
+        description: 'E-commerce product cards with animation and basic functionality.',
+        url: '/components/product-card',
+        tags: ['e-commerce', 'product', 'card', 'animation']
+    },
+    {
+        title: 'Ads Card',
+        description: 'Ads cards for showing ads in e-commerce website.',
+        url: '/components/ads-card',
+        tags: ['e-commerce', 'ads', 'card', 'animation']
     }
 ];
 
@@ -361,5 +373,23 @@ export const blocksSearchData = [
         description: 'Flexible side navigation that adapts to screen dimensions',
         url: '/blocks/responsive-sidebar',
         tags: ['navigation', 'layout', 'responsive']
+    },
+    {
+        title: 'Checkout Page',
+        description: 'Checkout page with selected products and payment options.',
+        url: '/blocks/checkout-page',
+        tags: ['e-commerce', 'checkout', 'payment']
+    },
+    {
+        title: 'Product Details Page',
+        description: 'Product details page with functionality and product view carousel.',
+        url: '/blocks/product-details-page',
+        tags: ['e-commerce', 'product details page', 'product', 'details']
+    },
+    {
+        title: 'Offer Grid',
+        description: 'Grid layouts for showing e-commerce product offers.',
+        url: '/blocks/offer-grid',
+        tags: ['e-commerce', 'offer', 'product', 'grid layout']
     }
 ];
\ No newline at end of file

From 060aad92be19e862beef11ec0fa611ed9424eee8 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sun, 8 Dec 2024 21:55:58 +0600
Subject: [PATCH 17/22] update: product card and ads card component code added

---
 .../Content/ECommerce/AdsCard.jsx             | 321 +++++--
 .../Content/ECommerce/ProductCard.jsx         | 875 ++++++++++++++++--
 src/Shared/Demo.jsx                           | 143 +--
 3 files changed, 1071 insertions(+), 268 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
index a8b32c9..33afea8 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/AdsCard.jsx
@@ -5,7 +5,6 @@ import OverviewFooter from '../../../../../Shared/OverviewFooter';
 import ContentHeader from '../../../../../Shared/ContentHeader';
 
 // contents for scrollspy
-import { radioInputContents } from '../../../../../Utils/ContentsConfig/InputContents';
 import { useScrollSpy } from '../../../../../CustomHooks/useScrollSpy';
 
 // react helmet
@@ -20,38 +19,33 @@ import {HiArrowRight} from "react-icons/hi";
 // sidebar contents
 import {adsCardContents} from "../../../../../Utils/ContentsConfig/ECommerceContents.js";
 
+import {useToggleCardView} from "../../../../../CustomHooks/ButtonToggle.js";
+
 const AdsCard = () => {
     // const [contentActiveTab, setContentActiveTab] = useState(0);
     const sectionIds = adsCardContents.map((item) => item.href.slice(1));
     const activeSection = useScrollSpy(sectionIds);
 
-    // circle radio
-    const [circlePreview, setCirclePreview] = useState(true);
-    const [circleCode, setCircleCode] = useState(false);
+    // toggle actions
+    const toggleCardView = useToggleCardView();
+
+    const[adsCard1Preview, setAdsCard1Preview] = useState(true);
+    const[adsCard1Code, setAdsCard1Code] = useState(false);
 
-    const handleCirclePreview = () => {
-        setCirclePreview(true);
-        setCircleCode(false);
-    };
+    const[adsCard2Preview, setAdsCard2Preview] = useState(true);
+    const[adsCard2Code, setAdsCard2Code] = useState(false);
 
-    const handleCircleCode = () => {
-        setCircleCode(true);
-        setCirclePreview(false);
-    };
+    const[adsCard3Preview, setAdsCard3Preview] = useState(true);
+    const[adsCard3Code, setAdsCard3Code] = useState(false);
 
-    // square radio
-    const [squarePreview, setSquarePreview] = useState(true);
-    const [squareCode, setSquareCode] = useState(false);
+    const[adsCard4Preview, setAdsCard4Preview] = useState(true);
+    const[adsCard4Code, setAdsCard4Code] = useState(false);
 
-    const handleSquarePreview = () => {
-        setSquarePreview(true);
-        setSquareCode(false);
-    };
+    const[adsCard5Preview, setAdsCard5Preview] = useState(true);
+    const[adsCard5Code, setAdsCard5Code] = useState(false);
 
-    const handleSquareCode = () => {
-        setSquareCode(true);
-        setSquarePreview(false);
-    };
+    const[adsCard6Preview, setAdsCard6Preview] = useState(true);
+    const[adsCard6Code, setAdsCard6Code] = useState(false);
 
     return (
         <>
@@ -67,33 +61,33 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    circlePreview
+                                    adsCard1Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    circlePreview && 'text-tabTextColor'
+                                    adsCard1Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleCirclePreview}
+                                onClick={()=> toggleCardView(setAdsCard1Preview, setAdsCard1Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    circleCode && 'text-tabTextColor'
+                                    adsCard1Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleCircleCode}
+                                onClick={()=> toggleCardView(setAdsCard1Preview, setAdsCard1Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {circlePreview && (
+                        {adsCard1Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[62%] bg-[#F7E99E] rounded-md p-6 text-center'>
+                                <div className='w-full 640px:w-[62%] bg-[#F7E99E] rounded-md p-4 640px:p-6 text-center'>
                                     <img alt='product/image' src='https://i.ibb.co.com/qrzTZqK/Image-5.png' className='w-[150px] mx-auto'/>
-                                    <h3 className='text-[1.6rem] leading-[35px] font-semibold'>Xiaomi True Wireless Earbuds</h3>
+                                    <h3 className='text-[1.3rem] 640px:text-[1.6rem] leading-[28px] 640px:leading-[35px] font-semibold'>Xiaomi True Wireless Earbuds</h3>
                                     <p className='text-gray-700 mt-2'>Escape the noise, It’s time to hear the magic with Xiaomi Earbuds.</p>
                                     <div className='flex items-center justify-center my-5 gap-[10px]'>
                                         <p className='text-[1rem] text-gray-700'>Only for:</p>
@@ -107,9 +101,37 @@ const AdsCard = () => {
                             </div>
                         )}
 
-                        {circleCode && (
+                        {adsCard1Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+// react icons
+import {BsArrowRight} from "react-icons/bs";
+
+const AdsCard = () => {
+
+    return (
+        <div className="w-full md:w-[62%] bg-[#F7E99E] rounded-md p-4 md:p-6 text-center">
+            <img alt="product/image" src="https://i.ibb.co.com/qrzTZqK/Image-5.png" className="w-[150px] mx-auto"/>
+            <h3 className="text-[1.3rem] md:text-[1.6rem] leading-[28px] md:leading-[35px] font-semibold">Xiaomi
+                True Wireless Earbuds</h3>
+            <p className="text-gray-700 mt-2">Escape the noise, It’s time to hear the magic with Xiaomi Earbuds.</p>
+            <div className="flex items-center justify-center my-5 gap-[10px]">
+                <p className="text-[1rem] text-gray-700">Only for:</p>
+                <span
+                    className="py-1.5 px-3 bg-white rounded-md font-semibold text-gray-900 text-[0.9rem]">$299 USD</span>
+            </div>
+            <button
+                className="group flex items-center gap-[10px] w-full bg-[#FA8232] text-white py-2.5 rounded-md hover:bg-[#DE732D] transition-all duration-300 px-4 justify-center">
+                Shop now
+                <BsArrowRight className="group-hover:ml-1 transition-all duration-300"/>
+            </button>
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
@@ -127,32 +149,32 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    squarePreview
+                                    adsCard2Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    squarePreview && 'text-tabTextColor'
+                                    adsCard2Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleSquarePreview}
+                                onClick={()=> toggleCardView(setAdsCard2Preview, setAdsCard2Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    squareCode && 'text-tabTextColor'
+                                    adsCard2Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleSquareCode}
+                                onClick={()=> toggleCardView(setAdsCard2Preview, setAdsCard2Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {squarePreview && (
+                        {adsCard2Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='bg-[#F2F4F5] p-8 gap-[15px] w-full rounded-md flex items-center justify-between'>
-                                    <div className='w-[55%]'>
+                                <div className='bg-[#F2F4F5] p-5 640px:p-8 gap-[30px] 640px:gap-[15px] w-full rounded-md flex flex-col 640px:flex-row 640px:items-center 640px:justify-between'>
+                                    <div className='w-full 640px:w-[55%]'>
                                         <span className='py-1.5 px-4 text-[0.8rem] rounded-md bg-blue-400 text-white'>INTRODUCING</span>
                                         <h3 className='text-[1.4rem] font-semibold text-gray-900 my-2'>New Apple Homepod Mini</h3>
                                         <p className='text-[0.9rem] text-gray-700 mb-4'>Jam-packed with innovation, HomePod mini delivers unexpectedly.</p>
@@ -162,7 +184,7 @@ const AdsCard = () => {
                                             <BsArrowRight className='group-hover:ml-1 transition-all duration-300'/>
                                         </button>
                                     </div>
-                                    <div className='w-[40%]'>
+                                    <div className='w-[90%] mx-auto 640px:w-[40%]'>
                                         <img alt='product/image' src='https://i.ibb.co.com/jyffZqg/image-6.png'
                                              className=''/>
                                     </div>
@@ -170,9 +192,39 @@ const AdsCard = () => {
                             </div>
                         )}
 
-                        {squareCode && (
+                        {adsCard2Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+// react icons
+import {BsArrowRight} from "react-icons/bs";
+
+const AdsCard = () => {
+
+    return (
+        <div
+            className="bg-[#F2F4F5] p-5 md:p-8 gap-[30px] md:gap-[15px] w-full rounded-md flex flex-col md:flex-row md:items-center md:justify-between">
+            <div className="w-full md:w-[55%]">
+                <span className="py-1.5 px-4 text-[0.8rem] rounded-md bg-blue-400 text-white">INTRODUCING</span>
+                <h3 className="text-[1.4rem] font-semibold text-gray-900 my-2">New Apple Homepod Mini</h3>
+                <p className="text-[0.9rem] text-gray-700 mb-4">Jam-packed with innovation, HomePod mini delivers
+                    unexpectedly.</p>
+                <button
+                    className="group w-max flex items-center gap-[10px] bg-[#FA8232] text-white py-2.5 rounded-md hover:bg-[#DE732D] transition-all duration-300 px-8 justify-center">
+                    Shop now
+                    <BsArrowRight className="group-hover:ml-1 transition-all duration-300"/>
+                </button>
+            </div>
+            <div className="w-[90%] mx-auto md:w-[40%]">
+                <img alt="product/image" src="https://i.ibb.co.com/jyffZqg/image-6.png"
+                     className=""/>
+            </div>
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
@@ -190,31 +242,31 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    squarePreview
+                                    adsCard3Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    squarePreview && 'text-tabTextColor'
+                                    adsCard3Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleSquarePreview}
+                                onClick={()=> toggleCardView(setAdsCard3Preview, setAdsCard3Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    squareCode && 'text-tabTextColor'
+                                    adsCard3Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleSquareCode}
+                                onClick={()=> toggleCardView(setAdsCard3Preview, setAdsCard3Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {squarePreview && (
+                        {adsCard3Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[80%] relative'>
+                                <div className='w-full 640px:w-[80%] relative'>
 
                                     {/* offer details */}
                                     <div className='bg-white rounded-l-md rounded-r-[60px] absolute top-3 left-3 pl-3.5 pr-6 py-1.5'>
@@ -230,9 +282,34 @@ const AdsCard = () => {
                             </div>
                         )}
 
-                        {squareCode && (
+                        {adsCard3Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+const AdsCard = () => {
+
+    return (
+        <div className="w-full md:w-[80%] relative">
+
+            {/* offer details */}
+            <div className="bg-white rounded-l-md rounded-r-[60px] absolute top-3 left-3 pl-3.5 pr-6 py-1.5">
+                <p className="text-[1rem] text-[#0BAF9A] leading-[15px] mt-1.5">Hot Deals!</p>
+                <span className="text-gray-600 text-[0.9rem] tracking-wider">Fruit & Vegetables</span>
+            </div>
+
+            <img alt="product/image" src="https://i.ibb.co.com/h7Jfs7s/div-offer-banner-1.png" className="rounded-xl"/>
+
+            {/* action button */}
+            <button
+                className="absolute bottom-3 right-3 py-[8px] px-5 text-white bg-[#0BAF9A] rounded-full font-medium">View
+                Offer
+            </button>
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
@@ -250,31 +327,31 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    squarePreview
+                                    adsCard4Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    squarePreview && 'text-tabTextColor'
+                                    adsCard4Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleSquarePreview}
+                                onClick={()=> toggleCardView(setAdsCard4Preview, setAdsCard4Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    squareCode && 'text-tabTextColor'
+                                    adsCard4Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleSquareCode}
+                                onClick={()=> toggleCardView(setAdsCard4Preview, setAdsCard4Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {squarePreview && (
+                        {adsCard4Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[60%] overflow-hidden flex items-center justify-center flex-col pt-12 p-6 bg-[#0BAF9A] rounded-xl'>
+                                <div className='w-full 640px:w-[60%] overflow-hidden flex items-center justify-center flex-col pt-12 p-6 bg-[#0BAF9A] rounded-xl'>
 
                                     <h4 className='text-center text-[1.2rem] font-medium text-white'>Fresh & 100% Organic</h4>
                                     <p className='text-[1rem] text-center text-[#FFFFFF]'>farmer's market</p>
@@ -287,9 +364,32 @@ const AdsCard = () => {
                             </div>
                         )}
 
-                        {squareCode && (
+                        {adsCard4Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+const AdsCard = () => {
+
+    return (
+        <div
+            className="w-full md:w-[60%] overflow-hidden flex items-center justify-center flex-col pt-12 p-6 bg-[#0BAF9A] rounded-xl">
+
+            <h4 className="text-center text-[1.2rem] font-medium text-white">Fresh & 100% Organic</h4>
+            <p className="text-[1rem] text-center text-[#FFFFFF]">farmer"s market</p>
+
+            <button
+                className="py-2 px-6 rounded-md bg-white text-[#0BAF9A] font-[400] text-[1rem] mx-auto mb-5 mt-4">Shop
+                Now
+            </button>
+
+            <img alt="product/image" src="https://i.ibb.co.com/xfp5R3W/basket-png.png" className="w-[400px] mx-auto"/>
+
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
@@ -307,31 +407,31 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    squarePreview
+                                    adsCard5Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    squarePreview && 'text-tabTextColor'
+                                    adsCard5Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleSquarePreview}
+                                onClick={()=> toggleCardView(setAdsCard5Preview, setAdsCard5Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    squareCode && 'text-tabTextColor'
+                                    adsCard5Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleSquareCode}
+                                onClick={()=> toggleCardView(setAdsCard5Preview, setAdsCard5Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {squarePreview && (
+                        {adsCard5Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[70%] relative'>
+                                <div className='w-full 640px:w-[70%] relative'>
 
                                     <img alt='product/image' src='https://i.ibb.co.com/PC8s3B6/Link-2.png'
                                          className='w-full'/>
@@ -352,9 +452,39 @@ const AdsCard = () => {
                             </div>
                         )}
 
-                        {squareCode && (
+                        {adsCard5Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+// react icons
+import {MdKeyboardArrowRight} from "react-icons/md";
+
+const AdsCard = () => {
+
+    return (
+        <div className="w-full md:w-[70%] relative">
+
+            <img alt="product/image" src="https://i.ibb.co.com/PC8s3B6/Link-2.png"
+                 className="w-full"/>
+
+            <div className="absolute top-[50%] transform translate-y-[-50%] left-8">
+                <p className="text-[1rem] font-[300] text-gray-900">Today Special</p>
+                <h4 className="text-[1.3rem] mt-2 font-semibold text-gray-900">Fruits Juice
+                    Series</h4>
+
+                <button
+                    className="py-2 text-[#239698] font-semibold mt-2 group hover:underline text-[1rem] flex items-center gap-[10px]">
+                    Shop Now
+                    <MdKeyboardArrowRight className="text-[1.3rem] group-hover:ml-1 transition-all duration-300"/>
+                </button>
+            </div>
+
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
@@ -372,37 +502,37 @@ const AdsCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    squarePreview
+                                    adsCard6Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[105px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    squarePreview && 'text-tabTextColor'
+                                    adsCard6Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleSquarePreview}
+                                onClick={()=> toggleCardView(setAdsCard6Preview, setAdsCard6Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    squareCode && 'text-tabTextColor'
+                                    adsCard6Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleSquareCode}
+                                onClick={()=> toggleCardView(setAdsCard6Preview, setAdsCard6Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {squarePreview && (
+                        {adsCard6Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-12'>
+                                <div className='wful 640px:w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-7 640px:px-12'>
 
                                     {/* coupon */}
-                                    <span className='py-2 font-semibold px-4 rounded-md absolute right-6 z-20 top-6 bg-[#EFD33D]'>29% OFF</span>
+                                    <span className='py-1 640px:py-2 font-semibold px-3 640px:px-4 rounded-md absolute right-4 640px:right-6 z-20 top-4 640px:top-6 bg-[#EFD33D]'>29% OFF</span>
 
                                     {/* offer details */}
-                                    <div className='w-[45%]'>
+                                    <div className='w-full 640px:w-[45%] z-30'>
                                         <p className='text-[1rem] font-[300] text-[#EBC80C]'>Summer Sales</p>
                                         <h4 className='text-[1.5rem] mt-2 font-medium text-white'>New Google Pixel 6 Pro</h4>
 
@@ -416,15 +546,52 @@ const AdsCard = () => {
 
                                     {/* product image */}
                                     <img alt='product/image' src='https://i.ibb.co.com/WWTSSbm/image-5-1.png'
-                                         className='w-[220px] absolute right-0 bottom-0'/>
+                                         className='w-[130px] 640px:w-[220px] absolute right-0 bottom-0'/>
 
                                 </div>
                             </div>
                         )}
 
-                        {squareCode && (
+                        {adsCard6Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+// react icons
+import {HiArrowRight} from "react-icons/hi";
+
+const AdsCard = () => {
+
+    return (
+        <div
+            className="wful md:w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-7 md:px-12">
+
+            {/* coupon */}
+            <span
+                className="py-1 md:py-2 font-semibold px-3 md:px-4 rounded-md absolute right-4 md:right-6 z-20 top-4 md:top-6 bg-[#EFD33D]">29% OFF</span>
+
+            {/* offer details */}
+            <div className="w-full md:w-[45%] z-30">
+                <p className="text-[1rem] font-[300] text-[#EBC80C]">Summer Sales</p>
+                <h4 className="text-[1.5rem] mt-2 font-medium text-white">New Google Pixel 6 Pro</h4>
+
+                <button
+                    className="py-2 px-5 text-white font-medium mt-5 group hover:bg-[#ed6104] transition-all duration-300 text-[1rem] flex items-center gap-[10px] bg-[#FA8232] rounded-md">
+                    Shop Now
+                    <HiArrowRight
+                        className="text-[1.3rem] group-hover:ml-1 transition-all duration-300"/>
+                </button>
+            </div>
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/WWTSSbm/image-5-1.png"
+                 className="w-[130px] md:w-[220px] absolute right-0 bottom-0"/>
+
+        </div>
+    );
+};
+
+export default AdsCard;
                 '
                             />
                         )}
diff --git a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
index 3bcaff0..2158581 100644
--- a/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
+++ b/src/Components/Overview/SidebarContent/Content/ECommerce/ProductCard.jsx
@@ -22,6 +22,8 @@ import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
 import {MdLocalShipping} from "react-icons/md";
 import {HiArrowsUpDown} from "react-icons/hi2";
 
+import {useToggleCardView} from "../../../../../CustomHooks/ButtonToggle.js";
+
 const ProductCard = () => {
     const sectionIds = productCardsContents.map(item => item.href.slice(1));
     const activeSection = useScrollSpy(sectionIds);
@@ -40,8 +42,37 @@ const ProductCard = () => {
         setBasicDialogPreview(false);
     };
 
-    // all actions
+    // toggle actions
+    const toggleCardView = useToggleCardView();
+
+    const [productCard1Preview, setProductCard1Preview] = useState(true);
+    const [productCard1Code, setProductCard1Code] = useState(false);
+
+    const [productCard2Preview, setProductCard2Preview] = useState(true);
+    const [productCard2Code, setProductCard2Code] = useState(false);
+
+    const [productCard3Preview, setProductCard3Preview] = useState(true);
+    const [productCard3Code, setProductCard3Code] = useState(false);
+
+    const [productCard4Preview, setProductCard4Preview] = useState(true);
+    const [productCard4Code, setProductCard4Code] = useState(false);
+
+    const [productCard5Preview, setProductCard5Preview] = useState(true);
+    const [productCard5Code, setProductCard5Code] = useState(false);
+
+    const [productCard6Preview, setProductCard6Preview] = useState(true);
+    const [productCard6Code, setProductCard6Code] = useState(false);
+
+    const [productCard7Preview, setProductCard7Preview] = useState(true);
+    const [productCard7Code, setProductCard7Code] = useState(false);
 
+    const [productCard8Preview, setProductCard8Preview] = useState(true);
+    const [productCard8Code, setProductCard8Code] = useState(false);
+
+    const [productCard9Preview, setProductCard9Preview] = useState(true);
+    const [productCard9Code, setProductCard9Code] = useState(false);
+
+    // functionality actions
     const [rating, setRating] = useState(5);
     const [isFavorite, setIsFavorite] = useState(false);
     const [count, setCount] = useState(0);
@@ -78,31 +109,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard1Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard1Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard1Preview, setProductCard1Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard1Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard1Preview, setProductCard1Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard1Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[50%] group'>
+                                <div className='w-full 640px:w-[50%] group'>
 
                                     {/* image & action buttons */}
                                     <div onMouseOver={() => setProductCardHover(true)}
@@ -237,9 +268,178 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard1Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {IoMdHeartEmpty} from "react-icons/io";
+import {HiArrowsUpDown} from "react-icons/hi2";
+import {IoBagHandleOutline, IoEyeOutline} from "react-icons/io5";
+import {FiMinus, FiPlus} from "react-icons/fi";
+import {FaStar} from "react-icons/fa";
+
+const ProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+    const [count, setCount] = useState(0);
+
+    const [wishlistVisible, setWishlistVisible] = useState(false);
+    const [compareVisible, setCompareVisible] = useState(false);
+    const [quickViewVisible, setQuickViewVisible] = useState(false);
+
+    const [productCardHover, setProductCardHover] = useState(false);
+
+    const handleIncrement = () => {
+        setCount(prevValue => prevValue + 1);
+    }
+
+    const handleDecrement = () => {
+        setCount(prevValue => prevValue - 1);
+    }
+
+    const handleInputValueChange = (e) => {
+        setCount(Number(e.target.value));
+    }
+
+    return (
+        <div className="w-full md:w-[50%] group">
+
+            {/* image & action buttons */}
+            <div onMouseOver={() => setProductCardHover(true)}
+                 onMouseOut={() => setProductCardHover(false)}
+                 className="w-full relative cursor-pointer overflow-hidden">
+                <img alt="product/image"
+                     src={
+                         productCardHover
+                             ? "//wpbingo-fashow.myshopify.com/cdn/shop/products/63.jpg?v=1665549687"
+                             : "//wpbingo-fashow.myshopify.com/cdn/shop/products/62.jpg?v=1665549687"
+                     }
+                     className="w-full"/>
+
+                <div className="absolute bottom-0 left-0 w-full">
+                    {/* quick action buttons */}
+                    <div className="flex items-center gap-[15px] justify-center">
+
+                        <div onMouseOver={() => setWishlistVisible(true)}
+                             onMouseOut={() => setWishlistVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <IoMdHeartEmpty className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${wishlistVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Wishlist
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+
+                        <div onMouseOver={() => setCompareVisible(true)}
+                             onMouseOut={() => setCompareVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <HiArrowsUpDown className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${compareVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Compare
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+
+                        <div onMouseOver={() => setQuickViewVisible(true)}
+                             onMouseOut={() => setQuickViewVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <IoEyeOutline className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${quickViewVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Quick View
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* quantity & add cart */}
+                    <div
+                        className="w-full flex mt-6 items-center opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 translate-y-[60px] bg-[rgb(0,0,0,0.5)]">
+
+                        {/* quantity */}
+                        <div
+                            className="flex w-[50%] justify-center px-2 py-0.5 items-center border-r border-gray-400 text-white">
+                            <button
+                                className="active:bg-gray-100 p-[6px] rounded-full text-white transition-all duration-300 active:text-gray-700 text-[0.9rem]"
+                                onClick={handleDecrement}><FiMinus/></button>
+                            <input type="number" value={count}
+                                   className="w-[40px] py-2.5 outline-none focus:ring-0 border-none text-center text-[0.9rem] bg-transparent"
+                                   onInput={handleInputValueChange}/>
+                            <button
+                                className="active:bg-gray-100 p-[6px] rounded-full text-white transition-all duration-300 active:text-gray-700 text-[0.9rem]"
+                                onClick={handleIncrement}><FiPlus/></button>
+                        </div>
+
+                        {/* add to cart */}
+                        <button
+                            className="py-[13px] overflow-hidden before:w-full before:h-full before:bg-[#0FABCA] before:absolute before:top-0 z-0 before:z-[-1] before:translate-x-[-150px] hover:before:translate-x-0 before:transition-all before:duration-300 before:left-0 relative flex items-center justify-center grow text-white">
+                            <IoBagHandleOutline className="text-[1.3rem]"/>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* product details */}
+            <div className="mt-4">
+
+                {/* review area */}
+                <div className="flex items-center justify-center gap-[10px] mt-2">
+                    <div className="flex items-center space-x-1">
+                        {[...Array(5)].map((_, index) => {
+                            const starRating = index + 1;
+                            return (
+                                <FaStar
+                                    key={starRating}
+                                    className={`cursor-pointer ${
+                                        starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                    }`}
+                                    size={16}
+                                    onClick={() => setRating(starRating)}
+                                />
+                            );
+                        })}
+                    </div>
+                    <span className="text-[0.9rem] text-gray-500">(43)</span>
+                </div>
+
+                <h3 className="text-[1rem] font-medium text-center mt-0.5 text-gray-900">Drop-shoulder
+                    synthetic</h3>
+                <p className="text-center mt-0.5 text-[0.9rem] text-gray-900">Tk 1,800.00</p>
+
+                <div className="flex items-center gap-[10px] justify-center mt-3">
+                    <div
+                        className="w-4 h-4 rounded-full bg-red-500 outline outline-1 outline-red-500 outline-offset-2 cursor-pointer"></div>
+                    <div className="w-4 h-4 rounded-full bg-green-500 cursor-pointer"></div>
+                    <div className="w-4 h-4 rounded-full bg-blue-500 cursor-pointer"></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -257,29 +457,29 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard2Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard2Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard2Preview, setProductCard2Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard2Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard2Preview, setProductCard2Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard2Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
                                 <div className='border border-gray-300 rounded-md p-5'>
 
@@ -328,9 +528,68 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard2Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {FaStar} from "react-icons/fa";
+import {FaPlus} from "react-icons/fa6";
+
+const ProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+
+    return (
+        <div className="border border-gray-300 rounded-md p-5">
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/VN5sNHX/Link-14-png.png"
+                 className="w-[250px] mt-2"/>
+
+            {/* product details */}
+            <div className="mt-3">
+                <h3 className="text-[1.1rem] font-semibold">Frooti Mango Drink</h3>
+
+                {/* rating area */}
+                <div className="flex items-center gap-[10px] mt-2">
+                    <div className="flex items-center space-x-1">
+                        {[...Array(5)].map((_, index) => {
+                            const starRating = index + 1;
+                            return (
+                                <FaStar
+                                    key={starRating}
+                                    className={`cursor-pointer ${
+                                        starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                    }`}
+                                    size={16}
+                                    onClick={() => setRating(starRating)}
+                                />
+                            );
+                        })}
+                    </div>
+                    <span className="text-[0.9rem] text-gray-500">(43)</span>
+                </div>
+
+                <div className="flex items-end justify-between mt-2">
+                    <div>
+                        <p className="text-[0.9rem] text-gray-500">1 KG</p>
+                        <p className="text-[1rem] font-semibold mt-1 text-[#0FABCA]">$ 80.00</p>
+                    </div>
+
+                    <button
+                        className="py-2 px-4 bg-[#0FABCA] text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0195af] transition-all duration-200">
+                        Add
+                        <FaPlus/>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -348,31 +607,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard3Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard3Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard3Preview, setProductCard3Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard3Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard3Preview, setProductCard3Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard3Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='relative border w-[55%] border-gray-300 rounded-md p-5'>
+                                <div className='relative border w-full 640px:w-[55%] border-gray-300 rounded-md p-5'>
 
                                     {/* favorite icon */}
                                     <FaHeart onClick={() => setIsFavorite(false)}
@@ -436,9 +695,101 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard3Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {FaHeart, FaRegHeart, FaStar} from "react-icons/fa";
+import {FiMinus, FiPlus} from "react-icons/fi";
+import {IoCartOutline} from "react-icons/io5";
+
+const ProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+    const [isFavorite, setIsFavorite] = useState(false);
+    const [count, setCount] = useState(0);
+
+
+    const handleIncrement = () => {
+        setCount(prevValue => prevValue + 1);
+    }
+
+    const handleDecrement = () => {
+        setCount(prevValue => prevValue - 1);
+    }
+
+    const handleInputValueChange = (e) => {
+        setCount(Number(e.target.value));
+    }
+
+    return (
+        <div className="relative border w-full md:w-[55%] border-gray-300 rounded-md p-5">
+
+            {/* favorite icon */}
+            <FaHeart onClick={() => setIsFavorite(false)}
+                     className={` ${isFavorite ? "opacity-100 scale-[1] z-10" : "opacity-0 scale-[0.7] z-[-1]"} text-[1.4rem] absolute top-3 text-red-500 right-3 cursor-pointer transition-all duration-300`}/>
+            <FaRegHeart onClick={() => setIsFavorite(true)}
+                        className={`${isFavorite ? "opacity-0 scale-[0.7] z-[-1]" : "opacity-100 scale-[1] z-10"} text-[1.4rem] absolute top-3 right-3 text-gray-600 cursor-pointer transition-all duration-300`}/>
+
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/p0CjNLD/Link-11-png.png"
+                 className="w-[150px] mt-2 mx-auto"/>
+
+            {/* product details */}
+            <div className="mt-8">
+
+                {/* rating area */}
+                <div className="flex items-center space-x-1">
+                    {[...Array(5)].map((_, index) => {
+                        const starRating = index + 1;
+                        return (
+                            <FaStar
+                                key={starRating}
+                                className={`cursor-pointer ${
+                                    starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                }`}
+                                size={16}
+                                onClick={() => setRating(starRating)}
+                            />
+                        );
+                    })}
+                </div>
+
+                <h3 className="text-[1.1rem] font-medium mt-1.5">Cucumber</h3>
+
+                <div className="flex items-center gap-[10px]">
+                    <p className="text-[1rem] font-semibold mt-1 text-[#0FABCA]">$70.21</p>
+                    <del className="text-[1rem] font-normal mt-1 text-gray-500 ">$80.50</del>
+                </div>
+
+                <div className="flex items-center w-full justify-between mt-4">
+
+                    <div className="flex items-center border border-gray-200 rounded-md">
+                        <button
+                            className="bg-gray-100 p-[9px] rounded-l-md text-gray-600 text-[1.1rem]"
+                            onClick={handleDecrement}><FiMinus/></button>
+                        <input type="number" value={count}
+                               className="w-[50px] py-[4px] outline-none text-gray-600 focus:ring-0 border-none text-center text-[1.1rem]"
+                               onInput={handleInputValueChange}/>
+                        <button
+                            className="bg-gray-100 p-[9px] rounded-r-md text-gray-600 text-[1.1rem]"
+                            onClick={handleIncrement}><FiPlus/></button>
+                    </div>
+
+                    <button
+                        className="py-2 px-4 bg-[#0FABCA] text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0195af] transition-all duration-200">
+                        <IoCartOutline className="text-[1.3rem]"/>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -456,31 +807,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard4Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard4Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard4Preview, setProductCard4Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard4Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard4Preview, setProductCard4Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard4Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='border border-gray-300 rounded-xl p-2 w-[70%]'>
+                                <div className='border border-gray-300 rounded-xl p-2 w-full 640px:w-[70%]'>
 
                                     {/* product image */}
                                     <div className='relative'>
@@ -508,7 +859,7 @@ const ProductCard = () => {
                                             Business Keynote</h3>
 
                                         {/* authors & reviews */}
-                                        <div className='flex items-center justify-between mt-1'>
+                                        <div className='flex flex-col 640px:flex-row 640px:items-center justify-between mt-1'>
                                             <p className='text-gray-400 text-[0.9rem]'>by <span
                                                 className='text-black'>Criphin</span> in <span
                                                 className='text-black'>Graphics</span></p>
@@ -559,9 +910,102 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard4Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {FaStar} from "react-icons/fa";
+import {IoCartOutline} from "react-icons/io5";
+import {IoIosHeart, IoMdHeartEmpty} from "react-icons/io";
+
+const ProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    return (
+        <div className="border border-gray-300 rounded-xl p-2 w-full md:w-[70%]">
+
+            {/* product image */}
+            <div className="relative">
+                <img alt="product/image" src="https://i.ibb.co.com/cTTfNRw/Link-1.png"
+                     className="w-full"/>
+
+                {/* favorite icon */}
+                <div className="p-2 rounded-full bg-gray-600 absolute top-2 right-2">
+                    {
+                        isFavorite ? (
+                            <IoIosHeart onClick={() => setIsFavorite(false)}
+                                        className={`text-[#0FABCA] text-[1.2rem] cursor-pointer`}/>
+                        ) : (
+                            <IoMdHeartEmpty onClick={() => setIsFavorite(true)}
+                                            className={` text-white text-[1.2rem] cursor-pointer`}/>
+                        )
+                    }
+
+                </div>
+            </div>
+
+            {/* product details */}
+            <div className="mt-2 pt-0 p-1">
+                <h3 className="text-[1.1rem] font-medium line-clamp-1">Criphin - Contemporary
+                    Business Keynote</h3>
+
+                {/* authors & reviews */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between mt-1">
+                    <p className="text-gray-400 text-[0.9rem]">by <span
+                        className="text-black">Criphin</span> in <span
+                        className="text-black">Graphics</span></p>
+
+                    {/* review area */}
+                    <div className="flex items-center gap-[10px]">
+                        <div className="flex items-center space-x-1">
+                            {[...Array(5)].map((_, index) => {
+                                const starRating = index + 1;
+                                return (
+                                    <FaStar
+                                        key={starRating}
+                                        className={`cursor-pointer ${
+                                            starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                        }`}
+                                        size={15}
+                                        onClick={() => setRating(starRating)}
+                                    />
+                                );
+                            })}
+                        </div>
+                        <span className="text-[0.8rem] text-gray-500">(4.8)</span>
+                    </div>
+                </div>
+
+                {/* price and action btn */}
+                <div className="flex items-end justify-between mt-5">
+                    <div>
+                        <span className="text-gray-400 text-[0.9rem]">168 Sales</span>
+                        <p className="text-[1.150rem] font-semibold text-[#0FABCA]">$52.00</p>
+                    </div>
+
+                    <div className="flex items-center gap-[10px]">
+                        <button
+                            className="py-2 px-4 border border-[#0FABCA] text-white rounded-md flex items-center group gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200">
+                            <IoCartOutline
+                                className="text-[1.3rem] group-hover:text-white text-[#0FABCA]"/>
+                        </button>
+
+                        <button
+                            className="py-2 px-4 border border-[#0FABCA] text-[#0FABCA] hover:text-white rounded-md flex items-center gap-[0.5rem] text-[0.9rem] hover:bg-[#0FABCA] transition-all duration-200">
+                            Preview
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -579,31 +1023,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard5Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard5Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard5Preview, setProductCard5Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard5Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard5Preview, setProductCard5Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard5Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[55%] relative rounded-md overflow-hidden'>
+                                <div className='w-full 640px:w-[55%] relative rounded-md overflow-hidden'>
 
                                     {/* badge */}
                                     <span
@@ -625,9 +1069,36 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard5Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+const ProductCard = () => {
+    return (
+        <div className="w-full md:w-[55%] relative rounded-md overflow-hidden">
+
+            {/* badge */}
+            <span
+                className="bg-red-500 rounded-sm px-3 py-1 text-[0.9rem] text-white absolute top-3 left-3">Best</span>
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/wrYPvfd/Link-31-jpg.png"
+                 className="w-full"/>
+
+            {/* product details */}
+            <div className="mt-2">
+                <span className="text-gray-400 text-[0.9rem]">Biography</span>
+                <h3 className="text-[1.1rem] font-medium mt-2">Home Decor Lucky Deer Family
+                    Matte Finish Ceramic Figures</h3>
+                <p className="text-[0.9rem] text-gray-400 mt-1">By Ellie Thomson, Henry</p>
+                <p className="text-[1.1rem] font-semibold mt-1 text-[#0FABCA]">$80.00</p>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -645,31 +1116,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard6Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard6Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard6Preview, setProductCard6Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard6Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard6Preview, setProductCard6Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard6Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='border border-gray-300 w-[60%] relative rounded-2xl overflow-hidden'>
+                                <div className='border border-gray-300 w-full 640px:w-[60%] relative rounded-2xl overflow-hidden'>
 
                                     {/* badge */}
                                     <span
@@ -730,9 +1201,84 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard6Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {MdLocalShipping} from "react-icons/md";
+import {IoGift} from "react-icons/io5";
+import {FiArrowUpRight} from "react-icons/fi";
+import {RiHeartAddLine, RiHeartFill} from "react-icons/ri";
+
+const ProductCard = () => {
+
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    return (
+        <div className="border border-gray-300 w-full md:w-[60%] relative rounded-2xl overflow-hidden">
+
+            {/* badge */}
+            <span
+                className="bg-red-500 rounded-b-md px-3 py-1 text-[0.9rem] text-white absolute top-0 left-4">Best Value</span>
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/z4BV3S2/image-1.png"
+                 className="w-full mt-6"/>
+
+            {/* product details */}
+            <div className="p-4 pt-0">
+                <h3 className="text-[1.4rem] font-semibold mb-1 mt-2">Apple</h3>
+
+                <span className="text-[0.9rem] font-normal text-gray-500 line-clamp-2">2020 Apple MacBook Pro with Apple M1 Chip (13-inch, 8GB RAM, 256GB SSD Storage) - Silver</span>
+
+                {/* price & discount offer */}
+                <div className="flex items-center mt-3 gap-[15px]">
+                    <p className="text-[1.150rem] font-semibold mt-1">$1024.99+</p>
+
+                    <p className="border text-green-600 text-[0.8rem] border-green-400 px-2 py-1 rounded-md">35%
+                        Off</p>
+                </div>
+
+                {/* shipping offers */}
+                <div
+                    className="flex items-center border-t border-gray-300 mt-3 gap-[15px] pt-[5px]">
+                    <div className="flex items-center gap-[6px] text-gray-400 text-[0.9rem]">
+                        <MdLocalShipping/>
+                        <p>Free shipping</p>
+                    </div>
+                    <div className="flex items-center gap-[6px] text-gray-400 text-[0.9rem]">
+                        <IoGift/>
+                        <p>Free gift</p>
+                    </div>
+                </div>
+
+                {/* actions */}
+                <div className="flex items-center justify-between mt-7 gap-[15px]">
+                    <button
+                        className="py-[9px] px-4 text-white rounded-2xl grow justify-center flex items-center gap-[0.5rem] hover:bg-[#01849b] text-[1rem] bg-[#0FABCA] transition-all duration-200">
+                        View Deal
+                        <FiArrowUpRight className="text-[1.3rem]"/>
+                    </button>
+                    <button className="p-[9px] rounded-full border-2 border-[#0FABCA]">
+                        {
+                            isFavorite ? (
+                                <RiHeartFill onClick={() => setIsFavorite(false)}
+                                             className="text-[#0FABCA] text-[1.3rem]"/>
+                            ) : (
+                                <RiHeartAddLine onClick={() => setIsFavorite(true)}
+                                                className="text-[#0FABCA] text-[1.3rem]"/>
+                            )
+                        }
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -750,31 +1296,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard7Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard7Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard7Preview, setProductCard7Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard7Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard7Preview, setProductCard7Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard7Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='border border-gray-300 w-[60%] relative rounded-2xl overflow-hidden'>
+                                <div className='border border-gray-300 w-full 640px:w-[60%] relative rounded-2xl overflow-hidden'>
 
                                     {/* badge */}
                                     <span
@@ -876,9 +1422,129 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard7Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {IoEyeOutline} from "react-icons/io5";
+import {IoMdHeartEmpty} from "react-icons/io";
+import {HiArrowsUpDown} from "react-icons/hi2";
+import {FaStar} from "react-icons/fa";
+
+const ProductCard = () => {
+
+    const [wishlistVisible, setWishlistVisible] = useState(false);
+    const [compareVisible, setCompareVisible] = useState(false);
+    const [quickViewVisible, setQuickViewVisible] = useState(false);
+
+    const [rating, setRating] = useState(5);
+
+    return (
+        <div className="border border-gray-300 w-full md:w-[60%] relative rounded-2xl overflow-hidden">
+
+            {/* badge */}
+            <span
+                className="bg-red-500 rounded-sm px-3 py-1 z-10 text-[0.9rem] text-white absolute top-3 left-3">HOT</span>
+
+            {/* product image */}
+            <div className="group relative overflow-hidden cursor-pointer">
+                <img alt="product/image" src="https://i.ibb.co.com/kcYX9md/Image-2.png"
+                     className="w-[240px] mx-auto mt-5"/>
+
+                {/* action buttons */}
+                <div className="absolute bg-[rgb(0,0,0,0.3)] z-30 opacity-0 group-hover:opacity-100 transition-all duration-300 bottom-0 left-0 flex items-center justify-center w-full h-full">
+                    <div className="flex items-center gap-[15px] justify-center">
+
+                        <div onMouseOver={() => setWishlistVisible(true)}
+                             onMouseOut={() => setWishlistVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 translate-y-[50px] transition-all opacity-0 group-hover:opacity-100 duration-300">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <IoMdHeartEmpty className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${wishlistVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Wishlist
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+
+                        <div onMouseOver={() => setCompareVisible(true)}
+                             onMouseOut={() => setCompareVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100 translate-y-[80px]">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <HiArrowsUpDown className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${compareVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Compare
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+
+                        <div onMouseOver={() => setQuickViewVisible(true)}
+                             onMouseOut={() => setQuickViewVisible(false)}
+                             className="relative w-max group-hover:translate-y-0 transition-all duration-700 opacity-0 group-hover:opacity-100 translate-y-[110px]">
+                            <p className="rounded-full bg-white p-2 hover:bg-[#0FABCA] hover:text-white transition-all duration-200 cursor-pointer">
+                                <IoEyeOutline className="text-[1.3rem]"/>
+                            </p>
+
+                            {/* tooltip */}
+                            <p className={`${quickViewVisible ? "opacity-100 z-[100] translate-y-0" : "opacity-0 z-[-1] translate-y-[20px]"} absolute top-[-50px] transform translate-x-[-50%] left-[50%] w-max py-[7px] px-[20px] rounded-md bg-gray-800 text-[0.9rem] text-white font-[400] transition-all duration-200`}>
+                                Quick View
+
+                                {/* arrow */}
+                                <span
+                                    className="w-[8px] h-[8px] bg-gray-800 rotate-[45deg] absolute left-[50%] transform translate-x-[-50%] bottom-[-10%]"></span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* product details */}
+            <div className="p-4 pt-6">
+
+                {/* review area */}
+                <div className="flex items-center gap-[10px]">
+                    <div className="flex items-center space-x-1">
+                        {[...Array(5)].map((_, index) => {
+                            const starRating = index + 1;
+                            return (
+                                <FaStar
+                                    key={starRating}
+                                    className={`cursor-pointer ${
+                                        starRating <= rating ? "text-[#FA8232]" : "text-gray-300"
+                                    }`}
+                                    size={15}
+                                    onClick={() => setRating(starRating)}
+                                />
+                            );
+                        })}
+                    </div>
+                    <span className="text-[0.8rem] text-gray-500">(738)</span>
+                </div>
+
+                <h3 className="text-[1.1rem] text-gray-900 font-medium mb-2 mt-2">TOZO T6 True
+                    Wireless
+                    Earbuds Bluetooth Headphon</h3>
+                <p className="text-[1.150rem] font-medium text-[#0FABCA] mt-1">$70</p>
+
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -896,34 +1562,34 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard8Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard8Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard8Preview, setProductCard8Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard8Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard8Preview, setProductCard8Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard8Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[80%] border border-gray-300 rounded-md px-4 flex items-center gap-[10px]'>
+                                <div className='w-full 640px:w-[80%] border border-gray-300 rounded-md px-4 flex flex-col 640px:flex-row 640px:items-center 640px:gap-[10px]'>
                                     <img alt='product/image' src='https://i.ibb.co.com/FDsyM7X/Image-4.png' className='w-[120px]'/>
 
-                                    <div>
+                                    <div className='pb-4 640px:pb-0'>
                                         <h3 className='text-[1.1rem] font-medium line-clamp-2'>Portable Wshing Machine, 11lbs capacity Model 18NMF</h3>
                                         <p className='text-[1rem] font-medium text-[#0FABCA] mt-1'>$1,500</p>
                                     </div>
@@ -931,9 +1597,27 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard8Code && (
                             <Showcode
                                 code='
+import React from "react";
+
+const ProductCard = () => {
+    return (
+        <div
+            className="w-full md:w-[80%] border border-gray-300 rounded-md px-4 flex flex-col md:flex-row md:items-center md:gap-[10px]">
+            <img alt="product/image" src="https://i.ibb.co.com/FDsyM7X/Image-4.png" className="w-[120px]"/>
+
+            <div className="pb-4 md:pb-0">
+                <h3 className="text-[1.1rem] font-medium line-clamp-2">Portable Wshing Machine, 11lbs capacity Model
+                    18NMF</h3>
+                <p className="text-[1rem] font-medium text-[#0FABCA] mt-1">$1,500</p>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
@@ -951,31 +1635,31 @@ const ProductCard = () => {
                         <div className='relative'>
                             <div
                                 className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${
-                                    basicDialogPreview
+                                    productCard9Preview
                                         ? 'translate-x-[0px] !w-[100px]'
                                         : 'translate-x-[107px] rounded-br'
                                 }`}
                             ></div>
                             <button
                                 className={`${
-                                    basicDialogPreview && 'text-tabTextColor'
+                                    productCard9Preview && 'text-tabTextColor'
                                 } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                                onClick={handleBasicDialogPreview}
+                                onClick={() => toggleCardView(setProductCard9Preview, setProductCard9Code, true)}
                             >
                                 Preview
                             </button>
                             <button
                                 className={`${
-                                    basicDialogCode && 'text-tabTextColor'
+                                    productCard9Code && 'text-tabTextColor'
                                 } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                                onClick={handleBasicDialogCode}
+                                onClick={() => toggleCardView(setProductCard9Preview, setProductCard9Code, false)}
                             >
                                 Code
                             </button>
                         </div>
-                        {basicDialogPreview && (
+                        {productCard9Preview && (
                             <div className='p-8 mb-4 flex items-center flex-col gap-5 justify-center'>
-                                <div className='w-[80%] justify-center flex items-center gap-[10px]'>
+                                <div className='w-full 640px:w-[80%] justify-center flex flex-col 640px:flex-row 640px:items-center gap-[10px]'>
                                     <img alt='product/image' src='https://i.ibb.co.com/HHP2J04/7-jpg.png' className='w-[80px] rounded-md'/>
 
                                     <div>
@@ -1007,9 +1691,52 @@ const ProductCard = () => {
                             </div>
                         )}
 
-                        {basicDialogCode && (
+                        {productCard9Code && (
                             <Showcode
                                 code='
+import React, {useState} from "react";
+
+// react icons
+import {FaStar} from "react-icons/fa";
+
+const ProductCard = () => {
+
+    const [rating, setRating] = useState(5);
+
+    return (
+        <div className="w-full md:w-[80%] justify-center flex flex-col md:flex-row md:items-center gap-[10px]">
+            <img alt="product/image" src="https://i.ibb.co.com/HHP2J04/7-jpg.png" className="w-[80px] rounded-md"/>
+
+            <div>
+                <h3 className="text-[1.1rem] font-medium line-clamp-2">Good Life Raw Peanuts</h3>
+
+                {/* review area */}
+                <div className="flex items-center gap-[10px] mb-2">
+                    <div className="flex items-center space-x-1">
+                        {[...Array(5)].map((_, index) => {
+                            const starRating = index + 1;
+                            return (
+                                <FaStar
+                                    key={starRating}
+                                    className={`cursor-pointer ${
+                                        starRating <= rating ? "text-yellow-400" : "text-gray-300"
+                                    }`}
+                                    size={15}
+                                    onClick={() => setRating(starRating)}
+                                />
+                            );
+                        })}
+                    </div>
+                    <span className="text-[0.8rem] text-gray-500">(4.8)</span>
+                </div>
+
+                <p className="text-[1rem] font-medium text-[#0FABCA] mt-1">$85.00</p>
+            </div>
+        </div>
+    );
+};
+
+export default ProductCard;
           '
                             />
                         )}
diff --git a/src/Shared/Demo.jsx b/src/Shared/Demo.jsx
index 6004856..51fe557 100644
--- a/src/Shared/Demo.jsx
+++ b/src/Shared/Demo.jsx
@@ -1,128 +1,37 @@
-import React, {useState} from "react";
+import React from "react";
 
-const SmartPagination = () => {
-    const [currentPagePagination, setCurrentPagePagination] = useState(1);
+// react icons
+import {HiArrowRight} from "react-icons/hi";
 
-    const totalPageNumber = 50;
-
-    const handlePreviousPagination = () => {
-        if (currentPagePagination > 1) {
-            setCurrentPagePagination((prev) => prev - 1);
-        }
-    };
-
-    const handleNextPagination = () => {
-        if (currentPagePagination < totalPageNumber) {
-            setCurrentPagePagination((prev) => prev + 1);
-        }
-    };
-
-    const handlePageClick = (pageNumber) => {
-        setCurrentPagePagination(pageNumber);
-    };
-
-    const renderPageNumbersForPagination = () => {
-        const pageNumbers = [];
-        const startPage = Math.max(2, currentPagePagination - 1);
-        const endPage = Math.min(
-            totalPageNumber - 1,
-            currentPagePagination + 1
-        );
-
-        pageNumbers.push(
-            <PageButton
-                key={1}
-                pageNumber={1}
-                isActive={currentPagePagination === 1}
-                onClick={handlePageClick}
-            />
-        );
-
-        if (startPage > 2) {
-            pageNumbers.push(
-                <span key="start-dots" className="mx-1 px-2 text-gray-500">
-          ...
-        </span>
-            );
-        }
-
-        for (let i = startPage; i <= endPage; i++) {
-            pageNumbers.push(
-                <PageButton
-                    key={i}
-                    pageNumber={i}
-                    isActive={currentPagePagination === i}
-                    onClick={handlePageClick}
-                />
-            );
-        }
-
-        if (endPage < totalPageNumber - 1) {
-            pageNumbers.push(
-                <span key="end-dots" className="mx-1 px-2 text-gray-500">
-          ...
-        </span>
-            );
-        }
-
-        pageNumbers.push(
-            <PageButton
-                key={totalPageNumber}
-                pageNumber={totalPageNumber}
-                isActive={currentPagePagination === totalPageNumber}
-                onClick={handlePageClick}
-            />
-        );
-
-        return pageNumbers;
-    };
+const AdsCard = () => {
     
     return (
         <div
-            className="flex items-center justify-center flex-col sm:flex-row mt-8 sm:space-x-4 space-y-4 sm:space-y-0 md:space-y-4 py-7">
-
-            <button
-                onClick={handlePreviousPagination}
-                disabled={currentPagePagination === 1}
-                className={`px-4 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium transition-colors duration-300 ${
-                    currentPagePagination === 1
-                        ? "bg-gray-200 !text-gray-400 cursor-not-allowed"
-                        : ""
-                }`}
-            >
-                Previous
-            </button>
-            <div className="flex gap-[5px] sm:gap-[8px]">
-                {renderPageNumbersForPagination()}
+            className="wful md:w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-7 md:px-12">
+
+            {/* coupon */}
+            <span
+                className="py-1 md:py-2 font-semibold px-3 md:px-4 rounded-md absolute right-4 md:right-6 z-20 top-4 md:top-6 bg-[#EFD33D]">29% OFF</span>
+
+            {/* offer details */}
+            <div className="w-full md:w-[45%] z-30">
+                <p className="text-[1rem] font-[300] text-[#EBC80C]">Summer Sales</p>
+                <h4 className="text-[1.5rem] mt-2 font-medium text-white">New Google Pixel 6 Pro</h4>
+
+                <button
+                    className="py-2 px-5 text-white font-medium mt-5 group hover:bg-[#ed6104] transition-all duration-300 text-[1rem] flex items-center gap-[10px] bg-[#FA8232] rounded-md">
+                    Shop Now
+                    <HiArrowRight
+                        className="text-[1.3rem] group-hover:ml-1 transition-all duration-300"/>
+                </button>
             </div>
-            <button
-                onClick={handleNextPagination}
-                disabled={currentPagePagination === totalPageNumber}
-                className={`px-4 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium transition-colors duration-300 ${
-                    currentPagePagination === totalPageNumber
-                        ? "bg-gray-200 !text-gray-400 cursor-not-allowed"
-                        : ""
-                }`}
-            >
-                Next
-            </button>
+
+            {/* product image */}
+            <img alt="product/image" src="https://i.ibb.co.com/WWTSSbm/image-5-1.png"
+                 className="w-[130px] md:w-[220px] absolute right-0 bottom-0"/>
 
         </div>
     );
 };
 
-export default SmartPagination;
-
-// page button
-const PageButton = ({ pageNumber, isActive, onClick }) => (
-    <button
-        onClick={() => onClick(pageNumber)}
-        className={`px-4 py-2 rounded-lg font-medium transition-colors duration-300 ${
-            isActive
-                ? "bg-blue-600 text-white shadow-lg"
-                : "bg-gray-100 text-gray-600 hover:bg-blue-500 hover:text-white"
-        }`}
-    >
-        {pageNumber}
-    </button>
-);
+export default AdsCard;

From dbfb603dfdb5fefdb3d5670088c0464248944743 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sun, 8 Dec 2024 22:15:46 +0600
Subject: [PATCH 18/22] update: offer grid mobile responsive complete

---
 .../Blocks/E-Commerce/OfferGrid.jsx           | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
index 69399d3..7156b60 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
@@ -84,7 +84,7 @@ const OfferGrid = () => {
                     {wrongRoute1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
-                            <div className='grid grid-cols-2 gap-[15px] w-[80%] min-h-[550px]'>
+                            <div className='grid grid-cols-1 1024px:grid-cols-2 gap-[15px] w-full 640px:w-[80%] min-h-[550px]'>
 
                                 <div
                                     className='col-span-1 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-[#f2f4f6] h-full py-8'>
@@ -178,12 +178,12 @@ const OfferGrid = () => {
                     {wrongRoute1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
-                            <div className='grid grid-cols-4 gap-[15px] w-[80%] min-h-[400px]'>
+                            <div className='grid grid-cols-1 1024px:grid-cols-4 gap-[15px] w-full 640px:w-[80%] min-h-[400px]'>
 
                                 <div
-                                    className='col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-black h-full py-8 relative'>
+                                    className='col-span-1 1024px:col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-1 1024px:row-span-2 h-[170px] bg-black 1024px:h-full py-8 relative'>
 
-                                    <div className='px-8 absolute bottom-8 z-20 w-[70%]'>
+                                    <div className='px-8 absolute bottom-8 z-20 w-full 1024px:w-[70%]'>
                                         <h4 className='text-[1.1rem] font-medium text-white'>PlayStation 5</h4>
                                         <p className='text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]'>Black and White version of the PS5 coming out on sale.</p>
                                         <button
@@ -197,9 +197,9 @@ const OfferGrid = () => {
                                 </div>
 
                                 <div
-                                    className='bg-black rounded-sm col-span-2 flex justify-between items-center px-4 overflow-hidden relative min-h-[190px]'>
+                                    className='bg-black rounded-sm col-span-1 1024px:col-span-2 flex justify-between items-center px-4 overflow-hidden relative min-h-[190px]'>
 
-                                    <div className='absolute bottom-6 left-6 z-20 w-[50%]'>
+                                    <div className='absolute bottom-6 left-6 z-20 w-[70%] 1024px:w-[50%]'>
                                         <h4 className='text-[1.1rem] font-medium text-white'>Women’s Collections</h4>
                                         <p className='text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]'>Featured woman collections that give you another vibe.</p>
                                         <button
@@ -293,13 +293,13 @@ const OfferGrid = () => {
                     {wrongRoute1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
-                            <div className="grid grid-cols-4 w-full h-[450px]">
+                            <div className="grid grid-cols-1 1024px:grid-cols-4 w-full 1024px:h-[450px]">
 
                                 <div
-                                    className='col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-white h-full py-8 relative'>
+                                    className='col-span-1 1024px:col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-1 1024px:row-span-2 bg-white h-[180px] 1024px:h-full py-8 relative'>
 
-                                    <div className='px-8 absolute top-[50%] translate-y-[-50%] right-7 z-20 w-[60%]'>
-                                        <h4 className='text-[1.5rem] font-medium text-gray-900'>PlayStation 5</h4>
+                                    <div className='px-8 absolute top-[50%] translate-y-[-50%] 1024px:right-7 z-20 w-full 1024px:w-[60%]'>
+                                        <h4 className='text-[1.5rem] font-medium text-white 1024px:text-gray-900'>PlayStation 5</h4>
                                         <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>Incredibly powerful CPUs, GPUs, and an SSD with integrated I/O will redefine your PlayStation experience.</p>
                                     </div>
 
@@ -309,9 +309,9 @@ const OfferGrid = () => {
                                 </div>
 
                                 <div
-                                    className='bg-[#EDEDED] rounded-sm col-span-2 flex justify-between items-center px-4 overflow-hidden h-full row-span-3 relative'>
+                                    className='bg-[#EDEDED] rounded-sm col-span-1 1024px:col-span-2 flex justify-between items-center px-4 overflow-hidden h-full row-span-3 relative'>
 
-                                    <div className='pl-5 w-[60%]'>
+                                    <div className='p-4 1024px:pl-5 z-30 w-full 1024px:w-[60%]'>
                                         <h4 className='text-[2rem] font-[300] text-gray-900'>Macbook <b className='text-gray-900 font-semibold'>Air</b></h4>
                                         <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>The new 15‑inch MacBook Air makes room for more of what you love with a spacious Liquid Retina display.</p>
                                         <button
@@ -322,14 +322,14 @@ const OfferGrid = () => {
 
                                     <img alt='product/image'
                                          src='https://i.ibb.co.com/JKqHn1w/Mac-Book-Pro-14.png'
-                                         className='w-[180px] absolute top-[50%] transform translate-y-[-50%] right-0'/>
+                                         className='w-[100px] 1024px:w-[180px] absolute top-[50%] transform translate-y-[-50%] right-0'/>
 
                                 </div>
 
                                 <div
                                     className='overflow-hidden flex justify-between flex-col rounded-sm bg-[#EDEDED] py-8 relative min-h-[140px]'>
 
-                                    <div className='absolute top-[50%] transform translate-y-[-50%] right-6 z-20 w-[50%]'>
+                                    <div className='absolute top-[50%] transform translate-y-[-50%] right-6 z-200 w-[70%] 1024px:w-[50%] z-30'>
                                         <h4 className='text-[1.3rem] font-[300] text-gray-900'>Apple <br/>
                                             AirPods <b className='font-semibold'>Max</b></h4>
                                         <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>Computational audio. Listen, it's powerful</p>
@@ -343,7 +343,7 @@ const OfferGrid = () => {
                                 <div
                                     className='overflow-hidden flex justify-between flex-col rounded-sm bg-[#353535] py-8 relative min-h-[140px] h-full'>
 
-                                    <div className='absolute top-[50%] translate-y-[-50%] right-6 z-20 w-[50%]'>
+                                    <div className='absolute top-[50%] translate-y-[-50%] right-6 z-20 w-[70%] 1024px:w-[50%]'>
                                         <h4 className='text-[1.1rem] font-[300] text-white'>Apple <br/>
                                             Vision <b className='font-semibold'>Pro</b></h4>
                                         <p className='text-[0.8rem] mt-1 text-[#909090] font-[300]'>An immersive way to experience entertainment</p>
@@ -397,14 +397,14 @@ const OfferGrid = () => {
                     {wrongRoute1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
-                            <div className='grid grid-cols-2 rounded-md'>
+                            <div className='grid grid-cols-1 1024px:grid-cols-2 rounded-md'>
 
                                 <img alt='product/image' src='https://i.ibb.co.com/wpZ3Vhc/Paste-image.png'
-                                     className='w-full h-full rounded-l-md'/>
+                                     className='w-full h-full rounded-t-md 1024px:rounded-l-md'/>
 
-                                <div className='bg-[#ffd37c] rounded-r-md p-12'>
+                                <div className='bg-[#ffd37c] rounded-b-md 1024px:rounded-r-md p-5 1024px:p-12'>
                                     <span className='text-[0.9rem] font-semibold text-blue-600'>PROMOTION</span>
-                                    <h4 className='text-[1.8rem] font-medium mt-2'>Hurry up! 40% OFF</h4>
+                                    <h4 className='text-[1.5rem] 1024px:text-[1.8rem] font-medium mt-2'>Hurry up! 40% OFF</h4>
                                     <p className='text-[0.9rem] font-normal text-gray-900 mt-2'>Thousands of high tech
                                         are waiting for you</p>
 
@@ -412,19 +412,19 @@ const OfferGrid = () => {
                                         <p className='text-[0.9rem] font-normal text-gray-900'>Offer expires in:</p>
                                         <div className='flex items-center gap-[10px] mt-2'>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.days)}</h5>
+                                                <h5 className='py-1.5 1024px:py-2 px-2.5 1024px:px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.days)}</h5>
                                                 <span className='text-[0.7rem]'>Days</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.hours)}</h5>
+                                                <h5 className='py-1.5 1024px:py-2 px-2.5 1024px:px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.hours)}</h5>
                                                 <span className='text-[0.7rem]'>Hours</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.minutes)}</h5>
+                                                <h5 className='py-1.5 1024px:py-2 px-2.5 1024px:px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.minutes)}</h5>
                                                 <span className='text-[0.7rem]'>Minutes</span>
                                             </div>
                                             <div className='flex items-center justify-center flex-col'>
-                                                <h5 className='py-2 px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.seconds)}</h5>
+                                                <h5 className='py-1.5 1024px:py-2 px-2.5 1024px:px-3 bg-white rounded-sm text-[1.3rem] font-semibold'>{formatNumber(timeLeft.seconds)}</h5>
                                                 <span className='text-[0.7rem]'>Seconds</span>
                                             </div>
                                         </div>
@@ -476,15 +476,15 @@ const OfferGrid = () => {
                     {wrongRoute1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
-                            <div className='flex justify-between items-center w-full py-4 px-8 rounded-md bg-[#FFE7D6]'>
+                            <div className='flex flex-col 1024px:flex-row justify-between items-center w-full 1024px:py-4 py-6 px-6 1024px:px-8 gap-[20px] 1024px:gap-0 rounded-md bg-[#FFE7D6]'>
 
-                                <div className='w-[30%] pl-6'>
+                                <div className='w-full 1024px:w-[30%] 1024px:pl-6'>
 
                                     <span className='bg-[#2DA5F3] rounded-sm py-1.5 px-3 text-[0.8rem] font-normal text-white'>SAVE UP TO $200.00</span>
 
-                                    <h4 className='text-[2rem] mt-2 font-semibold text-gray-800'>Macbook Pro</h4>
+                                    <h4 className='text-[1.7rem] 1024px:text-[2rem] mt-2 font-semibold text-gray-800'>Macbook Pro</h4>
 
-                                    <p className='text-[1rem] mt-3 text-gray-700'>Apple M1 Max Chip. 32GB Unified Memory, 1TB SSD Storage</p>
+                                    <p className='text-[1rem] mt-2 1024px:mt-3 text-gray-700'>Apple M1 Max Chip. 32GB Unified Memory, 1TB SSD Storage</p>
 
                                     <button
                                         className='bg-[#FA8232] flex items-center gap-[10px] py-2 px-4 rounded-sm text-white text-[0.9rem] mt-3 uppercase group'>
@@ -495,7 +495,7 @@ const OfferGrid = () => {
 
                                 <div className='relative'>
 
-                                    <p className='bg-[#FFCEAD] text-gray-900 p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center font-medium border-4 border-white absolute top-3 -left-3'>$1999</p>
+                                    <p className='bg-[#FFCEAD] text-gray-900 p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center font-medium border-4 border-white absolute top-1 1024px:top-3 -left-3'>$1999</p>
 
                                     <img alt='product/image' src='https://i.ibb.co.com/zSm0TRR/Image-6.png'
                                          className='w-[350px] rounded-l-md'/>

From 4fd327b3338e4cb180d5260522a258b28a2f255d Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Sun, 8 Dec 2024 22:32:50 +0600
Subject: [PATCH 19/22] update: heart beat animation added

---
 src/Components/Home/Sponsor.jsx |  2 +-
 src/index.css                   | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Components/Home/Sponsor.jsx b/src/Components/Home/Sponsor.jsx
index 54e0d16..9db84e8 100644
--- a/src/Components/Home/Sponsor.jsx
+++ b/src/Components/Home/Sponsor.jsx
@@ -10,7 +10,7 @@ const Sponsor = () => {
                         Become A <br/>
                         Sponsor
                     </h1>
-                    <FaHeart className='text-[3rem] text-red-500'/>
+                    <FaHeart className='heart-beat-animation text-[3rem] text-red-500'/>
                 </div>
 
                     <a className='py-[11px] px-[40px] bg-white text-[#0FABCA] text-center rounded-md text-[1.4rem] font-[600]' href='mailto:zenuilibrary@gmail.com'>Be Our Sponsor</a>
diff --git a/src/index.css b/src/index.css
index c402ac8..3c565c2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -439,4 +439,17 @@ input[type="number"] {
 
 .animate-bounce-custom {
   animation: bounce-custom 0.6s ease-in-out 2;
+}
+
+@keyframes beat {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.heart-beat-animation {
+  animation: beat 1.2s infinite;
 }
\ No newline at end of file

From 73b0d32c5efa510b65bd367a311df39361b2d06b Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Mon, 9 Dec 2024 22:26:37 +0600
Subject: [PATCH 20/22] update: offer grid and product details page responsive
 and code added complete

---
 .../Blocks/E-Commerce/OfferGrid.jsx           | 464 ++++++++++--
 .../ProductDetailsComponents/Index.jsx        | 714 +++++++++++++++++-
 .../ProductDetailsExample1.jsx                |  28 +-
 .../ProductDetailsExample2.jsx                |   6 +-
 .../ProductDetailsExample3.jsx                |  14 +-
 src/Shared/Demo.jsx                           | 209 ++++-
 6 files changed, 1296 insertions(+), 139 deletions(-)

diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
index 7156b60..d85465e 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/OfferGrid.jsx
@@ -15,11 +15,30 @@ import {HiArrowRight} from "react-icons/hi";
 
 const OfferGrid = () => {
 
-    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
-    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
-
+    // toggle actions
     const toggleCardView = useToggleCardView()
 
+    const [offerGrid1Preview, setOfferGrid1Preview] = useState(true);
+    const [offerGrid1Code, setOfferGrid1Code] = useState(false);
+
+    const [offerGrid2Preview, setOfferGrid2Preview] = useState(true);
+    const [offerGrid2Code, setOfferGrid2Code] = useState(false);
+
+    const [offerGrid3Preview, setOfferGrid3Preview] = useState(true);
+    const [offerGrid3Code, setOfferGrid3Code] = useState(false);
+
+    const [offerGrid4Preview, setOfferGrid4Preview] = useState(true);
+    const [offerGrid4Code, setOfferGrid4Code] = useState(false);
+
+    const [offerGrid5Preview, setOfferGrid5Preview] = useState(true);
+    const [offerGrid5Code, setOfferGrid5Code] = useState(false);
+
+    const [offerGrid6Preview, setOfferGrid6Preview] = useState(true);
+    const [offerGrid6Code, setOfferGrid6Code] = useState(false);
+
+    const [offerGrid7Preview, setOfferGrid7Preview] = useState(true);
+    const [offerGrid7Code, setOfferGrid7Code] = useState(false);
+
     const [timeLeft, setTimeLeft] = useState({
         days: 0,
         hours: 0,
@@ -53,35 +72,34 @@ const OfferGrid = () => {
     return (
         <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
             <div>
-                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                <ContentHeader text={"Offer grid 1"} id={"offer_grid_1"}/>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    Explore exclusive e-commerce offers in a sleek grid layout—top deals, big savings, and premium brands, all at your fingertips!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${offerGrid1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                offerGrid1Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setOfferGrid1Preview, setOfferGrid1Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                offerGrid1Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setOfferGrid1Preview, setOfferGrid1Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {offerGrid1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
                             <div className='grid grid-cols-1 1024px:grid-cols-2 gap-[15px] w-full 640px:w-[80%] min-h-[550px]'>
@@ -140,42 +158,105 @@ const OfferGrid = () => {
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {offerGrid1Code && <BlocksShowCode code='
+import React from "react";
+
+// react icons
+import {HiArrowRight} from "react-icons/hi";
+
+const OfferGrid = () => {
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-[15px] w-full sm:w-[80%] min-h-[550px]">
+
+            <div
+                className="col-span-1 overflow-hidden flex justify-between flex-col rounded-sm row-span-2 bg-[#f2f4f6] h-full py-8">
+                <div className="px-8">
+                    <h4 className="text-[1.5rem] font-medium text-gray-900">Living Room</h4>
+                    <button
+                        className="flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b">
+                        Shop Now
+                        <HiArrowRight className="group-hover:ml-1 transition-all duration-200"/>
+                    </button>
+                </div>
+
+                <img alt="product/image" src="https://i.ibb.co.com/sJvBCfN/Paste-image.png"
+                     className="w-[500px]"/>
+            </div>
+
+            <div
+                className="bg-[#f2f4f6] rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden">
+
+                <div className="px-6 mt-auto pb-9">
+                    <h4 className="text-[1.5rem] font-medium text-gray-900">Bedroom</h4>
+                    <button
+                        className="flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b">
+                        Shop Now
+                        <HiArrowRight className="group-hover:ml-1 transition-all duration-200"/>
+                    </button>
+                </div>
+
+                <img alt="product/image" src="https://i.ibb.co.com/qRMf20H/Paste-image.png"
+                     className="w-[200px] h-[200px]"/>
+
+            </div>
+
+            <div
+                className="bg-[#f2f4f6] rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden">
+
+                <div className="px-6 mt-auto pb-9">
+                    <h4 className="text-[1.5rem] font-medium text-gray-900">Kitchen</h4>
+                    <button
+                        className="flex w-max items-center hover:text-[#0FABCA] hover:border-[#0FABCA] transition-all duration-300 gap-[10px] border-gray-900 text-[0.9rem] mt-2 group border-b">
+                        Shop Now
+                        <HiArrowRight className="group-hover:ml-1 transition-all duration-200"/>
+                    </button>
+                </div>
+
+                <img alt="product/image" src="https://i.ibb.co.com/L9QXpt6/Paste-image.png"
+                     className="w-[200px] h-max"/>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default OfferGrid;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"offer grid 2"} id={"offer_grid_2"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    Explore exclusive e-commerce offers in a sleek grid layout—top deals, big savings, and premium brands, all at your fingertips!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${offerGrid2Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                offerGrid2Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setOfferGrid2Preview, setOfferGrid2Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                offerGrid2Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setOfferGrid2Preview, setOfferGrid2Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {offerGrid2Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
                             <div className='grid grid-cols-1 1024px:grid-cols-4 gap-[15px] w-full 640px:w-[80%] min-h-[400px]'>
@@ -255,42 +336,125 @@ const OfferGrid = () => {
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {offerGrid2Code && <BlocksShowCode code='
+import React from "react";
+
+const OfferGrid = () => {
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-[15px] w-full sm:w-[80%] min-h-[400px]">
+
+            <div
+                className="col-span-1 lg:col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-1 lg:row-span-2 h-[170px] bg-black lg:h-full py-8 relative">
+
+                <div className="px-8 absolute bottom-8 z-20 w-full lg:w-[70%]">
+                    <h4 className="text-[1.1rem] font-medium text-white">PlayStation 5</h4>
+                    <p className="text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]">Black and White version of the PS5
+                        coming out on sale.</p>
+                    <button
+                        className="w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-3 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b">
+                        Shop Now
+                    </button>
+                </div>
+
+                <img alt="product/image" src="https://i.ibb.co.com/g9qmJxg/ps5-slim-goedkope-playstation-large-1.png"
+                     className="w-[350px] absolute bottom-0 left-[50%] transform translate-x-[-50%]"/>
+            </div>
+
+            <div
+                className="bg-black rounded-sm col-span-1 lg:col-span-2 flex justify-between items-center px-4 overflow-hidden relative min-h-[190px]">
+
+                <div className="absolute bottom-6 left-6 z-20 w-[70%] lg:w-[50%]">
+                    <h4 className="text-[1.1rem] font-medium text-white">Women’s Collections</h4>
+                    <p className="text-[0.8rem] mt-3 text-[#FAFAFA] font-[300]">Featured woman collections that give you
+                        another vibe.</p>
+                    <button
+                        className="w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-3 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b">
+                        Shop Now
+                    </button>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/7ghML0N/attractive-woman-wearing-hat-posing-black-background-1.png"
+                     className="w-[300px] absolute bottom-0 right-0"/>
+
+            </div>
+
+            <div
+                className="bg-black rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden relative min-h-[180px]">
+
+                <div className="absolute bottom-4 z-20 w-[90%]">
+                    <h4 className="text-[1.1rem] font-medium text-white">Speakers</h4>
+                    <p className="text-[0.8rem] mt-0.5 text-[#FAFAFA] font-[300]">Amazon wireless speakers</p>
+                    <button
+                        className="w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-2 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b">
+                        Shop Now
+                    </button>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/fd8DJYZ/69-694768-amazon-echo-png-clipart-transparent-amazon-echo-png-1.png"
+                     className="w-[120px] absolute top-[50%] left-[50%] transform translate-y-[-50%] translate-x-[-50%]"/>
+
+            </div>
+
+            <div
+                className="bg-black rounded-sm col-span-1 flex justify-between items-center px-4 overflow-hidden relative min-h-[180px]">
+
+                <div className="absolute bottom-4 z-20 w-[90%]">
+                    <h4 className="text-[1.1rem] font-medium text-white">Perfume</h4>
+                    <p className="text-[0.8rem] mt-0.5 text-[#FAFAFA] font-[300]">GUCCI INTENSE OUD EDP</p>
+                    <button
+                        className="w-max text-[#FAFAFA] font-[300] hover:text-[#0FABCA] hover:border-[#0FABCA] mt-2 transition-all duration-300 border-[#FAFAFA] text-[0.8rem] group border-b">
+                        Shop Now
+                    </button>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/WxYLjFy/652e82cd70aa6522dd785109a455904c.png"
+                     className="w-[130px] absolute top-[50%] left-[50%] transform translate-y-[-50%] translate-x-[-50%]"/>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default OfferGrid;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"offer grid 3"} id={"offer_grid-3"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    Explore exclusive e-commerce offers in a sleek grid layout—top deals, big savings, and premium brands, all at your fingertips!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${offerGrid3Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                offerGrid3Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setOfferGrid3Preview, setOfferGrid3Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                offerGrid3Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setOfferGrid3Preview, setOfferGrid3Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {offerGrid3Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
                             <div className="grid grid-cols-1 1024px:grid-cols-4 w-full 1024px:h-[450px]">
@@ -359,42 +523,118 @@ const OfferGrid = () => {
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {offerGrid3Code && <BlocksShowCode code='
+import React from "react";
+
+const OfferGrid = () => {
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-4 w-full lg:h-[450px]">
+
+            <div
+                className="col-span-1 lg:col-span-2 overflow-hidden flex justify-between flex-col rounded-sm row-span-1 lg:row-span-2 bg-white h-[180px] lg:h-full py-8 relative">
+
+                <div className="px-8 absolute top-[50%] translate-y-[-50%] lg:right-7 z-20 w-full lg:w-[60%]">
+                    <h4 className="text-[1.5rem] font-medium text-white lg:text-gray-900">PlayStation 5</h4>
+                    <p className="text-[0.8rem] mt-1 text-[#909090] font-[300]">Incredibly powerful CPUs, GPUs, and an
+                        SSD with integrated I/O will redefine your PlayStation experience.</p>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/g9qmJxg/ps5-slim-goedkope-playstation-large-1.png"
+                     className="w-[230px] absolute -left-12 top-[50%] transform translate-y-[-50%]"/>
+            </div>
+
+            <div
+                className="bg-[#EDEDED] rounded-sm col-span-1 lg:col-span-2 flex justify-between items-center px-4 overflow-hidden h-full row-span-3 relative">
+
+                <div className="p-4 lg:pl-5 z-30 w-full lg:w-[60%]">
+                    <h4 className="text-[2rem] font-[300] text-gray-900">Macbook <b
+                        className="text-gray-900 font-semibold">Air</b></h4>
+                    <p className="text-[0.8rem] mt-1 text-[#909090] font-[300]">The new 15‑inch MacBook Air makes room
+                        for more of what you love with a spacious Liquid Retina display.</p>
+                    <button
+                        className="w-max py-2 px-6 rounded-md border border-gray-900 text-gray-900 text-[0.9rem] hover:bg-gray-900 transition-all duration-300 hover:text-white mt-5">
+                        Shop Now
+                    </button>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/JKqHn1w/Mac-Book-Pro-14.png"
+                     className="w-[100px] lg:w-[180px] absolute top-[50%] transform translate-y-[-50%] right-0"/>
+
+            </div>
+
+            <div
+                className="overflow-hidden flex justify-between flex-col rounded-sm bg-[#EDEDED] py-8 relative min-h-[140px]">
+
+                <div
+                    className="absolute top-[50%] transform translate-y-[-50%] right-6 z-200 w-[70%] lg:w-[50%] z-30">
+                    <h4 className="text-[1.3rem] font-[300] text-gray-900">Apple <br/>
+                        AirPods <b className="font-semibold">Max</b></h4>
+                    <p className="text-[0.8rem] mt-1 text-[#909090] font-[300]">Computational audio. Listen, it"s
+                        powerful</p>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/BKfpK5b/hero-gnfk5g59t0qe-xlarge-2x-1.png"
+                     className="w-[80px] absolute top-[50%] left-0 transform translate-y-[-50%]"/>
+            </div>
+
+            <div
+                className="overflow-hidden flex justify-between flex-col rounded-sm bg-[#353535] py-8 relative min-h-[140px] h-full">
+
+                <div className="absolute top-[50%] translate-y-[-50%] right-6 z-20 w-[70%] lg:w-[50%]">
+                    <h4 className="text-[1.1rem] font-[300] text-white">Apple <br/>
+                        Vision <b className="font-semibold">Pro</b></h4>
+                    <p className="text-[0.8rem] mt-1 text-[#909090] font-[300]">An immersive way to experience
+                        entertainment</p>
+                </div>
+
+                <img alt="product/image"
+                     src="https://i.ibb.co.com/Bq7NGbQ/image-36-1.png"
+                     className="w-[100px] absolute left-0 top-[50%] transform translate-y-[-50%]"/>
+            </div>
+
+        </div>
+    );
+};
+
+export default OfferGrid;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"offer grid 4"} id={"offer_grid_4"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    Explore exclusive e-commerce offers in a sleek grid layout—top deals, big savings, and premium brands, all at your fingertips!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${offerGrid4Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                offerGrid4Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setOfferGrid4Preview, setOfferGrid4Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                offerGrid4Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setOfferGrid4Preview, setOfferGrid4Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {offerGrid4Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
                             <div className='grid grid-cols-1 1024px:grid-cols-2 rounded-md'>
@@ -438,42 +678,117 @@ const OfferGrid = () => {
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {offerGrid4Code && <BlocksShowCode code='
+import React, {useEffect, useState} from "react";
+
+const OfferGrid = () => {
+
+    const [timeLeft, setTimeLeft] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+    });
+    const targetDate = "2024-12-31T23:59:59"
+
+    useEffect(() => {
+        const calculateTimeLeft = () => {
+            const difference = new Date(targetDate) - new Date();
+
+            if (difference > 0) {
+                setTimeLeft({
+                    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+                    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+                    minutes: Math.floor((difference / 1000 / 60) % 60),
+                    seconds: Math.floor((difference / 1000) % 60)
+                });
+            }
+        };
+
+        const timer = setInterval(calculateTimeLeft, 1000);
+        calculateTimeLeft();
+
+        return () => clearInterval(timer);
+    }, [targetDate]);
+
+    const formatNumber = (number) => number.toString().padStart(2, "0");
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 rounded-md">
+
+            <img alt="product/image" src="https://i.ibb.co.com/wpZ3Vhc/Paste-image.png"
+                 className="w-full h-full rounded-t-md lg:rounded-l-md"/>
+
+            <div className="bg-[#ffd37c] rounded-b-md lg:rounded-r-md p-5 lg:p-12">
+                <span className="text-[0.9rem] font-semibold text-blue-600">PROMOTION</span>
+                <h4 className="text-[1.5rem] lg:text-[1.8rem] font-medium mt-2">Hurry up! 40% OFF</h4>
+                <p className="text-[0.9rem] font-normal text-gray-900 mt-2">Thousands of high tech
+                    are waiting for you</p>
+
+                <div className="mt-5">
+                    <p className="text-[0.9rem] font-normal text-gray-900">Offer expires in:</p>
+                    <div className="flex items-center gap-[10px] mt-2">
+                        <div className="flex items-center justify-center flex-col">
+                            <h5 className="py-1.5 lg:py-2 px-2.5 lg:px-3 bg-white rounded-sm text-[1.3rem] font-semibold">{formatNumber(timeLeft.days)}</h5>
+                            <span className="text-[0.7rem]">Days</span>
+                        </div>
+                        <div className="flex items-center justify-center flex-col">
+                            <h5 className="py-1.5 lg:py-2 px-2.5 lg:px-3 bg-white rounded-sm text-[1.3rem] font-semibold">{formatNumber(timeLeft.hours)}</h5>
+                            <span className="text-[0.7rem]">Hours</span>
+                        </div>
+                        <div className="flex items-center justify-center flex-col">
+                            <h5 className="py-1.5 lg:py-2 px-2.5 lg:px-3 bg-white rounded-sm text-[1.3rem] font-semibold">{formatNumber(timeLeft.minutes)}</h5>
+                            <span className="text-[0.7rem]">Minutes</span>
+                        </div>
+                        <div className="flex items-center justify-center flex-col">
+                            <h5 className="py-1.5 lg:py-2 px-2.5 lg:px-3 bg-white rounded-sm text-[1.3rem] font-semibold">{formatNumber(timeLeft.seconds)}</h5>
+                            <span className="text-[0.7rem]">Seconds</span>
+                        </div>
+                    </div>
+                </div>
+
+                <button className="py-2 px-6 rounded-md bg-black text-white mt-5 text-[1rem]">Shop Now</button>
+            </div>
+
+        </div>
+    );
+};
+
+export default OfferGrid;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"offer grid 5"} id={"offer_grid_5"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    Explore exclusive e-commerce offers in a sleek grid layout—top deals, big savings, and premium brands, all at your fingertips!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${offerGrid5Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                offerGrid5Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setOfferGrid5Preview, setOfferGrid5Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                offerGrid5Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setOfferGrid5Preview, setOfferGrid5Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {offerGrid5Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
 
                             <div className='flex flex-col 1024px:flex-row justify-between items-center w-full 1024px:py-4 py-6 px-6 1024px:px-8 gap-[20px] 1024px:gap-0 rounded-md bg-[#FFE7D6]'>
@@ -507,13 +822,52 @@ const OfferGrid = () => {
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {offerGrid5Code && <BlocksShowCode code='
+import React from "react";
+
+// react icons
+import {HiArrowRight} from "react-icons/hi";
+
+const OfferGrid = () => {
+
+    return (
+        <div className="flex flex-col lg:flex-row justify-between items-center w-full lg:py-4 py-6 px-6 lg:px-8 gap-[20px] lg:gap-0 rounded-md bg-[#FFE7D6]">
+
+            <div className="w-full lg:w-[30%] lg:pl-6">
+
+                <span className="bg-[#2DA5F3] rounded-sm py-1.5 px-3 text-[0.8rem] font-normal text-white">SAVE UP TO $200.00</span>
+
+                <h4 className="text-[1.7rem] lg:text-[2rem] mt-2 font-semibold text-gray-800">Macbook Pro</h4>
+
+                <p className="text-[1rem] mt-2 lg:mt-3 text-gray-700">Apple M1 Max Chip. 32GB Unified Memory, 1TB SSD Storage</p>
+
+                <button
+                    className="bg-[#FA8232] flex items-center gap-[10px] py-2 px-4 rounded-sm text-white text-[0.9rem] mt-3 uppercase group">
+                    Shop Now
+                    <HiArrowRight className="group-hover:ml-1 transition-all duration-200"/>
+                </button>
+            </div>
+
+            <div className="relative">
+
+                <p className="bg-[#FFCEAD] text-gray-900 p-4 rounded-full w-[80px] h-[80px] flex items-center justify-center font-medium border-4 border-white absolute top-1 lg:top-3 -left-3">$1999</p>
+
+                <img alt="product/image" src="https://i.ibb.co.com/zSm0TRR/Image-6.png"
+                     className="w-[350px] rounded-l-md"/>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default OfferGrid;
                     '/>
                     }
                 </div>
 
-                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
-                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+                <BlocksFooter backUrl='/blocks/empty-page' backName='empty page'
+                              forwardUrl='/blocks/product-details-page' forwardName='product details page'/>
             </div>
 
 
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
index 6ff0015..ae8da05 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/Index.jsx
@@ -19,131 +19,779 @@ import ProductDetailsExample3 from "./ProductDetailsExample3.jsx";
 
 const Index = () => {
 
-    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
-    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
-
+    // toggle actions
     const toggleCardView = useToggleCardView()
 
+    const [productDetails1Preview, setProductDetails1Preview] = useState(true);
+    const [productDetails1Code, setProductDetails1Code] = useState(false);
+
+    const [productDetails2Preview, setProductDetails2Preview] = useState(true);
+    const [productDetails2Code, setProductDetails2Code] = useState(false);
+
+    const [productDetails3Preview, setProductDetails3Preview] = useState(true);
+    const [productDetails3Code, setProductDetails3Code] = useState(false);
+
     return (
         <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
             <div>
-                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                <ContentHeader text={"product details page 1"} id={"product_details_page_1"}/>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    View all product details in one place - images, specs, reviews, pricing, and more. Everything you need to make an informed purchase!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${productDetails1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                productDetails1Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setProductDetails1Preview, setProductDetails1Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                productDetails1Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setProductDetails1Preview, setProductDetails1Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {productDetails1Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
                             <ProductDetailsExample1/>
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {productDetails1Code && <BlocksShowCode code='
+import React, {useState} from "react";
+
+// react icons
+import {BsHeart, BsHeartFill} from "react-icons/bs"
+import {FiCpu, FiSmartphone} from "react-icons/fi"
+import {IoMdCamera} from "react-icons/io"
+import {MdBatteryChargingFull} from "react-icons/md"
+import {GoVerified} from "react-icons/go";
+import {IoStorefrontOutline} from "react-icons/io5";
+import {CiDeliveryTruck} from "react-icons/ci";
+
+const ProductDetailsPage = () => {
+
+    const [selectedImage, setSelectedImage] = useState(0)
+    const [selectedColor, setSelectedColor] = useState("black")
+    const [selectedStorage, setSelectedStorage] = useState("1TB")
+    const [isFavorite, setIsFavorite] = useState(false)
+
+    const images = [
+        "https://i.ibb.co.com/GTGBw03/image-323.png",
+        "https://i.ibb.co.com/thxkk1x/image-320.png",
+        "https://i.ibb.co.com/MckV93r/image-320.png",
+        "https://i.ibb.co.com/ZGWRGDT/image-320.png"
+    ]
+
+    const colors = [
+        {name: "black", class: "bg-black"},
+        {name: "purple", class: "bg-purple-600"},
+        {name: "red", class: "bg-red-600"},
+        {name: "yellow", class: "bg-yellow-500"},
+        {name: "gray", class: "bg-gray-200"}
+    ]
+
+    const storage = ["128GB", "256GB", "512GB", "1TB"]
+
+    return (
+        <div className="mx-auto lg:px-8 lg:py-12">
+            <div className="w-full grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+                {/* Left side - Image gallery */}
+                <div className="flex flex-col-reverse gap-[15px] lg:gap-0 lg:flex-row">
+
+                    {/* Thumbnails */}
+                    <div
+                        className="w-full lg:w-[20%] flex flex-row lg:flex-col lg:gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 lg:pr-2">
+                        {images.map((image, index) => (
+                            <button
+                                key={index}
+                                onClick={() => setSelectedImage(index)}
+                                className={`relative w-36 lg:w-20 h-[70px] lg:h-20 border-2 p-1 lg:p-2 rounded-lg overflow-hidden ${
+                                    selectedImage === index ? "border-[#0FABCA]" : "border-transparent"
+                                }`}
+                            >
+                                <img
+                                    src={image}
+                                    alt={`Product ${index + 1}`}
+                                    className="object-cover"
+                                />
+                            </button>
+                        ))}
+                    </div>
+
+                    {/* Main image */}
+                    <div className="w-full lg:w-[80%] bg-gray-100 rounded-sm h-[280px] lg:h-[400px] relative flex items-center justify-center">
+                        <img
+                            src={images[selectedImage]}
+                            alt="Product main image"
+                            className="object-cover w-[200px] lg:w-[300px] rounded-lg"
+                        />
+                    </div>
+                </div>
+
+                {/* Right side - Product details */}
+                <div className="flex flex-col gap-6">
+                    <div>
+                        <h1 className="text-[1.6rem] lg:text-[1.9rem] font-bold text-gray-800">Apple iPhone 14 Pro Max</h1>
+                        <div className="flex items-center gap-2 mt-2 lg:mt-5">
+                            <span className="text-3xl font-medium">$1399</span>
+                            <span className="text-xl text-gray-500 line-through">$1499</span>
+                        </div>
+                    </div>
+
+                    {/* Color selection */}
+                    <div className="flex float-start lg:items-center flex-col lg:flex-row gap-[10px]">
+                        <label className="text-sm font-medium">Select color:</label>
+                        <div className="flex gap-3">
+                            {colors.map((color) => (
+                                <button
+                                    key={color.name}
+                                    onClick={() => setSelectedColor(color.name)}
+                                    className={`w-8 h-8 rounded-full ${color.class} ${
+                                        selectedColor === color.name ? "ring-2 ring-offset-2 ring-[#0FABCA]" : ""
+                                    }`}
+                                    aria-label={color.name}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Storage selection */}
+                    <div>
+                        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+                            {storage.map((size) => (
+                                <button
+                                    key={size}
+                                    onClick={() => setSelectedStorage(size)}
+                                    className={`py-2 px-4 rounded-lg border ${
+                                        selectedStorage === size
+                                            ? "border-[#0FABCA] bg-[#0FABCA]/10 text-[#0FABCA]"
+                                            : "border-gray-200"
+                                    }`}
+                                >
+                                    {size}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Specifications */}
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <FiSmartphone className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Screen size</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">6.7"</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <FiCpu className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">CPU</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">Apple A16 Bionic</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <IoMdCamera className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Camera</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">48-12-12 MP</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
+                            <MdBatteryChargingFull className="w-5 h-5 text-gray-700"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Battery</p>
+                                <p className="font-medium text-gray-700 text-[0.9rem]">4323 mAh</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <p className="text-[0.9rem] text-gray-600">
+                        Enhanced capabilities thanks to an enlarged display of 6.7 inches and work without
+                        recharging throughout the day. Incredible photos in weak, yes and in bright light using
+                        the new system with two cameras...
+                        <button className="text-primary hover:underline">more...</button>
+                    </p>
+
+                    {/* Action buttons */}
+                    <div className="flex flex-col lg:flex-row gap-4">
+                        <button
+                            onClick={() => setIsFavorite(!isFavorite)}
+                            className="flex-1 py-3 px-4 rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-50">
+                            <div className="flex items-center justify-center gap-2">
+                                {
+                                    isFavorite ? (
+                                            <BsHeartFill className="w-5 h-5 text-red-500"/>
+                                        )
+                                        : (
+                                            <BsHeart className="w-5 h-5"/>
+                                        )
+                                }
+                                Add to Wishlist
+                            </div>
+                        </button>
+                        <button className="flex-1 py-3 px-4 rounded-lg bg-[#0FABCA] text-white hover:bg-[#0FABCA]/90">
+                            Add to Card
+                        </button>
+                    </div>
+
+                    {/* Delivery info */}
+                    <div className="flex flex-col lg:flex-row gap-4 lg:gap-0 justify-between mt-2">
+                        <div className="flex items-center gap-3">
+                            <CiDeliveryTruck className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Free Delivery</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">1-2 day</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <IoStorefrontOutline className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">In Stock</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">Today</p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <GoVerified className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
+                            <div>
+                                <p className="text-sm text-gray-500">Guaranteed</p>
+                                <p className="font-medium text-[0.9rem] text-gray-800">1 year</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsPage;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"product details page 2"} id={"product_details_page_2"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    View all product details in one place - images, specs, reviews, pricing, and more. Everything you need to make an informed purchase!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${productDetails2Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                productDetails2Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setProductDetails2Preview, setProductDetails2Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                productDetails2Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setProductDetails2Preview, setProductDetails2Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {productDetails2Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
                             <ProductDetailsExample2/>
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {productDetails2Code && <BlocksShowCode code='
+import React, {useState, useEffect} from "react";
+
+// react icons
+import {FaStar} from "react-icons/fa6"
+import {FaHeart, FaRegHeart} from "react-icons/fa"
+import {BiChevronLeft, BiChevronRight} from "react-icons/bi";
+
+const ProductDetailsPage = () => {
+
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [quantity, setQuantity] = useState(1)
+    const [selectedColor, setSelectedColor] = useState("black")
+    const [isFavorite, setIsFavorite] = useState(false)
+    const [timeLeft, setTimeLeft] = useState({
+        days: 2,
+        hours: 12,
+        minutes: 45,
+        seconds: 5
+    })
+
+    const images = [
+        "https://i.ibb.co.com/8ck41d5/Paste-image.png",
+        "https://i.ibb.co.com/0QhryRt/Paste-Image.png",
+        "https://i.ibb.co.com/JsJcVYZ/Paste-Image.png",
+        "https://i.ibb.co.com/n6sF5wz/Paste-Image.png",
+    ]
+
+    const colors = [
+        {name: "black", value: "bg-black"},
+        {name: "beige", value: "bg-[#D2C4B5]"},
+        {name: "red", value: "bg-red-500"},
+        {name: "white", value: "bg-white"},
+    ]
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTimeLeft(prev => {
+                if (prev.seconds > 0) {
+                    return {...prev, seconds: prev.seconds - 1}
+                } else if (prev.minutes > 0) {
+                    return {...prev, minutes: prev.minutes - 1, seconds: 59}
+                } else if (prev.hours > 0) {
+                    return {...prev, hours: prev.hours - 1, minutes: 59, seconds: 59}
+                } else if (prev.days > 0) {
+                    return {...prev, days: prev.days - 1, hours: 23, minutes: 59, seconds: 59}
+                }
+                return prev
+            })
+        }, 1000)
+
+        return () => clearInterval(timer)
+    }, [])
+
+    const nextImage = () => {
+        setCurrentImageIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const previousImage = () => {
+        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    const formatNumber = (number) => number.toString().padStart(2, "0");
+
+    return (
+        <div className="mx-auto lg:px-8 lg:py-12">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+
+                {/* Left side - Image gallery */}
+                <div className="space-y-4">
+
+                    <div className="relative aspect-square">
+
+                        {/* NEW and SALE tags */}
+                        <div className="absolute top-4 left-4 z-10 space-y-2">
+                              <span className="inline-block px-2 py-1 text-xs font-semibold bg-black text-white">
+                                NEW
+                              </span>
+                            <div className="inline-block px-2 py-1 text-xs font-semibold bg-emerald-500 text-white">
+                                -50%
+                            </div>
+                        </div>
+
+                        {/* Main image with navigation arrows */}
+                        <div className="relative h-full">
+                            <img
+                                src={images[currentImageIndex]}
+                                alt={`Product view ${currentImageIndex + 1}`}
+                                className="w-full h-full object-cover"
+                            />
+                            <button
+                                onClick={previousImage}
+                                className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white shadow-lg hover:bg-[#0FABCA] hover:text-white"
+                                aria-label="Previous image"
+                            >
+                                <BiChevronLeft className="w-6 h-6"/>
+                            </button>
+                            <button
+                                onClick={nextImage}
+                                className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white shadow-lg hover:bg-[#0FABCA] hover:text-white"
+                                aria-label="Next image"
+                            >
+                                <BiChevronRight className="w-6 h-6"/>
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Thumbnail images */}
+                    <div className="flex gap-4 justify-between">
+                        {images.map((image, index) => (
+                            <button
+                                key={index}
+                                onClick={() => setCurrentImageIndex(index)}
+                                className={`relative transition-all duration-300 w-[8rem] aspect-square ${
+                                    currentImageIndex === index
+                                        ? "ring-2 ring-[#0FABCA]"
+                                        : "hover:ring-2 hover:ring-[#0FABCA]"
+                                }`}
+                            >
+                                <img
+                                    src={image}
+                                    alt={`Thumbnail ${index + 1}`}
+                                    className="w-full h-full object-cover"
+                                />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Right side - Product details */}
+                <div className="space-y-3">
+                    <div className="flex items-center gap-2">
+                        <div className="flex gap-0.5">
+                            {[...Array(5)].map((_, i) => (
+                                <FaStar key={i} className="w-4 h-4 fill-black"/>
+                            ))}
+                        </div>
+                        <span className="text-sm text-gray-600">11 Reviews</span>
+                    </div>
+
+                    <h1 className="text-[1.6rem] lg:text-[1.9rem] text-gray-800 font-semibold">Tray Table</h1>
+
+                    <p className="text-gray-600 text-[0.9rem]">
+                        Buy one or buy a few and make every space where you sit more convenient. Light and easy to
+                        move around with removable tray top, handy for serving snacks.
+                    </p>
+
+                    <div className="flex items-center gap-3">
+                        <span className="text-[1.5rem] text-gray-800 font-medium">$199.00</span>
+                        <span className="text-lg text-gray-500 line-through">$400.00</span>
+                    </div>
+
+                    <div className="pb-2">
+                        <p className="font-medium text-[0.9rem] text-gray-600">Offer expires in:</p>
+                        <div className="flex items-center gap-[10px] mt-2">
+                            <div className="flex items-center justify-center flex-col gap-[0.2rem]">
+                                <h5 className="py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold">{formatNumber(timeLeft.days)}</h5>
+                                <span className="text-[0.7rem]">Days</span>
+                            </div>
+                            <div className="flex items-center justify-center flex-col gap-[0.2rem]">
+                                <h5 className="py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold">{formatNumber(timeLeft.hours)}</h5>
+                                <span className="text-[0.7rem]">Hours</span>
+                            </div>
+                            <div className="flex items-center justify-center flex-col gap-[0.2rem]">
+                                <h5 className="py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold">{formatNumber(timeLeft.minutes)}</h5>
+                                <span className="text-[0.7rem]">Minutes</span>
+                            </div>
+                            <div className="flex items-center justify-center flex-col gap-[0.2rem]">
+                                <h5 className="py-2 px-3 bg-gray-100 text-[1.9rem] font-semibold">{formatNumber(timeLeft.seconds)}</h5>
+                                <span className="text-[0.7rem]">Seconds</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 border-t border-t-gray-200 pt-4">
+                        <p className="font-medium text-[0.9rem] text-gray-600">Measurements</p>
+                        <p className="text-gray-800">17 1/2×20 5/8 "</p>
+                    </div>
+
+                    <div className="space-y-2 pt-2">
+                        <p className="font-medium text-gray-600 text-[0.9rem]">Choose Color</p>
+                        <p className="font-semibold pb-1 text-gray-800 text-[0.9rem] capitalize">{selectedColor}</p>
+                        <div className="flex gap-2">
+                            {colors.map((color) => (
+                                <button
+                                    onClick={() => setSelectedColor(color.name)}
+                                    aria-label={color.name}
+                                    key={color.name}
+                                    className={`w-8 h-8 rounded-full ${color.value} ${
+                                        selectedColor === color.name ? "ring-2 ring-offset-2 ring-[#0FABCA]" : ""
+                                    }`}
+                                >
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 items-center pt-6">
+                        <div className="flex items-center bg-gray-100 rounded-md">
+                            <button
+                                onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                                className="px-4 py-[0.560rem] text-[1.3rem] font-[300] hover:bg-gray-100 rounded-l-md"
+                            >
+                                −
+                            </button>
+                            <input
+                                type="number"
+                                value={quantity}
+                                onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+                                className="w-10 font-medium text-[0.9rem] bg-transparent text-center"
+                            />
+                            <button
+                                onClick={() => setQuantity(quantity + 1)}
+                                className="px-4 py-[0.560rem] text-[1.3rem] font-[300] hover:bg-gray-100 rounded-r-md"
+                            >
+                                +
+                            </button>
+                        </div>
+                        <button
+                            onClick={()=> setIsFavorite(!isFavorite)}
+                            className="py-3 border border-gray-200 rounded-md  flex items-center justify-center gap-[10px] grow hover:bg-gray-50">
+                            {
+                                isFavorite ? (
+                                        <FaHeart className="w-5 h-5 text-red-500"/>
+                                    )
+                                    : (
+                                        <FaRegHeart className="w-5 h-5 text-gray-800"/>
+                                    )
+                            }
+                            Wishlist
+                        </button>
+                    </div>
+
+                    <button className="w-full px-6 py-3 bg-[#0FABCA] text-white rounded-md hover:bg-[#0FABCA]/90">
+                        Add to Cart
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsPage;
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"product details page 3"} id={"product_details_page_3"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    View all product details in one place - images, specs, reviews, pricing, and more. Everything you need to make an informed purchase!
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${productDetails3Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                productDetails3Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setProductDetails3Preview, setProductDetails3Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                productDetails3Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setProductDetails3Preview, setProductDetails3Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {productDetails3Preview && (
                         <div className={`p-8  flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
                             <ProductDetailsExample3/>
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {productDetails3Code && <BlocksShowCode code='
+import React, {useState} from "react";
+
+// react icons
+import {IoHeart, IoHeartOutline, IoShareSocialOutline, IoStar} from "react-icons/io5";
+import {BiChevronLeft, BiChevronRight} from "react-icons/bi";
+
+const ProductDetailsPage = () => {
+
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [isFavorite, setIsFavorite] = useState(false)
+    const [selectedSize, setSelectedSize] = useState("8")
+    const [selectedColor, setSelectedColor] = useState("Royal Brown")
+
+    const images = [
+        "https://i.ibb.co.com/LxyQVtG/image-19.png",
+        "https://i.ibb.co.com/d6RXLM2/image-22.png",
+        "https://i.ibb.co.com/17yKVQm/image-19.png",
+        "https://i.ibb.co.com/NCQFGJr/image-21.png",
+        "https://i.ibb.co.com/2tWVrdD/image-23.png"
+    ]
+
+    const sizes = ["6", "8", "10", "14", "18", "20"]
+    const colors = [
+        { name: "Royal Brown", class: "bg-[#654321]" },
+        { name: "Light Gray", class: "bg-gray-200" },
+        { name: "Steel Blue", class: "bg-[#4682B4]" },
+        { name: "Navy", class: "bg-navy-900" }
+    ]
+
+    const nextImage = () => {
+        setCurrentImageIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const prevImage = () => {
+        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    const selectThumbnail = (index) => {
+        setCurrentImageIndex(index)
+    }
+
+    return (
+        <div className="lg:p-8">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+                {/* Image Section */}
+                <div className="relative">
+                    <div className="flex">
+                        <div className="flex items-center justify-center w-[90%] bg-gray-100 overflow-hidden rounded-md">
+                            <img
+                                src={images[currentImageIndex]}
+                                alt={`Product view ${currentImageIndex + 1}`}
+                                className="w-[300px] h-[400px] object-cover"
+                            />
+                        </div>
+                        <div className="flex flex-col justify-between gap-[15px] ml-[20px]">
+
+                            <div className="flex flex-col gap-[10px]">
+                                <button className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200">
+                                    <IoShareSocialOutline className="w-5 h-5"/>
+                                </button>
+
+                                <button
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200"
+                                    onClick={() => setIsFavorite(!isFavorite)}
+                                >
+                                    {
+                                        isFavorite ? (
+                                            <IoHeart className="w-5 h-5 text-red-500"/>
+                                        ) : (
+                                            <IoHeartOutline className="w-5 h-5"/>
+                                        )
+                                    }
+                                </button>
+                            </div>
+
+                            <div className="flex flex-col gap-[10px]">
+                                <button
+                                    onClick={prevImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Previous image"
+                                >
+                                    <BiChevronLeft className="w-6 h-6"/>
+                                </button>
+                                <button
+                                    onClick={nextImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Next image"
+                                >
+                                    <BiChevronRight className="w-6 h-6"/>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="scrollbar flex w-full lg:w-[87%] gap-2 mt-4 overflow-x-auto">
+                        {images.map((img, index) => (
+                            <button
+                                key={index}
+                                onClick={() => selectThumbnail(index)}
+                                className={`flex-shrink-0 bg-gray-100 w-20 transition-all duration-300 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
+                                }`}
+                            >
+                                <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover"/>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Product Details Section */}
+                <div className="flex flex-col">
+                    <div className="flex justify-between items-start">
+                        <div className="w-full">
+                            <p className="text-gray-400 text-[0.9rem]">John Lewis ANYDAY</p>
+                            <h1 className="text-[1.6rem] lg:text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
+                            <div className="flex flex-col lg:flex-row lg:items-center justify-between w-full gap-1 lg:gap-4 mb-4">
+                                <div className="flex items-center">
+                                    <span className="text-[1.4rem] font-semibold text-gray-800">£28.00</span>
+                                    <span className="text-gray-400 text-[1rem] line-through ml-2">£40.00</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <IoStar className="text-yellow-400 text-[1.1rem]"/>
+                                    <span className="text-gray-800 font-semibold">4.5</span>
+                                    <span className="text-gray-500">(1,238 Sold)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="mb-6 border-t-[2px] border-gray-200 border-dashed mt-1 pt-6">
+                        <h2 className="text-gray-700 font-semibold mb-2">Description:</h2>
+                        <p className="text-[0.9rem] text-gray-600">
+                            Boba etiam ut bulla tea est potus electus singulari compositione saporum et textuum, quae in
+                            Taiwan annis 1980 orta sunt. Boba refert ad pitas marnicas tapiocas in fundo potus inventas,
+                            quae typice lacte tea nigro sapiuntur.
+                            <button className="text-blue-600 hover:underline ml-1">See More...</button>
+                        </p>
+                    </div>
+
+                    <div className="mb-8">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Color: <span className="text-gray-700 font-semibold">{selectedColor}</span></h2>
+                        </div>
+                        <div className="flex gap-2">
+                            {colors.map((color) => (
+                                <button
+                                    key={color.name}
+                                    onClick={() => setSelectedColor(color.name)}
+                                    className={` w-20 h-10 rounded-md border-2 transition-all duration-300 ${
+                                        selectedColor === color.name ? "border-[#0FABCA] p-1" : "border-transparent" } `}
+                                    aria-label={`Select ${color.name} color`}
+                                >
+                                    <div className={`w-full h-full rounded-md transition-all duration-300 ${color.class}`}></div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="mb-10">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Size: <span className="font-semibold text-gray-700">{selectedSize}</span></h2>
+                            <button className="text-gray-600 text-[0.8rem] underline">View Size Chart</button>
+                        </div>
+                        <div className="flex w-full flex-wrap gap-2">
+                            {sizes.map((size) => (
+                                <button
+                                    key={size}
+                                    onClick={() => setSelectedSize(size)}
+                                    className={
+                                        `px-4 py-2 max-w-[60px] grow rounded-md border ${selectedSize === size
+                                            ? "border-[#0FABCA] bg-[#0FABCA] text-white"
+                                            : "border-gray-200 hover:border-[#0FABCA]"}`}
+                                >
+                                    {size}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col lg:flex-row gap-4 mt-auto">
+                        <button className="grow py-3 px-6 bg-[#0FABCA] hover:bg-[#0FABCA]/90 rounded-md text-white">
+                            Add To Cart
+                        </button>
+                        <button className="grow py-3 px-6 border border-gray-300 text-gray-600 rounded-md">
+                            Checkout Now
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductDetailsPage;
                     '/>
                     }
                 </div>
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
index f50b40d..57152e0 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample1.jsx
@@ -34,20 +34,20 @@ const ProductDetailsExample1 = () => {
     const storage = ['128GB', '256GB', '512GB', '1TB']
 
     return (
-        <div className="mx-auto px-8 py-12">
-            <div className="w-full grid grid-cols-2 gap-6">
+        <div className="mx-auto 1024px:px-8 1024px:py-12">
+            <div className="w-full grid grid-cols-1 1024px:grid-cols-2 gap-6">
 
                 {/* Left side - Image gallery */}
-                <div className="flex">
+                <div className="flex flex-col-reverse gap-[15px] 1024px:gap-0 1024px:flex-row">
 
                     {/* Thumbnails */}
                     <div
-                        className="w-[20%] flex flex-col gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 pr-2">
+                        className="w-full 1024px:w-[20%] flex flex-row 1024px:flex-col 1024px:gap-4 max-h-[600px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 1024px:pr-2">
                         {images.map((image, index) => (
                             <button
                                 key={index}
                                 onClick={() => setSelectedImage(index)}
-                                className={`relative w-20 h-20 border-2 p-2 rounded-lg overflow-hidden ${
+                                className={`relative w-36 1024px:w-20 h-[70px] 1024px:h-20 border-2 p-1 1024px:p-2 rounded-lg overflow-hidden ${
                                     selectedImage === index ? 'border-[#0FABCA]' : 'border-transparent'
                                 }`}
                             >
@@ -61,11 +61,11 @@ const ProductDetailsExample1 = () => {
                     </div>
 
                     {/* Main image */}
-                    <div className="w-[80%] bg-gray-100 rounded-sm h-[400px] relative flex items-center justify-center">
+                    <div className="w-full 1024px:w-[80%] bg-gray-100 rounded-sm h-[280px] 1024px:h-[400px] relative flex items-center justify-center">
                         <img
                             src={images[selectedImage]}
                             alt="Product main image"
-                            className="object-cover w-[300px] rounded-lg"
+                            className="object-cover w-[200px] 1024px:w-[300px] rounded-lg"
                         />
                     </div>
                 </div>
@@ -73,15 +73,15 @@ const ProductDetailsExample1 = () => {
                 {/* Right side - Product details */}
                 <div className="flex flex-col gap-6">
                     <div>
-                        <h1 className="text-[1.9rem] font-bold text-gray-800">Apple iPhone 14 Pro Max</h1>
-                        <div className="flex items-center gap-2 mt-5">
+                        <h1 className="text-[1.6rem] 1024px:text-[1.9rem] font-bold text-gray-800">Apple iPhone 14 Pro Max</h1>
+                        <div className="flex items-center gap-2 mt-2 1024px:mt-5">
                             <span className="text-3xl font-medium">$1399</span>
                             <span className="text-xl text-gray-500 line-through">$1499</span>
                         </div>
                     </div>
 
                     {/* Color selection */}
-                    <div className='flex items-center gap-[10px]'>
+                    <div className='flex float-start 1024px:items-center flex-col 1024px:flex-row gap-[10px]'>
                         <label className="text-sm font-medium">Select color:</label>
                         <div className="flex gap-3">
                             {colors.map((color) => (
@@ -99,7 +99,7 @@ const ProductDetailsExample1 = () => {
 
                     {/* Storage selection */}
                     <div>
-                        <div className="grid grid-cols-4 gap-3">
+                        <div className="grid grid-cols-2 1024px:grid-cols-4 gap-3">
                             {storage.map((size) => (
                                 <button
                                     key={size}
@@ -117,7 +117,7 @@ const ProductDetailsExample1 = () => {
                     </div>
 
                     {/* Specifications */}
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 1024px:grid-cols-2 gap-4">
                         <div className="flex items-center gap-2 bg-gray-50 p-3 rounded-lg">
                             <FiSmartphone className="w-5 h-5 text-gray-700"/>
                             <div>
@@ -156,7 +156,7 @@ const ProductDetailsExample1 = () => {
                     </p>
 
                     {/* Action buttons */}
-                    <div className="flex gap-4">
+                    <div className="flex flex-col 1024px:flex-row gap-4">
                         <button
                             onClick={() => setIsFavorite(!isFavorite)}
                             className="flex-1 py-3 px-4 rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-50">
@@ -178,7 +178,7 @@ const ProductDetailsExample1 = () => {
                     </div>
 
                     {/* Delivery info */}
-                    <div className="flex justify-between mt-2">
+                    <div className="flex flex-col 1024px:flex-row gap-4 1024px:gap-0 justify-between mt-2">
                         <div className="flex items-center gap-3">
                             <CiDeliveryTruck className="text-[3rem] text-gray-500 p-3 bg-gray-100 rounded-md"/>
                             <div>
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
index 18e6317..24ef8f4 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample2.jsx
@@ -62,8 +62,8 @@ const ProductDetailsExample2 = () => {
     const formatNumber = (number) => number.toString().padStart(2, '0');
 
     return (
-        <div className="mx-auto px-8 py-12">
-            <div className="grid grid-cols-2 gap-12">
+        <div className="mx-auto 1024px:px-8 1024px:py-12">
+            <div className="grid grid-cols-1 1024px:grid-cols-2 gap-8 1024px:gap-12">
 
                 {/* Left side - Image gallery */}
                 <div className="space-y-4">
@@ -137,7 +137,7 @@ const ProductDetailsExample2 = () => {
                         <span className="text-sm text-gray-600">11 Reviews</span>
                     </div>
 
-                    <h1 className="text-[1.9rem] text-gray-800 font-semibold">Tray Table</h1>
+                    <h1 className="text-[1.6rem] 1024px:text-[1.9rem] text-gray-800 font-semibold">Tray Table</h1>
 
                     <p className="text-gray-600 text-[0.9rem]">
                         Buy one or buy a few and make every space where you sit more convenient. Light and easy to
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
index 71a4a50..5f09ad6 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/ProductDetailsComponents/ProductDetailsExample3.jsx
@@ -40,8 +40,8 @@ const ProductDetailsExample1 = () => {
     }
 
     return (
-        <div className="p-8">
-            <div className="grid grid-cols-2 gap-12">
+        <div className="1024px:p-8">
+            <div className="grid grid-cols-1 1024px:grid-cols-2 gap-8 1024px:gap-12">
                 {/* Image Section */}
                 <div className="relative">
                     <div className='flex'>
@@ -91,7 +91,7 @@ const ProductDetailsExample1 = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="scrollbar flex w-[87%] gap-2 mt-4 overflow-x-auto">
+                    <div className="scrollbar flex w-full 1024px:w-[87%] gap-2 mt-4 overflow-x-auto">
                         {images.map((img, index) => (
                             <button
                                 key={index}
@@ -110,8 +110,8 @@ const ProductDetailsExample1 = () => {
                     <div className="flex justify-between items-start">
                         <div className='w-full'>
                             <p className="text-gray-400 text-[0.9rem]">John Lewis ANYDAY</p>
-                            <h1 className="text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
-                            <div className="flex items-center justify-between w-full gap-4 mb-4">
+                            <h1 className="text-[1.6rem] 1024px:text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
+                            <div className="flex flex-col 1024px:flex-row 1024px:items-center justify-between w-full gap-1 1024px:gap-4 mb-4">
                                 <div className="flex items-center">
                                     <span className="text-[1.4rem] font-semibold text-gray-800">£28.00</span>
                                     <span className="text-gray-400 text-[1rem] line-through ml-2">£40.00</span>
@@ -165,7 +165,7 @@ const ProductDetailsExample1 = () => {
                                     key={size}
                                     onClick={() => setSelectedSize(size)}
                                     className={
-                                        `px-4 py-2 grow rounded-md border ${selectedSize === size
+                                        `px-4 py-2 max-w-[60px] grow rounded-md border ${selectedSize === size
                                             ? "border-[#0FABCA] bg-[#0FABCA] text-white"
                                             : "border-gray-200 hover:border-[#0FABCA]"}`}
                                 >
@@ -175,7 +175,7 @@ const ProductDetailsExample1 = () => {
                         </div>
                     </div>
 
-                    <div className="flex gap-4 mt-auto">
+                    <div className="flex flex-col 1024px:flex-row gap-4 mt-auto">
                         <button className="grow py-3 px-6 bg-[#0FABCA] hover:bg-[#0FABCA]/90 rounded-md text-white">
                             Add To Cart
                         </button>
diff --git a/src/Shared/Demo.jsx b/src/Shared/Demo.jsx
index 51fe557..43a3619 100644
--- a/src/Shared/Demo.jsx
+++ b/src/Shared/Demo.jsx
@@ -1,37 +1,192 @@
-import React from "react";
+import React, {useState} from "react";
 
 // react icons
-import {HiArrowRight} from "react-icons/hi";
+import {IoHeart, IoHeartOutline, IoShareSocialOutline, IoStar} from "react-icons/io5";
+import {BiChevronLeft, BiChevronRight} from "react-icons/bi";
+
+const ProductDetailsPage = () => {
+
+    const [currentImageIndex, setCurrentImageIndex] = useState(0)
+    const [isFavorite, setIsFavorite] = useState(false)
+    const [selectedSize, setSelectedSize] = useState("8")
+    const [selectedColor, setSelectedColor] = useState("Royal Brown")
+
+    const images = [
+        "https://i.ibb.co.com/LxyQVtG/image-19.png",
+        "https://i.ibb.co.com/d6RXLM2/image-22.png",
+        "https://i.ibb.co.com/17yKVQm/image-19.png",
+        "https://i.ibb.co.com/NCQFGJr/image-21.png",
+        "https://i.ibb.co.com/2tWVrdD/image-23.png"
+    ]
+
+    const sizes = ["6", "8", "10", "14", "18", "20"]
+    const colors = [
+        { name: "Royal Brown", class: "bg-[#654321]" },
+        { name: "Light Gray", class: "bg-gray-200" },
+        { name: "Steel Blue", class: "bg-[#4682B4]" },
+        { name: "Navy", class: "bg-navy-900" }
+    ]
+
+    const nextImage = () => {
+        setCurrentImageIndex((prev) => (prev + 1) % images.length)
+    }
+
+    const prevImage = () => {
+        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+    }
+
+    const selectThumbnail = (index) => {
+        setCurrentImageIndex(index)
+    }
 
-const AdsCard = () => {
-    
     return (
-        <div
-            className="wful md:w-[90%] bg-gray-900 flex flex-col justify-center min-h-[260px] overflow-hidden rounded-md relative px-7 md:px-12">
-
-            {/* coupon */}
-            <span
-                className="py-1 md:py-2 font-semibold px-3 md:px-4 rounded-md absolute right-4 md:right-6 z-20 top-4 md:top-6 bg-[#EFD33D]">29% OFF</span>
-
-            {/* offer details */}
-            <div className="w-full md:w-[45%] z-30">
-                <p className="text-[1rem] font-[300] text-[#EBC80C]">Summer Sales</p>
-                <h4 className="text-[1.5rem] mt-2 font-medium text-white">New Google Pixel 6 Pro</h4>
-
-                <button
-                    className="py-2 px-5 text-white font-medium mt-5 group hover:bg-[#ed6104] transition-all duration-300 text-[1rem] flex items-center gap-[10px] bg-[#FA8232] rounded-md">
-                    Shop Now
-                    <HiArrowRight
-                        className="text-[1.3rem] group-hover:ml-1 transition-all duration-300"/>
-                </button>
-            </div>
+        <div className="lg:p-8">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+                {/* Image Section */}
+                <div className="relative">
+                    <div className="flex">
+                        <div className="flex items-center justify-center w-[90%] bg-gray-100 overflow-hidden rounded-md">
+                            <img
+                                src={images[currentImageIndex]}
+                                alt={`Product view ${currentImageIndex + 1}`}
+                                className="w-[300px] h-[400px] object-cover"
+                            />
+                        </div>
+                        <div className="flex flex-col justify-between gap-[15px] ml-[20px]">
 
-            {/* product image */}
-            <img alt="product/image" src="https://i.ibb.co.com/WWTSSbm/image-5-1.png"
-                 className="w-[130px] md:w-[220px] absolute right-0 bottom-0"/>
+                            <div className="flex flex-col gap-[10px]">
+                                <button className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200">
+                                    <IoShareSocialOutline className="w-5 h-5"/>
+                                </button>
 
+                                <button
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200"
+                                    onClick={() => setIsFavorite(!isFavorite)}
+                                >
+                                    {
+                                        isFavorite ? (
+                                            <IoHeart className="w-5 h-5 text-red-500"/>
+                                        ) : (
+                                            <IoHeartOutline className="w-5 h-5"/>
+                                        )
+                                    }
+                                </button>
+                            </div>
+
+                            <div className="flex flex-col gap-[10px]">
+                                <button
+                                    onClick={prevImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Previous image"
+                                >
+                                    <BiChevronLeft className="w-6 h-6"/>
+                                </button>
+                                <button
+                                    onClick={nextImage}
+                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
+                                    aria-label="Next image"
+                                >
+                                    <BiChevronRight className="w-6 h-6"/>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="scrollbar flex w-full lg:w-[87%] gap-2 mt-4 overflow-x-auto">
+                        {images.map((img, index) => (
+                            <button
+                                key={index}
+                                onClick={() => selectThumbnail(index)}
+                                className={`flex-shrink-0 bg-gray-100 w-20 transition-all duration-300 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
+                                }`}
+                            >
+                                <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover"/>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Product Details Section */}
+                <div className="flex flex-col">
+                    <div className="flex justify-between items-start">
+                        <div className="w-full">
+                            <p className="text-gray-400 text-[0.9rem]">John Lewis ANYDAY</p>
+                            <h1 className="text-[1.6rem] lg:text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
+                            <div className="flex flex-col lg:flex-row lg:items-center justify-between w-full gap-1 lg:gap-4 mb-4">
+                                <div className="flex items-center">
+                                    <span className="text-[1.4rem] font-semibold text-gray-800">£28.00</span>
+                                    <span className="text-gray-400 text-[1rem] line-through ml-2">£40.00</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <IoStar className="text-yellow-400 text-[1.1rem]"/>
+                                    <span className="text-gray-800 font-semibold">4.5</span>
+                                    <span className="text-gray-500">(1,238 Sold)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="mb-6 border-t-[2px] border-gray-200 border-dashed mt-1 pt-6">
+                        <h2 className="text-gray-700 font-semibold mb-2">Description:</h2>
+                        <p className="text-[0.9rem] text-gray-600">
+                            Boba etiam ut bulla tea est potus electus singulari compositione saporum et textuum, quae in
+                            Taiwan annis 1980 orta sunt. Boba refert ad pitas marnicas tapiocas in fundo potus inventas,
+                            quae typice lacte tea nigro sapiuntur.
+                            <button className="text-blue-600 hover:underline ml-1">See More...</button>
+                        </p>
+                    </div>
+
+                    <div className="mb-8">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Color: <span className="text-gray-700 font-semibold">{selectedColor}</span></h2>
+                        </div>
+                        <div className="flex gap-2">
+                            {colors.map((color) => (
+                                <button
+                                    key={color.name}
+                                    onClick={() => setSelectedColor(color.name)}
+                                    className={` w-20 h-10 rounded-md border-2 transition-all duration-300 ${
+                                        selectedColor === color.name ? "border-[#0FABCA] p-1" : "border-transparent" } `}
+                                    aria-label={`Select ${color.name} color`}
+                                >
+                                    <div className={`w-full h-full rounded-md transition-all duration-300 ${color.class}`}></div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="mb-10">
+                        <div className="flex justify-between items-center mb-2">
+                            <h2 className="font-medium text-gray-400">Size: <span className="font-semibold text-gray-700">{selectedSize}</span></h2>
+                            <button className="text-gray-600 text-[0.8rem] underline">View Size Chart</button>
+                        </div>
+                        <div className="flex w-full flex-wrap gap-2">
+                            {sizes.map((size) => (
+                                <button
+                                    key={size}
+                                    onClick={() => setSelectedSize(size)}
+                                    className={
+                                        `px-4 py-2 max-w-[60px] grow rounded-md border ${selectedSize === size
+                                            ? "border-[#0FABCA] bg-[#0FABCA] text-white"
+                                            : "border-gray-200 hover:border-[#0FABCA]"}`}
+                                >
+                                    {size}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col lg:flex-row gap-4 mt-auto">
+                        <button className="grow py-3 px-6 bg-[#0FABCA] hover:bg-[#0FABCA]/90 rounded-md text-white">
+                            Add To Cart
+                        </button>
+                        <button className="grow py-3 px-6 border border-gray-300 text-gray-600 rounded-md">
+                            Checkout Now
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };
 
-export default AdsCard;
+export default ProductDetailsPage;

From efe25b9e8a18015e5d75659997e90a82e28121e5 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Mon, 9 Dec 2024 23:06:28 +0600
Subject: [PATCH 21/22] update: landing page ui updated

---
 src/Components/Home/AboutUs.jsx         | 4 ++--
 src/Components/Home/PrivacyPolicy.jsx   | 4 +++-
 src/Components/Home/TemplatesSlider.jsx | 2 +-
 src/Components/Home/feedback.jsx        | 5 ++++-
 src/ShortcutGenerator/Generator.jsx     | 7 ++++---
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/Components/Home/AboutUs.jsx b/src/Components/Home/AboutUs.jsx
index 4ee3dec..74865bd 100644
--- a/src/Components/Home/AboutUs.jsx
+++ b/src/Components/Home/AboutUs.jsx
@@ -48,7 +48,7 @@ const Hero = () => {
                             offering a comprehensive collection of pre-built UI components, website templates, and more.
                         </p>
 
-                        <p className='mt-3 text-[1rem] text-gray-500'>
+                        <p className='mt-4 text-[1rem] text-gray-500'>
                             Our mission is to empower developers to build beautiful, functional web applications without
                             the hassle of designing from scratch. At ZenUI, we believe that great design and seamless
                             functionality should be accessible to everyone. That's why we've meticulously crafted a
@@ -56,7 +56,7 @@ const Hero = () => {
                             and easy to integrate.
                         </p>
 
-                        <p className='mt-3 text-[1rem] text-gray-500'>
+                        <p className='mt-4 text-[1rem] text-gray-500'>
                             Each component is designed with a focus on user experience, ensuring that your applications
                             look great and perform flawlessly across all devices. Beyond our extensive library of UI
                             components and pre-built website templates, we also provide a rich collection of free icons
diff --git a/src/Components/Home/PrivacyPolicy.jsx b/src/Components/Home/PrivacyPolicy.jsx
index cdd7cf8..ff04d3d 100644
--- a/src/Components/Home/PrivacyPolicy.jsx
+++ b/src/Components/Home/PrivacyPolicy.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 const PrivacyPolicy = () => {
 
+    const date = new Date();
+
     return (
         <section className="w-full max-w-[1700px] mx-auto 640px:px-10 px-5 1024px:px-12 pt-[2.5rem] pb-[4rem] mx-auto p-6 min-h-screen relative">
 
@@ -9,7 +11,7 @@ const PrivacyPolicy = () => {
 
             <div className='max-w-[800px] text-gray-800'>
                 <h1 className="text-3xl font-bold mb-4 text-[#0FABCA]">Privacy Policy for Zenui Library</h1>
-                <p className="mb-4 !text-gray-500">Effective Date: January 1, 2025</p>
+                <p className="mb-4 !text-gray-500">Effective Date: January 1, {date.getFullYear()}</p>
 
                 <p className="mb-4 !text-gray-500">
                     Welcome to Zenui Library. Your privacy is important to us. This Privacy Policy outlines how we
diff --git a/src/Components/Home/TemplatesSlider.jsx b/src/Components/Home/TemplatesSlider.jsx
index 9249b6c..d92f9cb 100644
--- a/src/Components/Home/TemplatesSlider.jsx
+++ b/src/Components/Home/TemplatesSlider.jsx
@@ -17,7 +17,7 @@ const TemplatesSlider = () => {
 
     return (
         <div className='max-w-[1650px] mx-auto'>
-            <div data-aos="fade-zoom-in" className='w-full items-center justify-center text-center mb-4 640px:mb-[4rem] 640px:mt-20 mt-12 1024px:mt-24'>
+            <div data-aos="fade-zoom-in" className='w-full items-center justify-center text-center mb-4 640px:mb-[4rem] 640px:mt-20 mt-12 1024px:mt-16'>
 
                 <div className='gradient-border !rounded-md hover:rotate-0 transition-all duration-300 rotate-[10deg]'>
                     <div className='bg-white h-full !rounded-md'>
diff --git a/src/Components/Home/feedback.jsx b/src/Components/Home/feedback.jsx
index f132772..c22eaad 100644
--- a/src/Components/Home/feedback.jsx
+++ b/src/Components/Home/feedback.jsx
@@ -21,7 +21,7 @@ const Feedback = () => {
     return (
         <section className='relative mt-12 max-w-[1700px] mx-auto'>
 
-            <div className='absolute bottom-[-120px] left-[-120px] opacity-40 rotate-[-240deg] w-[550px]'>
+            <div className='absolute top-[-120px] left-[-120px] opacity-40 rotate-[-240deg] w-[550px]'>
                 <img src='https://i.ibb.co/VxXFnSz/abstract-wavy-line-removebg-preview.png' alt='vector'
                      className='animation-bounce'/>
             </div>
@@ -56,6 +56,9 @@ const Feedback = () => {
                     ))}
                 </div>
             </div>
+
+            {/* bottom shadow card */}
+            <div className='w-full h-[100px] 640px:h-[300px] bg-gradient-to-t from-white top-[rgb(255,255,255,0.8)] absolute bottom-8 left-0 right-0'></div>
         </section>
     );
 };
diff --git a/src/ShortcutGenerator/Generator.jsx b/src/ShortcutGenerator/Generator.jsx
index a76c491..c1f4314 100644
--- a/src/ShortcutGenerator/Generator.jsx
+++ b/src/ShortcutGenerator/Generator.jsx
@@ -167,13 +167,14 @@ document.removeEventListener('keydown', ${functionName});
 
                 <div className='flex items-center gap-[15px] mt-7'>
                     <button onClick={generateCode}
-                            className='code_generate_btn bg-gradient-to-r from-[#0FABCA] hover:from-[#0FABCA]/80 to-[#CD00F1] hover:to-[#CD00F1]/80 text-white py-2.5 px-6 rounded-md'>
+                            className='code_generate_btn bg-gradient-to-r from-[#0FABCA] hover:from-[#0FABCA]/80 to-[#CD00F1] hover:to-[#CD00F1]/80 flex items-center gap-[6px] text-white py-2.5 px-6 rounded-md'>
+                        <img alt='magic/image' src='https://i.ibb.co.com/GFqqKxr/Sparkling.png' className='w-[25px]'/>
                         {isGenerating ? 'Generating...' : 'Generate Code'}
                     </button>
 
                     <button
-                        onClick={()=> setCheatsheetOpen(true)}
-                        className='flex items-center gap-[8px] text-[1rem] py-2.5 px-4 hover:bg-gray-50 border border-gray-300 rounded-md text-gray-600'>
+                        onClick={() => setCheatsheetOpen(true)}
+                        className='flex items-center gap-[8px] text-[1rem] py-[10.5px] px-4 hover:bg-gray-50 border border-gray-300 rounded-md text-gray-600'>
                         <FiEye/>
                         Valid Shortcut Cheatsheet
                     </button>

From 586d095cdb819c6d93c204e2a6cecb6273efac19 Mon Sep 17 00:00:00 2001
From: asfak00 <asfakahmed680@gmail.com>
Date: Mon, 16 Dec 2024 21:37:39 +0600
Subject: [PATCH 22/22] update: checkout page responsive & code adding complete

---
 src/Components/Home/Navbar.jsx                |  92 ++-
 src/Components/Home/feedback.jsx              |   2 +-
 .../CheckoutPages/CheckoutPageExample1.jsx    |  30 +-
 .../CheckoutPages/CheckoutPageExample2.jsx    |  18 +-
 .../Blocks/E-Commerce/CheckoutPages/Index.jsx | 660 +++++++++++++++++-
 .../Blocks/EmptyPages/Empty.jsx               |   2 +-
 .../Blocks/Randoms/ResponsiveSearchbar.jsx    |   2 +-
 .../Content/Data Display/Timeline.jsx         |   4 +-
 .../SidebarContent/Content/Randoms/Code.jsx   |   4 +-
 src/Shared/Demo.jsx                           | 348 ++++-----
 10 files changed, 912 insertions(+), 250 deletions(-)

diff --git a/src/Components/Home/Navbar.jsx b/src/Components/Home/Navbar.jsx
index 1457793..9d556cd 100644
--- a/src/Components/Home/Navbar.jsx
+++ b/src/Components/Home/Navbar.jsx
@@ -19,6 +19,9 @@ const Navbar = () => {
     const [isDeveloperKitHover, setIsDeveloperKitHover] = useState(false);
     const [isToolsHover, setIsToolsHover] = useState(false);
     const [eCommerceHover, setECommerceHover] = useState(false)
+    const [isActiveToolsMenu, setIsActiveToolsMenu] = useState(false);
+    const [isActiveEcommcerMenu, setIsActiveEcommcerMenu] = useState(false);
+    const [isActiveDeveloperKitMenu, setIsActiveDeveloperKitMenu] = useState(false);
 
     const [searchPlaceholderText, setSearchPlaceholderText] = useState("search component");
 
@@ -26,25 +29,6 @@ const Navbar = () => {
         setIsSearchOpen(true);
     };
 
-    // light and dark mood
-    const [toggle, setToggle] = useState(
-        JSON.parse(localStorage.getItem("theme"))
-            ? JSON.parse(localStorage.getItem("theme"))
-            : false
-    );
-
-    const element = document.documentElement;
-
-    localStorage.setItem("theme", JSON.stringify(toggle));
-
-    useEffect(() => {
-        if (toggle) {
-            element.classList.add("dark");
-        } else {
-            element.classList.remove("dark");
-        }
-    }, [toggle]);
-
     const getTheRouteName = () => {
         return window.location.pathname
     }
@@ -104,6 +88,49 @@ const Navbar = () => {
         return () => clearInterval(interval);
     }, []);
 
+
+    const handleActiveToolsMenu = () => {
+        setIsActiveToolsMenu(!isActiveToolsMenu)
+        setIsActiveEcommcerMenu(false)
+        setIsActiveDeveloperKitMenu(false)
+    }
+
+    const handleActiveDeveloperKitMenu = () => {
+        setIsActiveDeveloperKitMenu(!isActiveDeveloperKitMenu)
+        setIsActiveToolsMenu(false)
+        setIsActiveEcommcerMenu(false)
+    }
+
+    const handleActiveEcommerceMenu = () => {
+        setIsActiveEcommcerMenu(!isActiveEcommcerMenu)
+        setIsActiveToolsMenu(false)
+        setIsActiveDeveloperKitMenu(false)
+    }
+
+    const handleToolsMouseHover = () => {
+        setIsToolsHover(true)
+        setIsDeveloperKitHover(false)
+        setIsActiveEcommcerMenu(false)
+        setIsActiveDeveloperKitMenu(false)
+        setECommerceHover(false)
+    }
+
+    const handleDeveloperKitMouseHover = () => {
+        setIsToolsHover(false)
+        setIsDeveloperKitHover(true)
+        setIsActiveToolsMenu(false)
+        setIsActiveEcommcerMenu(false)
+        setECommerceHover(false)
+    }
+
+    const handleEcommerceMouseHover = () => {
+        setIsToolsHover(false)
+        setIsDeveloperKitHover(false)
+        setIsActiveToolsMenu(false)
+        setIsActiveDeveloperKitMenu(false)
+        setECommerceHover(true)
+    }
+
     return (
         <>
             <nav
@@ -132,14 +159,15 @@ const Navbar = () => {
                         <ul className={`text-gray-600 flex items-center gap-8 font-[500] capitalize text-[1.2rem]`}>
                             <Link to='/about-us' className='cursor-pointer hover:text-[#0FABCA] transition-all duration-200'>About Us</Link>
                             <li
-                                onMouseEnter={() => setIsToolsHover(true)}
+                                onMouseEnter={handleToolsMouseHover}
                                 onMouseLeave={() => setIsToolsHover(false)}
-                                className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
+                                onClick={handleActiveToolsMenu}
+                                className={`${isActiveToolsMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
                             >
                                 Tools
-                                <IoIosArrowDown className={`${isToolsHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
+                                <IoIosArrowDown className={`${(isToolsHover || isActiveToolsMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
 
-                                {isToolsHover && (
+                                {(isToolsHover || isActiveToolsMenu) && (
                                     <motion.div
                                         initial={{opacity: 0, scale: 0.8}}
                                         animate={{opacity: 1, scale: 1}}
@@ -183,14 +211,15 @@ const Navbar = () => {
                             </li>
 
                             <li
-                                onMouseEnter={() => setIsDeveloperKitHover(true)}
+                                onMouseEnter={handleDeveloperKitMouseHover}
                                 onMouseLeave={() => setIsDeveloperKitHover(false)}
-                                className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
+                                onClick={handleActiveDeveloperKitMenu}
+                                className={`${isActiveDeveloperKitMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
                             >
                                 Components
-                                <IoIosArrowDown className={`${isDeveloperKitHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
+                                <IoIosArrowDown className={`${(isDeveloperKitHover || isActiveDeveloperKitMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
 
-                                {isDeveloperKitHover && (
+                                {(isDeveloperKitHover || isActiveDeveloperKitMenu) && (
                                     <motion.div
                                         initial={{opacity: 0, scale: 0.8}}
                                         animate={{opacity: 1, scale: 1}}
@@ -237,16 +266,17 @@ const Navbar = () => {
                             </li>
 
                             <li
-                                onMouseEnter={() => setECommerceHover(true)}
+                                onMouseEnter={handleEcommerceMouseHover}
                                 onMouseLeave={() => setECommerceHover(false)}
-                                className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
+                                onClick={handleActiveEcommerceMenu}
+                                className={`${isActiveEcommcerMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
                             >
                                 E-Commerce
                                 <NewBadge/>
                                 <div className='w-[8px] h-[8px] bg-green-500 rounded-full absolute top-5 right-6 animate-[ping_1.5s_linear_infinite]'></div>
-                                <IoIosArrowDown className={`${eCommerceHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
+                                <IoIosArrowDown className={`${(eCommerceHover|| isActiveEcommcerMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
 
-                                {eCommerceHover && (
+                                {(eCommerceHover||isActiveEcommcerMenu) && (
                                     <motion.div
                                         initial={{opacity: 0, scale: 0.8}}
                                         animate={{opacity: 1, scale: 1}}
diff --git a/src/Components/Home/feedback.jsx b/src/Components/Home/feedback.jsx
index c22eaad..ecf4922 100644
--- a/src/Components/Home/feedback.jsx
+++ b/src/Components/Home/feedback.jsx
@@ -58,7 +58,7 @@ const Feedback = () => {
             </div>
 
             {/* bottom shadow card */}
-            <div className='w-full h-[100px] 640px:h-[300px] bg-gradient-to-t from-white top-[rgb(255,255,255,0.8)] absolute bottom-8 left-0 right-0'></div>
+            <div className='w-full h-[100px] 640px:h-[300px] z-10 bg-gradient-to-t from-white top-[rgb(255,255,255,0.8)] absolute bottom-8 left-0 right-0'></div>
         </section>
     );
 };
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
index 88f16de..ec9d773 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx
@@ -22,18 +22,18 @@ const CheckoutPageExample1 = () => {
     const cities = ["Los Angeles", "Toronto", "Mumbai", "Sydney", "London"];
 
     return (
-        <div className="grid gap-8 grid-cols-3 w-full">
+        <div className="grid gap-8 grid-cols-1 1024px:grid-cols-3 w-full">
 
                     {/* Billing and Payment Form */}
-                    <div className="col-span-2 space-y-8 w-full">
+                    <div className="1024px:col-span-2 space-y-8 w-full">
 
                             {/* Billing Information */}
                             <div className='w-full'>
                                 <h2 className="text-[1.5rem] font-medium text-gray-700 mb-6">Billing Information</h2>
 
                                 <div className="grid grid-cols-1 gap-[16px]">
-                                    <div className='flex items-center gap-4'>
-                                        <div className='w-[50%]'>
+                                    <div className='flex flex-col 1024px:flex-row items-center gap-4'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="firstName" className={`${labelStyles}`}>
                                                 First name
                                             </label>
@@ -44,7 +44,7 @@ const CheckoutPageExample1 = () => {
                                                 className={`${inputStyles}`}
                                             />
                                         </div>
-                                        <div className='w-[50%]'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="lastName" className={`${labelStyles}`}>
                                                 Last name
                                             </label>
@@ -79,28 +79,28 @@ const CheckoutPageExample1 = () => {
                                         />
                                     </div>
 
-                                    <div className='flex items-center gap-4 w-full'>
-                                        <div className='w-[50%]'>
+                                    <div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="country" className={`${labelStyles}`}>
                                                 Country
                                             </label>
                                             <InputSelect items={countries}/>
                                         </div>
-                                        <div className='w-[50%]'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="state" className={`${labelStyles}`}>
                                                 Region/State
                                             </label>
                                             <InputSelect items={regions}/>
                                         </div>
                                     </div>
-                                    <div className='flex items-center gap-4 w-full'>
-                                        <div className='w-[50%]'>
+                                    <div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="city" className={`${labelStyles}`}>
                                                 City
                                             </label>
                                             <InputSelect items={cities}/>
                                         </div>
-                                        <div className='w-[50%]'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="zipCode" className={`${labelStyles}`}>
                                             Zip Code
                                             </label>
@@ -113,8 +113,8 @@ const CheckoutPageExample1 = () => {
                                         </div>
                                     </div>
 
-                                    <div className='flex items-center gap-4 w-full'>
-                                        <div className='w-[50%]'>
+                                    <div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="email" className={`${labelStyles}`}>
                                                 Email
                                             </label>
@@ -125,7 +125,7 @@ const CheckoutPageExample1 = () => {
                                                 className={`${inputStyles}`}
                                             />
                                         </div>
-                                        <div className='w-[50%]'>
+                                        <div className='w-full 1024px:w-[50%]'>
                                             <label htmlFor="phone" className={`${labelStyles}`}>
                                                 Phone Number
                                             </label>
@@ -176,7 +176,7 @@ const CheckoutPageExample1 = () => {
                         {/* Payment Options */}
                         <div className='border border-gray-200 rounded-md'>
                             <h2 className="text-[1.2rem] font-medium text-gray-700 border-b border-gray-200 px-5 py-3">Payment Option</h2>
-                            <div className="grid grid-cols-2 gap-4 w-full p-5">
+                            <div className="grid grid-cols-1 1024px:grid-cols-2 gap-4 w-full p-5">
                                 <button
                                     onClick={() => setSelectedPayment('cash')}
                                     className={`flex flex-col items-center justify-center p-4 border rounded-lg ${
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx
index e8d783f..6e60f07 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx
@@ -3,17 +3,17 @@ import {AiOutlinePlus} from "react-icons/ai";
 
 const CheckoutPageExample2 = () => {
     return (
-        <div className="w-full flex">
+        <div className="w-full flex flex-col gap-8 1024px:gap-0 1024px:flex-row">
 
             {/* Left Column - Order Summary */}
-            <div className='bg-gray-50 rounded-md p-8 flex-1'>
+            <div className='bg-gray-50 rounded-md p-4 1024px:p-8 flex-1'>
 
                 {/* order summery */}
                 <div>
                     <h2 className="text-[1.2rem] text-gray-700 font-semibold mb-6">Your order</h2>
                     <div className="border border-gray-200 rounded-md">
-                        <div className="flex items-center gap-4 p-4">
-                            <div className='border relative border-gray-200 rounded-md bg-white'>
+                        <div className="flex flex-col 1024px:flex-row 1024px:items-center gap-4 p-4">
+                            <div className='border relative border-gray-200 w-max rounded-md bg-white'>
                                 <img src="https://i.ibb.co.com/x6fq6nC/Rectangle-516.png" alt="Nike Air Zoom Pegasus 39"
                                      className="w-20 h-20 object-cover rounded"/>
 
@@ -30,8 +30,8 @@ const CheckoutPageExample2 = () => {
                             </div>
                             <span className="font-medium">$28.00</span>
                         </div>
-                        <div className="flex items-center gap-4 border-t p-4 border-gray-200">
-                            <div className='border relative border-gray-200 rounded-md bg-white'>
+                        <div className="flex flex-col 1024px:flex-row 1024px:items-center gap-4 border-t p-4 border-gray-200">
+                            <div className='border relative border-gray-200 w-max rounded-md bg-white'>
                                 <img src="https://i.ibb.co.com/VJKrBt5/Rectangle-519.png"
                                      alt="Nike React Pegasus Trail 4"
                                      className="w-20 h-20 object-cover rounded"/>
@@ -84,7 +84,7 @@ const CheckoutPageExample2 = () => {
             </div>
 
             {/* Right Column - Checkout Form */}
-            <div className="flex-1 px-8">
+            <div className="flex-1 1024px:px-8">
                 <form className="space-y-6">
                     <div>
                         <label htmlFor="email"
@@ -121,7 +121,7 @@ const CheckoutPageExample2 = () => {
                                 Add new
                             </button>
                         </div>
-                        <div className="flex w-full gap-4">
+                        <div className="flex flex-col 1024px:flex-row w-full gap-4">
                             <label
                                 className="flex-1 flex items-center justify-between gap-2 border-gray-200 border rounded-lg p-4">
                                 <div>
@@ -180,7 +180,7 @@ const CheckoutPageExample2 = () => {
                             <option>South Africa</option>
                         </select>
                     </div>
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 1024px:grid-cols-2 gap-4">
                         <div>
                             <label htmlFor="zipCode" className="text-[1rem] font-medium text-gray-800 mb-1">Zip
                                 code</label>
diff --git a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
index 4707479..dab54be 100644
--- a/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/Index.jsx
@@ -15,101 +15,711 @@ import CheckoutPageExample2 from "./CheckoutPageExample2.jsx";
 
 const Index = () => {
 
-    const [wrongRoute1Preview, setWrongRoute1Preview] = useState(true);
-    const [wrongRoute1Code, setWrongRoute1Code] = useState(false);
+    const [checkoutPage1Preview, setCheckoutPage1Preview] = useState(true);
+    const [checkoutPage1Code, setCheckoutPage1Code] = useState(false);
+
+    const [checkoutPage2Preview, setCheckoutPage2Preview] = useState(true);
+    const [checkoutPage2Code, setCheckoutPage2Code] = useState(false);
 
     const toggleCardView = useToggleCardView()
 
     return (
         <aside className="flex items-start justify-between gap-6 w-full 640px:pl-[2.5rem] px-6 640px:px-10">
             <div>
-                <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                <ContentHeader text={"checkout page 1"} id={"checkout_page_1"}/>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    The checkout page is where users review items, add shipping details, choose payment, and confirm their purchase securely.
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${checkoutPage1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                checkoutPage1Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setCheckoutPage1Preview, setCheckoutPage1Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                checkoutPage1Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setCheckoutPage1Preview, setCheckoutPage1Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {checkoutPage1Preview && (
                         <div className={`p-8 flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
                             <CheckoutPageExample1/>
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {checkoutPage1Code && <BlocksShowCode code='
+import React, {useState} from "react";
+
+// react icons
+import {IoChevronDown} from "react-icons/io5";
+
+const CheckoutPage = () => {
+    const [selectedPayment, setSelectedPayment] = useState("credit-card")
+    const [isChecked, setIsChecked] = useState(false)
+
+    const handleCheckboxChange = (event) => {
+        if(event.target.checked){
+            setIsChecked(true)
+        }else {
+            setIsChecked(false)
+        }
+    }
+
+    const inputStyles = "border border-gray-200 w-full py-2 px-4 rounded-md mt-1 outline-none focus:border-[#0FABCA]"
+    const labelStyles = "text-[14px] font-[400] text-gray-700"
+
+    const countries = ["United States", "Canada", "India", "Australia", "United Kingdom"];
+    const regions = ["California", "Ontario", "Maharashtra", "New South Wales", "England"];
+    const cities = ["Los Angeles", "Toronto", "Mumbai", "Sydney", "London"];
+
+    return (
+        <div className="grid gap-8 grid-cols-1 lg:grid-cols-3 w-full">
+
+            {/* Billing and Payment Form */}
+            <div className="lg:col-span-2 space-y-8 w-full">
+
+                {/* Billing Information */}
+                <div className="w-full">
+                    <h2 className="text-[1.5rem] font-medium text-gray-700 mb-6">Billing Information</h2>
+
+                    <div className="grid grid-cols-1 gap-[16px]">
+                        <div className="flex flex-col lg:flex-row items-center gap-4">
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="firstName" className={`${labelStyles}`}>
+                                    First name
+                                </label>
+                                <input
+                                    placeholder="First name"
+                                    type="text"
+                                    id="firstName"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="lastName" className={`${labelStyles}`}>
+                                    Last name
+                                </label>
+                                <input
+                                    placeholder="Last name"
+                                    type="text"
+                                    id="lastName"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                        </div>
+                        <div className="sm:col-span-2">
+                            <label htmlFor="company" className={`${labelStyles}`}>
+                                Company Name (Optional)
+                            </label>
+                            <input
+                                placeholder="Company name"
+                                type="text"
+                                id="company"
+                                className={`${inputStyles}`}
+                            />
+                        </div>
+                        <div className="sm:col-span-2">
+                            <label htmlFor="address" className={`${labelStyles}`}>
+                                Address
+                            </label>
+                            <input
+                                placeholder="Address"
+                                type="text"
+                                id="address"
+                                className={`${inputStyles}`}
+                            />
+                        </div>
+
+                        <div className="flex flex-col lg:flex-row items-center gap-4 w-full">
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="country" className={`${labelStyles}`}>
+                                    Country
+                                </label>
+                                <InputSelect items={countries}/>
+                            </div>
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="state" className={`${labelStyles}`}>
+                                    Region/State
+                                </label>
+                                <InputSelect items={regions}/>
+                            </div>
+                        </div>
+                        <div className="flex flex-col lg:flex-row items-center gap-4 w-full">
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="city" className={`${labelStyles}`}>
+                                    City
+                                </label>
+                                <InputSelect items={cities}/>
+                            </div>
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="zipCode" className={`${labelStyles}`}>
+                                    Zip Code
+                                </label>
+                                <input
+                                    placeholder="Zip code"
+                                    type="text"
+                                    id="zipCode"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col lg:flex-row items-center gap-4 w-full">
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="email" className={`${labelStyles}`}>
+                                    Email
+                                </label>
+                                <input
+                                    placeholder="Email address"
+                                    type="email"
+                                    id="email"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                            <div className="w-full lg:w-[50%]">
+                                <label htmlFor="phone" className={`${labelStyles}`}>
+                                    Phone Number
+                                </label>
+                                <input
+                                    placeholder="Phone number"
+                                    type="tel"
+                                    id="phone"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="mt-4">
+                        <label className="flex items-center gap-[10px] cursor-pointer">
+                            <input type="checkbox" className="hidden" onChange={handleCheckboxChange}/>
+                            {
+                                isChecked ? (
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <g id="Group 335">
+                                            <rect id="Rectangle 331" x="-0.00012207" y="6.10352e-05"
+                                                  width="20"
+                                                  height="20" rx="4" className="fill-[#0FABCA]"
+                                                  stroke="#0FABCA"></rect>
+                                            <path id="Vector"
+                                                  d="M8.19594 15.4948C8.0646 15.4949 7.93453 15.4681 7.81319 15.4157C7.69186 15.3633 7.58167 15.2865 7.48894 15.1896L4.28874 11.8566C4.10298 11.6609 3.99914 11.3965 3.99988 11.1213C4.00063 10.8461 4.10591 10.5824 4.29272 10.3878C4.47953 10.1932 4.73269 10.0835 4.99689 10.0827C5.26109 10.0819 5.51485 10.1901 5.70274 10.3836L8.19591 12.9801L14.2887 6.6335C14.4767 6.4402 14.7304 6.3322 14.9945 6.33307C15.2586 6.33395 15.5116 6.44362 15.6983 6.63815C15.8851 6.83268 15.9903 7.09627 15.9912 7.37137C15.992 7.64647 15.8883 7.91073 15.7027 8.10648L8.90294 15.1896C8.8102 15.2865 8.7 15.3633 8.57867 15.4157C8.45734 15.4681 8.32727 15.4949 8.19594 15.4948Z"
+                                                  fill="white"></path>
+                                        </g>
+                                    </svg>
+                                ) : (
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                         xmlns="http://www.w3.org/2000/svg">
+                                        <g id="Group 335">
+                                            <rect id="Rectangle 331" x="-0.00012207" y="6.10352e-05"
+                                                  width="20"
+                                                  height="20" rx="4" className="fill-transparent"
+                                                  stroke="#ccc"></rect>
+                                        </g>
+                                    </svg>
+                                )
+                            }
+
+                            <span className="text-[0.9rem] text-gray-700">Ship to a different address</span>
+                        </label>
+                    </div>
+                </div>
+
+                {/* Payment Options */}
+                <div className="border border-gray-200 rounded-md">
+                    <h2 className="text-[1.2rem] font-medium text-gray-700 border-b border-gray-200 px-5 py-3">Payment Option</h2>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full p-5">
+                        <button
+                            onClick={() => setSelectedPayment("cash")}
+                            className={`flex flex-col items-center justify-center p-4 border rounded-lg ${
+                                selectedPayment === "cash" ? "border-[#0FABCA]" : "border-gray-200"
+                            }`}
+                        >
+                            <span className="text-2xl">💵</span>
+                            <span
+                                className="text-[0.9rem] text-gray-700 font-[500] mt-2">Cash on Delivery</span>
+                        </button>
+                        <button
+                            onClick={() => setSelectedPayment("credit-card")}
+                            className={`flex flex-col items-center justify-center p-4 border rounded-lg ${
+                                selectedPayment === "credit-card" ? "border-[#0FABCA]" : "border-gray-200"
+                            }`}
+                        >
+                            <span className="text-2xl">💳</span>
+                            <span
+                                className="text-[0.9rem] text-gray-700 font-[500] mt-2">Debit/Credit Card</span>
+                        </button>
+                    </div>
+
+                    {selectedPayment === "credit-card" && (
+                        <div className=" px-5 pb-5 space-y-[16px]">
+                            <div>
+                                <label htmlFor="cardName" className={`${labelStyles}`}>
+                                    Name on Card
+                                </label>
+                                <input
+                                    placeholder="Name on card"
+                                    type="text"
+                                    id="cardName"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                            <div>
+                                <label htmlFor="cardNumber" className={`${labelStyles}`}>
+                                    Card Number
+                                </label>
+                                <input
+                                    placeholder="Card number"
+                                    type="text"
+                                    id="cardNumber"
+                                    className={`${inputStyles}`}
+                                />
+                            </div>
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label htmlFor="expireDate" className={`${labelStyles}`}>
+                                        Expire Date
+                                    </label>
+                                    <input
+                                        type="text"
+                                        id="expireDate"
+                                        placeholder="MM/YY"
+                                        className={`${inputStyles}`}
+                                    />
+                                </div>
+                                <div>
+                                    <label htmlFor="cvc" className={`${labelStyles}`}>
+                                        CVC
+                                    </label>
+                                    <input
+                                        placeholder="CVC"
+                                        type="text"
+                                        id="cvc"
+                                        className={`${inputStyles}`}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                {/* Additional Information */}
+                <div>
+                    <h2 className="text-[1.2rem] font-medium text-gray-700 mb-4">Additional Information</h2>
+                    <div>
+                        <label htmlFor="notes" className={`${labelStyles}`}>
+                            Order Notes (Optional)
+                        </label>
+                        <textarea
+                            id="notes"
+                            rows={4}
+                            placeholder="Notes about your order e.g. special notes for delivery"
+                            className={`${inputStyles} py-3`}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Order Summary */}
+            <div className="w-full">
+                <div className="bg-white rounded-md border border-gray-200 p-6">
+                    <h2 className="text-[1.2rem] font-medium text-gray-700 mb-6">Order Summary</h2>
+                    <div className="space-y-4">
+                        <div className="flex items-center space-x-4">
+                            <div className="flex-shrink-0">
+                                <img
+                                    src="https://i.ibb.co.com/VNM4dX6/Image-24.png"
+                                    alt="product/image"
+                                    className="w-[50px] h-[50px] object-cover"
+                                />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-gray-900 line-clamp-1">Canon EOS 1500D DSLR Camera Body+ 18</p>
+                                <div className="flex items-center gap-[5px] mt-0.5">
+                                    <p className="text-sm text-gray-500">2 x </p>
+                                    <p className="text-sm text-[#0FABCA] font-[600]">$570</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex items-center space-x-4">
+                            <div className="flex-shrink-0">
+                                <img
+                                    src="https://i.ibb.co.com/F0bn52F/Image-25.png"
+                                    alt="product/image"
+                                    className="w-[50px] h-[50px] object-cover"
+                                />
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-gray-900 line-clamp-1">Wired Over-Ear Gaming Headphones with U</p>
+                                <div className="flex items-center gap-[5px] mt-0.5">
+                                    <p className="text-sm text-gray-500">1 x </p>
+                                    <p className="text-sm text-[#0FABCA] font-[600]">$100</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="pt-4 space-y-4">
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-600">Sub-total</span>
+                                <span className="font-medium text-gray-800">$670</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-600">Shipping</span>
+                                <span className="font-medium text-green-500">Free</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-600">Discount</span>
+                                <span className="font-medium text-gray-800">$20</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-600">Tax</span>
+                                <span className="font-medium text-gray-800">$650</span>
+                            </div>
+                        </div>
+
+                        <div className="border-t border-gray-200 pt-4">
+                            <div className="flex justify-between">
+                                <span className="text-base font-medium text-gray-800">Total</span>
+                                <span className="text-base font-medium text-gray-800">$357.99 USD</span>
+                            </div>
+                        </div>
+
+                        <button
+                            className="w-full bg-[#0FABCA] text-white py-3 px-4 rounded-lg hover:bg-[#0FABCA]/90 transition-colors">
+                            PLACE ORDER
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CheckoutPage;
+
+const InputSelect = ({items}) => {
+    // close the dropdown is clicked outside
+    document.addEventListener("click", function (event) {
+        let target = event.target;
+
+        if (!target.closest(".dropdown")) {
+            setIsActive(false);
+        }
+    });
+
+    // actions
+    const [isActive, setIsActive] = useState(false);
+    const [content, setContent] = useState("Select Option");
+
+    return (
+        <button
+            className="bg-[#fff] border border-gray-200 rounded-md mt-1 justify-between px-3 py-2 flex items-center gap-8  relative cursor-pointer dropdown w-full"
+            onClick={() => setIsActive(!isActive)}
+        >
+            <p className={`${content === "Select Option" && "text-gray-400"}`}>{content}</p>
+            <IoChevronDown
+                className={`${
+                    isActive ? " rotate-[180deg]" : " rotate-0"
+                } transition-all duration-300 text-gray-600 text-[1.2rem]`}
+            />
+            <div
+                className={`${
+                    isActive ? " opacity-100 scale-[1]" : " opacity-0 scale-[0.8] z-[-1]"
+                } w-full absolute top-12 left-0 right-0 z-40 bg-[#fff] rounded-xl flex flex-col  overflow-hidden transition-all duration-200 ease-in-out py-1`}
+                style={{
+                    boxShadow: "0 15px 40px -15px rgba(0, 0, 0, 0.2)",
+                }}
+            >
+                {items?.map((option, index) => (
+                    <p
+                        className="py-2 px-4 text-left text-gray-800 hover:bg-gray-50 transition-all duration-200"
+                        key={index}
+                        onClick={(e) => setContent(e.target.textContent)}
+                    >
+                        {option}
+                    </p>
+                ))}
+            </div>
+        </button>
+    );
+};
+
                     '/>
                     }
                 </div>
 
                 <div className='mt-8'>
-                    <ContentHeader text={"404 page 1"} id={"empty_page_1"}/>
+                    <ContentHeader text={"checkout page 2"} id={"checkout_page_2"}/>
                 </div>
 
                 <p className="w-full text-text text-[1rem]">
-                    A 404 page is a custom error page that informs users the requested page is not found, often offering
-                    navigation links to guide them back to the homepage or other sections.
+                    The checkout page is where users review items, add shipping details, choose payment, and confirm their purchase securely.
                 </p>
 
                 <div className="w-full border border-border rounded mt-8">
                     <div className="relative">
                         <div
-                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${wrongRoute1Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
+                            className={`absolute top-0 left-0 w-[90px] h-[40px] z-[1] bg-border transition-all duration-500 ${checkoutPage2Preview ? 'translate-x-[0px] !w-[100px]' : 'translate-x-[107px] rounded-br'}`}></div>
                         <button
                             className={`${
-                                wrongRoute1Preview && "text-tabTextColor"
+                                checkoutPage2Preview && "text-tabTextColor"
                             } px-6 py-2 border-b z-[2] relative text-text border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, true)}
+                            onClick={() => toggleCardView(setCheckoutPage2Preview, setCheckoutPage2Code, true)}
                         >
                             Preview
                         </button>
                         <button
                             className={`${
-                                wrongRoute1Code && "text-tabTextColor"
+                                checkoutPage2Code && "text-tabTextColor"
                             } px-6 py-2 border-r z-[2] relative text-text border-b rounded-br border-border`}
-                            onClick={() => toggleCardView(setWrongRoute1Preview, setWrongRoute1Code, false)}
+                            onClick={() => toggleCardView(setCheckoutPage2Preview, setCheckoutPage2Code, false)}
                         >
                             Code
                         </button>
                     </div>
-                    {wrongRoute1Preview && (
+                    {checkoutPage2Preview && (
                         <div className={`p-8 flex flex-wrap items-center gap-5 justify-center overflow-hidden`}>
                             <CheckoutPageExample2/>
                         </div>
                     )}
 
-                    {wrongRoute1Code && <BlocksShowCode code='
+                    {checkoutPage2Code && <BlocksShowCode code='
+import React from "react";
+
+// react icons
+import {AiOutlinePlus} from "react-icons/ai";
+
+const CheckoutPage = () => {
+    return (
+        <div className="w-full flex flex-col gap-8 lg:gap-0 lg:flex-row">
+
+            {/* Left Column - Order Summary */}
+            <div className="bg-gray-50 rounded-md p-4 lg:p-8 flex-1">
+
+                {/* order summery */}
+                <div>
+                    <h2 className="text-[1.2rem] text-gray-700 font-semibold mb-6">Your order</h2>
+                    <div className="border border-gray-200 rounded-md">
+                        <div className="flex flex-col lg:flex-row lg:items-center gap-4 p-4">
+                            <div className="border relative border-gray-200 w-max rounded-md bg-white">
+                                <img src="https://i.ibb.co.com/x6fq6nC/Rectangle-516.png" alt="Nike Air Zoom Pegasus 39"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className="px-[0.45rem] rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm">1</span>
+                            </div>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className="flex items-center gap-[30px] mt-2">
+                                    <p className="text-sm text-gray-500">Size: <b className="text-gray-800">XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className="text-gray-800">Blue</b>
+                                    </p>
+                                </div>
+                            </div>
+                            <span className="font-medium">$28.00</span>
+                        </div>
+                        <div className="flex flex-col lg:flex-row lg:items-center gap-4 border-t p-4 border-gray-200">
+                            <div className="border relative border-gray-200 w-max rounded-md bg-white">
+                                <img src="https://i.ibb.co.com/VJKrBt5/Rectangle-519.png"
+                                     alt="Nike React Pegasus Trail 4"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className="px-1.5 rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm">3</span>
+                            </div>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className="flex items-center gap-[30px] mt-2">
+                                    <p className="text-sm text-gray-500">Size: <b className="text-gray-800">XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className="text-gray-800">Blue</b>
+                                    </p>
+                                </div>
+                            </div>
+                            <span className="font-medium">$28.00</span>
+                        </div>
+                    </div>
+                    <div className="mt-6">
+                        <h3 className="font-medium mb-2 text-[1rem] text-gray-800">Discount Code</h3>
+                        <div className="flex gap-2 relative">
+                            <img alt="discount/png" src="https://i.ibb.co.com/r7rF8xK/ticket-discount.png"
+                                 className="w-[25px] absolute transform top-[50%] translate-y-[-50%] left-2"/>
+                            <input type="text" placeholder="BUYRI"
+                                   className="border w-full border-gray-200 bg-transparent outline-none focus:border-[#0FABCA] rounded pl-10 pr-3 py-2"/>
+                            <button
+                                className="absolute top-[50%] transform translate-y-[-50%] right-5 text-[0.9rem] text-[#0FABCA]">Apply
+                            </button>
+                        </div>
+                    </div>
+                    <div className="mt-8 space-y-2 border-t border-gray-200 pt-6">
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Subtotal</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$56.00</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Shipping Cost</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$8.00</span>
+                        </div>
+                        <div className="flex justify-between pb-3">
+                            <span className="text-[1rem] text-gray-500">Discount (10%)</span>
+                            <span className="text-[1rem] font-medium text-gray-800">-$13.00</span>
+                        </div>
+                        <div className="flex justify-between border-t border-gray-200 pt-5 font-medium">
+                            <span>Total</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$51.00</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Right Column - Checkout Form */}
+            <div className="flex-1 lg:px-8">
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="email"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Email</label>
+                        <input type="email" id="email" placeholder="joylawson@gmail.com"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                    </div>
+                    <div>
+                        <label htmlFor="phone" className="text-[1rem] font-medium text-gray-800 mb-1">Phone
+                            number</label>
+                        <div className="flex gap-2">
+                            <select
+                                className="border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5 w-[100px]">
+                                <option value="us">🇺🇸 +1</option>
+                                <option value="uk">🇬🇧 +44</option>
+                                <option value="in">🇮🇳 +91</option>
+                                <option value="bd">🇧🇩 +880</option>
+                                <option value="au">🇦🇺 +61</option>
+                                <option value="ca">🇨🇦 +1</option>
+                                <option value="de">🇩🇪 +49</option>
+                                <option value="fr">🇫🇷 +33</option>
+                                <option value="jp">🇯🇵 +81</option>
+                                <option value="za">🇿🇦 +27</option>
+                            </select>
+                            <input type="tel" id="phone" placeholder="(201) 830-8210"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                    </div>
+                    <div>
+                        <div className="flex items-center justify-between mb-2">
+                            <label className="text-[1rem] font-medium text-gray-800">Payment method</label>
+                            <button type="button" className="text-blue-600 text-right flex text-[0.9rem] items-center gap-[5px]">
+                                <AiOutlinePlus/>
+                                Add new
+                            </button>
+                        </div>
+                        <div className="flex flex-col lg:flex-row w-full gap-4">
+                            <label
+                                className="flex-1 flex items-center justify-between gap-2 border-gray-200 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="card" className="form-radio"
+                                               defaultChecked/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className="flex items-center gap-[5px] pl-5 mt-0.5">
+                                        <p className="text-[0.9rem] text-gray-500">Visa •</p>
+                                        <p className="text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer"> Edit</p>
+                                    </div>
+                                </div>
+                                <img src="https://i.ibb.co.com/NFwm4jb/Visa.png" alt="Visa"
+                                     className="w-[50px]"/>
+                            </label>
+                            <label
+                                className="flex-1 flex items-center justify-between border-gray-200 gap-2 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="paypal" className="form-radio"/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className="flex items-center gap-[5px] pl-5 mt-0.5">
+                                        <p className="text-[0.9rem] text-gray-500">Paypal •</p>
+                                        <p className="text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer"> Edit</p>
+                                    </div>
+                                </div>
+                                <img src="https://i.ibb.co.com/W3ykxd5/paypal.png" alt="PayPal"
+                                     className="w-[50px]"/>
+                            </label>
+                        </div>
+                    </div>
+                    <div>
+                        <label htmlFor="cardHolder" className="text-[1rem] font-medium text-gray-800 mb-1">Card
+                            holder name</label>
+                        <input type="text" id="cardHolder" placeholder="Ex. Jane Cooper"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                    </div>
+                    <div>
+                        <label htmlFor="billingAddress"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Billing address</label>
+                        <select id="billingAddress"
+                                className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5">
+                            <option>United States</option>
+                            <option>United Kingdom</option>
+                            <option>India</option>
+                            <option>Bangladesh</option>
+                            <option>Australia</option>
+                            <option>Canada</option>
+                            <option>Germany</option>
+                            <option>France</option>
+                            <option>Japan</option>
+                            <option>South Africa</option>
+                        </select>
+                    </div>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                        <div>
+                            <label htmlFor="zipCode" className="text-[1rem] font-medium text-gray-800 mb-1">Zip
+                                code</label>
+                            <input type="text" id="zipCode" placeholder="Ex. 73923"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                        <div>
+                            <label htmlFor="city"
+                                   className="text-[1rem] font-medium text-gray-800 mb-1">City</label>
+                            <input type="text" id="city" placeholder="Ex. New York"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <input type="checkbox" id="sameAsShipping" className="form-checkbox"/>
+                        <label htmlFor="sameAsShipping" className="text-sm text-gray-600">Billing address is
+                            same as shipping</label>
+                    </div>
+                    <button type="submit"
+                            className="w-full bg-[#0FABCA] text-white py-3 rounded-lg hover:bg-[#0FABCA]/90">
+                        Pay $51.00
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default CheckoutPage;
                     '/>
                     }
                 </div>
 
-                <BlocksFooter backUrl='/blocks/newsletter-form' backName='newsletter form'
-                              forwardUrl='/blocks/empty-page' forwardName='empty page'/>
+                <BlocksFooter backUrl='/blocks/product-details-page' backName='product details page'
+                              forwardUrl='/blocks/responsive-search-bar' forwardName='responsive search bar'/>
             </div>
 
 
             <Helmet>
-                <title>Blocks - Product Details Page</title>
+                <title>Blocks - Checkout Page</title>
             </Helmet>
         </aside>
     );
diff --git a/src/Components/Overview/SidebarContent/Blocks/EmptyPages/Empty.jsx b/src/Components/Overview/SidebarContent/Blocks/EmptyPages/Empty.jsx
index 587c22d..2b9be95 100644
--- a/src/Components/Overview/SidebarContent/Blocks/EmptyPages/Empty.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/EmptyPages/Empty.jsx
@@ -630,7 +630,7 @@ export default EmptyPage;
                     }
                 </div>
 
-                <BlocksFooter backUrl='/blocks/404-page' backName='404 page' forwardName='responsive search bar' forwardUrl='/blocks/responsive-search-bar'/>
+                <BlocksFooter backUrl='/blocks/404-page' backName='404 page' forwardName='offer grid' forwardUrl='/blocks/offer-grid'/>
             </div>
 
 
diff --git a/src/Components/Overview/SidebarContent/Blocks/Randoms/ResponsiveSearchbar.jsx b/src/Components/Overview/SidebarContent/Blocks/Randoms/ResponsiveSearchbar.jsx
index c9097ca..0f2d5d9 100644
--- a/src/Components/Overview/SidebarContent/Blocks/Randoms/ResponsiveSearchbar.jsx
+++ b/src/Components/Overview/SidebarContent/Blocks/Randoms/ResponsiveSearchbar.jsx
@@ -992,7 +992,7 @@ export default ResponsiveSearchbar;
                     }
                 </div>
 
-                <BlocksFooter backUrl='/blocks/empty-page' backName='empty page' forwardName='responsive sidebar' forwardUrl='/blocks/responsive-sidebar'/>
+                <BlocksFooter backUrl='/blocks/checkout-page' backName='checkout page' forwardName='responsive sidebar' forwardUrl='/blocks/responsive-sidebar'/>
             </div>
 
 
diff --git a/src/Components/Overview/SidebarContent/Content/Data Display/Timeline.jsx b/src/Components/Overview/SidebarContent/Content/Data Display/Timeline.jsx
index 19359f1..8456592 100644
--- a/src/Components/Overview/SidebarContent/Content/Data Display/Timeline.jsx	
+++ b/src/Components/Overview/SidebarContent/Content/Data Display/Timeline.jsx	
@@ -418,8 +418,8 @@ export default Timeline;
           <OverviewFooter
             backUrl='/components/tooltip'
             backName='tooltip'
-            forwardName='code'
-            forwardUrl='/components/code'
+            forwardName='product card'
+            forwardUrl='/components/product-card'
           />
         </div>
 
diff --git a/src/Components/Overview/SidebarContent/Content/Randoms/Code.jsx b/src/Components/Overview/SidebarContent/Content/Randoms/Code.jsx
index 0bd4819..0f2ccba 100644
--- a/src/Components/Overview/SidebarContent/Content/Randoms/Code.jsx
+++ b/src/Components/Overview/SidebarContent/Content/Randoms/Code.jsx
@@ -89,8 +89,8 @@ const Code = () => {
           </div>
 
           <OverviewFooter
-            backUrl='/components/timeline'
-            backName='timeline'
+            backUrl='/components/ads-card'
+            backName='ads card'
             forwardName='snippet'
             forwardUrl='/components/snippet'
           />
diff --git a/src/Shared/Demo.jsx b/src/Shared/Demo.jsx
index 43a3619..79d39ec 100644
--- a/src/Shared/Demo.jsx
+++ b/src/Shared/Demo.jsx
@@ -1,192 +1,214 @@
-import React, {useState} from "react";
+import React from "react";
 
 // react icons
-import {IoHeart, IoHeartOutline, IoShareSocialOutline, IoStar} from "react-icons/io5";
-import {BiChevronLeft, BiChevronRight} from "react-icons/bi";
-
-const ProductDetailsPage = () => {
-
-    const [currentImageIndex, setCurrentImageIndex] = useState(0)
-    const [isFavorite, setIsFavorite] = useState(false)
-    const [selectedSize, setSelectedSize] = useState("8")
-    const [selectedColor, setSelectedColor] = useState("Royal Brown")
-
-    const images = [
-        "https://i.ibb.co.com/LxyQVtG/image-19.png",
-        "https://i.ibb.co.com/d6RXLM2/image-22.png",
-        "https://i.ibb.co.com/17yKVQm/image-19.png",
-        "https://i.ibb.co.com/NCQFGJr/image-21.png",
-        "https://i.ibb.co.com/2tWVrdD/image-23.png"
-    ]
-
-    const sizes = ["6", "8", "10", "14", "18", "20"]
-    const colors = [
-        { name: "Royal Brown", class: "bg-[#654321]" },
-        { name: "Light Gray", class: "bg-gray-200" },
-        { name: "Steel Blue", class: "bg-[#4682B4]" },
-        { name: "Navy", class: "bg-navy-900" }
-    ]
-
-    const nextImage = () => {
-        setCurrentImageIndex((prev) => (prev + 1) % images.length)
-    }
-
-    const prevImage = () => {
-        setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
-    }
-
-    const selectThumbnail = (index) => {
-        setCurrentImageIndex(index)
-    }
+import {AiOutlinePlus} from "react-icons/ai";
 
+const CheckoutPage = () => {
     return (
-        <div className="lg:p-8">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
-                {/* Image Section */}
-                <div className="relative">
-                    <div className="flex">
-                        <div className="flex items-center justify-center w-[90%] bg-gray-100 overflow-hidden rounded-md">
-                            <img
-                                src={images[currentImageIndex]}
-                                alt={`Product view ${currentImageIndex + 1}`}
-                                className="w-[300px] h-[400px] object-cover"
-                            />
+        <div className="w-full flex flex-col gap-8 lg:gap-0 lg:flex-row">
+
+            {/* Left Column - Order Summary */}
+            <div className="bg-gray-50 rounded-md p-4 lg:p-8 flex-1">
+
+                {/* order summery */}
+                <div>
+                    <h2 className="text-[1.2rem] text-gray-700 font-semibold mb-6">Your order</h2>
+                    <div className="border border-gray-200 rounded-md">
+                        <div className="flex flex-col lg:flex-row lg:items-center gap-4 p-4">
+                            <div className="border relative border-gray-200 w-max rounded-md bg-white">
+                                <img src="https://i.ibb.co.com/x6fq6nC/Rectangle-516.png" alt="Nike Air Zoom Pegasus 39"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className="px-[0.45rem] rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm">1</span>
+                            </div>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className="flex items-center gap-[30px] mt-2">
+                                    <p className="text-sm text-gray-500">Size: <b className="text-gray-800">XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className="text-gray-800">Blue</b>
+                                    </p>
+                                </div>
+                            </div>
+                            <span className="font-medium">$28.00</span>
                         </div>
-                        <div className="flex flex-col justify-between gap-[15px] ml-[20px]">
-
-                            <div className="flex flex-col gap-[10px]">
-                                <button className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200">
-                                    <IoShareSocialOutline className="w-5 h-5"/>
-                                </button>
-
-                                <button
-                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2.5 hover:bg-gray-200"
-                                    onClick={() => setIsFavorite(!isFavorite)}
-                                >
-                                    {
-                                        isFavorite ? (
-                                            <IoHeart className="w-5 h-5 text-red-500"/>
-                                        ) : (
-                                            <IoHeartOutline className="w-5 h-5"/>
-                                        )
-                                    }
-                                </button>
+                        <div className="flex flex-col lg:flex-row lg:items-center gap-4 border-t p-4 border-gray-200">
+                            <div className="border relative border-gray-200 w-max rounded-md bg-white">
+                                <img src="https://i.ibb.co.com/VJKrBt5/Rectangle-519.png"
+                                     alt="Nike React Pegasus Trail 4"
+                                     className="w-20 h-20 object-cover rounded"/>
+
+                                <span
+                                    className="px-1.5 rounded-full absolute bg-white -top-2 -right-2 z-30 text-[0.9rem] text-gray-800 border border-gray-200 shadow-sm">3</span>
                             </div>
-
-                            <div className="flex flex-col gap-[10px]">
-                                <button
-                                    onClick={prevImage}
-                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
-                                    aria-label="Previous image"
-                                >
-                                    <BiChevronLeft className="w-6 h-6"/>
-                                </button>
-                                <button
-                                    onClick={nextImage}
-                                    className="bg-gray-100 rounded-md w-max text-gray-600 p-2 hover:bg-gray-200"
-                                    aria-label="Next image"
-                                >
-                                    <BiChevronRight className="w-6 h-6"/>
-                                </button>
+                            <div className="flex-1">
+                                <h3 className="font-medium">Nike Air Zoom Pegasus 39</h3>
+                                <div className="flex items-center gap-[30px] mt-2">
+                                    <p className="text-sm text-gray-500">Size: <b className="text-gray-800">XL</b></p>
+                                    <p className="text-sm text-gray-500">Color: <b className="text-gray-800">Blue</b>
+                                    </p>
+                                </div>
                             </div>
+                            <span className="font-medium">$28.00</span>
                         </div>
                     </div>
-                    <div className="scrollbar flex w-full lg:w-[87%] gap-2 mt-4 overflow-x-auto">
-                        {images.map((img, index) => (
+                    <div className="mt-6">
+                        <h3 className="font-medium mb-2 text-[1rem] text-gray-800">Discount Code</h3>
+                        <div className="flex gap-2 relative">
+                            <img alt="discount/png" src="https://i.ibb.co.com/r7rF8xK/ticket-discount.png"
+                                 className="w-[25px] absolute transform top-[50%] translate-y-[-50%] left-2"/>
+                            <input type="text" placeholder="BUYRI"
+                                   className="border w-full border-gray-200 bg-transparent outline-none focus:border-[#0FABCA] rounded pl-10 pr-3 py-2"/>
                             <button
-                                key={index}
-                                onClick={() => selectThumbnail(index)}
-                                className={`flex-shrink-0 bg-gray-100 w-20 transition-all duration-300 h-20 rounded-md overflow-hidden border-2 ${currentImageIndex === index ? "border-[#0FABCA]" : "border-transparent"
-                                }`}
-                            >
-                                <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover"/>
+                                className="absolute top-[50%] transform translate-y-[-50%] right-5 text-[0.9rem] text-[#0FABCA]">Apply
                             </button>
-                        ))}
+                        </div>
+                    </div>
+                    <div className="mt-8 space-y-2 border-t border-gray-200 pt-6">
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Subtotal</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$56.00</span>
+                        </div>
+                        <div className="flex justify-between">
+                            <span className="text-[1rem] text-gray-500">Shipping Cost</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$8.00</span>
+                        </div>
+                        <div className="flex justify-between pb-3">
+                            <span className="text-[1rem] text-gray-500">Discount (10%)</span>
+                            <span className="text-[1rem] font-medium text-gray-800">-$13.00</span>
+                        </div>
+                        <div className="flex justify-between border-t border-gray-200 pt-5 font-medium">
+                            <span>Total</span>
+                            <span className="text-[1rem] font-medium text-gray-800">$51.00</span>
+                        </div>
                     </div>
                 </div>
+            </div>
 
-                {/* Product Details Section */}
-                <div className="flex flex-col">
-                    <div className="flex justify-between items-start">
-                        <div className="w-full">
-                            <p className="text-gray-400 text-[0.9rem]">John Lewis ANYDAY</p>
-                            <h1 className="text-[1.6rem] lg:text-[1.8rem] text-gray-800 font-semibold mb-3">Long Sleeve Overshirt, Khaki, 6</h1>
-                            <div className="flex flex-col lg:flex-row lg:items-center justify-between w-full gap-1 lg:gap-4 mb-4">
-                                <div className="flex items-center">
-                                    <span className="text-[1.4rem] font-semibold text-gray-800">£28.00</span>
-                                    <span className="text-gray-400 text-[1rem] line-through ml-2">£40.00</span>
+            {/* Right Column - Checkout Form */}
+            <div className="flex-1 lg:px-8">
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="email"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Email</label>
+                        <input type="email" id="email" placeholder="joylawson@gmail.com"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                    </div>
+                    <div>
+                        <label htmlFor="phone" className="text-[1rem] font-medium text-gray-800 mb-1">Phone
+                            number</label>
+                        <div className="flex gap-2">
+                            <select
+                                className="border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5 w-[100px]">
+                                <option value="us">🇺🇸 +1</option>
+                                <option value="uk">🇬🇧 +44</option>
+                                <option value="in">🇮🇳 +91</option>
+                                <option value="bd">🇧🇩 +880</option>
+                                <option value="au">🇦🇺 +61</option>
+                                <option value="ca">🇨🇦 +1</option>
+                                <option value="de">🇩🇪 +49</option>
+                                <option value="fr">🇫🇷 +33</option>
+                                <option value="jp">🇯🇵 +81</option>
+                                <option value="za">🇿🇦 +27</option>
+                            </select>
+                            <input type="tel" id="phone" placeholder="(201) 830-8210"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
+                        </div>
+                    </div>
+                    <div>
+                        <div className="flex items-center justify-between mb-2">
+                            <label className="text-[1rem] font-medium text-gray-800">Payment method</label>
+                            <button type="button" className="text-blue-600 text-right flex text-[0.9rem] items-center gap-[5px]">
+                                <AiOutlinePlus/>
+                                Add new
+                            </button>
+                        </div>
+                        <div className="flex flex-col lg:flex-row w-full gap-4">
+                            <label
+                                className="flex-1 flex items-center justify-between gap-2 border-gray-200 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="card" className="form-radio"
+                                               defaultChecked/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className="flex items-center gap-[5px] pl-5 mt-0.5">
+                                        <p className="text-[0.9rem] text-gray-500">Visa •</p>
+                                        <p className="text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer"> Edit</p>
+                                    </div>
                                 </div>
-                                <div className="flex items-center gap-1">
-                                    <IoStar className="text-yellow-400 text-[1.1rem]"/>
-                                    <span className="text-gray-800 font-semibold">4.5</span>
-                                    <span className="text-gray-500">(1,238 Sold)</span>
+                                <img src="https://i.ibb.co.com/NFwm4jb/Visa.png" alt="Visa"
+                                     className="w-[50px]"/>
+                            </label>
+                            <label
+                                className="flex-1 flex items-center justify-between border-gray-200 gap-2 border rounded-lg p-4">
+                                <div>
+                                    <div>
+                                        <input type="radio" name="payment" value="paypal" className="form-radio"/>
+                                        <span> **** 8304</span>
+                                    </div>
+
+                                    <div className="flex items-center gap-[5px] pl-5 mt-0.5">
+                                        <p className="text-[0.9rem] text-gray-500">Paypal •</p>
+                                        <p className="text-[0.9rem] text-gray-500 hover:text-[#0FABCA] cursor-pointer"> Edit</p>
+                                    </div>
                                 </div>
-                            </div>
+                                <img src="https://i.ibb.co.com/W3ykxd5/paypal.png" alt="PayPal"
+                                     className="w-[50px]"/>
+                            </label>
                         </div>
                     </div>
-
-                    <div className="mb-6 border-t-[2px] border-gray-200 border-dashed mt-1 pt-6">
-                        <h2 className="text-gray-700 font-semibold mb-2">Description:</h2>
-                        <p className="text-[0.9rem] text-gray-600">
-                            Boba etiam ut bulla tea est potus electus singulari compositione saporum et textuum, quae in
-                            Taiwan annis 1980 orta sunt. Boba refert ad pitas marnicas tapiocas in fundo potus inventas,
-                            quae typice lacte tea nigro sapiuntur.
-                            <button className="text-blue-600 hover:underline ml-1">See More...</button>
-                        </p>
+                    <div>
+                        <label htmlFor="cardHolder" className="text-[1rem] font-medium text-gray-800 mb-1">Card
+                            holder name</label>
+                        <input type="text" id="cardHolder" placeholder="Ex. Jane Cooper"
+                               className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
                     </div>
-
-                    <div className="mb-8">
-                        <div className="flex justify-between items-center mb-2">
-                            <h2 className="font-medium text-gray-400">Color: <span className="text-gray-700 font-semibold">{selectedColor}</span></h2>
-                        </div>
-                        <div className="flex gap-2">
-                            {colors.map((color) => (
-                                <button
-                                    key={color.name}
-                                    onClick={() => setSelectedColor(color.name)}
-                                    className={` w-20 h-10 rounded-md border-2 transition-all duration-300 ${
-                                        selectedColor === color.name ? "border-[#0FABCA] p-1" : "border-transparent" } `}
-                                    aria-label={`Select ${color.name} color`}
-                                >
-                                    <div className={`w-full h-full rounded-md transition-all duration-300 ${color.class}`}></div>
-                                </button>
-                            ))}
-                        </div>
+                    <div>
+                        <label htmlFor="billingAddress"
+                               className="text-[1rem] font-medium text-gray-800 mb-1">Billing address</label>
+                        <select id="billingAddress"
+                                className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5">
+                            <option>United States</option>
+                            <option>United Kingdom</option>
+                            <option>India</option>
+                            <option>Bangladesh</option>
+                            <option>Australia</option>
+                            <option>Canada</option>
+                            <option>Germany</option>
+                            <option>France</option>
+                            <option>Japan</option>
+                            <option>South Africa</option>
+                        </select>
                     </div>
-
-                    <div className="mb-10">
-                        <div className="flex justify-between items-center mb-2">
-                            <h2 className="font-medium text-gray-400">Size: <span className="font-semibold text-gray-700">{selectedSize}</span></h2>
-                            <button className="text-gray-600 text-[0.8rem] underline">View Size Chart</button>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                        <div>
+                            <label htmlFor="zipCode" className="text-[1rem] font-medium text-gray-800 mb-1">Zip
+                                code</label>
+                            <input type="text" id="zipCode" placeholder="Ex. 73923"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
                         </div>
-                        <div className="flex w-full flex-wrap gap-2">
-                            {sizes.map((size) => (
-                                <button
-                                    key={size}
-                                    onClick={() => setSelectedSize(size)}
-                                    className={
-                                        `px-4 py-2 max-w-[60px] grow rounded-md border ${selectedSize === size
-                                            ? "border-[#0FABCA] bg-[#0FABCA] text-white"
-                                            : "border-gray-200 hover:border-[#0FABCA]"}`}
-                                >
-                                    {size}
-                                </button>
-                            ))}
+                        <div>
+                            <label htmlFor="city"
+                                   className="text-[1rem] font-medium text-gray-800 mb-1">City</label>
+                            <input type="text" id="city" placeholder="Ex. New York"
+                                   className="w-full border rounded px-3 py-2 border-gray-200 outline-none focus:border-[#0FABCA] mt-0.5"/>
                         </div>
                     </div>
-
-                    <div className="flex flex-col lg:flex-row gap-4 mt-auto">
-                        <button className="grow py-3 px-6 bg-[#0FABCA] hover:bg-[#0FABCA]/90 rounded-md text-white">
-                            Add To Cart
-                        </button>
-                        <button className="grow py-3 px-6 border border-gray-300 text-gray-600 rounded-md">
-                            Checkout Now
-                        </button>
+                    <div className="flex items-center gap-2">
+                        <input type="checkbox" id="sameAsShipping" className="form-checkbox"/>
+                        <label htmlFor="sameAsShipping" className="text-sm text-gray-600">Billing address is
+                            same as shipping</label>
                     </div>
-                </div>
+                    <button type="submit"
+                            className="w-full bg-[#0FABCA] text-white py-3 rounded-lg hover:bg-[#0FABCA]/90">
+                        Pay $51.00
+                    </button>
+                </form>
             </div>
         </div>
     );
 };
 
-export default ProductDetailsPage;
+export default CheckoutPage;