Add src/app/payment/page.tsx

2026-03-25 13:42:14 +00:00
parent 5ef7bae8af
commit 9efb3a1173
1 changed files with 110 additions and 0 deletions
--- a/src/app/payment/page.tsx
+++ b/src/app/payment/page.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Link from 'next/link';
+
+export default function PaymentPage() {
+  const router = useRouter();
+
+  const handleFlutterwavePayment = () => {
+    // In a real application, you would integrate Flutterwave SDK here
+    // This is a placeholder for demonstration purposes.
+    console.log('Initiating Flutterwave payment for $60...');
+    alert('Simulating Flutterwave payment... Success!\nRedirecting to confirmation page.');
+    router.push('/confirmation');
+  };
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#about" },
+        { label: "Our Services", href: "/#services" },
+        { label: "Executive Team", href: "/#team" },
+        { label: "Properties", href: "/#properties" },
+        { label: "Contact", href: "/#contact" }
+      ]
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Investment Guide", href: "#" },
+        { label: "Market Reports", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "Blog", href: "#" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "Cookie Policy", href: "#" }
+      ]
+    },
+    {
+      title: "Connect",      items: [
+        { label: "LinkedIn", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "WhatsApp", href: "#" }
+      ]
+    }
+  ];
+
+  const themeProviderProps = {
+    defaultButtonVariant: "hover-magnetic",    defaultTextAnimation: "entrance-slide",    borderRadius: "pill",    contentWidth: "mediumSmall",    sizing: "mediumLarge",    background: "none",    cardStyle: "glass-elevated",    primaryButtonStyle: "primary-glow",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "medium"};
+
+  const navbarProps = {
+    brandName: "Luxe Properties",    navItems: [
+      { name: "Properties", id: "properties" },
+      { name: "About", id: "about" },
+      { name: "Services", id: "services" },
+      { name: "Team", id: "team" },
+      { name: "Testimonials", id: "testimonials" },
+      { name: "Application", href: "/application-form" },
+      { name: "Contact", id: "contact" }
+    ],
+    button: { text: "Schedule Viewing", href: "#contact" }
+  };
+
+  return (
+    <ThemeProvider {...themeProviderProps}>
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered {...navbarProps} />
+      </div>
+
+      <main className="relative z-10 py-20 min-h-[calc(100vh-200px)] flex items-center justify-center">
+        <div className="container mx-auto px-4 max-w-lg text-center bg-white dark:bg-gray-800 shadow-lg rounded-xl p-8 space-y-6">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">Secure Payment</h1>
+          <p className="text-lg mb-6 text-gray-600 dark:text-gray-300">
+            Your application requires a non-refundable fee.
+          </p>
+          <div className="text-5xl font-extrabold text-primary-cta mb-8">
+            $60.00
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+            Powered by Flutterwave for secure and reliable transactions.
+          </p>
+          <button
+            onClick={handleFlutterwavePayment}
+            className="w-full bg-primary-cta text-primary-cta-foreground py-3 px-6 rounded-lg text-lg font-semibold hover:bg-primary-cta-dark transition-colors"
+          >
+            Pay with Flutterwave
+          </button>
+          <Link href="/application-form" className="block mt-4 text-primary-cta hover:underline">
+            &larr; Back to Application Form
+          </Link>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}