diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 11f0304..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({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 1c297ef..4793e62 100644 --- a/src/app/page.tsx +++ b/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(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() {
({ + 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() { ('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() {
{/* Spray particles animation */} - {animationPhase !== 'rotate' && ( + {animationPhase !== "rotate" && (
{particleAnimations.map((particle) => (
))}
)} {/* Product information reveal overlay */} - {animationPhase === 'reveal' && ( + {animationPhase === "reveal" && (

{product.name}

@@ -254,7 +244,7 @@ export default function ProductDetailPage() {
{/* Product Information Section */} -
+

{product.name}

{product.variant}

{product.price}

@@ -284,7 +274,7 @@ export default function ProductDetailPage() {