481 lines
15 KiB
TypeScript
481 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Award, Globe, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="LUXE"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Timeless Elegance, Crafted for You"
|
|
description="Discover our collection of hand-curated pieces that define modern luxury. Simple, refined, and made to last."
|
|
testimonials={[
|
|
{
|
|
name: "Elena R.",
|
|
handle: "@elena_luxury",
|
|
testimonial: "The attention to detail in every single piece is incredible. Truly elevated.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-skin-care-cream_23-2148761493.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle fashion photography",
|
|
},
|
|
{
|
|
name: "Marcus J.",
|
|
handle: "@mj_style",
|
|
testimonial: "Sophisticated designs that fit perfectly into my daily lifestyle.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle fashion photography",
|
|
},
|
|
{
|
|
name: "Sarah W.",
|
|
handle: "@sarah_w",
|
|
testimonial: "Exceptional quality and a seamless shopping experience.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/round-gold-podium-minimal-pedestal-product-display-background-3d-rendering_56104-1272.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle fashion photography",
|
|
},
|
|
{
|
|
name: "David L.",
|
|
handle: "@david_l",
|
|
testimonial: "Minimalist at its absolute best. Highly recommend.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beauty-products-flowers_23-2149353144.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle fashion photography",
|
|
},
|
|
{
|
|
name: "Chloe B.",
|
|
handle: "@chloe_b",
|
|
testimonial: "So soft, so beautiful. The luxury aesthetic is unmatched.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/apple-blue-table-isolated-orange_171337-13161.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle fashion photography",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/arrangement-skin-care-cream_23-2148761493.jpg?_wi=2"
|
|
imageAlt="luxury lifestyle fashion photography"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/abstract-minimal-kitchen-objects_23-2148835348.jpg",
|
|
alt: "Abstract minimal kitchen objects",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/modern-round-wireless-speaker-with-slick-design-floating-concrete-background_23-2150808029.jpg",
|
|
alt: "Modern round wireless speaker with slick design floating on concrete background",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238337.jpg",
|
|
alt: "Close up on elegant beauty selfcare treatment",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/view-charcoal-different-forms_23-2149654126.jpg",
|
|
alt: "View of charcoal in different forms",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg",
|
|
alt: "Close up woman sitting on chair",
|
|
},
|
|
]}
|
|
avatarText="Join 5,000+ luxury enthusiasts"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "100% Sustainable",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Hand-Crafted Quality",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Global Shipping",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Timeless Design",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Ethical Production",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Designed with Purpose"
|
|
description="We believe in less, but better. Our process balances artistic vision with sustainable, premium craftsmanship."
|
|
metrics={[
|
|
{
|
|
value: "100%",
|
|
title: "Premium Quality",
|
|
},
|
|
{
|
|
value: "15+",
|
|
title: "Artisanal Partners",
|
|
},
|
|
{
|
|
value: "24h",
|
|
title: "Support",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=2"
|
|
imageAlt="craftsmanship close up focus"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split-description"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
brand: "LUXE",
|
|
name: "Silk Minimal Scarf",
|
|
price: "$120",
|
|
rating: 5,
|
|
reviewCount: "128",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/round-gold-podium-minimal-pedestal-product-display-background-3d-rendering_56104-1272.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p2",
|
|
brand: "LUXE",
|
|
name: "Leather Cardholder",
|
|
price: "$85",
|
|
rating: 5,
|
|
reviewCount: "92",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beauty-products-flowers_23-2149353144.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p3",
|
|
brand: "LUXE",
|
|
name: "Canvas Tote Bag",
|
|
price: "$160",
|
|
rating: 4,
|
|
reviewCount: "75",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/apple-blue-table-isolated-orange_171337-13161.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p4",
|
|
brand: "LUXE",
|
|
name: "Gold Minimalist Ring",
|
|
price: "$250",
|
|
rating: 5,
|
|
reviewCount: "156",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serious-looking-young-female-picking-design-magazines-vintage-store-standing-stylish-brown-dress_197531-23028.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
brand: "LUXE",
|
|
name: "Ceramic Tea Set",
|
|
price: "$180",
|
|
rating: 5,
|
|
reviewCount: "48",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-strong-independent-successful-businesswoman-wearing-smart-casual-clothing-glasses-working-laptop-cafe-black-white-photo_627829-9836.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
brand: "LUXE",
|
|
name: "Hand-dyed Throw",
|
|
price: "$320",
|
|
rating: 5,
|
|
reviewCount: "34",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/apple-near-glass-with-juice-mirror-blue-table-isolated_171337-13154.jpg",
|
|
},
|
|
]}
|
|
title="Featured Collections"
|
|
description="Explore our core lineup, curated for the refined minimalist."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
title: "Premium Materials",
|
|
descriptions: [
|
|
"Sourced responsibly from the finest suppliers across the globe.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-art-cover-collection_23-2148978362.jpg",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Timeless Design",
|
|
descriptions: [
|
|
"Created to outlast seasonal trends and remain elegant for decades.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/leaf-shield-set-four_78370-9083.jpg",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Ethical Making",
|
|
descriptions: [
|
|
"Supporting artisans with fair wages and safe working conditions.",
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-vector/premium-quality_23-2147502658.jpg",
|
|
},
|
|
]}
|
|
title="Why Choose Us"
|
|
description="Excellence in design and ethical standards drive our brand mission."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Alex B.",
|
|
role: "Collector",
|
|
company: "DesignCo",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Jamie D.",
|
|
role: "Architect",
|
|
company: "ArchStudio",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-16454.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Riley P.",
|
|
role: "Designer",
|
|
company: "CreativeLab",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-lady-black-jacket-posing-isolated-background-happy-cheerful-woman-dark-suit-laughing-looking-into-camera_197531-18513.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Sam T.",
|
|
role: "Director",
|
|
company: "BrandFocus",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-reading-book-christmas-decorated-home-holiday-concept-christmas-holidays-people-concept_1391-902.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Jordan M.",
|
|
role: "Founder",
|
|
company: "StyleHouse",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "5K+",
|
|
label: "Happy Clients",
|
|
},
|
|
{
|
|
value: "4.9/5",
|
|
label: "Avg Rating",
|
|
},
|
|
{
|
|
value: "95%",
|
|
label: "Referrals",
|
|
},
|
|
]}
|
|
title="Client Experiences"
|
|
description="What our community says about their Luxe experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Do you ship worldwide?",
|
|
content: "Yes, we ship to over 50 countries globally with tracking.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "How is the quality ensured?",
|
|
content: "Every piece undergoes strict quality assurance before shipment.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Can I return products?",
|
|
content: "We offer a 30-day return policy for unused items.",
|
|
},
|
|
]}
|
|
title="Frequent Questions"
|
|
description="Answers to commonly asked questions about our process."
|
|
faqsAnimation="blur-reveal"
|
|
mediaAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=3"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "120+",
|
|
title: "Designs",
|
|
description: "Unique curated items",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "98%",
|
|
title: "Satisfaction",
|
|
description: "Customer approval rating",
|
|
icon: Award,
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "50+",
|
|
title: "Markets",
|
|
description: "Global shipping reach",
|
|
icon: Globe,
|
|
},
|
|
]}
|
|
title="Impact by Numbers"
|
|
description="Our reach and customer satisfaction growth."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Get in Touch"
|
|
description="Have questions? Our support team is ready to assist you."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email Address",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "How can we help?",
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/carpenter-using-screwdriver-wood_23-2148643198.jpg?_wi=4"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-smooth-dark-blue-with-black-vignette-studio-well-use-as-backgroundbusiness-reportdigitalwebsite-templatebackdrop_1258-94419.jpg"
|
|
logoText="LUXE"
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Returns",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|