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

@@ -0,0 +1,304 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ApplicationFormPage() {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // In a real application, you would send this data to a backend.
+    alert("Application Submitted! Redirecting to payment...");
+    // Simulate redirection to a payment gateway
+    setTimeout(() => {
+      console.log("Redirecting to payment for AED 500...");
+      // window.location.href = "/payment-gateway-url";
+    }, 1000);
+  };
+
+  // Navigation items for NavbarStyleCentered, adjusted to link back to homepage sections
+  const applicationFormNavItems = [
+    { name: "Properties", id: "/#properties" },
+    { name: "About", id: "/#about" },
+    { name: "Services", id: "/#services" },
+    { name: "Team", id: "/#team" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Contact", id: "/#contact" }
+  ];
+
+  // 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: "Apply Now", href: "/application-form" }
+      ]
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Investment Guide", href: "/#" },
+        { label: "Market Reports", href: "/#" },
+        { label: "FAQ", href: "/#" },
+        { label: "Blog", href: "/#" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "/#" },
+        { label: "Terms of Service", href: "/#" },
+        { label: "Cookie Policy", href: "/#" }
+      ]
+    },
+    {
+      title: "Connect",      items: [
+        { label: "LinkedIn", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "WhatsApp", href: "#" }
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      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={applicationFormNavItems}
+          button={{ text: "Schedule Viewing", href: "/#contact" }}
+        />
+      </div>
+
+      <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>
+
+          <div className="bg-card p-8 rounded-xl shadow-2xl space-y-8 border border-border">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Personal Information */}
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Personal Information</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">Full Name</label>
+                    <input
+                      type="text"
+                      id="fullName"
+                      name="fullName"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="emailAddress" className="block text-sm font-medium text-foreground mb-2">Email Address</label>
+                    <input
+                      type="email"
+                      id="emailAddress"
+                      name="emailAddress"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground mb-2">Phone Number</label>
+                    <input
+                      type="tel"
+                      id="phoneNumber"
+                      name="phoneNumber"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div 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>
+                <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="employmentStatus" className="block text-sm font-medium text-foreground mb-2">Employment Status</label>
+                    <select
+                      id="employmentStatus"
+                      name="employmentStatus"
+                      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"
+                    >
+                      <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>
+
+              {/* Document Upload */}
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
+                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (Max file size 5MB per file).</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="idDocument" className="block text-sm font-medium text-foreground mb-2">ID Document (e.g., Passport, Emirates ID)</label>
+                    <input
+                      type="file"
+                      id="idDocument"
+                      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>
+
+              {/* Application Fee Explanation */}
+              <div className="pt-4 border-t border-border">
+                <h3 className="text-xl font-semibold text-foreground mb-2">Application Fee</h3>
+                <p className="text-sm text-foreground/80">
+                  A non-refundable application fee of <strong className="text-primary-cta">AED 500</strong> is required to process your application. This fee covers administrative costs and a comprehensive background check. You will be redirected to a secure payment gateway after submitting this form.
+                </p>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full py-3 px-6 bg-primary-cta text-white font-bold rounded-lg hover:bg-primary-cta/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
+              >
+                Submit Application
+              </button>
+            </form>
+
+            {/* Confirmation Text - Note: In a real app, this would be conditionally rendered after successful submission */}
+            <div className="text-center pt-8 border-t border-border ">
+              <h2 className="text-2xl font-semibold text-foreground mb-4">Thank You for Your Application!</h2>
+              <p className="text-foreground/80">
+                Your application has been received and is currently under review. Please check your email for a confirmation and further instructions regarding the payment of the application fee. We appreciate your patience.
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={commonFooterColumns}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/confirmation/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
+import { useRouter } from 'next/navigation';
+import { CheckCircle } from "lucide-react";
+
+export default function ConfirmationPage() {
+  const router = useRouter();
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Luxe Properties"
+          navItems={[
+            { name: "Properties", id: "properties" },
+            { name: "About", id: "about" },
+            { name: "Services", id: "services" },
+            { name: "Team", id: "team" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+            { name: "Apply Now", id: "/application-form" },
+            { name: "Payment", id: "/payment" },
+            { name: "Confirmation", id: "/confirmation" }
+          ]}
+          button={{ text: "Schedule Viewing", href: "contact" }}
+        />
+      </div>
+
+      <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>
+          <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>
+      </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: "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"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -36,9 +36,10 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Team", id: "team" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "contact" },
+            { name: "Admin Dashboard", id: "/admin-dashboard" }
           ]}
-          button={{ text: "Schedule Viewing", href: "contact" }}
+          button={{ text: "Apply Now", href: "/application-form" }}
         />
       </div>
 
@@ -51,7 +52,7 @@ export default function LandingPage() {
           tagIcon={Sparkles}
           buttons={[
             { text: "Explore Properties", href: "properties" },
-            { text: "Request a Private Consultation", href: "contact" }
+            { text: "Contact Agent", href: "contact" }
           ]}
           mediaItems={[
             {
@@ -91,13 +92,15 @@ export default function LandingPage() {
           products={[
             {
               id: "1",              name: "Palm Jumeirah Villa",              price: "AED 12,500,000",              variant: "5 Bed Villa | Beachfront",              imageSrc: "https://img.b2bpic.net/free-photo/shanghai-night-china_1127-3170.jpg?_wi=2",              imageAlt: "Luxury villa on Palm Jumeirah",              isFavorited: false,
-              onProductClick: () => window.location.href = "/property/palm-jumeirah-villa"
+              onProductClick: () => window.location.href = "/property/1"
             },
             {
-              id: "2",              name: "Downtown Dubai Penthouse",              price: "AED 8,750,000",              variant: "4 Bed Penthouse | City View",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg?_wi=2",              imageAlt: "Modern penthouse in Downtown Dubai",              isFavorited: false
+              id: "2",              name: "Downtown Dubai Penthouse",              price: "AED 8,750,000",              variant: "4 Bed Penthouse | City View",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg?_wi=2",              imageAlt: "Modern penthouse in Downtown Dubai",              isFavorited: false,
+              onProductClick: () => window.location.href = "/property/2"
             },
             {
-              id: "3",              name: "Emirates Hills Townhouse",              price: "AED 6,200,000",              variant: "4 Bed Townhouse | Golf View",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg?_wi=2",              imageAlt: "Contemporary townhouse in Emirates Hills",              isFavorited: false
+              id: "3",              name: "Emirates Hills Townhouse",              price: "AED 6,200,000",              variant: "4 Bed Townhouse | Golf View",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920931.jpg?_wi=2",              imageAlt: "Contemporary townhouse in Emirates Hills",              isFavorited: false,
+              onProductClick: () => window.location.href = "/property/3"
             }
           ]}
         />
@@ -244,7 +247,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Schedule Consultation", href: "#" },
+            { text: "Get Expert Guidance Now", href: "#" },
             { text: "Browse Listings", href: "#properties" }
           ]}
         />
@@ -259,7 +262,9 @@ export default function LandingPage() {
                 { 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" },
+                { label: "Admin Dashboard", href: "/admin-dashboard" }
               ]
             },
             {

src/app/payment/page.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+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 handlePayment = () => {
+    // Simulate Flutterwave payment processing
+    alert('Processing payment via Flutterwave...');
+    // On successful payment, redirect to confirmation page
+    router.push('/confirmation');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Luxe Properties"
+          navItems={[
+            { name: "Properties", id: "properties" },
+            { name: "About", id: "about" },
+            { name: "Services", id: "services" },
+            { name: "Team", id: "team" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+            { name: "Apply Now", id: "/application-form" },
+            { name: "Payment", id: "/payment" },
+            { name: "Confirmation", id: "/confirmation" }
+          ]}
+          button={{ text: "Schedule Viewing", href: "contact" }}
+        />
+      </div>
+
+      <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="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>
+        </div>
+      </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: "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"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}