Add src/app/shop/page.tsx

2026-05-31 03:04:01 +00:00
parent e7523b498e
commit eb6dba3807
1 changed files with 118 additions and 0 deletions
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import { useRouter } from 'next/navigation';
+
+const commonNavItems = [
+  {
+    name: "Home",    id: "/"},
+  {
+    name: "About",    id: "#about"},
+  {
+    name: "Features",    id: "#features"},
+  {
+    name: "Shop",    id: "/shop"},
+  {
+    name: "Testimonials",    id: "#testimonials"},
+  {
+    name: "FAQ",    id: "#faq"},
+  {
+    name: "Contact",    id: "#contact"},
+  {
+    name: "Cart",    id: "/cart"},
+];
+
+const commonFooterColumns = [
+  {
+    items: [
+      {
+        label: "About Us",        href: "#about"},
+      {
+        label: "Features",        href: "#features"},
+      {
+        label: "Shop",        href: "/shop"},
+    ],
+  },
+  {
+    items: [
+      {
+        label: "Testimonials",        href: "#testimonials"},
+      {
+        label: "Partners",        href: "#social-proof"},
+      {
+        label: "FAQ",        href: "#faq"},
+    ],
+  },
+  {
+    items: [
+      {
+        label: "Privacy Policy",        href: "#"},
+      {
+        label: "Terms of Service",        href: "#"},
+      {
+        label: "Contact",        href: "#contact"},
+    ],
+  },
+];
+
+const mockProducts = [
+  {
+    id: "bra-1",    name: "Seamless Comfort Bra",    price: "$35.00",    imageSrc: "http://img.b2bpic.net/free-photo/view-of-collection-of-womens-bras_23-2151325150.jpg?_wi=1",    imageAlt: "Seamless Comfort Bra"},
+  {
+    id: "bra-2",    name: "Lace Elegance Bralette",    price: "$48.00",    imageSrc: "http://img.b2bpic.net/free-photo/black-bra_23-2148762740.jpg?_wi=1",    imageAlt: "Lace Elegance Bralette"},
+  {
+    id: "bra-3",    name: "Sporty Wireless Bra",    price: "$29.00",    imageSrc: "http://img.b2bpic.net/free-photo/white-bra-with-shoulder-straps_23-2149177112.jpg?_wi=1",    imageAlt: "Sporty Wireless Bra"},
+  {
+    id: "bra-4",    name: "Push-Up Contour Bra",    price: "$55.00",    imageSrc: "http://img.b2bpic.net/free-photo/pink-bra_23-2149177113.jpg?_wi=1",    imageAlt: "Push-Up Contour Bra"},
+  {
+    id: "bra-5",    name: "Minimizer Full Coverage",    price: "$40.00",    imageSrc: "http://img.b2bpic.net/free-photo/brown-bra_23-2149177115.jpg?_wi=1",    imageAlt: "Minimizer Full Coverage"},
+  {
+    id: "bra-6",    name: "Underwire Balconette",    price: "$52.00",    imageSrc: "http://img.b2bpic.net/free-photo/view-of-collection-of-womens-bras_23-2151325150.jpg?_wi=1",    imageAlt: "Underwire Balconette"},
+];
+
+export default function ShopPage() {
+  const router = useRouter();
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="largeSizeMediumTitles"
+      background="grid"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple navItems={commonNavItems} brandName="Khurasan Party" />
+        </div>
+
+        <div id="shop-catalog" data-section="shop-catalog" className="py-12 md:py-24">
+          <ProductCardOne
+            title="Our Bra Collection"
+            description="Discover comfort and style with our exquisite range of bras."
+            tag="Shop Now"
+            products={mockProducts.map(product => ({
+              ...product,
+              onProductClick: () => router.push(`/product/${product.id}`),
+            }))}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis columns={commonFooterColumns} logoText="Khurasan Party" />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}