Add src/app/product/mercedes-sel-led-panel/page.tsx"

2026-03-09 09:28:00 +00:00
parent ef936ebac5
commit 43b94c8f13
1 changed files with 107 additions and 0 deletions
--- a/src/app/product/mercedes-sel-led-panel/page.tsx"
+++ b/src/app/product/mercedes-sel-led-panel/page.tsx"
@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { useState } from "react";
+import { Star } from "lucide-react";
+
+export default function MercedesSelPage() {
+  const [selectedSize, setSelectedSize] = useState("Standard");
+  const [selectedQuantity, setSelectedQuantity] = useState("1");
+
+  const handleAddToCart = () => {
+    alert(`Added ${selectedQuantity} Mercedes Sel LED Panel(s) to cart!`);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Products", id: "/products" },
+          { name: "About", id: "#about" },
+          { name: "Contact", id: "#contact" },
+        ]}
+        brandName="CarLed"
+        button={{
+          text: "Shop Now",          href: "/products"}}
+        animateOnLoad={true}
+      />
+
+      <div className="pt-[--padding-hero-page-padding]">
+        <ProductDetailCard
+          layout="page"
+          name="Mercedes Sel Led Panel"
+          price="$59.99"
+          rating={5}
+          ratingIcon={Star}
+          showRating={true}
+          description="Premium LED panel engineered for Mercedes Sel vehicles. Featuring advanced luminosity control and precision-cut design for perfect alignment. Combines luxury aesthetics with cutting-edge LED technology. Weather-resistant and built to last with premium materials."
+          images={[
+            {
+              src: "/images/mercedes-sel-led-front.jpg",              alt: "Mercedes Sel LED Panel - Front View"},
+            {
+              src: "/images/mercedes-sel-led-side.jpg",              alt: "Mercedes Sel LED Panel - Side View"},
+            {
+              src: "/images/mercedes-sel-led-detail.jpg",              alt: "Mercedes Sel LED Panel - Detail View"},
+            {
+              src: "/images/mercedes-sel-led-installed.jpg",              alt: "Mercedes Sel LED Panel - Installed"},
+          ]}
+          variants={[
+            {
+              label: "Size",              options: ["Standard", "Large"],
+              selected: selectedSize,
+              onChange: setSelectedSize,
+            },
+          ]}
+          quantity={{
+            label: "Quantity",            options: ["1", "2", "3", "4", "5"],
+            selected: selectedQuantity,
+            onChange: setSelectedQuantity,
+          }}
+          buttons={[
+            {
+              text: "Add To Cart",              onClick: handleAddToCart,
+            },
+            {
+              text: "Back to Products",              href: "/products"},
+          ]}
+        />
+      </div>
+
+      <div id="features" data-section="features" className="py-[--padding-hero-page-padding]">
+        <ContactCTA
+          tag="Product Features"
+          title="Why Choose Mercedes Sel LED Panel"
+          description="Luxury design meets advanced technology. Our Mercedes Sel LED panels offer premium quality, perfect fit, and exceptional durability engineered specifically for Mercedes vehicles."
+          buttons={[
+            { text: "Back to Products", href: "/products" },
+            { text: "Contact Support", href: "mailto:support@carled.com" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="CarLed"
+        leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+        rightLink={{ text: "Terms of Service", href: "/terms" }}
+      />
+    </ThemeProvider>
+  );
+}