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

@@ -0,0 +1,226 @@
+"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" },
+    { name: "Apply Now", id: "/application-form" }
+  ];
+
+  // Footer columns for FooterSimple, adjusted to link back to homepage sections
+  const applicationFormFooterColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/#about" },
+        { label: "Our Services", href: "/#services" },
+        { label: "Executive Team", href: "/#team" },
+        { label: "Properties", href: "/#properties" },
+        { label: "Contact", href: "/#contact" },
+        { label: "Apply Now", href: "/application-form" }
+      ]
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Investment Guide", href: "/#" },
+        { label: "Market Reports", href: "/#" },
+        { label: "FAQ", href: "/#" },
+        { label: "Blog", href: "/#" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "/#" },
+        { label: "Terms of Service", href: "/#" },
+        { label: "Cookie Policy", href: "/#" }
+      ]
+    },
+    {
+      title: "Connect",      items: [
+        { label: "LinkedIn", href: "#" },
+        { label: "Instagram", href: "#" },
+        { label: "WhatsApp", href: "#" }
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      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>
+              </div>
+
+              {/* Employment Information */}
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Employment Information</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="occupation" className="block text-sm font-medium text-foreground mb-2">Occupation</label>
+                    <input
+                      type="text"
+                      id="occupation"
+                      name="occupation"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="employer" className="block text-sm font-medium text-foreground mb-2">Employer</label>
+                    <input
+                      type="text"
+                      id="employer"
+                      name="employer"
+                      required
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label htmlFor="annualIncome" className="block text-sm font-medium text-foreground mb-2">Annual Income (AED)</label>
+                    <input
+                      type="number"
+                      id="annualIncome"
+                      name="annualIncome"
+                      required
+                      min="0"
+                      className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Document Upload */}
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-4">Document Upload</h2>
+                <p className="text-sm text-foreground/80 mb-4">Please upload necessary documents (e.g., ID, proof of income). Max file size 5MB per file.</p>
+                <div>
+                  <label htmlFor="documents" className="block text-sm font-medium text-foreground mb-2">Upload Documents</label>
+                  <input
+                    type="file"
+                    id="documents"
+                    name="documents"
+                    multiple
+                    accept=".pdf,.doc,.docx,.jpg,.png"
+                    className="w-full px-4 py-2 bg-background-accent text-foreground rounded-lg border border-border file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-cta file:text-white hover:file:bg-primary-cta/90"
+                  />
+                </div>
+              </div>
+
+              {/* Application Fee Explanation */}
+              <div className="pt-4 border-t border-border">
+                <h3 className="text-xl font-semibold text-foreground mb-2">Application Fee</h3>
+                <p className="text-sm text-foreground/80">
+                  A non-refundable application fee of <strong className="text-primary-cta">AED 500</strong> is required to process your application. This fee covers administrative costs and a comprehensive background check. You will be redirected to a secure payment gateway after submitting this form.
+                </p>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full py-3 px-6 bg-primary-cta text-white font-bold rounded-lg hover:bg-primary-cta/90 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
+              >
+                Submit Application
+              </button>
+            </form>
+
+            {/* Confirmation Text - Note: In a real app, this would be conditionally rendered after successful submission */}
+            <div className="text-center pt-8 border-t border-border ">
+              <h2 className="text-2xl font-semibold text-foreground mb-4">Thank You for Your Application!</h2>
+              <p className="text-foreground/80">
+                Your application has been received and is currently under review. Please check your email for a confirmation and further instructions regarding the payment of the application fee. We appreciate your patience.
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={applicationFormFooterColumns}
+          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" }
               ]
             },
             {
@@ -291,4 +296,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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>
+  );
+}