bender/e2adf8c1-26a3-4101-be43-e2b3ee2e28dd
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Switch to version 3: remove src/app/application-form/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-25 13:45:34 +00:00
parent 6f9eec16fa
commit 7b2740bacf
1 changed files with 0 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/app/application-form/page.tsx
View File

@@ -1,224 +0,0 @@
"use client";
import React, { useState } 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 ApplicationFormPage() {
const router = useRouter();
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
occupation: '',
company: '',
propertyId: '',
document: null as File | null,
});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
setFormData(prev => ({ ...prev, document: e.target.files![0] }));
}
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// In a real application, you would send formData to your backend here
console.log('Application Form Data Submitted:', formData);
router.push('/payment'); // Navigate to the payment page
};
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 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", id: "/application-form" },
{ name: "Contact", id: "contact" }
],
button: { text: "Schedule Viewing", href: "#contact" }
};
return (
<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} />
</div>
<main className="relative z-10 py-20 min-h-[calc(100vh-200px)]">
<div className="container mx-auto px-4 max-w-2xl">
<h1 className="text-4xl md:text-5xl font-bold text-center mb-8">Application Form</h1>
<p className="text-center text-lg mb-8 text-gray-600 dark:text-gray-300">
Please fill out the form below to apply for your desired property. A non-refundable application fee of $60 is required to process your application.
You will be redirected to a secure payment page after submission.
</p>
<form onSubmit={handleSubmit} className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-8 space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Full Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
required
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
/>
</div>
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Phone Number</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleInputChange}
required
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="occupation" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Occupation</label>
<input
type="text"
id="occupation"
name="occupation"
value={formData.occupation}
onChange={handleInputChange}
required
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
/>
</div>
<div>
<label htmlFor="company" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Company (Optional)</label>
<input
type="text"
id="company"
name="company"
value={formData.company}
onChange={handleInputChange}
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
/>
</div>
</div>
<div>
<label htmlFor="propertyId" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Property Identifier (e.g., Listing ID)</label>
<input
type="text"
id="propertyId"
name="propertyId"
value={formData.propertyId}
onChange={handleInputChange}
required
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta"
placeholder="e.g., PJ-V-123"
/>
</div>
<div>
<label htmlFor="document" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Upload Supporting Document (e.g., ID, Resume)</label>
<input
type="file"
id="document"
name="document"
onChange={handleFileChange}
className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 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-light file:text-primary-cta-foreground hover:file:bg-primary-cta-dark dark:file:bg-primary-cta-dark dark:file:text-white dark:hover:file:bg-primary-cta"
/>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">Max file size: 5MB (PDF, JPG, PNG)</p>
</div>
<button
type="submit"
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"
>
Proceed to Payment ($60 Application Fee)
</button>
</form>
</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>
);
}