180 lines
12 KiB
TypeScript
180 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Sparkles, Award, Mail } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="MyLeo"
|
|
navItems={[
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Timeless Elegance on Your Wrist"
|
|
description="Discover MyLeo's collection of premium fashion watches that blend sophistication with innovation. Each timepiece is crafted to complement your unique style and lifestyle."
|
|
tag="New Collection 2025"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Collection", href: "products" },
|
|
{ text: "Learn More" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
carouselItems={[
|
|
{ id: "hero-1", imageSrc: "http://img.b2bpic.net/free-vector/watch-background-design_1268-652.jpg", imageAlt: "MyLeo Premium Watch Main" },
|
|
{ id: "hero-2", imageSrc: "http://img.b2bpic.net/free-vector/watch-designs-collection_1333-73.jpg", imageAlt: "MyLeo Classic Design" },
|
|
{ id: "hero-3", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman_23-2148103955.jpg", imageAlt: "MyLeo Modern Collection" },
|
|
{ id: "hero-4", imageSrc: "http://img.b2bpic.net/free-vector/classic-watches-interface_250435-185.jpg", imageAlt: "MyLeo Elegant Series" },
|
|
{ id: "hero-5", imageSrc: "http://img.b2bpic.net/free-photo/computer-smart-hand-people-hair_1157-4213.jpg", imageAlt: "MyLeo Premium Line" },
|
|
{ id: "hero-6", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-businessman-handsome-model-man-casual-cloth-suit-with-accesories-hands_158538-9460.jpg", imageAlt: "MyLeo Signature Watch" }
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Shop Our Collection"
|
|
description="Browse our curated selection of fashion watches designed for every occasion and style"
|
|
tag="Premium Selection"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "Urban Sophisticate", price: "$189.00", imageSrc: "http://img.b2bpic.net/free-photo/circular-clock-outdoors-still-life_23-2150436128.jpg", imageAlt: "Urban Sophisticate Classic Watch", initialQuantity: 1 },
|
|
{ id: "2", name: "Active Motion", price: "$249.00", imageSrc: "http://img.b2bpic.net/free-photo/closeup-athletic-woman-using-fitness-tracker-sunset_637285-9272.jpg", imageAlt: "Active Motion Sport Watch", initialQuantity: 1 },
|
|
{ id: "3", name: "Gala Prestige", price: "$349.00", imageSrc: "http://img.b2bpic.net/free-photo/man-dressed-stylish-blue-suit-who-is-putting-elegant-watch_8353-10463.jpg", imageAlt: "Gala Prestige Elegant Watch", initialQuantity: 1 }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Why Choose MyLeo"
|
|
description="Discover what sets our watches apart in the luxury timepiece market"
|
|
tag="Premium Craftsmanship"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
features={[
|
|
{ id: 1, title: "Swiss-Inspired Precision", description: "Each watch is engineered with meticulous attention to detail, ensuring accurate timekeeping and reliable performance that lasts for years.", imageSrc: "http://img.b2bpic.net/free-vector/watch-background-design_1268-652.jpg", imageAlt: "Swiss-Inspired Precision" },
|
|
{ id: 2, title: "Premium Materials", description: "Crafted from the finest materials including stainless steel, sapphire crystal, and genuine leather straps for unmatched durability and elegance.", imageSrc: "http://img.b2bpic.net/free-photo/man-dressed-stylish-blue-suit-who-is-putting-elegant-watch_8353-10463.jpg", imageAlt: "Premium Materials" },
|
|
{ id: 3, title: "Sustainable Design", description: "Committed to environmental responsibility, our watches use eco-friendly production methods and sustainable sourcing of materials.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-athletic-woman-using-fitness-tracker-sunset_637285-9272.jpg", imageAlt: "Sustainable Design" },
|
|
{ id: 4, title: "Lifetime Warranty", description: "Stand behind our craftsmanship with a comprehensive lifetime warranty covering mechanical parts and design defects.", imageSrc: "http://img.b2bpic.net/free-photo/circular-clock-outdoors-still-life_23-2150436128.jpg", imageAlt: "Lifetime Warranty" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About MyLeo"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Luxury Timepieces for the Modern Individual. Since 2015, MyLeo has been dedicated to creating watches that celebrate individuality, craftsmanship, and timeless style."
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Read Our Story", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="Trusted by leading brands and publications worldwide"
|
|
tag="Media"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Luxury Magazine", "Fashion Weekly", "Premium Lifestyle", "Timepiece Digest", "Style Chronicles", "Elegance Today", "Watch Connoisseur", "Modern Living"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Customer Reviews"
|
|
description="Hear from those who've experienced MyLeo watches"
|
|
tag="Client Testimonials"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{ id: "1", name: "Victoria Sterling", role: "Fashion Entrepreneur", testimonial: "MyLeo watches are the perfect blend of style and function. I receive compliments on mine constantly, and the attention to detail is remarkable.", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg", imageAlt: "professional portrait business headshot confident woman" },
|
|
{ id: "2", name: "James Mitchell", role: "Business Executive", testimonial: "After wearing my MyLeo for three years, I can confidently say it's the best investment in a timepiece I've made. Precision and elegance combined.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "man portrait confident businessman professional headshot" },
|
|
{ id: "3", name: "Sophie Laurent", role: "Creative Director", testimonial: "The craftsmanship is outstanding. My MyLeo watch has become an extension of my personal brand and professional image.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg", imageAlt: "woman portrait professional photo confident female" },
|
|
{ id: "4", name: "Alexander Chen", role: "Technology Innovator", testimonial: "A luxury watch that respects traditional craftsmanship while embracing modern design. MyLeo truly stands apart from competitors.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg", imageAlt: "man professional business portrait confident person" },
|
|
{ id: "5", name: "Emma Richardson", role: "Lifestyle Influencer", testimonial: "My followers are always asking about my watch. MyLeo combines timeless elegance with contemporary appeal perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-sitting-grey-wall_176420-9120.jpg", imageAlt: "fashion model style portrait confident woman" },
|
|
{ id: "6", name: "Marcus Williams", role: "Attorney", testimonial: "Impeccable quality and service. MyLeo's customer support is as exceptional as their watches. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg", imageAlt: "professional man business portrait confident male" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Newsletter"
|
|
title="Stay Connected with MyLeo"
|
|
description="Subscribe to our newsletter for exclusive access to new collections, special events, and insider updates on the world of luxury timepieces."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Subscribe"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="MyLeo"
|
|
columns={[
|
|
{ items: [{ label: "Shop", href: "products" }, { label: "About Us", href: "about" }, { label: "Features", href: "features" }] },
|
|
{ items: [{ label: "Contact", href: "contact" }, { label: "Support", href: "#" }, { label: "FAQ", href: "#" }] },
|
|
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Warranty", href: "#" }] },
|
|
{ items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Facebook", href: "https://facebook.com" }, { label: "Twitter", href: "https://twitter.com" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|