Merge version_6 into main

Merge version_6 into main

src/app/layout.tsx

@@ -1410,4 +1410,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,17 +1,43 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Heart, Gem, Star, HelpCircle, ShoppingBag } from 'lucide-react';
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
+import FaqBase from "@/components/sections/faq/FaqBase";
+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 } from "react";
+import Link from "next/link";
 
 export default function LandingPage() {
+  const [activeProductId, setActiveProductId] = useState<string | null>(null);
+
+  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"},
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+    {
+      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"},
+  ];
+
+  const handleProductClick = (productId: string) => {
+    const product = products.find((p) => p.id === productId);
+    if (product) {
+      window.open(`/product/${productId}`, "_blank");
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -32,7 +58,7 @@ export default function LandingPage() {
             { name: "About", id: "about" },
             { name: "Reviews", id: "testimonials" },
             { name: "FAQ", id: "faq" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "contact" },
           ]}
           brandName="Essence & Aura"
           bottomLeftText="Luxury Fragrances"
@@ -49,7 +75,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "Shop Now", href: "#products" },
-            { text: "View Scent Guide", href: "#" }
+            { text: "View Scent Guide", href: "#" },
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "plain" }}
@@ -59,7 +85,7 @@ export default function LandingPage() {
             { id: "carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669115.jpg?_wi=1", imageAlt: "luxury perfume fragrance bottle cosmetics premium beauty" },
             { id: "carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=1", imageAlt: "perfume cosmetics luxury fragrance beauty" },
             { id: "carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=2", imageAlt: "fragrance luxury perfume cosmetics premium beauty" },
-            { id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337695.jpg?_wi=1", imageAlt: "perfume bottle luxury cosmetics fragrance premium" }
+            { id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337695.jpg?_wi=1", imageAlt: "perfume bottle luxury cosmetics fragrance premium" },
           ]}
           autoPlay={true}
           autoPlayInterval={4000}
@@ -68,26 +94,10 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardFour
-          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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-            },
-            {
-              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"
-            }
-          ]}
+          products={products.map((product) => ({
+            ...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"
@@ -95,7 +105,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "View All Products", href: "#" },
-            { text: "Shop Collection", href: "#" }
+            { text: "Shop Collection", href: "#" },
           ]}
           buttonAnimation="slide-up"
           gridVariant="uniform-all-items-equal"
@@ -113,9 +123,7 @@ export default function LandingPage() {
           tag="Our Story"
           tagIcon={Gem}
           tagAnimation="slide-up"
-          buttons={[
-            { text: "Learn More", href: "#" }
-          ]}
+          buttons={[{ text: "Learn More", href: "#" }]}
           imageSrc="http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=5"
           imageAlt="Luxury cosmetics and perfume collection"
           useInvertedBackground={false}
@@ -126,23 +134,17 @@ export default function LandingPage() {
         <TestimonialCardTwo
           testimonials={[
             {
-              id: "testimonial-1",              name: "Alexandra Moore",              role: "Luxury Beauty Editor",              testimonial: "The interactive product experience transformed how I discover fragrances. The animations bring each scent to life, and the product details are incredibly comprehensive. This is the future of fragrance shopping.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1",              imageAlt: "portrait woman professional headshot profile"
-            },
+              id: "testimonial-1",              name: "Alexandra Moore",              role: "Luxury Beauty Editor",              testimonial: "The interactive product experience transformed how I discover fragrances. The animations bring each scent to life, and the product details are incredibly comprehensive. This is the future of fragrance shopping.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1",              imageAlt: "portrait woman professional headshot profile"},
             {
-              id: "testimonial-2",              name: "Victoria Chen",              role: "Fashion Influencer",              testimonial: "I've purchased from many luxury perfume retailers, but Essence & Aura's curation is unmatched. Every fragrance in their collection is a masterpiece. The customer service is also exceptional.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=1",              imageAlt: "portrait woman professional headshot business"
-            },
+              id: "testimonial-2",              name: "Victoria Chen",              role: "Fashion Influencer",              testimonial: "I've purchased from many luxury perfume retailers, but Essence & Aura's curation is unmatched. Every fragrance in their collection is a masterpiece. The customer service is also exceptional.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=1",              imageAlt: "portrait woman professional headshot business"},
             {
-              id: "testimonial-3",              name: "Sophia Delacroix",              role: "Perfume Collector",              testimonial: "The rotating product animations and spray effects perfectly capture the elegance of their fragrances. I feel like I'm in a high-end boutique. Absolutely premium experience.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "portrait woman professional headshot corporate"
-            },
+              id: "testimonial-3",              name: "Sophia Delacroix",              role: "Perfume Collector",              testimonial: "The rotating product animations and spray effects perfectly capture the elegance of their fragrances. I feel like I'm in a high-end boutique. Absolutely premium experience.",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "portrait woman professional headshot corporate"},
             {
-              id: "testimonial-4",              name: "Isabella Rodriguez",              role: "Beauty Consultant",              testimonial: "My clients are constantly impressed by the product storytelling on this platform. The immersive design justifies the premium pricing and builds confidence in the purchase decision.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=2",              imageAlt: "portrait woman professional headshot business"
-            },
+              id: "testimonial-4",              name: "Isabella Rodriguez",              role: "Beauty Consultant",              testimonial: "My clients are constantly impressed by the product storytelling on this platform. The immersive design justifies the premium pricing and builds confidence in the purchase decision.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=2",              imageAlt: "portrait woman professional headshot business"},
             {
-              id: "testimonial-5",              name: "Emma Hartley",              role: "Luxury Lifestyle Blogger",              testimonial: "Essence & Aura combines aesthetic beauty with functional design. Their fragrance collection is carefully curated, and the interactive experience makes shopping feel like an art form.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2",              imageAlt: "portrait woman professional headshot profile"
-            },
+              id: "testimonial-5",              name: "Emma Hartley",              role: "Luxury Lifestyle Blogger",              testimonial: "Essence & Aura combines aesthetic beauty with functional design. Their fragrance collection is carefully curated, and the interactive experience makes shopping feel like an art form.",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2",              imageAlt: "portrait woman professional headshot profile"},
             {
-              id: "testimonial-6",              name: "Rachel Thompson",              role: "Corporate Gift Curator",              testimonial: "I recommend Essence & Aura to all my high-end clients looking for premium gift options. The presentation and product quality are consistently exceptional.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=3",              imageAlt: "portrait woman professional headshot business"
-            }
+              id: "testimonial-6",              name: "Rachel Thompson",              role: "Corporate Gift Curator",              testimonial: "I recommend Essence & Aura to all my high-end clients looking for premium gift options. The presentation and product quality are consistently exceptional.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=3",              imageAlt: "portrait woman professional headshot business"},
           ]}
           title="Loved by Fragrance Connoisseurs"
           description="Discover why luxury fragrance enthusiasts choose Essence & Aura for their signature scents"
