Update src/app/admin-dashboard/page.tsx

Merge version_5 into main

src/app/admin-dashboard/page.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function AdminDashboardPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [paymentFilter, setPaymentFilter] = useState("All");
+
+  const applicants = useMemo(() => [
+    {
+      id: "app-1",      name: "John Doe",      category: "Paid",      price: "$100", // Application Fee
+      rating: 5, // Approval rating
+      reviewCount: "5 documents",      imageSrc: "https://images.unsplash.com/photo-1535713875002-d1d0cfdce53c?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Example profile pic
+      imageAlt: "John Doe profile",      onProductClick: () => alert("Viewing John Doe's details"),
+    },
+    {
+      id: "app-2",      name: "Jane Smith",      category: "Pending",      price: "$100",      rating: 3,
+      reviewCount: "3 documents",      imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1780&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Jane Smith profile",      onProductClick: () => alert("Viewing Jane Smith's details"),
+    },
+    {
+      id: "app-3",      name: "Robert Brown",      category: "Paid",      price: "$100",      rating: 4,
+      reviewCount: "4 documents",      imageSrc: "https://images.unsplash.com/photo-1507003211169-e69fe254fe58?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Robert Brown profile",      onProductClick: () => alert("Viewing Robert Brown's details"),
+    },
+    {
+      id: "app-4",      name: "Emily White",      category: "Rejected",      price: "$100",      rating: 1,
+      reviewCount: "2 documents",      imageSrc: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=1961&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Emily White profile",      onProductClick: () => alert("Viewing Emily White's details"),
+    },
+    {
+      id: "app-5",      name: "Michael Green",      category: "Paid",      price: "$100",      rating: 5,
+      reviewCount: "6 documents",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=1887&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Michael Green profile",      onProductClick: () => alert("Viewing Michael Green's details"),
+    },
+  ], []);
+
+  const filteredApplicants = useMemo(() => {
+    return applicants.filter((applicant) => {
+      const matchesSearch = applicant.name.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesFilter = paymentFilter === "All" || applicant.category === paymentFilter;
+      return matchesSearch && matchesFilter;
+    });
+  }, [applicants, searchTerm, paymentFilter]);
+
+  const 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: "Admin Dashboard", id: "/admin-dashboard" }
+  ];
+
+  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" },
+        { label: "Apply Now", href: "/application-form" },
+        { label: "Admin Dashboard", href: "/admin-dashboard" }
+      ]
+    },
+    {
+      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"
+      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={navItems}
+          button={{ text: "Apply Now", href: "/application-form" }}
+        />
+      </div>
+
+      <div className="relative isolate min-h-screen py-10 lg:py-16">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <h1 className="mb-8 text-4xl font-bold tracking-tight lg:text-5xl">Admin Dashboard</h1>
+          <p className="mb-12 text-lg text-gray-600 dark:text-gray-400">
+            Manage applicants, view documents, and track payment statuses.
+          </p>
+
+          <h2 className="mb-4 text-3xl font-bold tracking-tight lg:text-4xl">Applicant Overview</h2>
+          <p className="mb-8 text-lg text-gray-600 dark:text-gray-400">
+            Browse and filter applicants by name or payment status.
+          </p>
+          <ProductCatalog
+            layout="page"
+            products={filteredApplicants}
+            searchValue={searchTerm}
+            onSearchChange={setSearchTerm}
+            searchPlaceholder="Search applicants..."
+            filters={[
+              {
+                label: "Payment Status",                options: ["All", "Paid", "Pending", "Rejected"],
+                selected: paymentFilter,
+                onChange: setPaymentFilter,
+              },
+            ]}
+            emptyMessage="No applicants found matching your criteria."
+            className="pb-10" // Add some padding to the bottom
+          />
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/application-form/page.tsx

@@ -1,65 +1,56 @@
 "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
+    // In a real application, you would send this data to a backend.
-    console.log('Application Form Data Submitted:', formData);
+    alert("Application Submitted! Redirecting to payment...");
-    router.push('/payment'); // Navigate to the payment page
+    // Simulate redirection to a payment gateway
+    setTimeout(() => {
+      console.log("Redirecting to payment for AED 500...");
+      // window.location.href = "/payment-gateway-url";
+    }, 1000);
   };
 
