Add src/app/shop/page.tsx

2026-03-07 12:00:15 +00:00
parent 8a83eec546
commit 98e5ff0199
1 changed files with 126 additions and 0 deletions
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { ShoppingBag, Headphones } from "lucide-react";
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noise"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "#features" },
+            { name: "Why AirPods", id: "#metrics" },
+            { name: "Support", id: "#faq" },
+            { name: "Shop", id: "shop" },
+          ]}
+          button={{ text: "Home", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="PodsX Pro & PodsX 4 - Premium Wireless Audio"
+          description="Explore our flagship PodsX Pro with advanced noise cancellation and the versatile PodsX 4 designed for everyday excellence. Both models deliver premium sound quality and seamless connectivity."
+          tag="Shop Now"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "podsx-pro",              name: "PodsX Pro",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX Pro with advanced active noise cancellation",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-pro-specs",              name: "PodsX Pro - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png",              imageAlt: "PodsX Pro premium specifications showcase",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4",              name: "PodsX 4",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX 4 versatile everyday audio solution",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4-specs",              name: "PodsX 4 - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png",              imageAlt: "PodsX 4 comprehensive specifications overview",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Order?"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Get Your PodsX Today"
+          description="Choose between PodsX Pro for ultimate performance or PodsX 4 for everyday excellence. Both models feature premium sound, extended battery life, and intuitive controls."
+          buttons={[
+            { text: "Buy PodsX Pro", href: "#podsx-pro" },
+            { text: "Buy PodsX 4", href: "#podsx-4" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "noise" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "PodsX Pro", href: "#podsx-pro" },
+                { label: "PodsX 4", href: "#podsx-4" },
+                { label: "Compare Models", href: "#" },
+                { label: "Accessories", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Warranty", href: "#" },
+                { label: "Contact Us", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Return Policy", href: "#" },
+                { label: "Shipping Info", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomRightText="Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}