diff --git a/src/app/page.tsx b/src/app/page.tsx index 13a1f88..b0d198f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,11 +11,9 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import FooterSimple from '@/components/sections/footer/FooterSimple'; import { Sparkles, Heart, Gem, Star, HelpCircle } from 'lucide-react'; import { useState, useMemo } from 'react'; +import Link from 'next/link'; export default function LandingPage() { - const [activeProductId, setActiveProductId] = useState(null); - const [showSprayAnimation, setShowSprayAnimation] = useState(false); - const products = [ { id: "perfume-1", name: "Midnight Blossom", price: "$185", variant: "100ml • Floral • 3 Scent Notes", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-beautifully-shaped-glass-bottles-filled-with-perfume_181624-28370.jpg?_wi=2", imageAlt: "Midnight Blossom Fragrance" @@ -38,22 +36,11 @@ export default function LandingPage() { ]; const handleProductClick = (productId: string) => { - setActiveProductId(productId); - setShowSprayAnimation(true); - setTimeout(() => setShowSprayAnimation(false), 2000); + if (typeof window !== 'undefined') { + window.location.href = `/product/${productId}`; + } }; - // Generate particle animations with stable values - const particleAnimations = useMemo(() => { - return Array.from({ length: 12 }).map((_, i) => ({ - id: i, - left: (i * 8.33) % 100, - duration: 1 + ((i * 0.7) % 1), - delay: (i * 0.04) % 0.5, - xOffset: ((i * 13) % 40) - 20, - })); - }, []); - return (
-
- ({ - ...product, - onProductClick: () => handleProductClick(product.id) - }))} - title="Premium Fragrance Collection" - description="Sourced from master perfumers worldwide, authenticity guaranteed. Handpicked luxury perfumes and cosmetics for the discerning connoisseur. Click to explore interactive product animations" - tag="Featured Selection" - tagIcon={Heart} - tagAnimation="slide-up" - buttons={[ - { text: "View All Products", href: "#" }, - { text: "Shop Collection", href: "#" } - ]} - buttonAnimation="slide-up" - gridVariant="uniform-all-items-equal" - animationType="slide-up" - textboxLayout="default" - useInvertedBackground={false} - carouselMode="buttons" - /> - - {activeProductId && showSprayAnimation && ( -
-
- {/* Product rotates leftward */} -
- p.id === activeProductId)?.imageSrc} - alt="Product" - className="w-full h-full object-cover rounded-lg" - /> -
- - {/* Spray particles animation */} -
- {particleAnimations.map((particle) => ( -
- ))} -
- - {/* Product information reveal overlay */} -
-
-

- {products.find(p => p.id === activeProductId)?.name} -

-

- {products.find(p => p.id === activeProductId)?.variant} -

-

- {products.find(p => p.id === activeProductId)?.price} -

-
-
-
- - -
- )} -
+ ({ + ...product, + onProductClick: () => handleProductClick(product.id) + }))} + title="Premium Fragrance Collection" + description="Sourced from master perfumers worldwide, authenticity guaranteed. Handpicked luxury perfumes and cosmetics for the discerning connoisseur. Click to explore interactive product animations" + tag="Featured Selection" + tagIcon={Heart} + tagAnimation="slide-up" + buttons={[ + { text: "View All Products", href: "#" }, + { text: "Shop Collection", href: "#" } + ]} + buttonAnimation="slide-up" + gridVariant="uniform-all-items-equal" + animationType="slide-up" + textboxLayout="default" + useInvertedBackground={false} + carouselMode="buttons" + />
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx new file mode 100644 index 0000000..aecfb68 --- /dev/null +++ b/src/app/product/[id]/page.tsx @@ -0,0 +1,351 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import FooterSimple from '@/components/sections/footer/FooterSimple'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; +import { useEffect, useState, useMemo } from 'react'; + +const products = [ + { + id: "perfume-1", name: "Midnight Blossom", price: "$185", variant: "100ml • Floral • 3 Scent Notes", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-beautifully-shaped-glass-bottles-filled-with-perfume_181624-28370.jpg?_wi=2", imageAlt: "Midnight Blossom Fragrance", description: "A captivating floral fragrance that combines the essence of midnight jasmine with subtle notes of moonflower. This exquisite blend creates an aura of mystery and elegance, perfect for evening occasions." + }, + { + id: "perfume-2", name: "Crystal Noir", price: "$210", variant: "100ml • Oriental • Premium Edition", imageSrc: "http://img.b2bpic.net/free-photo/close-up-variety-cosmetic-products-desk-isolated_574295-5284.jpg?_wi=2", imageAlt: "Crystal Noir Fragrance", description: "A luxurious oriental fragrance with deep amber and exotic spices. The premium edition features notes of oud, vanilla, and sandalwood, creating an intoxicating and sophisticated scent." + }, + { + id: "perfume-3", name: "Amber Essence", price: "$165", variant: "75ml • Woody • Signature Collection", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669115.jpg?_wi=2", imageAlt: "Amber Essence Fragrance", description: "A warm and woody composition from our signature collection. Featuring cedarwood and amber with hints of vanilla, this fragrance is timeless, versatile, and perfect for everyday wear." + }, + { + id: "perfume-4", name: "Rose Garden", price: "$195", variant: "100ml • Fruity Floral • Limited Release", imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=3", imageAlt: "Rose Garden Fragrance", description: "A beautiful fruity floral from our limited release collection. Fresh rose petals blend with juicy berry notes, creating a romantic and vibrant fragrance for spring and summer." + }, + { + id: "perfume-5", name: "Ocean Wave", price: "$175", variant: "100ml • Fresh Citrus • Summer Collection", imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=4", imageAlt: "Ocean Wave Fragrance", description: "A refreshing citrus fragrance inspired by ocean breezes. With notes of lemon, bergamot, and sea salt, this summer collection favorite brings the essence of coastal freshness to your day." + }, + { + id: "perfume-6", name: "Vanilla Luxe", price: "$200", variant: "100ml • Gourmand • Exclusive Blend", imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337695.jpg?_wi=2", imageAlt: "Vanilla Luxe Fragrance", description: "An exclusive gourmand blend with creamy vanilla and caramel notes. Perfect for those who love indulgent fragrances with a touch of sweetness and sophistication." + } +]; + +export default function ProductDetailPage() { + const params = useParams(); + const productId = params?.id as string; + const [showAnimation, setShowAnimation] = useState(true); + const [infoRevealed, setInfoRevealed] = useState(false); + const [product, setProduct] = useState(null); + + useEffect(() => { + const foundProduct = products.find(p => p.id === productId); + if (foundProduct) { + setProduct(foundProduct); + } + }, [productId]); + + const particleAnimations = useMemo(() => { + return Array.from({ length: 12 }).map((_, i) => ({ + id: i, + left: (i * 8.33) % 100, + duration: 1 + ((i * 0.7) % 1), + delay: (i * 0.04) % 0.5, + xOffset: ((i * 13) % 40) - 20, + })); + }, []); + + useEffect(() => { + const rotationDuration = 2000; + const revealDelay = 1200; + const sprayDuration = 2000; + + const animationTimer = setTimeout(() => { + setShowAnimation(false); + }, sprayDuration + rotationDuration); + + const infoTimer = setTimeout(() => { + setInfoRevealed(true); + }, revealDelay + rotationDuration); + + return () => { + clearTimeout(animationTimer); + clearTimeout(infoTimer); + }; + }, []); + + if (!product) { + return ( + + +
+

Product not found. Return home

+
+ + + ); + } + + return ( + + + +
+ {showAnimation && ( +
+
+ {/* Product rotates leftward */} +
+ {product.imageAlt} +
+ + {/* Spray particles animation */} +
+ {particleAnimations.map((particle) => ( +
+ ))} +
+
+
+ )} + + {/* Product details section */} +
+ {infoRevealed && ( +
+
+

+ {product.name} +

+

+ {product.variant} +

+

+ {product.description} +

+
+ +
+

+ {product.price} +

+
+ + + Continue Shopping + +
+
+
+ )} + + {!infoRevealed && !showAnimation && ( +
+
+

+ {product.name} +

+

+ {product.variant} +

+

+ {product.description} +

+
+ +
+

+ {product.price} +

+
+ + + Continue Shopping + +
+
+
+ )} +
+
+ + + + + + ); +}