diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a6e0ad2..249674c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -21,11 +21,9 @@ const sourceSans3 = Source_Sans_3({ export const metadata: Metadata = { title: "Essence & Aura | Premium Luxury Perfumes & Cosmetics", description: "Discover curated luxury fragrances with interactive animated product experiences. Premium perfumes and cosmetics for the discerning connoisseur.", keywords: "luxury perfume, fragrance, cosmetics, premium scent, perfume shop, interactive shopping", openGraph: { - title: "Essence & Aura | Discover Your Signature Scent", description: "Experience premium luxury fragrances with immersive interactive animations", type: "website", siteName: "Essence & Aura" - }, + title: "Essence & Aura | Discover Your Signature Scent", description: "Experience premium luxury fragrances with immersive interactive animations", type: "website", siteName: "Essence & Aura"}, twitter: { - card: "summary_large_image", title: "Essence & Aura | Premium Fragrances", description: "Luxury perfumes with interactive product experiences" - }, + card: "summary_large_image", title: "Essence & Aura | Premium Fragrances", description: "Luxury perfumes with interactive product experiences"}, }; export default function RootLayout({ @@ -1412,4 +1410,4 @@ export default function RootLayout({ ); -} +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index b0d198f..cb86d0d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -14,6 +14,9 @@ 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" @@ -36,8 +39,9 @@ export default function LandingPage() { ]; const handleProductClick = (productId: string) => { - if (typeof window !== 'undefined') { - window.location.href = `/product/${productId}`; + const product = products.find(p => p.id === productId); + if (product) { + window.open(`/product/${productId}`, '_blank'); } }; @@ -173,7 +177,7 @@ export default function LandingPage() { ); -} +} \ No newline at end of file diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx index aecfb68..03907a5 100644 --- a/src/app/product/[id]/page.tsx +++ b/src/app/product/[id]/page.tsx @@ -1,30 +1,35 @@ "use client"; +import { useParams } from "next/navigation"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; -import FooterSimple from '@/components/sections/footer/FooterSimple'; +import { useState, useMemo, useEffect } from 'react'; import Link from 'next/link'; -import { useParams } from 'next/navigation'; -import { useEffect, useState, useMemo } from 'react'; -const products = [ +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-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 delicate blend of jasmine, rose, and violet that captures the essence of an evening garden in full bloom. Perfect for those who appreciate floral elegance.", notes: ["Top: Bergamot, Lemon", "Heart: Jasmine, Rose, Violet", "Base: Sandalwood, Musk"], + concentration: "Eau de Parfum (EDP) - 15-20% fragrance concentration" }, { - 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-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: "An intoxicating oriental fragrance featuring rich amber, exotic spices, and precious woods. A bold statement for those who dare to be different.", notes: ["Top: Black Pepper, Saffron", "Heart: Amber, Oud, Cinnamon", "Base: Cedarwood, Patchouli, Vanilla"], + concentration: "Eau de Parfum (EDP) - 15-20% fragrance concentration" }, { - 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-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: "Warm and enveloping, this woody fragrance celebrates the depth of amber and exotic woods. A timeless signature for the sophisticated.", notes: ["Top: Ginger, Apple", "Heart: Amber, Cedarwood", "Base: Sandalwood, Vetiver, Tonka Bean"], + concentration: "Eau de Parfum (EDP) - 15-20% fragrance concentration" }, { - 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-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 romantic fruity-floral composition centered around Damascus rose, complemented by juicy fruits. Celebrates the beauty of a perfect garden.", notes: ["Top: Peach, Blackcurrant", "Heart: Damascus Rose, Peonies", "Base: Musk, Amber"], + concentration: "Eau de Parfum (EDP) - 15-20% fragrance concentration" }, { - 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-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 that evokes the freshness of sea spray and sun-kissed shores. Perfect for summer and everyday wear.", notes: ["Top: Lemon, Orange, Yuzu", "Heart: Sea Salt, Aquatic Accord", "Base: Driftwood, White Cedar"], + concentration: "Eau de Toilette (EDT) - 5-15% fragrance concentration" }, { - 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." + 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 indulgent gourmand fragrance with creamy vanilla, caramel, and exotic spices. A sensual and comforting second skin.", notes: ["Top: Cardamom, Cinnamon", "Heart: Madagascar Vanilla, Caramel", "Base: Sandalwood, Amber, Tonka Bean"], + concentration: "Eau de Parfum (EDP) - 15-20% fragrance concentration" } ]; @@ -32,16 +37,11 @@ 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); + const [animationPhase, setAnimationPhase] = useState<'rotate' | 'spray' | 'reveal'>('rotate'); - useEffect(() => { - const foundProduct = products.find(p => p.id === productId); - if (foundProduct) { - setProduct(foundProduct); - } - }, [productId]); + const product = PRODUCTS.find(p => p.id === productId); + // Generate particle animations with stable values const particleAnimations = useMemo(() => { return Array.from({ length: 12 }).map((_, i) => ({ id: i, @@ -53,23 +53,26 @@ export default function ProductDetailPage() { }, []); useEffect(() => { - const rotationDuration = 2000; - const revealDelay = 1200; - const sprayDuration = 2000; + if (!showAnimation) return; + + const rotateTimer = setTimeout(() => { + setAnimationPhase('spray'); + }, 1000); - const animationTimer = setTimeout(() => { + const sprayTimer = setTimeout(() => { + setAnimationPhase('reveal'); + }, 2000); + + const finishTimer = setTimeout(() => { setShowAnimation(false); - }, sprayDuration + rotationDuration); - - const infoTimer = setTimeout(() => { - setInfoRevealed(true); - }, revealDelay + rotationDuration); + }, 3500); return () => { - clearTimeout(animationTimer); - clearTimeout(infoTimer); + clearTimeout(rotateTimer); + clearTimeout(sprayTimer); + clearTimeout(finishTimer); }; - }, []); + }, [showAnimation]); if (!product) { return ( @@ -99,22 +102,14 @@ export default function ProductDetailPage() { bottomRightText="hello@essenceaura.com" /> -
-

