Zen UI 2.2

src/App.jsx

@@ -54,6 +54,10 @@ const ImageGalleryPage = React.lazy(() => import("./Pages/Components/Surfaces/Im
 const AccordingPage = React.lazy(() => import("./Pages/Components/Surfaces/AccordingPage"));
 const AppbarPage = React.lazy(() => import("./Pages/Components/Surfaces/AppbarPage"));
 
+// e-commerce
+import ProductCardPage from "./Pages/Components/ECommerce/ProductCardPage.jsx";
+import AdsCardPage from "./Pages/Components/ECommerce/AdsCardPage.jsx";
+
 // randoms
 const CodeSnippetPage = React.lazy(() => import("./Pages/Components/Randoms/CodeSnippetPage"));
 const SnippetPage = React.lazy(() => import("./Pages/Components/Randoms/SnippetPage"));
@@ -94,6 +98,12 @@ const MultipageFormPage = React.lazy(() => import("./Pages/Blocks/Forms/Multipag
 const ResponsiveSidebarPage = React.lazy(() => import("./Pages/Blocks/Randoms/ResponsiveSidebarPage.jsx"));
 const InputSliderPage = React.lazy(() => import("./Pages/Components/Inputs/InputSliderPage.jsx"));
 
+// e-commerce blocks
+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"));
 const TreeDropdownPage = React.lazy(() => import("./Pages/Components/Feedback/TreeDropdownPage.jsx"));
@@ -216,6 +226,10 @@ 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/ads-card" element={<AdsCardPage/>}/>
+
                 {/* randoms */}
                 <Route path="/components/code" element={<CodeSnippetPage/>}/>
                 <Route path="/components/snippet" element={<SnippetPage/>}/>
@@ -235,6 +249,12 @@ 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/>}/>
+                <Route path="/blocks/product-details-page" element={<ProductDetailsPage/>}/>
+                <Route path="/blocks/product-filter-page" element={<ProductFilterPage/>}/>
+                <Route path="/blocks/checkout-page" element={<CheckoutPage/>}/>
+
 
                 {/*  icons  */}
                 <Route path="/icons" element={<IconsPage/>}/>

src/Components/Home/AboutUs.jsx

@@ -48,15 +48,15 @@ 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
                             library of UI components that are not only visually appealing but also highly customizable
                             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

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%]'>

src/Components/Home/MobileNavbar.jsx

@@ -9,14 +9,17 @@ 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 = () => {
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     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>