14 Commits

Author SHA1 Message Date
973a99ae02 Update src/app/services/page.tsx 2026-03-07 10:57:39 +00:00
d61a9cb113 Update src/app/pricing/page.tsx 2026-03-07 10:57:39 +00:00
ee0067a9e9 Update src/app/portfolio/page.tsx 2026-03-07 10:57:38 +00:00
3dcd39f665 Update src/app/page.tsx 2026-03-07 10:57:38 +00:00
e82cfcfcb2 Update src/app/about-us/page.tsx 2026-03-07 10:57:38 +00:00
dc08133962 Update src/app/styles/variables.css 2026-03-07 10:56:42 +00:00
f56e260cf0 Update src/app/styles/base.css 2026-03-07 10:56:41 +00:00
5ec1200018 Add src/app/services/page.tsx 2026-03-07 10:56:40 +00:00
db15ce5a02 Add src/app/pricing/page.tsx 2026-03-07 10:56:40 +00:00
d97a85db89 Add src/app/portfolio/page.tsx 2026-03-07 10:56:39 +00:00
94c3a54863 Update src/app/page.tsx 2026-03-07 10:56:39 +00:00
858c365710 Add src/app/contact/page.tsx 2026-03-07 10:56:38 +00:00
101c29b783 Add src/app/about-us/page.tsx 2026-03-07 10:56:38 +00:00
7aec5faf0c Merge version_1 into main
Merge version_1 into main
2026-03-07 10:54:31 +00:00
8 changed files with 916 additions and 16 deletions

245
src/app/about-us/page.tsx Normal file
View File

