Merge version_2 into main

Merge version_2 into main

src/app/admin-dashboard/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import { BarChart2, CheckCircle, Clock, Facebook, Instagram, Linkedin, ListChecks, MapPin } from "lucide-react";
+
+export default function AdminDashboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmallSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", href: "/" },
+              { name: "Features", id: "#reporting-features" },
+              { name: "Impact", id: "#public-impact" },
+              { name: "FAQs", id: "#faqs" },
+              { name: "Contact", id: "#contact" },
+              { name: "Admin Dashboard", href: "/admin-dashboard" }
+            ]}
+            brandName="AquaWatch"
+            button={{ text: "Report Issue", href: "#contact" }}
+          />
+        </div>
+
+        <div id="admin-dashboard-hero" data-section="admin-dashboard-hero">
+          <HeroSplitDoubleCarousel
+            background={{ variant: "radial-gradient" }}
+            title="Admin Dashboard"
+            description="Manage water quality reports, users, and system settings."
+            leftCarouselItems={[]}
+            rightCarouselItems={[]}
+            tag="System Overview"
+            buttons={[]}
+          />
+        </div>
+
+        <div id="dashboard-metrics" data-section="dashboard-metrics">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Key Performance Indicators"
+            description="Real-time insights into platform activity."
+            metrics={[
+              { id: "1", value: "1,500", title: "Active Reports", items: ["Currently under review", "Requires action"] },
+              { id: "2", value: "95%", title: "Resolution Rate", items: ["Percentage of resolved issues", "High impact achieved"] },
+              { id: "3", value: "3 Days", title: "Avg. Resolution Time", items: ["Faster response times", "Efficient process"] },
+              { id: "4", value: "250", title: "New Users", items: ["Past 30 days", "Community growth"] }
+            ]}
+          />
+        </div>
+
+        <div id="recent-activity" data-section="recent-activity">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="Recent Reports & Activities"
+            description="Overview of the latest water quality reports and system actions."
+            features={[
+              {
+                title: "Report Status Updates",                description: "Track the status of recent water quality reports.",                bentoComponent: "timeline",                heading: "Latest Reports",                subheading: "Updates from the last 24 hours",                items: [
+                  { label: "Report #1234: Oil Spill", detail: "Status: Under Review (Zone B)" },
+                  { label: "Report #1233: Algae Bloom", detail: "Status: Resolved (Lake Victoria)" },
+                  { label: "Report #1232: Industrial Waste", detail: "Status: Action Initiated (River Delta)" }
+                ],
+                completedLabel: "View All Activities"
+              },
+              {
+                title: "User Engagement",                description: "Monitor user activity and engagement trends.",                bentoComponent: "animated-bar-chart"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="AquaWatch"
+            copyrightText="© 2024 AquaWatch. All rights reserved."
+            socialLinks={[
+              { icon: Facebook, href: "https://facebook.com/aquawatch", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "https://instagram.com/aquawatch", ariaLabel: "Instagram" },
+              { icon: Linkedin, href: "https://linkedin.com/company/aquawatch", ariaLabel: "LinkedIn" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,15 +33,17 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          href: "/"},
         {
-          name: "Features",          id: "#features"},
+          name: "Features",          id: "#reporting-features"},
         {
-          name: "Impact",          id: "#impact"},
+          name: "Impact",          id: "#public-impact"},
         {
           name: "FAQs",          id: "#faqs"},
         {
           name: "Contact",          id: "#contact"},
+        {
+          name: "Admin Dashboard",          href: "/admin-dashboard"}
       ]}
       brandName="AquaWatch"
       button={{
@@ -88,7 +90,7 @@ export default function LandingPage() {
         {
           text: "Report an Issue",          href: "#contact"},
         {
-          text: "Explore Reports",          href: "#features"},
+          text: "Explore Reports",          href: "#reporting-features"},
       ]}
       avatars={[
         {
@@ -328,6 +330,12 @@ export default function LandingPage() {
       mediaAnimation="slide-up"
       mediaPosition="right"
       buttonText="Send Message"
+      onSubmit={(data) => {
+        console.log("Form data submitted:", data);
+        // In a real application, you would send this data to your backend API.
+        // Example: fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
+        alert("Message sent successfully (simulated)! Check console for data.");
+      }}
     />
   </div>