Add src/app/confirmation/page.tsx

2026-03-25 13:54:38 +00:00
parent b353e16b83
commit cd37a4e186
1 changed files with 107 additions and 0 deletions
--- a/src/app/confirmation/page.tsx
+++ b/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", href: "/application-form" },
+            { name: "Payment", href: "/payment" },
+            { name: "Confirmation", href: "/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>
+  );
+}