Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -31,66 +31,26 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Models",
-          id: "hero",
-        },
-        {
-          name: "Performance",
-          id: "features",
-        },
-        {
-          name: "Luxury",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Models", id: "hero" },
+        { name: "Performance", id: "features" },
+        { name: "Luxury", id: "about" },
+        { name: "Services", id: "/services" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="BENTLEY"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="BENTLEY CONTINENTAL GT"
+      <TimelinePhoneView
+        title="BENTLEY CONTINENTAL GT"
         description="Redefining the grand tourer. Experience unparalleled performance and refined luxury in every detail."
-      buttons={[
-        {
-          text: "Configure Now",
-          href: "#",
-        },
-        {
-          text: "Discover More",
-          href: "#about",
-        },
-      ]}
-      slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9285.jpg",
-          imageAlt: "Bentley Continental GT front profile",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg",
-          imageAlt: "Side profile luxury coupe",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-driving-car-night_1303-17035.jpg",
-          imageAlt: "Bentley interior details",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/grey-silver-color-sport-car-front-side-view-with-red-wheels-road_114579-1163.jpg",
-          imageAlt: "Rear view cinematic shot",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138933.jpg",
-          imageAlt: "Engine details close up",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118209.jpg",
-          imageAlt: "Driving through winding road",
-        },
+        buttons={[{ text: "Configure Now", href: "#" }, { text: "Discover More", href: "#about" }]}
+        textboxLayout="split"
+        animationType="blur-reveal"
+        items={[
+            { trigger: "Precision", content: "Engineering beyond expectations.", imageOne: "http://img.b2bpic.net/free-photo/beautiful-sexy-fashion-blond-girl-model-with-bright-makeup-curly-hairstyle-retro-style-sitting-old-car_158538-9285.jpg" },
+            { trigger: "Luxury", content: "Bespoke interiors tailored for you.", imageOne: "http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg" }
         ]}
       />
   </div>
@@ -100,21 +60,8 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Crafted Perfection"
       description="Each Bentley Continental GT is a masterclass in automotive excellence, featuring hand-crafted materials and industry-leading technology."
-      metrics={[
-        {
-          value: "650hp",
-          title: "Peak Power",
-        },
-        {
-          value: "3.5s",
-          title: "0-60 MPH",
-        },
-        {
-          value: "208mph",
-          title: "Top Speed",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg"
+      metrics={[{ value: "650hp", title: "Peak Power" }, { value: "3.5s", title: "0-60 MPH" }, { value: "208mph", title: "Top Speed" }]}
+      imageSrc="http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg?_wi=1"
       imageAlt="Interior leather craftsmanship"
       mediaAnimation="slide-up"
       metricsAnimation="slide-up"
@@ -128,27 +75,9 @@ export default function LandingPage() {
       gridVariant="bento-grid"
       useInvertedBackground={false}
       features={[
-        {
-          title: "W12 Performance",
-          description: "Unmatched power delivery for high-speed cruising.",
-          imageSrc: "http://img.b2bpic.net/free-photo/electric-car-fuel-socket_107420-94938.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/black-abstract-texture-background_1373-501.jpg",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Dynamic Alloys",
-          description: "Precision forged for agile handling and aesthetics.",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-car-with-spare-tire_23-2148258061.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-bicycle-details-parts_23-2150834316.jpg",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Adaptive Lighting",
-          description: "Intelligent vision for any road condition.",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-headlight-dark-grey-automobile_23-2147963049.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/particle-view-modern-luxury-white-car-parked-indoors-daytime_146671-16450.jpg",
-          buttonText: "Learn More",
-        },
+        { title: "W12 Performance", description: "Unmatched power delivery for high-speed cruising.", imageSrc: "http://img.b2bpic.net/free-photo/electric-car-fuel-socket_107420-94938.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/black-abstract-texture-background_1373-501.jpg", buttonText: "Learn More" },
+        { title: "Dynamic Alloys", description: "Precision forged for agile handling and aesthetics.", imageSrc: "http://img.b2bpic.net/free-photo/black-car-with-spare-tire_23-2148258061.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-bicycle-details-parts_23-2150834316.jpg", buttonText: "Learn More" },
+        { title: "Adaptive Lighting", description: "Intelligent vision for any road condition.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-headlight-dark-grey-automobile_23-2147963049.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/particle-view-modern-luxury-white-car-parked-indoors-daytime_146671-16450.jpg", buttonText: "Learn More" },
       ]}
       title="Engineered for Grand Touring"
       description="Advanced dynamics tailored for comfort and performance."
@@ -161,33 +90,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "12",
-          title: "Cylinders",
-          items: [
-            "Twin-Turbocharged",
-            "W-Configuration",
-          ],
-        },
-        {
-          id: "m2",
-          value: "8",
-          title: "Gear Speed",
-          items: [
-            "Dual Clutch",
-            "Seamless Shift",
-          ],
-        },
-        {
-          id: "m3",
-          value: "21\"",
-          title: "Wheels",
-          items: [
-            "Forged Alloy",
-            "Performance Tires",
-          ],
-        },
+        { id: "m1", value: "12", title: "Cylinders", items: ["Twin-Turbocharged", "W-Configuration"] },
+        { id: "m2", value: "8", title: "Gear Speed", items: ["Dual Clutch", "Seamless Shift"] },
+        { id: "m3", value: "21\"", title: "Wheels", items: ["Forged Alloy", "Performance Tires"] },
       ]}
       title="Performance at a Glance"
       description="Defining the benchmark for luxury GT vehicles."
@@ -200,41 +105,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Arthur P.",
-          handle: "@arthur_p",
-          testimonial: "The Continental GT is the ultimate grand tourer I have ever driven.",
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg",
-        },
-        {
-          id: "2",
-          name: "Sophia V.",
-          handle: "@sophiav",
-          testimonial: "True craftsmanship. Every detail is perfect.",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-young-woman-with-red-cap-looking-camera_23-2148187405.jpg",
-        },
-        {
-          id: "3",
-          name: "James L.",
-          handle: "@jamesl",
-          testimonial: "The performance is simply breathtaking.",
-          imageSrc: "http://img.b2bpic.net/free-photo/muslim-couple-traveling-together_23-2149305596.jpg",
-        },
-        {
-          id: "4",
-          name: "Elena R.",
-          handle: "@elenar",
-          testimonial: "Luxury redefined. Pure brilliance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-using-tablet_23-2148095691.jpg",
-        },
-        {
-          id: "5",
-          name: "Mark S.",
-          handle: "@marks",
-          testimonial: "The ride is incredibly smooth and powerful.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-copy-space_23-2148612947.jpg",
-        },
+        { id: "1", name: "Arthur P.", handle: "@arthur_p", testimonial: "The Continental GT is the ultimate grand tourer I have ever driven.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg" },
+        { id: "2", name: "Sophia V.", handle: "@sophiav", testimonial: "True craftsmanship. Every detail is perfect.", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-young-woman-with-red-cap-looking-camera_23-2148187405.jpg" },
+        { id: "3", name: "James L.", handle: "@jamesl", testimonial: "The performance is simply breathtaking.", imageSrc: "http://img.b2bpic.net/free-photo/muslim-couple-traveling-together_23-2149305596.jpg" },
+        { id: "4", name: "Elena R.", handle: "@elenar", testimonial: "Luxury redefined. Pure brilliance.", imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-using-tablet_23-2148095691.jpg" },
+        { id: "5", name: "Mark S.", handle: "@marks", testimonial: "The ride is incredibly smooth and powerful.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-copy-space_23-2148612947.jpg" },
       ]}
       title="Owners Experience"
       description="What our global community says about the Bentley experience."
@@ -248,60 +123,12 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          brand: "Bentley",
-          name: "GT Coupe",
-          price: "$230,000",
-          rating: 5,
-          reviewCount: "120",
-          imageSrc: "http://img.b2bpic.net/free-photo/photo-infiniti-g37-coupe-outdoors_158538-24743.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Bentley",
-          name: "GT Convertible",
-          price: "$255,000",
-          rating: 5,
-          reviewCount: "95",
-          imageSrc: "http://img.b2bpic.net/free-photo/car-tire-repair_23-2151947879.jpg",
-        },
-        {
-          id: "p3",
-          brand: "Bentley",
-          name: "GT Azure",
-          price: "$280,000",
-          rating: 5,
-          reviewCount: "45",
-          imageSrc: "http://img.b2bpic.net/free-photo/automobile-details-close-up-new-car_1303-26492.jpg",
-        },
-        {
-          id: "p4",
-          brand: "Bentley",
-          name: "GT Speed",
-          price: "$310,000",
-          rating: 5,
-          reviewCount: "80",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-left-wheel-bordeaux-sedan-car_114579-4065.jpg",
-        },
-        {
-          id: "p5",
-          brand: "Bentley",
-          name: "GT Mulliner",
-          price: "$350,000",
-          rating: 5,
-          reviewCount: "30",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-length-stock-photo-pretty-brunette-woman-long-emerald-green-dress-with-buttons-black-leather-heels-walking-confidently-along-street-against-modern-buildings-cars_132075-9094.jpg",
-        },
-        {
-          id: "p6",
-          brand: "Bentley",
-          name: "GT Blackline",
-          price: "$260,000",
-          rating: 5,
-          reviewCount: "65",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-shifting-gears-gearbox-car_231208-6904.jpg",
-        },
+        { id: "p1", brand: "Bentley", name: "GT Coupe", price: "$230,000", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/photo-infiniti-g37-coupe-outdoors_158538-24743.jpg" },
+        { id: "p2", brand: "Bentley", name: "GT Convertible", price: "$255,000", rating: 5, reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/car-tire-repair_23-2151947879.jpg" },
+        { id: "p3", brand: "Bentley", name: "GT Azure", price: "$280,000", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/automobile-details-close-up-new-car_1303-26492.jpg" },
+        { id: "p4", brand: "Bentley", name: "GT Speed", price: "$310,000", rating: 5, reviewCount: "80", imageSrc: "http://img.b2bpic.net/free-photo/front-left-wheel-bordeaux-sedan-car_114579-4065.jpg" },
+        { id: "p5", brand: "Bentley", name: "GT Mulliner", price: "$350,000", rating: 5, reviewCount: "30", imageSrc: "http://img.b2bpic.net/free-photo/full-length-stock-photo-pretty-brunette-woman-long-emerald-green-dress-with-buttons-black-leather-heels-walking-confidently-along-street-against-modern-buildings-cars_132075-9094.jpg" },
+        { id: "p6", brand: "Bentley", name: "GT Blackline", price: "$260,000", rating: 5, reviewCount: "65", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-shifting-gears-gearbox-car_231208-6904.jpg" },
       ]}
       title="The Collection"
       description="A diverse lineup for every discerning driver."
@@ -312,23 +139,7 @@ export default function LandingPage() {
       <FaqSplitMedia
       textboxLayout="split"
       useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Customization options",
-          content: "Our personalization program is limitless.",
-        },
-        {
-          id: "f2",
-          title: "Service locations",
-          content: "Global service network available.",
-        },
-        {
-          id: "f3",
-          title: "Test driving",
-          content: "Contact local retailers for trials.",
-        },
-      ]}
+      faqs={[{ id: "f1", title: "Customization options", content: "Our personalization program is limitless." }, { id: "f2", title: "Service locations", content: "Global service network available." }, { id: "f3", title: "Test driving", content: "Contact local retailers for trials." }]}
       title="Frequently Asked"
       description="Find answers to your questions about the Continental GT."
       faqsAnimation="slide-up"
