Merge version_4 into main

Merge version_4 into main

src/app/application-form/page.tsx

@@ -0,0 +1,216 @@
+"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
+  };
+
+  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}>
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered {...navbarProps} />
+      </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.
+          </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>
+                <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"
+                />
+              </div>
+              <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"
+                />
+              </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">
+              <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"
+                />
+              </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"
+                />
+              </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>
+
+            <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>
+            </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>
+      </main>
+
+      <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/confirmation/page.tsx

@@ -0,0 +1,90 @@
+"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';
+
+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" }
+  };
+
+  return (
+    <ThemeProvider {...themeProviderProps}>
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered {...navbarProps} />
+      </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.
+          </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>
+        </div>
+      </main>
+
+      <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/page.tsx

@@ -11,6 +11,7 @@ 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() {
@@ -29,16 +30,18 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Luxe Properties"
+          brandName="BlueOak Residential"
           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: "FAQ", id: "faq" },
+            { name: "Contact", id: "contact" },
+            { name: "Admin Dashboard", href: "/admin" }
           ]}
-          button={{ text: "Schedule Viewing", href: "contact" }}
+          button={{ text: "Schedule Viewing", href: "#contact" }}
         />
       </div>
 
@@ -50,8 +53,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={[
             {
@@ -86,7 +89,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={[
             {
@@ -114,7 +117,7 @@ export default function LandingPage() {
           imageAlt="Luxe Properties Dubai team"
           useInvertedBackground={false}
           buttons={[
-            { text: "Learn Our Story", href: "#" }
+            { text: "Learn Our Story", href: "#about" }
           ]}
         />
       </div>
@@ -237,6 +240,26 @@ 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"
@@ -246,7 +269,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Schedule Consultation", href: "#" },
+            { text: "Schedule Consultation", href: "#contact" },
             { text: "Browse Listings", href: "#properties" }
           ]}
         />
@@ -256,19 +279,26 @@ export default function LandingPage() {
         <FooterSimple
           columns={[
             {
-              title: "Company",              items: [
+              title: "BlueOak Residential",              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: "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" }
               ]
             },
             {
               title: "Resources",              items: [
                 { label: "Investment Guide", href: "#" },
                 { label: "Market Reports", href: "#" },
-                { label: "FAQ", href: "#" },
+                { label: "FAQ", href: "#faq" },
                 { label: "Blog", href: "#" }
               ]
             },
@@ -278,17 +308,10 @@ 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 Luxe Properties Dubai. All rights reserved."
-          bottomRightText="Luxury Real Estate Excellence"
+          bottomLeftText="© 2025 BlueOak Residential. All rights reserved."
+          bottomRightText=""
         />
       </div>
     </ThemeProvider>

src/app/payment/page.tsx

@@ -0,0 +1,110 @@
+"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';
+
+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.');
+    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}>
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered {...navbarProps} />
+      </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.
+          </p>
+          <div className="text-5xl font-extrabold text-primary-cta mb-8">
+            $60.00
+          </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 id="footer" data-section="footer">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
+          bottomRightText="Luxury Real Estate Excellence"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}