Merge version_6 into main #13
@@ -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({
|
||||
|
||||
118
src/app/page.tsx
118
src/app/page.tsx
@@ -1,46 +1,40 @@
|
||||
"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 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
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-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-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-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-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-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"
|
||||
}
|
||||
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);
|
||||
const product = products.find((p) => p.id === productId);
|
||||
if (product) {
|
||||
window.open(`/product/${productId}`, '_blank');
|
||||
window.open(`/product/${productId}`, "_blank");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -64,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"
|
||||
@@ -81,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" }}
|
||||
@@ -91,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}
|
||||
@@ -100,9 +94,9 @@ export default function LandingPage() {
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
products={products.map(product => ({
|
||||
products={products.map((product) => ({
|
||||
...product,
|
||||
onProductClick: () => handleProductClick(product.id)
|
||||
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"
|
||||
@@ -111,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"
|
||||
@@ -129,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}
|
||||
@@ -142,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"
|
||||
@@ -176,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, 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-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"
|
||||
@@ -212,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"
|
||||
@@ -235,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"
|
||||
|
||||
@@ -2,44 +2,38 @@
|
||||
|
||||
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';
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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"
|
||||
}
|
||||
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 [animationPhase, setAnimationPhase] = useState<"rotate" | "spray" | "reveal">("rotate");
|
||||
|
||||
const product = PRODUCTS.find(p => p.id === productId);
|
||||
const product = PRODUCTS.find((p) => p.id === productId);
|
||||
|
||||
const particleAnimations = useMemo(() => {
|
||||
return Array.from({ length: 12 }).map((_, i) => ({
|
||||
@@ -53,13 +47,13 @@ export default function ProductDetailPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (!showAnimation) return;
|
||||
|
||||
|
||||
const rotateTimer = setTimeout(() => {
|
||||
setAnimationPhase('spray');
|
||||
setAnimationPhase("spray");
|
||||
}, 1000);
|
||||
|
||||
const sprayTimer = setTimeout(() => {
|
||||
setAnimationPhase('reveal');
|
||||
setAnimationPhase("reveal");
|
||||
}, 2000);
|
||||
|
||||
const finishTimer = setTimeout(() => {
|
||||
@@ -94,7 +88,7 @@ export default function ProductDetailPage() {
|
||||
{ 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"
|
||||
@@ -134,7 +128,7 @@ export default function ProductDetailPage() {
|
||||
{ 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"
|
||||
@@ -158,9 +152,7 @@ export default function ProductDetailPage() {
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
animation: animationPhase === 'rotate' ? 'rotateLeftAnimation 1s ease-in-out forwards' : 'none',
|
||||
transformOrigin: 'center',
|
||||
}}
|
||||
animation: animationPhase === "rotate" ? "rotateLeftAnimation 1s ease-in-out forwards" : "none", transformOrigin: "center"}}
|
||||
>
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
@@ -170,7 +162,7 @@ export default function ProductDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* Spray particles animation */}
|
||||
{animationPhase !== 'rotate' && (
|
||||
{animationPhase !== "rotate" && (
|
||||
<div className="absolute inset-0 overflow-hidden rounded-lg">
|
||||
{particleAnimations.map((particle) => (
|
||||
<div
|
||||
@@ -181,21 +173,19 @@ export default function ProductDetailPage() {
|
||||
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',
|
||||
}}
|
||||
opacity: animationPhase === "spray" ? 0.7 : 0,
|
||||
transition: "opacity 0.3s ease-out"}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product information reveal overlay */}
|
||||
{animationPhase === 'reveal' && (
|
||||
{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',
|
||||
}}
|
||||
animation: "fadeIn 0.6s ease-in forwards"}}
|
||||
>
|
||||
<div className="animate-fadeInUp">
|
||||
<h3 className="text-3xl font-bold mb-2">{product.name}</h3>
|
||||
@@ -254,7 +244,7 @@ export default function ProductDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* Product Information Section */}
|
||||
<div className={`transition-opacity duration-500 ${showAnimation && animationPhase !== 'reveal' ? 'opacity-0' : 'opacity-100'}`}>
|
||||
<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>
|
||||
@@ -284,7 +274,7 @@ export default function ProductDetailPage() {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => window.open('/', '_self')}
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user