@@ -160,23 +162,17 @@ export default function LandingPage() {
         <FaqBase
           faqs={[
             {
-              id: "faq-1",              title: "What does the interactive product animation show?",              content: "When you click on any fragrance, our signature animation begins: the product rotates smoothly leftward into view, followed by an immersive spray particle effect that dances across the screen. Product information—including notes, price, and description—gradually reveals behind the particles, creating a multisensory digital experience that mirrors the luxury of opening a premium fragrance bottle."
-            },
+              id: "faq-1",              title: "What does the interactive product animation show?",              content: "When you click on any fragrance, you're taken to a dedicated product page where our signature animation begins: the product rotates smoothly leftward into view, followed by an immersive spray particle effect that dances across the screen. Product information—including notes, price, and description—gradually reveals behind the particles, creating a multisensory digital experience that mirrors the luxury of opening a premium fragrance bottle."},
             {
-              id: "faq-2",              title: "How do I know which fragrance is right for me?",              content: "Each product includes detailed scent notes, concentration levels, and comprehensive descriptions. Our testimonial section features reviews from beauty professionals and fragrance enthusiasts. We also recommend exploring fragrances in the same family (floral, oriental, fresh, woody) to discover your signature scent. Contact our team for personalized recommendations."
-            },
+              id: "faq-2",              title: "How do I know which fragrance is right for me?",              content: "Each product includes detailed scent notes, concentration levels, and comprehensive descriptions. Our testimonial section features reviews from beauty professionals and fragrance enthusiasts. We also recommend exploring fragrances in the same family (floral, oriental, fresh, woody) to discover your signature scent. Contact our team for personalized recommendations."},
             {
-              id: "faq-3",              title: "What is your return policy?",              content: "We offer a 30-day satisfaction guarantee on all purchases. If a fragrance doesn't match your expectations, return it in original condition for a full refund or exchange. Your satisfaction with your signature scent is our priority."
-            },
+              id: "faq-3",              title: "What is your return policy?",              content: "We offer a 30-day satisfaction guarantee on all purchases. If a fragrance doesn't match your expectations, return it in original condition for a full refund or exchange. Your satisfaction with your signature scent is our priority."},
             {
-              id: "faq-4",              title: "Are your fragrances authentic?",              content: "Yes, absolutely. All Essence & Aura fragrances are sourced directly from master perfumers and authorized distributors worldwide. Every product comes with authenticity certification and premium packaging. We guarantee 100% genuine luxury fragrances."
-            },
+              id: "faq-4",              title: "Are your fragrances authentic?",              content: "Yes, absolutely. All Essence & Aura fragrances are sourced directly from master perfumers and authorized distributors worldwide. Every product comes with authenticity certification and premium packaging. We guarantee 100% genuine luxury fragrances."},
             {
-              id: "faq-5",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. Express shipping options are available for rush orders. All fragrances are carefully packaged to ensure safe delivery and arrive in pristine condition."
-            },
+              id: "faq-5",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. Express shipping options are available for rush orders. All fragrances are carefully packaged to ensure safe delivery and arrive in pristine condition."},
             {
-              id: "faq-6",              title: "Do you offer gift wrapping or gift cards?",              content: "Yes! We provide complimentary luxury gift wrapping for all orders. Gift cards in any denomination are also available for the perfect present to help someone discover their signature scent."
-            }
+              id: "faq-6",              title: "Do you offer gift wrapping or gift cards?",              content: "Yes! We provide complimentary luxury gift wrapping for all orders. Gift cards in any denomination are also available for the perfect present to help someone discover their signature scent."},
           ]}
           title="Frequently Asked Questions"
           description="Find answers to common questions about our premium fragrances and cosmetics"
