Update src/app/application-form/page.tsx
This commit is contained in:
@@ -3,16 +3,66 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
||||
import { FileText, DollarSign } from "lucide-react";
|
||||
|
||||
export default function ApplicationFormPage() {
|
||||
const handleFormSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// In a real application, you would handle form submission here, e.g., send data to an API
|
||||
alert("Application submitted! Please proceed to payment.");
|
||||
// In a real application, you would send this data to a backend.
|
||||
alert("Application Submitted! Redirecting to payment...");
|
||||
// Simulate redirection to a payment gateway
|
||||
setTimeout(() => {
|
||||
console.log("Redirecting to payment for AED 500...");
|
||||
// window.location.href = "/payment-gateway-url";
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// Navigation items for NavbarStyleCentered, adjusted to link back to homepage sections
|
||||
const applicationFormNavItems = [
|
||||
{ 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", id: "/application-form" }
|
||||
];
|
||||
|
||||
// Footer columns for FooterSimple, adjusted to link back to homepage sections
|
||||
const applicationFormFooterColumns = [
|
||||
{
|
||||
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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
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: "#" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -29,143 +79,144 @@ export default function ApplicationFormPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<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", id: "/application-form" }
|
||||
]}
|
||||
button={{ text: "Schedule Viewing", href: "contact" }}
|
||||
navItems={applicationFormNavItems}
|
||||
button={{ text: "Schedule Viewing", href: "/#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen pt-24 pb-12 flex flex-col items-center justify-center text-foreground">
|
||||
<div className="container max-w-3xl mx-auto p-6 bg-card rounded-lg shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 text-center">Application Form</h1>
|
||||
<p className="text-center text-lg text-foreground-lighter mb-8">
|
||||
Complete the form below to apply for your dream property.
|
||||
<main className="relative z-10 py-20 px-4 sm:px-6 lg:px-8 bg-background min-h-[calc(100vh-6rem)]">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold text-center mb-6 leading-tight text-foreground">
|
||||
Property Application Form
|
||||
</h1>
|
||||
<p className="text-center text-lg md:text-xl text-foreground/70 mb-12">
|
||||
Complete the form below to apply for our exclusive properties.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleFormSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-background p-2 text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-background p-2 text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-foreground">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
required
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-background p-2 text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="employmentInfo" className="block text-sm font-medium text-foreground">Employment Information</label>
|
||||
<textarea
|
||||
id="employmentInfo"
|
||||
name="employmentInfo"
|
||||
rows={4}
|
||||
required
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-cta focus:ring-primary-cta bg-background p-2 text-foreground"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="documentUpload" className="block text-sm font-medium text-foreground">Document Upload (e.g., ID, proof of funds)</label>
|
||||
<input
|
||||
type="file"
|
||||
id="documentUpload"
|
||||
name="documentUpload"
|
||||
multiple
|
||||
className="mt-1 block w-full text-foreground file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-primary-cta-foreground hover:file:bg-primary-cta-hover cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-green-600 font-semibold mt-8">
|
||||
Your application has been received! Please proceed to the payment section to finalize your submission.
|
||||
</p>
|
||||
|
||||
<div className="border-t border-gray-200 pt-8 mt-8">
|
||||
<h2 className="text-3xl font-bold mb-4 text-center">Application Fee</h2>
|
||||
<p className="text-center text-foreground-lighter mb-4">
|
||||
A non-refundable application fee of <span className="font-semibold text-primary-cta">$60 USD</span> is required to process your application. This fee covers administrative costs and a preliminary review of your submission.
|
||||
</p>
|
||||
<p className="text-center text-foreground-lighter mb-6">
|
||||
Click the button below to complete your payment securely via Flutterwave.
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<ButtonTextShift
|
||||
text="Pay $60 Application Fee"
|
||||
href="https://flutterwave.com/pay/4jnjkgftkyoz"
|
||||
type="button"
|
||||
className="bg-primary-cta text-primary-cta-foreground px-6 py-3 rounded-full text-lg font-semibold hover:bg-primary-cta-hover transition-colors"
|
||||
/>
|
||||
<div className="bg-card p-8 rounded-xl shadow-2xl space-y-8 border border-border">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Personal Information */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Personal Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
required
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="emailAddress" className="block text-sm font-medium text-foreground mb-2">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="emailAddress"
|
||||
name="emailAddress"
|
||||
required
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground mb-2">Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phoneNumber"
|
||||
name="phoneNumber"
|
||||
required
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Employment Information */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Employment Information</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="occupation" className="block text-sm font-medium text-foreground mb-2">Occupation</label>
|
||||
<input
|
||||
type="text"
|
||||
id="occupation"
|
||||
name="occupation"
|
||||
required
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="employer" className="block text-sm font-medium text-foreground mb-2">Employer</label>
|
||||
<input
|
||||
type="text"
|
||||
id="employer"
|
||||
name="employer"
|
||||
required
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label htmlFor="annualIncome" className="block text-sm font-medium text-foreground mb-2">Annual Income (AED)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="annualIncome"
|
||||
name="annualIncome"
|
||||
required
|
||||
min="0"
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document Upload */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
|
||||
<p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (e.g., ID, proof of income). Max file size 5MB per file.</p>
|
||||
<div>
|
||||
<label htmlFor="documents" className="block text-sm font-medium text-foreground mb-2">Upload Documents</label>
|
||||
<input
|
||||
type="file"
|
||||
id="documents"
|
||||
name="documents"
|
||||
multiple
|
||||
accept=".pdf,.doc,.docx,.jpg,.png"
|
||||
className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Application Fee Explanation */}
|
||||
<div className="pt-4 border-t border-border">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Application Fee</h3>
|
||||
<p className="text-sm text-foreground/80">
|
||||
A non-refundable application fee of <strong className="text-primary-cta">AED 500</strong> is required to process your application. This fee covers administrative costs and a comprehensive background check. You will be redirected to a secure payment gateway after submitting this form.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 px-6 bg-primary-cta text-white font-bold rounded-lg hover:bg-primary-cta/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
|
||||
>
|
||||
Submit Application
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Confirmation Text - Note: In a real app, this would be conditionally rendered after successful submission */}
|
||||
<div className="text-center pt-8 border-t border-border ">
|
||||
<h2 className="text-2xl font-semibold text-foreground mb-4">Thank You for Your Application!</h2>
|
||||
<p className="text-foreground/80">
|
||||
Your application has been received and is currently under review. Please check your email for a confirmation and further instructions regarding the payment of the application fee. We appreciate your patience.
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
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: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
columns={applicationFormFooterColumns}
|
||||
bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
|
||||
bottomRightText="Luxury Real Estate Excellence"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user