@@ -0,0 +1,245 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
export default function AboutUsPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="glass-depth"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "products" },
{ name: "About", id: "/about-us" },
{ name: "Craftsmanship", id: "features" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Shop Now", href: "/" }}
brandName="TimeLux"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="Our Story"
description="Founded in 1999, TimeLux has been dedicated to creating luxury timepieces that blend Swiss precision with timeless design. We believe every watch tells a story."
buttons={[
{ text: "Explore Collections", href: "/" },
{ text: "Contact Us", href: "#contact" },
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-jeweler-making-jewellery_23-2150931439.jpg?_wi=2"
imageAlt="TimeLux founder's workshop"
mediaAnimation="slide-up"
frameStyle="card"
background={{ variant: "plain" }}
ariaLabel="About Us hero section"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Our mission is to create" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/closeup-mockup-smartwatch-isolated-whtie-background_53876-42330.jpg", alt: "Luxury watch design" },
{ type: "text", content: "timepieces that transcend generations" },
]}
buttons={[{ text: "Discover Our Values", href: "#" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="journey" data-section="journey">
<TimelineProcessFlow
title="Our Journey"
description="From humble beginnings to a globally recognized luxury brand, TimeLux has maintained its commitment to excellence at every step."
textboxLayout="default"
animationType="slide-up"
items={[
{
id: "1", reverse: false,
media: (
<img
src="http://img.b2bpic.net/free-photo/medium-shot-jeweler-making-jewellery_23-2150931439.jpg"
alt="1999 - Founded"
className="w-full h-full object-cover"
/>
),
content: (
<div>
<h3 className="text-xl font-semibold mb-2">Founded</h3>
<p>TimeLux was established with a vision to create watches that combine precision engineering with artistic design.</p>
<ul className="list-disc pl-5 mt-2 space-y-1">
<li>First collection launched</li>
<li>Artisan workshop established</li>
</ul>
</div>
),
},
{
id: "2", reverse: true,
media: (
<img
src="http://img.b2bpic.net/free-photo/closeup-mockup-smartwatch-isolated-whtie-background_53876-42330.jpg"
alt="2005 - International Recognition"
className="w-full h-full object-cover"
/>
),
content: (
<div>
<h3 className="text-xl font-semibold mb-2">International Recognition</h3>
<p>Our commitment to quality earned us international awards and recognition in the luxury watch industry.</p>
<ul className="list-disc pl-5 mt-2 space-y-1">
<li>Won 3 prestigious awards</li>
<li>Expanded to 15 countries</li>
</ul>
</div>
),
},
{
id: "3", reverse: false,
media: (
<img
src="http://img.b2bpic.net/free-photo/senior-man-posing-white-shirt-hat_23-2149487992.jpg"
alt="2015 - Boutique Expansion"
className="w-full h-full object-cover"
/>
),
content: (
<div>
<h3 className="text-xl font-semibold mb-2">Boutique Expansion</h3>
<p>We opened our flagship boutiques in major cities worldwide, bringing the TimeLux experience closer to our customers.</p>
<ul className="list-disc pl-5 mt-2 space-y-1">
<li>12 flagship boutiques</li>
<li>50+ authorized retailers</li>
</ul>
</div>
),
},
{
id: "4", reverse: true,
media: (
<img
src="http://img.b2bpic.net/free-photo/side-view-woman-checking-clock_23-2148662074.jpg"
alt="2024 - Innovation & Sustainability"
className="w-full h-full object-cover"
/>
),
content: (
<div>
<h3 className="text-xl font-semibold mb-2">Innovation & Sustainability</h3>
<p>Today, we continue to innovate while maintaining our commitment to sustainable and ethical manufacturing practices.</p>
<ul className="list-disc pl-5 mt-2 space-y-1">
<li>Carbon-neutral production</li>
<li>Sustainable materials initiative</li>
</ul>
</div>
),
},
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
title="Meet Our Team"
description="Talented craftspeople and innovators dedicated to creating timepieces of exceptional quality."
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
groups={[
{
id: "leadership", groupTitle: "Leadership", members: [
{
id: "1", title: "Alexander Richter", subtitle: "Founder & Chief Designer", detail: "alexander@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg?_wi=4", imageAlt: "Alexander Richter"},
{
id: "2", title: "Catherine Moreau", subtitle: "Chief Executive Officer", detail: "catherine@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19450.jpg?_wi=4", imageAlt: "Catherine Moreau"},
],
},
{
id: "craftsmanship", groupTitle: "Master Craftsmen", members: [
{
id: "3", title: "Hans Mueller", subtitle: "Master Horologist", detail: "hans@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg?_wi=4", imageAlt: "Hans Mueller"},
{
id: "4", title: "Sofia Martinez", subtitle: "Lead Designer", detail: "sofia@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020786.jpg?_wi=3", imageAlt: "Sofia Martinez"},
{
id: "5", title: "Jean-Paul Dubois", subtitle: "Quality Assurance Director", detail: "jean-paul@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg?_wi=5", imageAlt: "Jean-Paul Dubois"},
],
},
{
id: "innovation", groupTitle: "Innovation Team", members: [
{
id: "6", title: "Dr. Marcus Chen", subtitle: "Head of Innovation", detail: "marcus@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg?_wi=5", imageAlt: "Dr. Marcus Chen"},
{
id: "7", title: "Elena Rossi", subtitle: "Materials Scientist", detail: "elena@timelux.com", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020786.jpg?_wi=4", imageAlt: "Elena Rossi"},
],
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
title="Have Questions?"
description="Reach out to our team. We'd love to hear from you and discuss how we can help."
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">
<FooterSimple
columns={[
{
title: "Shop", items: [
{ label: "Collections", href: "/" },
{ label: "New Arrivals", href: "#" },
{ label: "Sale", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about-us" },
{ label: "Our Story", href: "#" },
{ label: "Sustainability", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Contact", href: "#contact" },
{ label: "Warranty", href: "#" },
{ label: "Shipping Info", href: "#" },
],
},
]}
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
bottomRightText="Crafted with precision and passion"
/>
</div>
</ThemeProvider>
);
}

143
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,143 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Mail, Phone, MessageCircle } from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="glass-depth"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "products" },
{ name: "About", id: "about" },
{ name: "Craftsmanship", id: "features" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "products" }}
brandName="TimeLux"
/>
</div>
<div id="contact" data-section="contact" className="py-20">
<ContactFaq
faqs={[
{
id: "1", title: "How can I contact customer support?", content: "You can reach our customer support team via email at support@timelux.com, phone at +41 (0) 44 XXX XXXX, or through our WhatsApp contact. We respond within 24 hours during business days."},
{
id: "2", title: "What are your business hours?", content: "Our customer support team is available Monday to Friday, 9:00 AM to 6:00 PM CET. For urgent matters outside these hours, please email us and we'll get back to you as soon as possible."},
{
id: "3", title: "Do you offer WhatsApp support?", content: "Yes! You can message us on WhatsApp at +41 XXXX XXXXX for quick inquiries, order updates, and general support. WhatsApp allows us to respond faster with images and detailed information."},
{
id: "4", title: "Can I visit your showroom?", content: "Absolutely. Our showroom is located in Zurich, Switzerland. We recommend scheduling an appointment to ensure our team can give you personalized attention. Please contact us in advance to arrange a visit."},
{
id: "5", title: "How do I track my order?", content: "After your purchase, you'll receive a confirmation email with a tracking number. You can use this number to monitor your shipment in real-time through our partner courier service."},
{
id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, bank transfers, and installment payment plans. Your payment information is encrypted and secure."},
]}
ctaTitle="Get in Touch"
ctaDescription="Have questions about our watches? Reach out to our team via email, phone, WhatsApp, or visit our showroom for a personalized experience."
ctaButton={{ text: "Contact Us", href: "mailto:support@timelux.com" }}
ctaIcon={Mail}
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div className="py-12 px-4">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold mb-8 text-center">Contact Information</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Email */}
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
<Mail className="w-12 h-12 mb-4 text-primary-cta" />
<h3 className="font-semibold mb-2">Email</h3>
<p className="text-sm mb-3">support@timelux.com</p>
<p className="text-xs text-foreground/70">Response time: Within 24 hours</p>
</div>
{/* Phone */}
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
<Phone className="w-12 h-12 mb-4 text-primary-cta" />
<h3 className="font-semibold mb-2">Phone</h3>
<p className="text-sm mb-3">+41 (0) 44 XXX XXXX</p>
<p className="text-xs text-foreground/70">Mon-Fri, 9:00 AM - 6:00 PM CET</p>
</div>
{/* WhatsApp */}
<div className="flex flex-col items-center text-center p-6 rounded-lg bg-card">
<MessageCircle className="w-12 h-12 mb-4 text-primary-cta" />
<h3 className="font-semibold mb-2">WhatsApp</h3>
<p className="text-sm mb-3">+41 XXXX XXXXX</p>
<p className="text-xs text-foreground/70">Quick replies & support</p>
</div>
</div>
{/* Social Links Section */}
<div className="mt-12 pt-8 border-t border-accent/20">
<h3 className="text-xl font-semibold mb-6 text-center">Follow Us</h3>
<div className="flex justify-center gap-6">
<a href="https://facebook.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
<span className="text-sm font-medium">Facebook</span>
</a>
<a href="https://instagram.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
<span className="text-sm font-medium">Instagram</span>
</a>
<a href="https://twitter.com/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
<span className="text-sm font-medium">Twitter</span>
</a>
<a href="https://linkedin.com/company/timelux" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:text-accent transition-colors">
<span className="text-sm font-medium">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop", items: [
{ label: "Collections", href: "#products" },
{ label: "New Arrivals", href: "#" },
{ label: "Sale", href: "#" },
],
},
{
title: "Support", items: [
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "/contact" },
{ label: "Warranty", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Shipping Info", href: "#" },
],
},
]}
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
bottomRightText="Crafted with precision and passion"
/>
</div>
</ThemeProvider>
);
}

View File

@@ -32,7 +32,7 @@ export default function LandingPage() {
{ name: "About", id: "about" },
{ name: "Craftsmanship", id: "features" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "products" }}
brandName="TimeLux"
@@ -49,7 +49,7 @@ export default function LandingPage() {
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097701.jpg"
imageSrc="http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097701.jpg?_wi=1"
imageAlt="TimeLux luxury watch showcase"
mediaAnimation="slide-up"
frameStyle="card"
@@ -120,13 +120,13 @@ export default function LandingPage() {
description="Hear from collectors and professionals who trust TimeLux for precision and style"
testimonials={[
{
id: "1", name: "James Richardson", role: "CEO, Luxury Imports Inc", testimonial: "TimeLux watches represent everything I value: precision, elegance, and timeless design. Every detail is perfection.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg", imageAlt: "James Richardson"},
id: "1", name: "James Richardson", role: "CEO, Luxury Imports Inc", testimonial: "TimeLux watches represent everything I value: precision, elegance, and timeless design. Every detail is perfection.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg?_wi=1", imageAlt: "James Richardson"},
{
id: "2", name: "Sarah Mitchell", role: "Watch Collector & Journalist", testimonial: "In my 15 years of collecting, TimeLux stands out for its consistent quality and innovative design. Truly exceptional.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19450.jpg", imageAlt: "Sarah Mitchell"},
id: "2", name: "Sarah Mitchell", role: "Watch Collector & Journalist", testimonial: "In my 15 years of collecting, TimeLux stands out for its consistent quality and innovative design. Truly exceptional.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19450.jpg?_wi=1", imageAlt: "Sarah Mitchell"},
{
id: "3", name: "Marcus Chen", role: "Professional Diver", testimonial: "The Dive Master X has been my trusted companion on every expedition. Reliable, precise, and built to last.", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg", imageAlt: "Marcus Chen"},
id: "3", name: "Marcus Chen", role: "Professional Diver", testimonial: "The Dive Master X has been my trusted companion on every expedition. Reliable, precise, and built to last.", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg?_wi=1", imageAlt: "Marcus Chen"},
{
id: "4", name: "Elena Rodriguez", role: "Fashion Designer", testimonial: "A TimeLux watch is more than jewelry—it's a statement of taste and appreciation for fine craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020786.jpg", imageAlt: "Elena Rodriguez"},
id: "4", name: "Elena Rodriguez", role: "Fashion Designer", testimonial: "A TimeLux watch is more than jewelry—it's a statement of taste and appreciation for fine craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020786.jpg?_wi=1", imageAlt: "Elena Rodriguez"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -177,7 +177,7 @@ export default function LandingPage() {
{
title: "Support", items: [
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "#contact" },
{ label: "Contact", href: "/contact" },
{ label: "Warranty", href: "#" },
],
},

128
src/app/portfolio/page.tsx Normal file
View File

@@ -0,0 +1,128 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function PortfolioPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="glass-depth"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "/" },
{ name: "About", id: "/" },
{ name: "Craftsmanship", id: "/" },
{ name: "Reviews", id: "/" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "Contact", id: "/" },
]}
button={{ text: "Shop Now", href: "/" }}
brandName="TimeLux"
/>
</div>
<div id="portfolio-hero" data-section="portfolio-hero">
<HeroLogoBillboardSplit
logoText="Portfolio"
description="Explore our curated collection of exceptional timepieces and the stories behind each design. From exclusive limited editions to heritage classics, discover the TimeLux portfolio of precision engineering and artistic excellence."
buttons={[
{ text: "Explore Gallery", href: "#portfolio-examples" },
{ text: "Back to Home", href: "/" },
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097701.jpg?_wi=3"
imageAlt="TimeLux Portfolio Showcase"
mediaAnimation="slide-up"
frameStyle="card"
background={{ variant: "plain" }}
ariaLabel="Portfolio hero section"
/>
</div>
<div id="portfolio-examples" data-section="portfolio-examples">
<ProductCardOne
title="Featured Portfolio Pieces"
description="A selection of our most acclaimed designs, each representing the pinnacle of watchmaking craftsmanship and innovation"
tag="Showcase"
products={[
{
id: "1", name: "Heritage Chronograph Series", price: "$4,500", imageSrc: "http://img.b2bpic.net/free-photo/closeup-mockup-smartwatch-isolated-whtie-background_53876-42330.jpg?_wi=1", imageAlt: "Heritage Chronograph Series limited edition"},
{
id: "2", name: "Celestial Night Edition", price: "$3,950", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-posing-white-shirt-hat_23-2149487992.jpg?_wi=1", imageAlt: "Celestial Night Edition exclusive watch"},
{
id: "3", name: "Ocean Depths Collection", price: "$4,200", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-checking-clock_23-2148662074.jpg?_wi=1", imageAlt: "Ocean Depths Collection professional timepiece"},
{
id: "4", name: "Vintage Elegance Reissue", price: "$3,500", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg?_wi=3", imageAlt: "Vintage Elegance Reissue classic design"},
{
id: "5", name: "Urban Motion Pro", price: "$2,800", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19450.jpg?_wi=3", imageAlt: "Urban Motion Pro contemporary sports watch"},
{
id: "6", name: "Golden Heritage Limited", price: "$5,200", imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg?_wi=3", imageAlt: "Golden Heritage Limited luxury timepiece"},
]}
gridVariant="bento-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="portfolio-about" data-section="portfolio-about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Every piece" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-jeweler-making-jewellery_23-2150931439.jpg", alt: "Portfolio craftsmanship" },
{ type: "text", content: "tells a story" },
]}
buttons={[{ text: "View Collections", href: "/" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop", items: [
{ label: "Collections", href: "/" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Limited Editions", href: "/" },
],
},
{
title: "Support", items: [
{ label: "About Us", href: "/" },
{ label: "Contact", href: "/" },
{ label: "Warranty", href: "/" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
{ label: "Shipping Info", href: "/" },
],
},
]}
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
bottomRightText="Crafted with precision and passion"
/>
</div>
</ThemeProvider>
);
}

219
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,219 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="glass-depth"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "/" },
{ name: "About", id: "/" },
{ name: "Craftsmanship", id: "/" },
{ name: "Reviews", id: "/" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/" },
]}
button={{ text: "Shop Now", href: "/" }}
brandName="TimeLux"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="Pricing"
description="Choose the perfect TimeLux watch plan that matches your lifestyle and budget. Three carefully curated tiers to meet every collector's needs."
buttons={[
{ text: "Get Started", href: "#pricing" },
{ text: "Contact Sales", href: "#contact" },
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097701.jpg?_wi=4"
imageAlt="TimeLux pricing plans"
mediaAnimation="slide-up"
frameStyle="card"
background={{ variant: "plain" }}
ariaLabel="Pricing page hero section"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
title="Transparent Pricing"
description="Select the tier that best fits your needs. All plans include our commitment to quality and precision."
tag="Plans"
plans={[
{
id: "1", badge: "Basic Plan", price: "$199", subtitle: "Perfect for first-time collectors", buttons: [
{ text: "Choose Plan", href: "#" },
{ text: "Learn More", href: "#" },
],
features: [
"Classic timepiece collection", "1-year warranty", "Free standard shipping", "Access to member community", "Quarterly newsletters"],
},
{
id: "2", badge: "Standard Plan", price: "$399", subtitle: "Ideal for enthusiasts and collectors", buttons: [
{ text: "Choose Plan", href: "#" },
{ text: "Learn More", href: "#" },
],
features: [
"Access to premium collection", "3-year extended warranty", "Free priority shipping worldwide", "Exclusive member events", "Dedicated customer support", "Annual service cleaning"],
},
{
id: "3", badge: "Premium Plan", price: "$699", subtitle: "For the discerning collector", buttons: [
{ text: "Choose Plan", href: "#" },
{ text: "Contact Concierge", href: "#" },
],
features: [
"Unlimited access to all collections", "Lifetime warranty & service", "VIP concierge support 24/7", "Private viewing events", "Complimentary annual maintenance", "First access to limited editions", "Personalized watch consultation"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="comparison" data-section="comparison">
<div className="w-full py-16 md:py-24 px-4 md:px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12 md:mb-16">
<h2 className="text-3xl md:text-5xl font-bold mb-4">Detailed Comparison</h2>
<p className="text-lg text-foreground/70">See exactly what's included in each pricing tier</p>
</div>
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
<tr className="border-b border-foreground/10">
<th className="py-4 px-4 font-semibold text-foreground">Features</th>
<th className="py-4 px-4 font-semibold text-foreground text-center">Basic</th>
<th className="py-4 px-4 font-semibold text-foreground text-center">Standard</th>
<th className="py-4 px-4 font-semibold text-foreground text-center">Premium</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Collection Access</td>
<td className="py-4 px-4 text-center">Classic</td>
<td className="py-4 px-4 text-center">Premium</td>
<td className="py-4 px-4 text-center">All Collections</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Warranty</td>
<td className="py-4 px-4 text-center">1 Year</td>
<td className="py-4 px-4 text-center">3 Years</td>
<td className="py-4 px-4 text-center">Lifetime</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Shipping</td>
<td className="py-4 px-4 text-center">Standard</td>
<td className="py-4 px-4 text-center">Priority</td>
<td className="py-4 px-4 text-center">VIP</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Community Access</td>
<td className="py-4 px-4 text-center">✓</td>
<td className="py-4 px-4 text-center">✓</td>
<td className="py-4 px-4 text-center">✓</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Customer Support</td>
<td className="py-4 px-4 text-center">Email</td>
<td className="py-4 px-4 text-center">Priority</td>
<td className="py-4 px-4 text-center">24/7 Concierge</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Maintenance</td>
<td className="py-4 px-4 text-center">—</td>
<td className="py-4 px-4 text-center">Annual</td>
<td className="py-4 px-4 text-center">Included</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Limited Editions</td>
<td className="py-4 px-4 text-center">—</td>
<td className="py-4 px-4 text-center">Access</td>
<td className="py-4 px-4 text-center">First Access</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Private Events</td>
<td className="py-4 px-4 text-center">—</td>
<td className="py-4 px-4 text-center">✓</td>
<td className="py-4 px-4 text-center">✓ VIP</td>
</tr>
<tr className="border-b border-foreground/5 hover:bg-background-accent/30 transition-colors">
<td className="py-4 px-4">Personal Consultation</td>
<td className="py-4 px-4 text-center">—</td>
<td className="py-4 px-4 text-center">—</td>
<td className="py-4 px-4 text-center">✓</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Questions?"
title="Get In Touch"
description="Have questions about our pricing plans? Our team is here to help you find the perfect TimeLux watch experience."
background={{ variant: "plain" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Contact Us"
termsText="We'll get back to you within 24 hours with personalized guidance."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Shop", items: [
{ label: "Collections", href: "/" },
{ label: "Pricing", href: "/pricing" },
{ label: "Sale", href: "#" },
],
},
{
title: "Support", items: [
{ label: "About Us", href: "/" },
{ label: "Contact", href: "#contact" },
{ label: "Warranty", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Shipping Info", href: "#" },
],
},
]}
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
bottomRightText="Crafted with precision and passion"
/>
</div>
</ThemeProvider>
);
}

165
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,165 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="glass-depth"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Collections", id: "/" },
{ name: "About", id: "/" },
{ name: "Craftsmanship", id: "/" },
{ name: "Reviews", id: "/" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Shop Now", href: "/" }}
brandName="TimeLux"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="Premium Services"
description="Discover our comprehensive range of luxury watch services, from maintenance and repair to customization and restoration. Expert craftsmanship for your TimeLux collection."
buttons={[
{ text: "Request Service", href: "contact" },
{ text: "Learn More", href: "features" },
]}
buttonAnimation="slide-up"
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097701.jpg?_wi=2"
imageAlt="TimeLux Services showcase"
mediaAnimation="slide-up"
frameStyle="card"
background={{ variant: "plain" }}
ariaLabel="Services hero section"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
title="Our Service Offerings"
description="Comprehensive care for your luxury timepieces"
tag="Premium Services"
features={[
{
id: 1,
title: "Maintenance & Servicing", description: "Professional cleaning, lubrication, and maintenance to keep your watch running at peak performance. Our certified technicians ensure your timepiece maintains its precision and elegance.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-jeweler-making-jewellery_23-2150931439.jpg?_wi=1"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/closeup-mockup-smartwatch-isolated-whtie-background_53876-42330.jpg?_wi=1"},
},
{
id: 2,
title: "Repair & Restoration", description: "Expert repair services for damaged movements, dials, and cases. We restore vintage and modern TimeLux watches to their original condition with meticulous attention to detail.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-posing-white-shirt-hat_23-2149487992.jpg?_wi=1"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-checking-clock_23-2148662074.jpg?_wi=1"},
},
{
id: 3,
title: "Customization & Modification", description: "Personalize your TimeLux watch with custom dials, bands, and bezels. Our artisans work with you to create a unique timepiece that reflects your individual style and taste.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-man_171337-4226.jpg?_wi=2"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19450.jpg?_wi=2"},
},
{
id: 4,
title: "Battery & Bracelet Service", description: "Professional battery replacement, resizing, and bracelet adjustments. We ensure perfect fit and function with original TimeLux components and expert handling.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-macho-boy-black-jacket-posed-outdoor-street-amazing-model-man_627829-6126.jpg?_wi=2"},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020786.jpg?_wi=2"},
},
]}
showStepNumbers={false}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div id="service-packages" data-section="service-packages">
<ProductCardOne
title="Service Packages"
description="Choose the perfect service package for your luxury watch collection"
tag="Value Offerings"
products={[
{
id: "1", name: "Basic Maintenance", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/closeup-mockup-smartwatch-isolated-whtie-background_53876-42330.jpg?_wi=1", imageAlt: "Basic Maintenance package"},
{
id: "2", name: "Comprehensive Service", price: "$499", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-posing-white-shirt-hat_23-2149487992.jpg?_wi=1", imageAlt: "Comprehensive Service package"},
{
id: "3", name: "Premium Restoration", price: "$999", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-checking-clock_23-2148662074.jpg?_wi=1", imageAlt: "Premium Restoration package"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Request Your Service"
description="Contact us today to schedule your luxury watch service or to discuss your specific needs. Our expert team is ready to help."
background={{ variant: "plain" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Schedule Service"
termsText="We'll respond to your service request within 24 hours. Bring your TimeLux timepiece to our boutique for evaluation."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Services", items: [
{ label: "Maintenance", href: "#features" },
{ label: "Repair", href: "#features" },
{ label: "Customization", href: "#features" },
],
},
{
title: "Support", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Warranty", href: "#" },
{ label: "FAQ", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Service Terms", href: "#" },
],
},
]}
bottomLeftText="© 2025 TimeLux Watches. All rights reserved."
bottomRightText="Trusted service and expertise"
/>
</div>
</ThemeProvider>
);
}

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-roboto), sans-serif;
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-roboto), sans-serif;
font-family: var(--font-inter), sans-serif;
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #106EFB;
--primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #2a2928;
--accent: #ffffff;
--background-accent: #c6b180;
--accent: #e2e2e2;
--background-accent: #106EFB;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);