@@ -196,11 +192,11 @@ export default function LandingPage() {
           description="Have questions about our fragrances or need personalized recommendations? Our fragrance specialists are here to help. Reach out and discover your perfect scent."
           inputs={[
             { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "Your Email", required: true }
+            { name: "email", type: "email", placeholder: "Your Email", required: true },
           ]}
           textarea={{
             name: "message",            placeholder: "Tell us about your fragrance preferences or questions...",            rows: 5,
-            required: true
+            required: true,
           }}
           useInvertedBackground={false}
           imageSrc="http://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg?_wi=6"
@@ -219,32 +215,32 @@ export default function LandingPage() {
                 { label: "Home", href: "/" },
                 { label: "Shop", href: "#products" },
                 { label: "About", href: "#about" },
-                { label: "Reviews", href: "#testimonials" }
-              ]
+                { label: "Reviews", href: "#testimonials" },
+              ],
             },
             {
               title: "Support",              items: [
                 { label: "FAQ", href: "#faq" },
                 { label: "Contact Us", href: "#contact" },
                 { label: "Shipping Info", href: "#" },
-                { label: "Returns", href: "#" }
-              ]
+                { label: "Returns", href: "#" },
+              ],
             },
             {
               title: "Company",              items: [
                 { label: "About Us", href: "#about" },
                 { label: "Our Story", href: "#about" },
                 { label: "Careers", href: "#" },
-                { label: "Blog", href: "#" }
-              ]
+                { label: "Blog", href: "#" },
+              ],
             },
             {
               title: "Legal",              items: [
                 { label: "Privacy Policy", href: "#" },
                 { label: "Terms of Service", href: "#" },
-                { label: "Cookie Policy", href: "#" }
-              ]
-            }
+                { label: "Cookie Policy", href: "#" },
+              ],
+            },
           ]}
           bottomLeftText="© 2025 Essence & Aura. All rights reserved."
           bottomRightText="Crafted with luxury and passion"
