From b353e16b83df9a876910a0b98307399f8ae767fb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 25 Mar 2026 13:54:38 +0000
Subject: [PATCH] Update src/app/application-form/page.tsx

---
 src/app/application-form/page.tsx | 311 +++++++++++++++++-------------
 1 file changed, 181 insertions(+), 130 deletions(-)

diff --git a/src/app/application-form/page.tsx b/src/app/application-form/page.tsx
index a50c047..b8940f9 100644
--- a/src/app/application-form/page.tsx
+++ b/src/app/application-form/page.tsx
@@ -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"
         />