-  const footerColumns = [
+  // 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" }
+  ];
+
+  // Footer columns for FooterSimple, adjusted for consistency
+  const commonFooterColumns = [
     {
       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: "Contact", href: "/#contact" },
+        { label: "Apply Now", href: "/application-form" }
       ]
     },
     {
       title: "Resources",      items: [
-        { label: "Investment Guide", href: "#" },
+        { label: "Investment Guide", href: "/#" },
-        { label: "Market Reports", href: "#" },
+        { label: "Market Reports", href: "/#" },
-        { label: "FAQ", href: "#" },
+        { label: "FAQ", href: "/#" },
-        { label: "Blog", href: "#" }
+        { label: "Blog", href: "/#" }
       ]
     },
     {
       title: "Legal",      items: [
-        { label: "Privacy Policy", href: "#" },
+        { label: "Privacy Policy", href: "/#" },
-        { label: "Terms of Service", href: "#" },
+        { label: "Terms of Service", href: "/#" },
-        { label: "Cookie Policy", href: "#" }
+        { label: "Cookie Policy", href: "/#" }
       ]
     },
     {
@@ -71,19 +62,6 @@ export default function ApplicationFormPage() {
     }
   ];
 
-  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"
@@ -98,123 +76,225 @@ export default function ApplicationFormPage() {
       headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered {...navbarProps} />
+        <NavbarStyleCentered
+          brandName="Luxe Properties"
+          navItems={applicationFormNavItems}
+          button={{ text: "Schedule Viewing", href: "/#contact" }}
+        />
       </div>
 
-      <main className="relative z-10 py-20 min-h-[calc(100vh-200px)]">
+      <main className="relative z-10 py-20 px-4 sm:px-6 lg:px-8 bg-background min-h-[calc(100vh-6rem)]">
-        <div className="container mx-auto px-4 max-w-2xl">
+        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl md:text-5xl font-bold text-center mb-8">Application Form</h1>
+          <h1 className="text-5xl md:text-6xl font-extrabold text-center mb-6 leading-tight text-foreground">
-          <p className="text-center text-lg mb-8 text-gray-600 dark:text-gray-300">
+            Property Application Form
-            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.
+          </h1>
-            You will be redirected to a secure payment page after submission.
+          <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={handleSubmit} className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-8 space-y-6">
+          <div className="bg-card p-8 rounded-xl shadow-2xl space-y-8 border border-border">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Personal Information */}
               <div>