@@ -252,4 +248,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/product/[id]/page.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { useState, useMemo, useEffect } from "react";
+import Link from "next/link";
+
+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 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: "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: "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 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 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 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"},
+];
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const productId = params?.id as string;
+  const [showAnimation, setShowAnimation] = useState(true);
+  const [animationPhase, setAnimationPhase] = useState<"rotate" | "spray" | "reveal">("rotate");
+
+  const product = PRODUCTS.find((p) => p.id === 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(() => {
+    if (!showAnimation) return;
+
+    const rotateTimer = setTimeout(() => {
+      setAnimationPhase("spray");
+    }, 1000);
+
+    const sprayTimer = setTimeout(() => {
+      setAnimationPhase("reveal");
+    }, 2000);
+
+    const finishTimer = setTimeout(() => {
+      setShowAnimation(false);
+    }, 3500);
+
+    return () => {
+      clearTimeout(rotateTimer);
+      clearTimeout(sprayTimer);
+      clearTimeout(finishTimer);
+    };
+  }, [showAnimation]);
+
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="mediumLargeSizeLargeTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Shop", id: "products" },
+              { name: "About", id: "about" },
+              { name: "Reviews", id: "testimonials" },
+              { name: "FAQ", id: "faq" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Essence & Aura"
+            bottomLeftText="Luxury Fragrances"
+            bottomRightText="hello@essenceaura.com"
+          />
+        </div>
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
+            <p className="text-lg mb-8">Sorry, we could not find the product you are looking for.</p>
+            <Link href="/" className="text-primary-cta underline">
+              Return to Home
+            </Link>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Shop", id: "products" },
+            { name: "About", id: "about" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" },
+          ]}
+          brandName="Essence & Aura"
+          bottomLeftText="Luxury Fragrances"
+          bottomRightText="hello@essenceaura.com"
+        />
+      </div>
+
+      <div className="min-h-screen pt-32 pb-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <Link href="/" className="text-primary-cta underline mb-8 inline-block">
+            ← Back to Shop
+          </Link>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+            {/* Product Image Section with Animation */}
+            <div className="relative h-96 lg:h-auto lg:aspect-square">
+              {showAnimation && (
+                <div className="absolute inset-0 pointer-events-none flex items-center justify-center z-50">
+                  <div className="relative w-80 h-80">
+                    {/* Product rotates leftward */}
+                    <div
+                      className="absolute inset-0"
+                      style={{
+                        animation: animationPhase === "rotate" ? "rotateLeftAnimation 1s ease-in-out forwards" : "none",                        transformOrigin: "center"}}
+                    >
+                      <img
+                        src={product.imageSrc}
+                        alt={product.imageAlt}
+                        className="w-full h-full object-cover rounded-lg"
+                      />
+                    </div>
+
+                    {/* Spray particles animation */}
+                    {animationPhase !== "rotate" && (
+                      <div className="absolute inset-0 overflow-hidden rounded-lg">
+                        {particleAnimations.map((particle) => (
+                          <div
+                            key={particle.id}
+                            className="absolute w-2 h-2 bg-gradient-to-b from-white to-transparent rounded-full"
+                            style={{
+                              left: `${particle.left}%`,
+                              top: `-10px`,
+                              animation: `fall ${particle.duration}s ease-out forwards`,
+                              animationDelay: `${particle.delay}s`,
+                              opacity: animationPhase === "spray" ? 0.7 : 0,
+                              transition: "opacity 0.3s ease-out"}}
+                          />
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Product information reveal overlay */}
+                    {animationPhase === "reveal" && (
+                      <div
+                        className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent rounded-lg flex flex-col justify-end p-6 text-white"
+                        style={{
+                          animation: "fadeIn 0.6s ease-in forwards"}}
+                      >
+                        <div className="animate-fadeInUp">
+                          <h3 className="text-3xl font-bold mb-2">{product.name}</h3>
+                          <p className="text-sm mb-2 opacity-90">{product.variant}</p>
+                          <p className="text-2xl font-semibold">{product.price}</p>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <style>{`
+                    @keyframes rotateLeftAnimation {
+                      from {
+                        transform: perspective(1000px) rotateY(0deg);
+                      }
+                      to {
+                        transform: perspective(1000px) rotateY(-30deg);
+                      }
+                    }
+                    @keyframes fall {
+                      to {
+                        transform: translateY(120px) translateX(var(--xOffset, 0px));
+                        opacity: 0;
+                      }
+                    }
+                    @keyframes fadeIn {
+                      from { opacity: 0; }
+                      to { opacity: 1; }
+                    }
+                    @keyframes fadeInUp {
+                      from {
+                        opacity: 0;
+                        transform: translateY(20px);
+                      }
+                      to {
+                        opacity: 1;
+                        transform: translateY(0);
+                      }
+                    }
+                    .animate-fadeInUp {
+                      animation: fadeInUp 0.8s ease-out forwards;
+                    }
+                  `}</style>
+                </div>
+              )}
+
+              {!showAnimation && (
+                <div className="w-full h-full rounded-lg overflow-hidden shadow-lg">
+                  <img
+                    src={product.imageSrc}
+                    alt={product.imageAlt}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Product Information Section */}
+            <div className={`transition-opacity duration-500 ${showAnimation && animationPhase !== "reveal" ? "opacity-0" : "opacity-100"}`}>
+              <h1 className="text-5xl font-bold mb-2">{product.name}</h1>
+              <p className="text-lg text-foreground/70 mb-6">{product.variant}</p>
+              <p className="text-4xl font-bold text-primary-cta mb-8">{product.price}</p>
+
+              <div className="mb-8">
+                <p className="text-lg leading-relaxed mb-6">{product.description}</p>
+                <p className="text-sm text-foreground/60 italic">{product.concentration}</p>
+              </div>
+
+              <div className="mb-8">
+                <h3 className="text-2xl font-bold mb-4">Fragrance Notes</h3>
+                <div className="space-y-3">
+                  {product.notes.map((note, idx) => (
+                    <div key={idx} className="flex items-start gap-3">
+                      <div className="w-2 h-2 rounded-full bg-primary-cta mt-2 flex-shrink-0" />
+                      <p className="text-foreground/80">{note}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <button
+                onClick={() => setShowAnimation(true)}
+                className="w-full bg-primary-cta text-primary-cta-text font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity mb-4"
+              >
+                Add to Cart
+              </button>
+
+              <button
+                onClick={() => window.open("/", "_self")}
+                className="w-full bg-secondary-cta text-secondary-cta-text font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity border border-foreground/20"
+              >
+                Continue Shopping
+              </button>
+
+              <div className="mt-8 pt-8 border-t border-foreground/10">
+                <h3 className="text-sm font-semibold mb-4">Why Choose This Fragrance?</h3>
+                <ul className="space-y-2 text-sm text-foreground/70">
+                  <li>✓ Sourced from master perfumers worldwide</li>
+                  <li>✓ 100% authentic luxury fragrance</li>
+                  <li>✓ Premium quality guaranteed</li>
+                  <li>✓ 30-day satisfaction guarantee</li>
+                  <li>✓ Complimentary gift wrapping available</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}