Add src/app/products/page.tsx

2026-03-26 02:45:22 +00:00
parent 06b9155e19
commit 8d8e0fa0cd
1 changed files with 115 additions and 0 deletions
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+const commonNavItems = [
+  { name: "Home", href: "/" },
+  { name: "Products", href: "/products" },
+  { name: "Features", href: "/#features" },
+  { name: "About Us", href: "/about" },
+  { name: "FAQs", href: "/faqs" },
+  { name: "Contact", href: "/contact" }
+];
+
+const commonNavbarButton = {
+  text: "Get Your Case",  href: "/products"
+};
+
+const commonFooterColumns = [
+  {
+    title: "Shop",    items: [
+      { label: "iPhone Cases", href: "/products#iphone" },
+      { label: "Samsung Cases", href: "/products#samsung" },
+      { label: "Pixel Cases", href: "/products#pixel" },
+      { label: "Accessories", href: "/products#accessories" }
+    ]
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Us", href: "/about" },
+      { label: "Features", href: "/#features" },
+      { label: "Testimonials", href: "/#testimonials" },
+      { label: "FAQs", href: "/faqs" }
+    ]
+  },
+  {
+    title: "Support",    items: [
+      { label: "Contact Us", href: "/contact" },
+      { label: "Shipping & Returns", href: "/shipping" },
+      { label: "Warranty", href: "/warranty" },
+      { label: "Privacy Policy", href: "/privacy" }
+    ]
+  }
+];
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={commonNavItems}
+            brandName="CaseBuddy"
+            button={commonNavbarButton}
+          />
+        </div>
+
+        <div id="all-products" data-section="all-products">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            title="Explore Our Full Range of Cases"
+            description="Discover the perfect protection and style for your device from our extensive collection of premium phone cases."
+            products={[
+              {
+                id: "iphone-15-rugged",                name: "Rugged Shield Case",                price: "$34.99",                variant: "iPhone 15",                imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-phone-outdoors_23-2150171220.jpg",                imageAlt: "Rugged iPhone 15 case"
+              },
+              {
+                id: "galaxy-s24-clear",                name: "Ultra Clear Protection",                price: "$27.99",                variant: "Galaxy S24",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791404.jpg",                imageAlt: "Clear Galaxy S24 case"
+              },
+              {
+                id: "pixel-8-slim",                name: "Slim Fit Matte Black",                price: "$22.99",                variant: "Pixel 8",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791390.jpg",                imageAlt: "Matte black Pixel 8 case"
+              },
+              {
+                id: "universal-leather",                name: "Premium Leather Wallet",                price: "$54.99",                variant: "Universal",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791409.jpg",                imageAlt: "Leather wallet case"
+              },
+              {
+                id: "iphone-14-gradient",                name: "Gradient Sunset Case",                price: "$29.99",                variant: "iPhone 14",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791414.jpg",                imageAlt: "Gradient iPhone 14 case"
+              },
+              {
+                id: "galaxy-s23-floral",                name: "Floral Blossom Case",                price: "$26.99",                variant: "Galaxy S23",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791422.jpg",                imageAlt: "Floral Galaxy S23 case"
+              },
+              {
+                id: "pixel-7-geometric",                name: "Geometric Pattern",                price: "$25.99",                variant: "Pixel 7",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791428.jpg",                imageAlt: "Geometric Pixel 7 case"
+              },
+              {
+                id: "universal-silicone",                name: "Soft Touch Silicone",                price: "$19.99",                variant: "Universal",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-phone-case_23-2149791435.jpg",                imageAlt: "Silicone universal case"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal columns={commonFooterColumns} copyrightText="© 2024 CaseBuddy. All rights reserved." />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}