Add src/app/products/page.tsx

src/app/blog/page.tsx

@@ -55,7 +55,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}?status=published`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -156,4 +157,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/globals.css

@@ -4,21 +4,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f6f0e9;;
+  /* --background: #1a1a1a;;
-  --card: #efe7dd;;
+  --card: #2a2a2a;;
-  --foreground: #2b180a;;
+  --foreground: #e6e6e6e6;;
-  --primary-cta: #2b180a;;
+  --primary-cta: #cc1a1a;;
-  --secondary-cta: #efe7dd;;
+  --secondary-cta: #2a2a2a;;
-  --accent: #94877c;;
+  --accent: #8b3a3a;;
-  --background-accent: #afa094;; */
+  --background-accent: #8b1a1a;; */
 
-  --background: #f6f0e9;;
+  --background: #1a1a1a;;
-  --card: #efe7dd;;
+  --card: #2a2a2a;;
-  --foreground: #2b180a;;
+  --foreground: #e6e6e6e6;;
-  --primary-cta: #2b180a;;
+  --primary-cta: #cc1a1a;;
-  --secondary-cta: #efe7dd;;
+  --secondary-cta: #2a2a2a;;
-  --accent: #94877c;;
+  --accent: #8b3a3a;;
-  --background-accent: #afa094;;
+  --background-accent: #8b1a1a;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/layout.tsx

@@ -1263,4 +1263,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
@@ -283,4 +283,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Car, Sparkles } from "lucide-react";
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="large"
+      background="floatingGradient"
+      cardStyle="inset"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="Volva Sh"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Fleet", id: "fleet" },
+            { name: "Why Us", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Testimonials", id: "testimonials" }
+          ]}
+          button={{
+            text: "Book Now",            href: "contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Our Complete Product Lineup"
+          description="Explore our extensive collection of premium vehicles. From luxury sedans to high-performance sports cars, find the perfect vehicle for your journey."
+          tag="All Vehicles"
+          tagIcon={Sparkles}
+          background={{ variant: "gradient-bars" }}
+          mediaItems={[
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg",              imageAlt: "Luxury sports car"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241745.jpg",              imageAlt: "Premium family SUV"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/handsome-bearded-male-sunglasses-dressed-black-suit-sitting-luxury-car-against-skyscraper_613910-19325.jpg",              imageAlt: "Elegant sedan"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-ladies-going-out-car_132075-12211.jpg",              imageAlt: "Modern electric vehicle"
+            },
+            {
+              imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              imageAlt: "Luxury automobile"
+            }
+          ]}
+          buttons={[
+            { text: "Browse All", href: "#fleet" },
+            { text: "Book Now", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="fleet" data-section="fleet">
+        <ProductCardFour
+          title="Complete Vehicle Fleet"
+          description="Browse our complete inventory of premium rental vehicles. Each vehicle is meticulously maintained and inspected for safety and comfort."
+          tag="All Available Vehicles"
+          tagIcon={Car}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+          gridVariant="uniform-all-items-equal"
+          products={[
+            {
+              id: "1",              name: "Luxury Sedan",              price: "$120/day",              variant: "Premium | Leather | 5 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/grey-coupe-rainy-highway-motion-focus_169016-69693.jpg",              imageAlt: "Luxury sedan"
+            },
+            {
+              id: "2",              name: "Executive SUV",              price: "$150/day",              variant: "Spacious | AWD | 7 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/white-car-turning-city-street-modern-urban-motion_169016-69787.jpg",              imageAlt: "Executive SUV"
+            },
+            {
+              id: "3",              name: "Sports Car",              price: "$180/day",              variant: "High Performance | Convertible | 2 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-uber-driver-giving-taxi-ride_23-2149241747.jpg",              imageAlt: "Sports car"
+            },
+            {
+              id: "4",              name: "Compact Coupe",              price: "$90/day",              variant: "Fuel Efficient | Automatic | 2 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg",              imageAlt: "Compact coupe"
+            },
+            {
+              id: "5",              name: "Family Van",              price: "$160/day",              variant: "Spacious | AC | 8 Seats",              imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-wet-highway-rain-rainy-drive_169016-69903.jpg",              imageAlt: "Family van"
+            },
+            {
+              id: "6",              name: "Premium Truck",              price: "$140/day",              variant: "Powerful | 4WD | Cargo Space",              imageSrc: "https://img.b2bpic.net/free-photo/fashionable-ladies-going-out-car_132075-12211.jpg",              imageAlt: "Premium truck"
+            }
+          ]}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Volva Sh"
+          copyrightText="© 2025 Volva Sh Car Rentals. All rights reserved."
+          columns={[
+            {
+              title: "Service",              items: [
+                { label: "Fleet", href: "fleet" },
+                { label: "Pricing", href: "pricing" },
+                { label: "Booking", href: "contact" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "about" },
+                { label: "Why Choose Us", href: "features" },
+                { label: "Testimonials", href: "testimonials" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact", href: "contact" },
+                { label: "FAQ", href: "faq" },
+                { label: "Support", href: "contact" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}