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

---
 src/app/application-form/page.tsx | 175 ++++++++++++++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 src/app/application-form/page.tsx

diff --git a/src/app/application-form/page.tsx b/src/app/application-form/page.tsx
new file mode 100644
index 0000000..a50c047
--- /dev/null
+++ b/src/app/application-form/page.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+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) => {
+    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.");
+  };
+
+  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
+          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" }}
+        />
+      </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.
+          </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>
+            </div>
+          </form>
+        </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: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}