From 7d0dff3175a9c23230641b835123d69ce72fe3a2 Mon Sep 17 00:00:00 2001 From: bharti Date: Tue, 19 Aug 2025 23:04:20 +0530 Subject: [PATCH] minor changes --- public/logo/logo.svg | 61 ++++++- src/app/page.tsx | 4 +- src/components/BannerSlider.tsx | 1 - src/components/Header.tsx | 56 +++---- src/components/ProductCategory.tsx | 261 +++++++++++++++++------------ 5 files changed, 234 insertions(+), 149 deletions(-) diff --git a/public/logo/logo.svg b/public/logo/logo.svg index b981e1a..621fd84 100644 --- a/public/logo/logo.svg +++ b/public/logo/logo.svg @@ -1,9 +1,52 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 98a5d35..6af02e3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -281,13 +281,13 @@ export default function Home() { Shop Now -
)} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 8702853..9a0e8c6 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -119,9 +119,10 @@ export default function Header() { transition={{ duration: 0.6 }} > - - Mozimo Logo - + Mozimo Logo {/* Right Icons */} diff --git a/src/components/ProductCategory.tsx b/src/components/ProductCategory.tsx index 52b5524..8857383 100644 --- a/src/components/ProductCategory.tsx +++ b/src/components/ProductCategory.tsx @@ -1,6 +1,5 @@ "use client"; -import { useState, useRef, useCallback, useMemo } from "react"; -import { AnimatePresence } from "framer-motion"; +import { useState, useRef, useCallback, useMemo, useEffect } from "react"; import { motion } from "framer-motion"; import Section from "@/components/Section"; import Image from "next/image"; @@ -8,17 +7,8 @@ import Image from "next/image"; export default function ProductCategory() { const [currentCategory, setCurrentCategory] = useState(0); const categoriesSectionRef = useRef(null); - const fadeInLeft = { - initial: { opacity: 0, x: -30 }, - animate: { opacity: 1, x: 0 }, - transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }, - }; + const imageCache = useRef<{ [key: string]: HTMLImageElement }>({}); - const fadeInRight = { - initial: { opacity: 0, x: 30 }, - animate: { opacity: 1, x: 0 }, - transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }, - }; const categories = [ "Bars", "Barks", @@ -36,117 +26,176 @@ export default function ProductCategory() { "/categories/c6.svg", ]; - // Memoize category change handler for better performance + // Preload all images on component mount + useEffect(() => { + const preloadImages = async () => { + const loadPromises = categoryImages.map((src) => { + return new Promise((resolve) => { + if (imageCache.current[src]) { + resolve(); + return; + } + + const img = new window.Image(); + img.onload = () => { + imageCache.current[src] = img; + resolve(); + }; + img.onerror = () => resolve(); // Continue even if one fails + img.src = src; + }); + }); + + await Promise.all(loadPromises); + }; + + preloadImages(); + }, []); + + // Ultra-fast animation variants (no delays) + const fadeInLeft = { + initial: { opacity: 0, x: -20 }, + animate: { opacity: 1, x: 0 }, + transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] }, + }; + + const fadeInRight = { + initial: { opacity: 0, x: 20 }, + animate: { opacity: 1, x: 0 }, + transition: { duration: 0.3, ease: [0.23, 1, 0.32, 1] }, + }; + + // Instant category change with no debouncing const handleCategoryChange = useCallback((idx: number) => { setCurrentCategory(idx); }, []); - // Memoize category buttons to prevent unnecessary re-renders + // Optimized category buttons const categoryButtons = useMemo(() => { - return categories.map((category, idx) => ( - - - - )); + lineHeight: "120%", + letterSpacing: "0%", + transform: isActive ? "translateX(4px)" : "translateX(0)", + }} + onClick={() => handleCategoryChange(idx)} + onMouseEnter={() => handleCategoryChange(idx)} + onTouchStart={() => handleCategoryChange(idx)} + > + {/* Mobile optimized thumbnail */} +
+ {category} +
+ {category} + + + ); + }); }, [currentCategory, handleCategoryChange]); - // Memoize the category image component + // Ultra-optimized image switcher with instant transitions const categoryImageComponent = useMemo( () => ( - - - +
+ {/* Render all images but show only active one */} + {categoryImages.map((src, idx) => ( + + {categories[idx]} + + ))} +
), [currentCategory] ); return ( -
- {/* Product Categories Section */} -
-
+
+ {/* Left Column - Categories List */} + - {/* Left Column - Categories List */} - -
    {categoryButtons}
- +
    {categoryButtons}
+ - {/* Right Column - Large Category Image (desktop only) */} - - {categoryImageComponent} - -
-
-
+ {/* Right Column - Large Category Image */} + + {categoryImageComponent} + + + ); }