Add src/app/collections/page.tsx

2026-05-31 22:40:16 +00:00
parent 60723f0e93
commit 1a359fe6fb
1 changed files with 98 additions and 0 deletions
--- a/src/app/collections/page.tsx
+++ b/src/app/collections/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+const consistentNavItems = [
+  { name: "Shop", id: "#shop" },
+  { name: "Best Sellers", id: "#best-sellers" },
+  { name: "Collections", id: "/collections" },
+  { name: "Products", id: "#products" },
+  { name: "Concerns", id: "#concerns" },
+  { name: "About", id: "#about" },
+  { name: "Contact", id: "#contact" },
+];
+
+export default function CollectionsIndexPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="large"
+        background="circleGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={consistentNavItems} brandName="Introstem" />
+        </div>
+
+        <main className="min-h-screen py-20 flex flex-col items-center justify-center text-center px-4">
+          <h1 className="text-5xl font-bold mb-4">Our Collections</h1>
+          <p className="text-xl text-foreground/70 mb-8 max-w-2xl">
+            Explore our exquisite range of skincare collections, each crafted with unique formulations to address your specific beauty needs.
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
+            <a href="/collections/aqua" className="p-6 border rounded-lg hover:shadow-lg transition-shadow bg-card flex flex-col items-center justify-center text-center">
+              <h2 className="text-2xl font-semibold">Aqua Collection</h2>
+              <p className="text-foreground/60">Deep Hydration</p>
+            </a>
+            <a href="/collections/embercell" className="p-6 border rounded-lg hover:shadow-lg transition-shadow bg-card flex flex-col items-center justify-center text-center">
+              <h2 className="text-2xl font-semibold">EmberCell Collection</h2>
+              <p className="text-foreground/60">Rejuvenating & Anti-Aging</p>
+            </a>
+            <a href="/collections/prismastem" className="p-6 border rounded-lg hover:shadow-lg transition-shadow bg-card flex flex-col items-center justify-center text-center">
+              <h2 className="text-2xl font-semibold">PrismaStem Collection</h2>
+              <p className="text-foreground/60">Radiant Brightening</p>
+            </a>
+          </div>
+        </main>
+        
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "SHOP",                items: [
+                  { label: "Best Sellers", href: "#best-sellers" },
+                  { label: "Collections", href: "/collections" },
+                  { label: "Body Care", href: "#products" },
+                  { label: "Serums", href: "#products" },
+                  { label: "Masks", href: "#products" },
+                ],
+              },
+              {
+                title: "CUSTOMER SERVICE",                items: [
+                  { label: "Contact Us", href: "#contact" },
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Shipping & Returns", href: "#" },
+                ],
+              },
+              {
+                title: "ABOUT US",                items: [
+                  { label: "Our Story", href: "#about" },
+                  { label: "Our Philosophy", href: "#about" },
+                  { label: "Careers", href: "#" },
+                ],
+              },
+              {
+                title: "LEGAL",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                ],
+              },
+            ]}
+            logoText="Introstem"
+            copyrightText="© 2024 Introstem. All Rights Reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}