Add src/app/payment/page.tsx

2026-05-08 04:50:16 +00:00
parent 336781a7fb
commit 3aac3de78b
1 changed files with 61 additions and 0 deletions
--- a/src/app/payment/page.tsx
+++ b/src/app/payment/page.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function PaymentPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="large"
+        background="grid"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+              navItems={[
+                { name: "How it Works", id: "/#how-it-works" },
+                { name: "Features", id: "/#features" },
+                { name: "Pricing", id: "/#pricing" },
+                { name: "FAQ", id: "/#faq" },
+              ]}
+              brandName="Place2Page"
+              button={{ text: "Get Started", href: "/payment" }}
+            />
+        </div>
+        <div className="min-h-screen pt-32 pb-20 px-4 flex flex-col items-center justify-center">
+          <h1 className="text-4xl font-bold mb-6">Complete Your Payment</h1>
+          <p className="text-lg opacity-80 mb-10">Securely process your subscription for Place2Page.</p>
+          <div className="w-full max-w-md p-8 rounded-2xl border bg-card">
+            {/* Placeholder for actual payment form component */}
+            <div className="space-y-4">
+              <div className="w-full h-12 bg-accent/20 rounded-lg animate-pulse" />
+              <div className="w-full h-12 bg-accent/20 rounded-lg animate-pulse" />
+              <div className="w-full h-12 bg-primary-cta rounded-lg opacity-90" />
+            </div>
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+            <FooterBase
+              columns={[
+                { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/#pricing" }, { label: "FAQ", href: "/#faq" }] },
+                { title: "Company", items: [{ label: "About Us", href: "/#" }, { label: "Careers", href: "/#" }, { label: "Contact", href: "/#contact" }] },
+                { title: "Legal", items: [{ label: "Privacy Policy", href: "/#" }, { label: "Terms of Service", href: "/#" }] },
+              ]}
+              logoText="Place2Page"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}