Merge version_2 into main #1
417
src/app/page.tsx
417
src/app/page.tsx
@@ -2,398 +2,159 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Award, Shield, Zap } from "lucide-react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Star, Shield, Zap, Clock, Compass, Target } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="floatingGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<NavbarStyleApple
|
||||
brandName="Chronos Luxury"
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Quality",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Our Story", id: "#about" },
|
||||
{ name: "Collection", id: "#products" },
|
||||
{ name: "Quality", id: "#features" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Chronos"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Timeless Precision."
|
||||
description="Discover our collection of premium, handcrafted watches designed for those who appreciate the art of time."
|
||||
testimonials={[
|
||||
{
|
||||
name: "James L.",
|
||||
handle: "@james",
|
||||
testimonial: "Exceptional craftsmanship. The attention to detail is truly unparalleled.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-smart-hand-people-hair_1157-4213.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah T.",
|
||||
handle: "@sarah",
|
||||
testimonial: "My go-to store for all premium watch needs. Always satisfied.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-businessman-taking-papers-from-bag_1262-6105.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcus R.",
|
||||
handle: "@marcus",
|
||||
testimonial: "Perfect gift! Elegant, durable, and classic design.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-model-dressed-warm-overcoat-posing-studio_158538-11464.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena V.",
|
||||
handle: "@elena",
|
||||
testimonial: "Best customer service and truly beautiful timepieces.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-sitting-road-shadows_627829-2723.jpg",
|
||||
},
|
||||
{
|
||||
name: "Victor D.",
|
||||
handle: "@victor",
|
||||
testimonial: "Quality that lasts a lifetime. Extremely impressed.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914199.jpg",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-fashion-still-life-concept_23-2148229231.jpg"
|
||||
imageAlt="luxury watch close up photography"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/metal-pieces-close-up-background_23-2148882603.jpg",
|
||||
alt: "Metal pieces close up background",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-vintage-girly-arrangement_23-2148229314.jpg",
|
||||
alt: "Top view vintage girly arrangement",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-colorful-girly-items_23-2148229257.jpg",
|
||||
alt: "High angle colorful girly items ",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/passports-with-watch-beton-background_23-2148328912.jpg",
|
||||
alt: "Passports with a watch on beton background",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-image-redhead-bearded-male-holds-cup-coffee-grey-background_613910-10244.jpg",
|
||||
alt: "Close up image of redhead bearded male holds a cup of coffee over grey background.",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Swiss Made",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sapphire Crystal",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Automatic Movement",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Handcrafted",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Luxury",
|
||||
},
|
||||
]}
|
||||
<HeroOverlay
|
||||
title="Mastery of Time"
|
||||
description="Exquisite Swiss-engineered timepieces for the modern connoisseur."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-watch-still-life_23-2149547192.jpg"
|
||||
imageAlt="Premium luxury watch display"
|
||||
buttons={[{ text: "View Collection", href: "#products" }]}
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
<TestimonialAboutCard
|
||||
tag="Our Legacy"
|
||||
title="A Century of Precision"
|
||||
description="Founded on the principles of horological excellence, every Chronos watch is a testament to timeless design and technical perfection."
|
||||
subdescription="We combine heritage craftsmanship with modern advancements to ensure your timepiece remains accurate and elegant for generations."
|
||||
icon={Clock}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/watchmaker-working-shop_23-2148784865.jpg"
|
||||
useInvertedBackground={false}
|
||||
title="Our Heritage"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
<FeatureCardTwentyEight
|
||||
title="The Chronos Standard"
|
||||
description="Unrivaled durability meets sophisticated engineering."
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Sapphire Glass",
|
||||
description: "Scratch-resistant crystal for daily wear.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Precision Movement",
|
||||
description: "Swiss-made automatic movements for accuracy.",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Waterproof",
|
||||
description: "Tested to 100 meters underwater.",
|
||||
},
|
||||
{ id: "f1", title: "Swiss Heart", subtitle: "Automatic movement", category: "Internal", value: "Precision" },
|
||||
{ id: "f2", title: "Sapphire Shield", subtitle: "Scratch resistant", category: "Protection", value: "Durable" },
|
||||
{ id: "f3", title: "Water Resistance", subtitle: "Up to 100m", category: "Utility", value: "Versatile" }
|
||||
]}
|
||||
title="Unmatched Quality"
|
||||
description="Engineered for excellence, our watches blend tradition with modern technology."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
<ProductCardTwo
|
||||
title="Current Collection"
|
||||
description="Discover your next signature piece."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Grand Chronograph",
|
||||
price: "$1,299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartwatch-with-gray-band-sleek-design_9975-133810.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Classic Leather",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grayscale-closeup-shot-person-wearing-wristwatch_181624-3953.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Deep Dive Pro",
|
||||
price: "$1,599",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sporty-woman-with-smartwatch-beach_23-2147803055.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Gold Minimalist",
|
||||
price: "$1,999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/eid-round-smart-watch-front-side-white-background_187299-39151.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Pilot Edition",
|
||||
price: "$1,150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spiral-staircase-with-light-end_181624-8823.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Skeleton Automatic",
|
||||
price: "$2,499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599340.jpg",
|
||||
},
|
||||
{ id: "p1", brand: "Chronos", name: "Signature Silver", price: "$2,400", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/luxury-watch-white-dial_23-2149547191.jpg" },
|
||||
{ id: "p2", brand: "Chronos", name: "Midnight Gold", price: "$3,200", rating: 5, reviewCount: "96", imageSrc: "http://img.b2bpic.net/free-photo/luxury-watch-black-dial_23-2149547193.jpg" }
|
||||
]}
|
||||
title="New Collection"
|
||||
description="Exquisite designs, limited editions."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
<MetricCardOne
|
||||
title="Excellence Milestones"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Watches Sold",
|
||||
description: "Global reach.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241149.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50",
|
||||
title: "Regions Served",
|
||||
description: "World wide.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technological-piece-background_23-2148882601.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "20+",
|
||||
title: "Design Awards",
|
||||
description: "Expert acclaim.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-jeweler-making-jewellery_23-2150931436.jpg",
|
||||
},
|
||||
{ id: "m1", value: "100%", title: "Hand-Assembled", description: "Quality assurance", icon: Shield },
|
||||
{ id: "m2", value: "50+", title: "Countries", description: "Global presence", icon: Compass },
|
||||
{ id: "m3", value: "25", title: "Awards", description: "Design recognition", icon: Target }
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our success in numbers."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
<TestimonialCardSixteen
|
||||
title="What Our Patrons Say"
|
||||
description="Join the ranks of discerning watch enthusiasts worldwide."
|
||||
textboxLayout="split"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John D.",
|
||||
role: "Collector",
|
||||
company: "Private",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-checks-her-time-stands-street-outside-office-looks-her-wrist-w_1258-119503.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Alice W.",
|
||||
role: "Business Owner",
|
||||
company: "LuxCorp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pensive-charming-man_171337-17432.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sam B.",
|
||||
role: "Architect",
|
||||
company: "Designs",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-young-woman-street_1301-4773.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mia S.",
|
||||
role: "Model",
|
||||
company: "Fashion",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-sitting-white-decorative-brick-bench-with-strawberry-milkshake-her_181624-3570.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Rob G.",
|
||||
role: "Consultant",
|
||||
company: "Strategy",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094603.jpg",
|
||||
},
|
||||
kpiItems={[
|
||||
{ value: "98%", label: "Satisfaction" },
|
||||
{ value: "20k+", label: "Happy Owners" },
|
||||
{ value: "5 Star", label: "Average Rating" }
|
||||
]}
|
||||
animationType="depth-3d"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Marcus Aurelius", role: "Entrepreneur", company: "Stoa", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-luxury-watch_23-2149547195.jpg" }
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear from our passionate collectors."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
<FaqBase
|
||||
title="Support Center"
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Warranty Policy",
|
||||
content: "Every watch comes with a 2-year warranty.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Shipping Details",
|
||||
content: "We offer free express shipping on all orders.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Returns",
|
||||
content: "Returns accepted within 30 days of purchase.",
|
||||
},
|
||||
{ id: "f1", title: "Warranty Coverage", content: "Every timepiece is covered by a 5-year global warranty." },
|
||||
{ id: "f2", title: "Maintenance", content: "We recommend servicing your watch every 3-5 years." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Answers to your questions."
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Ready to choose your perfect watch?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
<ContactCenter
|
||||
tag="Newsletter"
|
||||
title="Join our Exclusive List"
|
||||
description="Receive early access to limited edition releases and horological insights."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
<FooterMedia
|
||||
logoText="Chronos Luxury"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/watch-craftsmanship_23-2148784870.jpg"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Support",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Shop", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
logoText="Chronos"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #1f4035;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #ffffff;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #c89bff;
|
||||
--primary-cta-text: #051a12;
|
||||
--secondary-cta: #0d2b1f;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #d4f6e8;
|
||||
--accent: #0d5238;
|
||||
--background-accent: #10b981;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user