-                <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Full Name</label>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Personal Information</h2>
-                <input
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  type="text"
+                  <div>
-                  id="name"
+                    <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">Full Name</label>
-                  name="name"
+                    <input
-                  value={formData.name}
+                      type="text"
-                  onChange={handleInputChange}
+                      id="fullName"
-                  required
+                      name="fullName"
-                  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"
+                      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 className="md:col-span-2"> {/* Street Address takes full width */}
+                    <label htmlFor="streetAddress" className="block text-sm font-medium text-foreground mb-2">Street Address</label>
+                    <input
+                      type="text"
+                      id="streetAddress"
+                      name="streetAddress"
+                      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="city" className="block text-sm font-medium text-foreground mb-2">City</label>
+                    <input
+                      type="text"
+                      id="city"
+                      name="city"
+                      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="stateProvince" className="block text-sm font-medium text-foreground mb-2">State/Province</label>
+                    <input
+                      type="text"
+                      id="stateProvince"
+                      name="stateProvince"
+                      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="postalCode" className="block text-sm font-medium text-foreground mb-2">Postal Code</label>
+                    <input
+                      type="text"
+                      id="postalCode"
+                      name="postalCode"
+                      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="country" className="block text-sm font-medium text-foreground mb-2">Country</label>
+                    <input
+                      type="text"
+                      id="country"
+                      name="country"
+                      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>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Employment Information</h2>
-                <input
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  type="email"
+                  <div>
-                  id="email"
+                    <label htmlFor="employmentStatus" className="block text-sm font-medium text-foreground mb-2">Employment Status</label>
-                  name="email"
+                    <select
-                  value={formData.email}
+                      id="employmentStatus"
-                  onChange={handleInputChange}
+                      name="employmentStatus"
-                  required
+                      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"
+                      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"
-                />
+                    >
+                      <option value="">Select status</option>
+                      <option value="employed">Employed</option>
+                      <option value="self-employed">Self-employed</option>
+                      <option value="unemployed">Unemployed</option>
+                      <option value="student">Student</option>
+                      <option value="retired">Retired</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label htmlFor="monthlyIncome" className="block text-sm font-medium text-foreground mb-2">Monthly Income (AED)</label>
+                    <input
+                      type="number"
+                      id="monthlyIncome"
+                      name="monthlyIncome"
+                      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>
+                    <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>
               </div>
-            </div>
 
-            <div>
+              {/* Document Upload */}
-              <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>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
-                <input
+                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (Max file size 5MB per file).</p>
-                  type="text"
+                <div className="space-y-4">
-                  id="occupation"
+                  <div>
-                  name="occupation"
+                    <label htmlFor="idDocument" className="block text-sm font-medium text-foreground mb-2">ID Document (e.g., Passport, Emirates ID)</label>
-                  value={formData.occupation}
+                    <input
-                  onChange={handleInputChange}
+                      type="file"
-                  required
+                      id="idDocument"
-                  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"
+                      name="idDocument"
-                />
+                      required
+                      accept=".pdf,.jpg,.jpeg,.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>
+                    <label htmlFor="proofOfIncome" className="block text-sm font-medium text-foreground mb-2">Proof of Income (e.g., Salary Certificate, Bank Statement)</label>
+                    <input
+                      type="file"
+                      id="proofOfIncome"
+                      name="proofOfIncome"
+                      required
+                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.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>
               </div>
-              <div>
+
-                <label htmlFor="company" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Company (Optional)</label>
+              {/* Application Fee Explanation */}
-                <input
+              <div className="pt-4 border-t border-border">
-                  type="text"
+                <h3 className="text-xl font-semibold text-foreground mb-2">Application Fee</h3>
-                  id="company"
+                <p className="text-sm text-foreground/80">
-                  name="company"
+                  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.
-                  value={formData.company}
+                </p>
-                  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>
+              <button
-              <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>
+                type="submit"
-              <input
+                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"
-                type="text"
+              >
-                id="propertyId"
+                Submit Application
-                name="propertyId"
+              </button>
-                value={formData.propertyId}
+            </form>
-                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>
+            {/* Confirmation Text - Note: In a real app, this would be conditionally rendered after successful submission */}
-              <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>
+            <div className="text-center pt-8 border-t border-border ">
-              <input
+              <h2 className="text-2xl font-semibold text-foreground mb-4">Thank You for Your Application!</h2>
-                type="file"
+              <p className="text-foreground/80">
-                id="document"
+                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.
-                name="document"
+              </p>
-                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>
-
+          </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}
+          columns={commonFooterColumns}
           bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
           bottomRightText="Luxury Real Estate Excellence"
         />

src/app/confirmation/page.tsx

@@ -1,86 +1,103 @@
 "use client";
 
