Update src/app/page.tsx

src/app/admin-dashboard/page.tsx

@@ -1,59 +1,134 @@
 "use client";
 
-import { useState, useMemo } from "react";
 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 ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import { UserRound, FileText, Banknote, Shield, LayoutDashboard } from "lucide-react";
 
 export default function AdminDashboardPage() {
-  const [searchTerm, setSearchTerm] = useState("");
+  return (
-  const [paymentFilter, setPaymentFilter] = useState("All");
+    <ThemeProvider
-
+      defaultButtonVariant="hover-magnetic"
-  const applicants = useMemo(() => [
+      defaultTextAnimation="entrance-slide"
-    {
+      borderRadius="pill"
-      id: "app-1",      name: "John Doe",      category: "Paid",      price: "$100", // Application Fee
+      contentWidth="mediumSmall"
-      rating: 5, // Approval rating
+      sizing="mediumLarge"
-      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
+      background="none"
-      imageAlt: "John Doe profile",      onProductClick: () => alert("Viewing John Doe's details"),
+      cardStyle="glass-elevated"
-    },
+      primaryButtonStyle="primary-glow"
-    {
+      secondaryButtonStyle="radial-glow"
-      id: "app-2",      name: "Jane Smith",      category: "Pending",      price: "$100",      rating: 3,
+      headingFontWeight="medium"
-      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"),
+    >
-    },
+      <div id="nav" data-section="nav">
-    {
+        <NavbarStyleCentered
-      id: "app-3",      name: "Robert Brown",      category: "Paid",      price: "$100",      rating: 4,
+          brandName="Luxe Properties Admin"
-      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"),
+          navItems={[
-    },
-    {
-      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: "Apply Now", id: "/application-form" },
             { name: "Admin Dashboard", id: "/admin-dashboard" }
-  ];
+          ]}
+          button={{ text: "View Site", href: "/" }}
+        />
+      </div>
 
-  const footerColumns = [
+      <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" },
@@ -87,64 +162,9 @@ export default function AdminDashboardPage() {
                 { 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."
+          bottomLeftText="© 2025 Luxe Properties Admin. All rights reserved."
-            className="pb-10" // Add some padding to the bottom
+          bottomRightText="Dashboard Management"
-          />
-        </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

@@ -23,11 +23,12 @@ export default function ApplicationFormPage() {
     { name: "Services", id: "/#services" },
     { name: "Team", id: "/#team" },
     { name: "Testimonials", id: "/#testimonials" },
-    { name: "Contact", id: "/#contact" }
+    { name: "Contact", id: "/#contact" },
+    { name: "Apply Now", id: "/application-form" }
   ];
 
-  // Footer columns for FooterSimple, adjusted for consistency
+  // Footer columns for FooterSimple, adjusted to link back to homepage sections
-  const commonFooterColumns = [
+  const applicationFormFooterColumns = [
     {
       title: "Company",      items: [
         { label: "About Us", href: "/#about" },
@@ -128,56 +129,6 @@ export default function ApplicationFormPage() {
                       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>
 
@@ -185,33 +136,6 @@ export default function ApplicationFormPage() {
               <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
@@ -232,37 +156,35 @@ export default function ApplicationFormPage() {
                       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 (Max file size 5MB per file).</p>
+                <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 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>
+                  <label htmlFor="documents" className="block text-sm font-medium text-foreground mb-2">Upload Documents</label>
                   <input
                     type="file"
-                      id="idDocument"
+                    id="documents"
-                      name="idDocument"
+                    name="documents"
-                      required
+                    multiple
-                      accept=".pdf,.jpg,.jpeg,.png"
+                    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>
-                    <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 */}
@@ -294,7 +216,7 @@ export default function ApplicationFormPage() {
 
       <div id="footer" data-section="footer">
         <FooterSimple
-          columns={commonFooterColumns}
+          columns={applicationFormFooterColumns}
           bottomLeftText="© 2025 Luxe Properties Dubai. All rights reserved."
           bottomRightText="Luxury Real Estate Excellence"
         />

src/app/page.tsx

@@ -247,7 +247,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Get Expert Guidance Now", href: "#" },
+            { text: "Schedule Consultation", href: "#" },
             { text: "Browse Listings", href: "#properties" }
           ]}
         />