@@ -342,20 +153,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Inquire Today"
       description="Speak with a concierge and book your experience."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
+      inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]}
       imageSrc="http://img.b2bpic.net/free-photo/stylish-lady-sitting-car-with-opened-door-fashion-girl-driving-car-suit-posh-girl-sportcar_574295-8.jpg"
     />
   </div>
@@ -363,34 +161,7 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="BENTLEY"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Press",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#",
-            },
-            {
-              label: "Retailers",
-              href: "#",
-            },
-          ],
-        },
-      ]}
+      columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Press", href: "#" }] }, { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Retailers", href: "#" }] }]}
     />
   </div>
       </ReactLenis>

src/app/services/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeMediumTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Models", id: "hero" },
+              { name: "Performance", id: "features" },
+              { name: "Luxury", id: "about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="BENTLEY"
+          />
+        </div>
+        
+        <div id="services-hero" data-section="services-hero" style={{ paddingTop: '120px' }}>
+            <MetricSplitMediaAbout
+              title="Our Services"
+              description="Beyond manufacturing, we provide a holistic suite of ownership services to maintain your vehicle's perfection."
+              metrics={[]}
+              useInvertedBackground={false}
+              imageSrc="http://img.b2bpic.net/free-photo/accuracy-leather-work_1098-13413.jpg?_wi=2"
+            />
+        </div>
+        
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="BENTLEY"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Press", href: "#" }] },
+              { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "Retailers", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #fafffb;
+  --card: #f7fffa;
+  --foreground: #001a0a;
+  --primary-cta: #0a7039;
+  --primary-cta-text: #fafffb;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001a0a;
+  --accent: #a8d9be;
+  --background-accent: #6bbf8e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);