Update src/app/payment/page.tsx
This commit is contained in:
@@ -1,110 +1,117 @@
|
||||
"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';
|
||||
import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Lock, CreditCard } from "lucide-react";
|
||||
|
||||
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.');
|
||||
const handlePayment = () => {
|
||||
// Simulate Flutterwave payment processing
|
||||
alert('Processing payment via Flutterwave...');
|
||||
// On successful payment, redirect 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}>
|
||||
<ThemeProvider
|
||||
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"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered {...navbarProps} />
|
||||
<NavbarStyleCentered
|
||||
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: "Contact", id: "contact" },
|
||||
{ name: "Apply Now", href: "/application-form" },
|
||||
{ name: "Payment", href: "/payment" },
|
||||
{ name: "Confirmation", href: "/confirmation" }
|
||||
]}
|
||||
button={{ text: "Schedule Viewing", href: "contact" }}
|
||||
/>
|
||||
</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.
|
||||
<div className="min-h-[60vh] flex flex-col items-center justify-center py-16 px-4">
|
||||
<div className="bg-card p-8 rounded-lg shadow-lg max-w-md w-full text-center">
|
||||
<Lock className="mx-auto h-12 w-12 text-primary-cta mb-4" />
|
||||
<h1 className="text-3xl font-bold mb-4">Secure Payment</h1>
|
||||
<p className="text-lg text-foreground mb-6">
|
||||
Complete your payment securely via Flutterwave. A fee of <span className="font-semibold text-primary-cta">$60</span> will be applied.
|
||||
</p>
|
||||
<div className="text-5xl font-extrabold text-primary-cta mb-8">
|
||||
$60.00
|
||||
<div className="flex flex-col items-center space-y-4 mb-6">
|
||||
<ButtonBounceEffect
|
||||
text="Pay $60 Securely"
|
||||
onClick={handlePayment}
|
||||
className="w-full max-w-xs"
|
||||
type="button"
|
||||
ariaLabel="Pay 60 dollars securely"
|
||||
/>
|
||||
<p className="text-sm text-gray-500 flex items-center justify-center">
|
||||
<CreditCard className="h-4 w-4 mr-1" />
|
||||
Your transaction is secured with 256-bit encryption.
|
||||
</p>
|
||||
</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">
|
||||
← Back to Application Form
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
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" },
|
||||
{ label: "Apply Now", href: "/application-form" },
|
||||
{ label: "Payment", href: "/payment" }
|
||||
]
|
||||
},
|
||||
{
|
||||
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: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
|
||||
bottomRightText="Luxury Real Estate Excellence"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user