184 lines
10 KiB
TypeScript
184 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Sparkles, Star, Zap, Heart } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="sharp"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Kiss"
|
|
navItems={[
|
|
{ name: "Collections", id: "collections" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Shop", id: "products" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Discover Your Signature Scent"
|
|
description="Experience the artistry of premium fragrances. Each perfume tells a story, crafted with the finest ingredients from around the world."
|
|
tag="Luxury Fragrances"
|
|
tagIcon={Sparkles}
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "collections" },
|
|
{ text: "Shop Now", href: "products" }
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "https://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669115.jpg", imageAlt: "Rose Essence Perfume"
|
|
},
|
|
{
|
|
id: "2", imageSrc: "https://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337694.jpg", imageAlt: "Ocean Breeze Collection"
|
|
},
|
|
{
|
|
id: "3", imageSrc: "https://img.b2bpic.net/free-photo/front-view-perfume-bottle-purple-blurred-background_140725-145531.jpg", imageAlt: "Midnight Musk Fragrance"
|
|
},
|
|
{
|
|
id: "4", imageSrc: "https://img.b2bpic.net/free-photo/still-life-beauty-products-based-regenerative-agriculture_23-2150721383.jpg", imageAlt: "Amber Glow Perfume"
|
|
},
|
|
{
|
|
id: "5", imageSrc: "https://img.b2bpic.net/free-photo/front-view-expensive-perfume-as-present-black-table-gift-scent-love-fragnance-smell-valentines-day-marriage_140725-148347.jpg", imageAlt: "Fresh Start Fragrance"
|
|
},
|
|
{
|
|
id: "6", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-beautifully-shaped-glass-bottles-filled-with-perfume_181624-28370.jpg", imageAlt: "Evening Elegance Scent"
|
|
}
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Our Finest Collection"
|
|
description="Handpicked fragrances that define elegance and sophistication. Each scent is a masterpiece of perfumery."
|
|
tag="Best Sellers"
|
|
tagIcon={Star}
|
|
products={[
|
|
{
|
|
id: "1", name: "Rose Essence", price: "$89", imageSrc: "https://img.b2bpic.net/free-photo/alcohol-bottle-book-with-pomegranates-rose_176474-6034.jpg", imageAlt: "Rose Essence Perfume"
|
|
},
|
|
{
|
|
id: "2", name: "Ocean Breeze", price: "$79", imageSrc: "https://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669136.jpg", imageAlt: "Ocean Breeze Fragrance"
|
|
},
|
|
{
|
|
id: "3", name: "Midnight Musk", price: "$95", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-perfume-bottles-arrangement_23-2149234342.jpg", imageAlt: "Midnight Musk Perfume"
|
|
},
|
|
{
|
|
id: "4", name: "Amber Glow", price: "$85", imageSrc: "https://img.b2bpic.net/free-photo/empty-perfume-glass-bottles-design-resource_53876-96700.jpg", imageAlt: "Amber Glow Fragrance"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
title="Kiss: Where Passion Meets Perfection. Since 2015, we've crafted fragrances that capture the essence of emotion and elegance, creating unforgettable olfactory experiences for perfume lovers worldwide."
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#" },
|
|
{ text: "Explore Ingredients", href: "#" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="collections" data-section="collections">
|
|
<FeatureCardSix
|
|
title="Fragrance Collections"
|
|
description="Explore our carefully curated collections, each designed to evoke distinct emotions and moments in life."
|
|
tag="Premium Selection"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Floral Elegance", description: "Delicate and romantic fragrances featuring timeless floral notes that celebrate feminine grace and sophistication.", imageSrc: "https://img.b2bpic.net/free-photo/empty-perfume-bottles-arrangement_23-2149234382.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Fresh & Zesty", description: "Crisp and invigorating scents with citrus and green notes perfect for everyday wear and energizing moments.", imageSrc: "https://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337714.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Oriental & Warm", description: "Luxurious and sensual fragrances with amber, musk, and spice notes for evening elegance and confidence.", imageSrc: "https://img.b2bpic.net/free-photo/empty-perfume-bottles-arrangement_23-2149234382.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Loved by Fragrance Enthusiasts"
|
|
description="Discover why customers worldwide choose Kiss for their signature scents."
|
|
tag="Customer Reviews"
|
|
tagIcon={Heart}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "My New Signature Scent", quote: "Rose Essence has become my go-to fragrance. The longevity is incredible and the scent profile is absolutely divine. I've received so many compliments!", name: "Jessica Chen", role: "Fragrance Enthusiast", imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Jessica Chen"
|
|
},
|
|
{
|
|
id: "2", title: "Quality Beyond Compare", quote: "Kiss perfumes are crafted with such attention to detail. The ingredients are premium and you can tell the difference from the first spritz. Worth every penny!", name: "Sarah Mitchell", role: "Luxury Shopper", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "3", title: "Perfect Gift Choice", quote: "I purchased Ocean Breeze as a gift and my friend absolutely loves it. The presentation is elegant and the scent is refreshing yet sophisticated.", name: "Emily Rodriguez", role: "Gift Buyer", imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Customer Service Excellence", quote: "From browsing to purchase, Kiss provides an exceptional experience. Their team helped me find the perfect fragrance and the service was impeccable.", name: "Amanda Foster", role: "Regular Customer", imageSrc: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg", imageAlt: "Amanda Foster"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to find your signature scent? Explore our complete collection and let Kiss help you discover the fragrance that tells your story."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#" },
|
|
{ text: "Get in Touch", href: "#" }
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Kiss"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |