Update src/app/page.tsx

Merge version_4 into main

src/app/admin-dashboard/page.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { UserRound, FileText, Banknote, Shield, LayoutDashboard } from "lucide-react";
+
+export default function AdminDashboardPage() {
+  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 Admin"
+          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: "Admin Dashboard", id: "/admin-dashboard" }
+          ]}
+          button={{ text: "View Site", href: "/" }}
+        />
+      </div>
+
+      <div id="dashboard-hero" data-section="dashboard-hero" className="py-20 text-center">
+        <LayoutDashboard className="mx-auto h-16 w-16 text-primary-cta mb-4" />
+        <h1 className="text-5xl font-bold text-foreground mb-4">Admin Dashboard</h1>
+        <p className="text-lg text-foreground/80 max-w-2xl mx-auto">Manage applications, documents, and payments efficiently.</p>
+      </div>
+
+      <div id="applicants" data-section="applicants">
+        <FeatureCardTwentyFour
+          title="Applicant List"
+          description="View and manage all property applications, track their status, and review details."
+          tag="Applications"
+          tagIcon={UserRound}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          features={[
+            {
+              id: "1",              title: "John Doe",              author: "Application ID: #001",              description: "Interested in Palm Jumeirah Villa. Initial contact made.",              tags: ["New", "Approved", "Pending Payment"],
+              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-with-clipboard_1098-602.jpg",              imageAlt: "John Doe Profile"
+            },
+            {
+              id: "2",              title: "Jane Smith",              author: "Application ID: #002",              description: "Downtown Dubai Penthouse. Document review in progress.",              tags: ["In Review", "Pending Documents"],
+              imageSrc: "https://img.b2bpic.net/free-photo/attractive-satisfied-young-female-entrepreneur-standing-proud-smiling-with-crossed-hands-confident_197531-23012.jpg?id=13871705",              imageAlt: "Jane Smith Profile"
+            },
+            {
+              id: "3",              title: "Robert Johnson",              author: "Application ID: #003",              description: "Emirates Hills Townhouse. Payment confirmation pending.",              tags: ["Ready for Payment", "Approved"],
+              imageSrc: "https://img.b2bpic.net/free-photo/business-people-using-digital-tablet-airport_107420-95868.jpg",              imageAlt: "Robert Johnson Profile"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="documents" data-section="documents">
+        <FeatureCardThree
+          title="Document Management"
+          description="Organize and track all application-related documents including IDs, financial statements, and contracts."
+          tag="Documents"
+          tagIcon={FileText}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+          features={[
+            {
+              id: "doc1",              title: "Passport Scans",              description: "Submitted by John Doe, Jane Smith.",              imageSrc: "https://img.b2bpic.net/free-photo/identity-document-passport-citizenship-concept_53876-133994.jpg",              imageAlt: "Passport document icon"
+            },
+            {
+              id: "doc2",              title: "Financial Statements",              description: "Received for Jane Smith, Robert Johnson.",              imageSrc: "https://img.b2bpic.net/free-photo/man-using-calculator_53876-14185.jpg",              imageAlt: "Financial document icon"
+            },
+            {
+              id: "doc3",              title: "Purchase Agreements",              description: "Drafts for John Doe, finalized for Jane Smith.",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-holding-paper-his-hand_23-2147690623.jpg",              imageAlt: "Agreement document icon"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="payments" data-section="payments">
+        <MetricCardThree
+          title="Payment Status Overview"
+          description="Track payment statuses for all applicants and manage financial transactions."
+          tag="Payments"
+          tagIcon={Banknote}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          metrics={[
+            {
+              id: "p1",              icon: Banknote,
+              title: "Pending Payments",              value: "AED 5.2M"
+            },
+            {
+              id: "p2",              icon: Shield,
+              title: "Confirmed Payments",              value: "AED 18.7M"
+            },
+            {
+              id: "p3",              icon: UserRound,
+              title: "Applications Paid",              value: "35"
+            },
+            {
+              id: "p4",              icon: FileText,
+              title: "Overdue Payments",              value: "AED 0"
+            }
+          ]}
+        />
+      </div>
+
+      <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" },
+                { 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: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Luxe Properties Admin. All rights reserved."
+          bottomRightText="Dashboard Management"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/application-form/page.tsx

@@ -1,65 +1,57 @@
 "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
+    // 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);
   };
 
-  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" },
+    { 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: "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: "#" }
+        { 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: "#" }
+        { label: "Privacy Policy", href: "/#" },
+        { label: "Terms of Service", href: "/#" },
+        { label: "Cookie Policy", href: "/#" }
       ]
     },
     {
@@ -71,19 +63,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 +77,146 @@ 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)]">
-        <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.
+      <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={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 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>
-                <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"
-                />
+                <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>
-                <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"
-                />
+                <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>
-            </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">
+              {/* Document Upload */}
               <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"
-                />
+                <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>
-              <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"
-                />
+
+              {/* 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>
-            </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>
+              <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>
 
-            <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>
+            {/* 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>
-
-            <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>
         </div>
       </main>
 
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={footerColumns}
+          columns={applicationFormFooterColumns}
           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 { CheckCircle } from 'lucide-react';
+import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
+import { useRouter } from 'next/navigation';
+import { CheckCircle } from "lucide-react";
 
 export default function ConfirmationPage() {
-  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" }
-  };
+  const router = useRouter();
 
   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="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">
-          <CheckCircle className="w-24 h-24 text-green-500 mx-auto mb-6" />
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">Application Confirmed!</h1>
-          <p className="text-lg text-gray-600 dark:text-gray-300">
-            Your application has been successfully submitted and payment confirmed.
-            We will review your details and contact you shortly.
+      <div className="min-h-[60vh] flex flex-col items-center justify-center py-16 px-4">
+        <div className="bg-card p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <CheckCircle className="mx-auto h-16 w-16 text-green-500 mb-6" />
+          <h1 className="text-3xl font-bold mb-4">Payment Successful!</h1>
+          <p className="text-lg text-foreground mb-6">
+            Thank you for your payment. Your transaction has been completed, and a confirmation email has been sent to your registered address.
           </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">
-            Return to Home
-          </Link>
+          <p className="text-md text-gray-500 mb-8">
+            What's next? You can now explore more properties or schedule a viewing.
+          </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: "Contact Agent", href: "#contact" }
+            { text: "Explore Properties", href: "properties" },
+            { 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" }
-              ]
-            },
-            {
-              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" }
+                { 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: "#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."
-          bottomRightText=""
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          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 = () => {
-    // In a real application, you would integrate Flutterwave SDK here
-    // This is a placeholder for demonstration purposes.
-    console.log('Initiating Flutterwave payment for $60...');
-    alert('Simulating Flutterwave payment... Success!\nRedirecting to confirmation page.');
+  const handlePayment = () => {
+    // Simulate Flutterwave payment processing
+    alert('Processing payment via Flutterwave...');
+    // On successful payment, redirect 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="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">
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">Secure Payment</h1>
-          <p className="text-lg mb-6 text-gray-600 dark:text-gray-300">
-            Your application requires a non-refundable fee.
+      <div className="min-h-[60vh] flex flex-col items-center justify-center py-16 px-4">
+        <div className="bg-card p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <Lock className="mx-auto h-12 w-12 text-primary-cta mb-4" />
+          <h1 className="text-3xl font-bold mb-4">Secure Payment</h1>
+          <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">
-            $60.00
+          <div className="flex flex-col items-center space-y-4 mb-6">
+            <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"
         />