Product not found. Return home

-
- -
- {showAnimation && ( -
-
- {/* Product rotates leftward */} -
- {product.imageAlt} +
+
+ + ← Back to Shop + + +
+ {/* Product Image Section with Animation */} +
+ {showAnimation && ( +
+
+ {/* Product rotates leftward */} +
+ {product.imageAlt} +
+ + {/* Spray particles animation */} + {animationPhase !== 'rotate' && ( +
+ {particleAnimations.map((particle) => ( +
+ ))} +
+ )} + + {/* Product information reveal overlay */} + {animationPhase === 'reveal' && ( +
+
+

{product.name}

+

{product.variant}

+

{product.price}

+
+
+ )} +
+ + +
+ )} + + {!showAnimation && ( +
+ {product.imageAlt} +
+ )} +
+ + {/* Product Information Section */} +
+

{product.name}

+

{product.variant}

+

{product.price}

+ +
+

{product.description}

+

{product.concentration}

- {/* Spray particles animation */} -
- {particleAnimations.map((particle) => ( -
- ))} +
+

Fragrance Notes

+
+ {product.notes.map((note, idx) => ( +
+
+

{note}

+
+ ))} +
+
+ + + + + +
+

Why Choose This Fragrance?

+
    +
  • ✓ Sourced from master perfumers worldwide
    • +
  • ✓ 100% authentic luxury fragrance
    • +
  • ✓ Premium quality guaranteed
    • +
  • ✓ 30-day satisfaction guarantee
    • +
  • ✓ Complimentary gift wrapping available
    • +
- )} - - {/* 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 - -
-
-
- )}
- - - - ); -} +} \ No newline at end of file