From db15ce5a02cd4716407aa45bbaefa30a75f95ba7 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 10:56:40 +0000
Subject: [PATCH] Add src/app/pricing/page.tsx

---
 src/app/pricing/page.tsx | 219 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 src/app/pricing/page.tsx

diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
new file mode 100644
index 0000000..b8e1263
--- /dev/null
+++ b/src/app/pricing/page.tsx
@@ -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"
+          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>
+  );
+}