diff --git a/src/App.jsx b/src/App.jsx index 1151df6..c1c8242 100644 --- a/src/App.jsx +++ b/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 = () => { }/> }/> + {/* e-commerce */} + }/> + }/> + {/* randoms */} }/> }/> @@ -235,6 +249,12 @@ const App = () => { }/> }/> + {/* e-commerce blocks */} + }/> + }/> + }/> + }/> + {/* icons */} }/> 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.

-

+

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.

-

+

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/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 (

@@ -69,10 +101,17 @@ const Hero = () => { }, }}> - - - Star us on Github - + +
+ + Star us on Github +
+
{
- +
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 ( <>