Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,10 +3,10 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TextAbout from '@/components/sections/about/TextAbout';
 
@@ -29,128 +29,61 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Dashboard",
+          name: "Dashboard",          id: "overview"},
-          id: "overview",
-        },
         {
-          name: "Requests",
+          name: "Management",          id: "management"},
-          id: "requests",
-        },
         {
-          name: "Approvals",
+          name: "Reports",          id: "reports"},
-          id: "approvals",
-        },
       ]}
       brandName="StationeryFlow"
     />
   </div>
 
   <div id="overview" data-section="overview">
-      <HeroBillboardGallery
+      <HeroBillboardScroll
       background={{
-        variant: "sparkles-gradient",
+        variant: "sparkles-gradient"}}
-      }}
+      title="Managerial Command Center"
-      title="Streamline Your Office Needs"
+      description="Oversee office operations, manage pending approvals, and analyze procurement trends from a single executive dashboard."
-      description="Efficiently track, request, and manage all stationery assets through our centralized modern dashboard."
+      imageSrc="http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=1"
       buttons={[
         {
-          text: "Get Started",
+          text: "View Approvals",          href: "#management"},
-          href: "#requests",
-        },
       ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=1",
-          imageAlt: "Dashboard overview interface",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=2",
-          imageAlt: "Real-time request tracking",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=3",
-          imageAlt: "Inventory management analytics",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=4",
-          imageAlt: "User approval workflow",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg?_wi=5",
-          imageAlt: "Comprehensive reporting suite",
-        },
-      ]}
-      mediaAnimation="blur-reveal"
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="management" data-section="management">
-      <FeatureCardEight
+      <FeatureCardTwentyThree
-      textboxLayout="default"
+      animationType="blur-reveal"
+      textboxLayout="split"
       useInvertedBackground={true}
+      title="Admin & Approval Management"
+      description="Powerful administrative tools to streamline procurement workflow and maintain inventory accountability."
       features={[
         {
-          title: "Automated Requests",
+          id: "f1",          title: "Approval Pipeline",          tags: ["Real-time", "Urgent"],
-          description: "Seamlessly submit stationery requests for approval.",
+          imageSrc: "http://img.b2bpic.net/free-photo/operation-procedure-action-ideas-goal-concept_53876-13715.jpg?_wi=1"},
-          imageSrc: "http://img.b2bpic.net/free-photo/operation-procedure-action-ideas-goal-concept_53876-13715.jpg?_wi=1",
-        },
         {
-          title: "Real-time Status",
+          id: "f2",          title: "Vendor Oversight",          tags: ["Direct", "Audit"],
-          description: "Track the status of your requests in real-time.",
+          imageSrc: "http://img.b2bpic.net/free-photo/operation-procedure-action-ideas-goal-concept_53876-13715.jpg?_wi=2"},
-          imageSrc: "http://img.b2bpic.net/free-photo/operation-procedure-action-ideas-goal-concept_53876-13715.jpg?_wi=2",
-        },
-        {
-          title: "Advanced Reporting",
-          description: "View comprehensive reports on office supply consumption.",
-          imageSrc: "http://img.b2bpic.net/free-vector/data-analysis-icons-research-business-finance-science-information-vector-doodle-set-with-charts-diagrams-computer-screen-magnifying-glass-gear-document_107791-9684.jpg",
-        },
-      ]}
-      title="Comprehensive Management Suite"
-      description="Key features built for modern office efficiency."
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Optimizing Office Resources"
-      buttons={[
-        {
-          text: "Learn More",
-          href: "#features",
-        },
       ]}
     />
   </div>
 
-  <div id="metric" data-section="metric">
+  <div id="reports" data-section="reports">
-      <MetricCardTwo
+      <MetricCardSeven
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      title="Efficiency at a Glance"
+      title="Reporting & Analytics"
-      description="Real-time metrics showing the impact of our management system on your office operations."
+      description="Gain actionable insights into stationery consumption and spending patterns across all departments."
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "$24k",          title: "Q3 Savings",          items: ["Cost optimization", "Vendor consolidation"],
-          value: "45%",
-          description: "Reduction in procurement time",
         },
         {
-          id: "m2",
+          id: "m2",          value: "185",          title: "Requests Handled",          items: ["Efficiency tracking", "Bottleneck analysis"],
-          value: "12k+",
-          description: "Stationery items tracked",
-        },
-        {
-          id: "m3",
-          value: "99.9%",
-          description: "Accuracy in inventory logs",
-        },
-        {
-          id: "m4",
-          value: "24/7",
-          description: "System availability",
         },
       ]}
     />
@@ -160,13 +93,11 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
+      tag="Support"
-      tag="Contact"
+      title="Contact Support"
-      title="Need Help?"
+      description="Reach out to our dedicated manager support team for platform configuration or advanced reporting assistance."
-      description="Contact our support team for any dashboard or stationery inquiries."
+      buttonText="Get Support"
-      inputPlaceholder="Enter your professional email"
-      buttonText="Send Message"
     />
   </div>
 
@@ -175,25 +106,11 @@ export default function LandingPage() {
       logoText="StationeryFlow"
       columns={[
         {
-          title: "Platform",
+          title: "Admin Panel",          items: [
-          items: [
             {
-              label: "Overview",
+              label: "Approvals",              href: "#management"},
-              href: "#overview",
-            },
             {
-              label: "Requests",
+              label: "Reporting",              href: "#reports"},
-              href: "#requests",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
           ],
         },
       ]}