-import React from 'react';
 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 { CheckCircle } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { CheckCircle } from "lucide-react";
 
 export default function ConfirmationPage() {
-  const footerColumns = [
+  const router = useRouter();
-    {
-      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", id: "/application-form" },
+            { name: "Payment", id: "/payment" },
+            { name: "Confirmation", id: "/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="min-h-[60vh] flex flex-col items-center justify-center py-16 px-4">
-        <div className="container mx-auto px-4 max-w-md text-center bg-white dark:bg-gray-800 shadow-lg rounded-xl p-8 space-y-6">
+        <div className="bg-card p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <CheckCircle className="w-24 h-24 text-green-500 mx-auto mb-6" />
+          <CheckCircle className="mx-auto h-16 w-16 text-green-500 mb-6" />
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">Application Confirmed!</h1>
+          <h1 className="text-3xl font-bold mb-4">Payment Successful!</h1>
-          <p className="text-lg text-gray-600 dark:text-gray-300">
+          <p className="text-lg text-foreground mb-6">
-            Your application has been successfully submitted and payment confirmed.
+            Thank you for your payment. Your transaction has been completed, and a confirmation email has been sent to your registered address.
-            We will review your details and contact you shortly.
           </p>
-          <Link href="/" className="mt-8 inline-block bg-primary-cta text-primary-cta-foreground py-3 px-6 rounded-lg text-lg font-semibold hover:bg-primary-cta-dark transition-colors">
+          <p className="text-md text-gray-500 mb-8">
-            Return to Home
+            What's next? You can now explore more properties or schedule a viewing.
-          </Link>
+          </p>
+          <ButtonBounceEffect
+            text="Return to Home"
+            onClick={() => router.push('/')}
+            className="w-full max-w-xs"
+            type="button"
+            ariaLabel="Return to home page"
+          />
         </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"
         />

src/app/page.tsx

@@ -11,7 +11,6 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import { Sparkles, Home, Shield, Award, Star, Mail, TrendingUp, DollarSign, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -30,18 +29,17 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="BlueOak Residential"
+          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: "FAQ", id: "faq" },
             { name: "Contact", id: "contact" },
-            { name: "Admin Dashboard", id: "/admin" }
+            { name: "Admin Dashboard", id: "/admin-dashboard" }
           ]}
-          button={{ text: "Schedule Viewing", href: "#contact" }}
+          button={{ text: "Apply Now", href: "/application-form" }}
         />
       </div>
 
@@ -53,8 +51,8 @@ export default function LandingPage() {
           tag="Premium Collections"
           tagIcon={Sparkles}
           buttons={[
-            { text: "Explore Properties", href: "#properties" },
+            { text: "Explore Properties", href: "properties" },
-            { text: "Contact Agent", href: "#contact" }
+            { text: "Contact Agent", href: "contact" }
           ]}
           mediaItems={[
             {
@@ -89,7 +87,7 @@ export default function LandingPage() {
           gridVariant="uniform-all-items-equal"
           carouselMode="buttons"
           buttons={[
-            { text: "See all properties", href: "#properties" }
+            { text: "See all properties", href: "/properties" }
           ]}
           products={[
             {
@@ -117,7 +115,7 @@ export default function LandingPage() {
           imageAlt="Luxe Properties Dubai team"
           useInvertedBackground={false}
           buttons={[
-            { text: "Learn Our Story", href: "#about" }
+            { text: "Learn Our Story", href: "#" }
           ]}
         />
       </div>
@@ -240,26 +238,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="faq" data-section="faq">
-        <FaqSplitMedia
-          title="Frequently Asked Questions"
-          description="Find quick answers to the most common questions about our services, properties, and the buying process."
-          tag="Support Center"
-          imageSrc="https://img.b2bpic.net/free-photo/shanghai-night-china_1127-3170.jpg?_wi=7" 
-          imageAlt="FAQ support team"
-          mediaPosition="left"
-          faqsAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          faqs={[
-            { id: "1", title: "How do I start the property search process?", content: "Begin by scheduling a consultation with one of our expert agents. We'll discuss your preferences, budget, and investment goals to curate a selection of suitable properties." },
-            { id: "2", title: "What documentation is required to purchase property in Dubai?", content: "Typically, you'll need your passport, visa (if applicable), and proof of funds. Our legal team will guide you through all necessary paperwork and ensure full compliance." },
-            { id: "3", title: "Do you offer property management services?", content: "Yes, we provide comprehensive property management services including rental, maintenance, and tenant relations to ensure a hassle-free ownership experience." },
-            { id: "4", title: "Can international buyers acquire property in Dubai?", content: "Absolutely. Dubai's real estate market is open to international investors. We specialize in assisting foreign clients with all aspects of property acquisition, from legalities to financing." }
-          ]}
-        />
-      </div>
-
       <div id="contact" data-section="contact">
         <ContactCTA
           tag="Get In Touch"
@@ -269,7 +247,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Schedule Consultation", href: "#contact" },
+            { text: "Get Expert Guidance Now", href: "#" },
             { text: "Browse Listings", href: "#properties" }
           ]}
         />
@@ -279,26 +257,21 @@ export default function LandingPage() {
         <FooterSimple
           columns={[
             {
-              title: "BlueOak Residential",              items: [
+              title: "Company",              items: [
                 { label: "About Us", href: "#about" },
                 { label: "Our Services", href: "#services" },
+                { label: "Executive Team", href: "#team" },
                 { label: "Properties", href: "#properties" },
-                { label: "Admin Dashboard", href: "/admin" }
+                { label: "Contact", href: "#contact" },
-              ]
+                { label: "Apply Now", href: "/application-form" },
-            },
+                { label: "Admin Dashboard", href: "/admin-dashboard" }
-            {
-              title: "Support",              items: [
-                { label: "Contact Us", href: "#contact" },
-                { label: "Email: support@blueoak.com", href: "mailto:support@blueoak.com" },
-                { label: "Call: +1 (740) 907-1850", href: "tel:+17409071850" },
-                { label: "WhatsApp: +17409071850", href: "https://wa.me/17409071850" }
               ]
             },
             {
               title: "Resources",              items: [
                 { label: "Investment Guide", href: "#" },
                 { label: "Market Reports", href: "#" },
-                { label: "FAQ", href: "#faq" },
+                { label: "FAQ", href: "#" },
                 { label: "Blog", href: "#" }
               ]
             },
@@ -308,10 +281,17 @@ export default function LandingPage() {
                 { label: "Terms of Service", href: "#" },
                 { label: "Cookie Policy", href: "#" }
               ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "LinkedIn", href: "#" },
+                { label: "Instagram", href: "#" },
+                { label: "WhatsApp", href: "#" }
+              ]
             }
           ]}
-          bottomLeftText="© 2025 BlueOak Residential. All rights reserved."
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
-          bottomRightText=""
+          bottomRightText="Luxury Real Estate Excellence"
         />
       </div>
     </ThemeProvider>

src/app/payment/page.tsx

@@ -1,106 +1,113 @@
 "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 = () => {
+  const handlePayment = () => {
-    // In a real application, you would integrate Flutterwave SDK here
+    // Simulate Flutterwave payment processing
-    // This is a placeholder for demonstration purposes.
+    alert('Processing payment via Flutterwave...');
-    console.log('Initiating Flutterwave payment for $60...');
+    // On successful payment, redirect to confirmation page
-    alert('Simulating Flutterwave payment... Success!\nRedirecting 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", id: "/application-form" },
+            { name: "Payment", id: "/payment" },
+            { name: "Confirmation", id: "/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="min-h-[60vh] flex flex-col items-center justify-center py-16 px-4">
-        <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">
+        <div className="bg-card p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">Secure Payment</h1>
+          <Lock className="mx-auto h-12 w-12 text-primary-cta mb-4" />
-          <p className="text-lg mb-6 text-gray-600 dark:text-gray-300">
+          <h1 className="text-3xl font-bold mb-4">Secure Payment</h1>
-            Your application requires a non-refundable fee.
+          <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">
+          <div className="flex flex-col items-center space-y-4 mb-6">
-            $60.00
+            <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">
-            &larr; 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"
         />