From 0c7c0a34719e4404792eb17223cf5c4e29f82efb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 25 Mar 2026 13:52:56 +0000
Subject: [PATCH] Update src/app/confirmation/page.tsx

---
 src/app/confirmation/page.tsx | 151 +++++++++++++++++++---------------
 1 file changed, 84 insertions(+), 67 deletions(-)

diff --git a/src/app/confirmation/page.tsx b/src/app/confirmation/page.tsx
index ccba60e..f9ef2da 100644
--- a/src/app/confirmation/page.tsx
+++ b/src/app/confirmation/page.tsx
@@ -1,90 +1,107 @@
 "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", href: "/application-form" },
+            { name: "Payment", href: "/payment" },
+            { name: "Confirmation", href: "/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"
         />
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file