321 lines
17 KiB
TypeScript
321 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Leaf, Sparkles, Heart, CheckCircle, Globe, Zap, Award, Recycle, Shield, HelpCircle, Crown } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Verdant Scents"
|
|
navItems={[
|
|
{ name: "Collections", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Discover Nature's Essence"
|
|
description="Luxurious fragrances crafted from sustainable botanical ingredients. Each bottle tells a story of elegance and environmental consciousness."
|
|
tag="Premium Collection"
|
|
tagIcon={Leaf}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232231.jpg", imageAlt: "Verdant Scents Perfume Collection 3D" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/green-bottle-parfum-table_140725-7027.jpg", imageAlt: "Floral Perfume Bottle" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149291993.jpg", imageAlt: "Earthy Fragrance" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/green-bottle-parfum-table_140725-7027.jpg", imageAlt: "Fresh Green Scent" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669106.jpg", imageAlt: "Woody Premium Perfume" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore Collections", href: "products" },
|
|
{ text: "Learn About Us", href: "about" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Our Collections"
|
|
description="Hand-crafted fragrances inspired by nature's most captivating scents"
|
|
tag="Featured"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Verdant Scents", name: "Emerald Garden", price: "$89.00", rating: 5,
|
|
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/green-bottle-parfum-table_140725-7027.jpg", imageAlt: "Emerald Garden Perfume"
|
|
},
|
|
{
|
|
id: "2", brand: "Verdant Scents", name: "Earthy Musk", price: "$85.00", rating: 5,
|
|
reviewCount: "287", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149291993.jpg", imageAlt: "Earthy Musk Fragrance"
|
|
},
|
|
{
|
|
id: "3", brand: "Verdant Scents", name: "Citrus Whisper", price: "$92.00", rating: 5,
|
|
reviewCount: "401", imageSrc: "http://img.b2bpic.net/free-photo/green-bottle-parfum-table_140725-7027.jpg", imageAlt: "Citrus Whisper Perfume"
|
|
},
|
|
{
|
|
id: "4", brand: "Verdant Scents", name: "Midnight Forest", price: "$95.00", rating: 5,
|
|
reviewCount: "289", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669106.jpg", imageAlt: "Midnight Forest Fragrance"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
title="Crafted with Care"
|
|
description="Our commitment to excellence is reflected in every aspect of our fragrance creation process"
|
|
tag="Our Process"
|
|
tagIcon={Leaf}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Natural Ingredients", description: "We source premium botanical ingredients from sustainable farms around the world, ensuring every bottle is crafted responsibly.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/assorted-plant-leaves-lying-tabletop_23-2147931784.jpg", imageAlt: "Natural botanical ingredients"
|
|
},
|
|
items: [
|
|
{ icon: Leaf, text: "100% Natural Origins" },
|
|
{ icon: CheckCircle, text: "Sustainably Sourced" },
|
|
{ icon: Globe, text: "Ethically Harvested" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Expert Blending", description: "Our master perfumers blend each fragrance with precision, using time-honored techniques combined with modern innovation.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-centered-bottle-with-natural-skin-products_23-2148317651.jpg", imageAlt: "Essential oils and blending process"
|
|
},
|
|
items: [
|
|
{ icon: Sparkles, text: "Master Perfumers" },
|
|
{ icon: Zap, text: "Precision Formula" },
|
|
{ icon: Award, text: "Award Winning" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Sustainable Packaging", description: "Our eco-friendly bottles are made from recycled glass with minimal environmental impact, reflecting our commitment to the planet.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-furoshiki-package_23-2150274480.jpg", imageAlt: "Sustainable eco-friendly packaging"
|
|
},
|
|
items: [
|
|
{ icon: Leaf, text: "Eco-Friendly Materials" },
|
|
{ icon: Recycle, text: "Recycled Glass" },
|
|
{ icon: Shield, text: "Carbon Neutral" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Inspired by Nature, Crafted for You"
|
|
description="Founded in 2015, Verdant Scents emerged from a passion for creating fragrances that honor nature while delivering an unforgettable sensory experience. We believe that luxury should never come at the cost of the environment."
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "50K+", title: "Happy Customers Worldwide" },
|
|
{ value: "12+", title: "Years of Excellence" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/glass-vase-female-hand-home-goods-store_169016-52128.jpg"
|
|
imageAlt="Verdant Scents artisanal perfumery"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
title="Choose Your Perfect Scent"
|
|
description="Select from our curated collection of premium fragrances designed for every preference"
|
|
tag="Pricing"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "signature", tag: "Signature Collection", price: "$89", period: "/bottle", description: "Our classic fragrances that define elegance and sophistication", button: { text: "Select Signature", href: "products" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"50ml premium bottle", "Natural ingredients", "Signature packaging", "Free sample set"
|
|
]
|
|
},
|
|
{
|
|
id: "exclusive", tag: "Exclusive Collection", tagIcon: Crown,
|
|
price: "$125", period: "/bottle", description: "Limited edition fragrances crafted for the discerning collector", button: { text: "Select Exclusive", href: "products" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"75ml luxury bottle", "Rare botanical blend", "Collector's edition box", "Personalized consultation", "Priority shipping", "Lifetime exchange guarantee"
|
|
]
|
|
},
|
|
{
|
|
id: "bespoke", tag: "Bespoke Service", price: "$200", period: "custom", description: "Create your own signature fragrance with our master perfumers", button: { text: "Request Consultation", href: "contact" },
|
|
featuresTitle: "What's Included:", features: [
|
|
"1-on-1 consultation session", "Personalized fragrance creation", "100ml custom bottle", "Premium packaging", "Certificate of authenticity", "VIP lifetime support"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Join thousands of fragrance enthusiasts who have discovered their signature scent with Verdant Scents"
|
|
cardTag="Trusted by Our Community"
|
|
cardTagIcon={Heart}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg", imageAlt: "Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Wilson", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "Emma Wilson"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", imageAlt: "David Kim"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our fragrances, ingredients, and services"
|
|
tag="Help Center"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
mediaPosition="left"
|
|
imageSrc="http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232231.jpg"
|
|
imageAlt="Verdant Scents fragrances"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What makes your fragrances unique?", content: "Our fragrances are crafted using 100% natural, sustainably sourced botanical ingredients. Each scent is blended by master perfumers using traditional techniques combined with modern innovation, ensuring a premium experience that respects the environment."
|
|
},
|
|
{
|
|
id: "2", title: "How long do your fragrances last?", content: "Our fragrances have excellent longevity, typically lasting 6-8 hours on the skin. This varies depending on your skin type, application method, and the specific fragrance. For best results, apply to pulse points like wrists and neck."
|
|
},
|
|
{
|
|
id: "3", title: "Are your products cruelty-free?", content: "Yes, all Verdant Scents products are 100% cruelty-free. We do not test on animals and work exclusively with suppliers who share our ethical values. We are certified by leading cruelty-free organizations."
|
|
},
|
|
{
|
|
id: "4", title: "Can I return or exchange my purchase?", content: "We offer a 30-day satisfaction guarantee. If you're not completely happy with your fragrance, you can return or exchange it for free. Our customer service team is here to help make the process seamless."
|
|
},
|
|
{
|
|
id: "5", title: "How should I store my fragrance?", content: "Store your fragrance in a cool, dark place away from direct sunlight and heat. The ideal temperature is between 60-70°F. Proper storage ensures your fragrance maintains its quality and longevity over time."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer samples?", content: "Yes! All orders include complimentary sample sets so you can explore our collection. You can also request specific samples through our customer service team or website."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get In Touch"
|
|
description="Have questions about our fragrances or want a personalized consultation? We'd love to hear from you. Reach out today and discover your signature scent."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your fragrance preferences or ask your questions...", rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232231.jpg"
|
|
imageAlt="Contact Verdant Scents"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Verdant Scents"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Collections", href: "products" },
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Features", href: "features" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Pricing", href: "pricing" },
|
|
{ label: "FAQ", href: "faq" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Shipping Info", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|