Update src/app/dashboard/tracker/page.tsx

src/app/dashboard/tracker/page.tsx

@@ -1,11 +1,29 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import { Briefcase, Folder, Mail, ClipboardList, Users, Settings, GraduationCap, CheckCircle } from "lucide-react"; // Added CheckCircle for general status icon
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { useEffect, useState } from "react";
+import { Search, Calendar, CheckCircle } from 'lucide-react';
+
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
+];
 
 export default function DashboardTrackerPage() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -19,68 +37,49 @@ export default function DashboardTrackerPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard/tracker" }
-        ]}
-        brandName="TrackerApp"
-        logoSrc="https://picsum.photos/40/40?_wi=1"
-        logoAlt="TrackerApp Logo"
-        button={{ text: "Sign Out", href: "#" }}
-      />
-
-      <div id="application-status" data-section="application-status">
-        <HeroBillboardDashboard
-          title="Your Application Dashboard"
-          description="Track your job applications and stay on top of your interview process."
-          background={{ variant: "plain" }}
-          dashboard={{
-            title: "Overview",            stats: [
-              { title: "Applications Sent", values: [25, 30, 28], description: "Total applications submitted" },
-              { title: "Interviews Scheduled", values: [5, 8, 6], description: "Upcoming and past interviews" },
-              { title: "Offers Received", values: [1, 2, 1], description: "Job offers received" }
-            ],
-            logoIcon: Briefcase,
-            sidebarItems: [
-              { icon: Folder },
-              { icon: Mail },
-              { icon: ClipboardList },
-              { icon: Users },
-              { icon: Settings }
-            ],
-            listItems: [
-              { icon: Briefcase, title: "Software Engineer at Google", status: "Interviewing" },
-              { icon: GraduationCap, title: "Data Scientist at Amazon", status: "Applied" },
-              { icon: Folder, title: "Product Manager at Meta", status: "Rejected" },
-              { icon: CheckCircle, title: "Frontend Dev at StartupX", status: "Offer Accepted" }
-            ],
-            imageSrc: "https://picsum.photos/1200/800?_wi=1",            imageAlt: "Dashboard overview image",            buttons: [{ text: "Add New Application", href: "#" }]
-          }}
-          className="py-12 md:py-20 lg:py-28"
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navbarLinks}
+          brandName="Webild"
+          logoSrc="/logo.svg"
+          logoAlt="Webild Logo"
+          button={{ text: "Get Started", href: "https://webild.com" }}
         />
       </div>
-
-      <div id="interview-timeline" data-section="interview-timeline">
-        <FeatureBento
-          tag="Your Journey"
-          title="Interview Timeline"
-          description="Visualize your progress through different interview stages."
+      <div id="tracker-features" data-section="tracker-features">
+        <FeatureHoverPattern
+          tag="Track Progress"
+          title="Your Hiring Journey"
+          description="Manage all stages of your recruitment process with ease."
           animationType="slide-up"
           useInvertedBackground={false}
           features={[
-            {
-              title: "Upcoming Interviews",              description: "A detailed view of your interview schedule.",              bentoComponent: "timeline",              heading: "Interview Stages",              subheading: "Next Steps in Your Application Process",              items: [
-                { label: "Application Submitted", detail: "March 1, 2024" },
-                { label: "Screening Call", detail: "March 5, 2024 - Completed" },
-                { label: "Technical Interview", detail: "March 12, 2024 - Scheduled" }
-              ],
-              completedLabel: "Completed"
-            }
+            { title: "Candidate Sourcing", description: "Find the best talent.", icon: Search },
+            { title: "Interview Scheduling", description: "Organize interviews effortlessly.", icon: Calendar },
+            { title: "Offer Management", description: "Extend offers swiftly.", icon: CheckCircle }
           ]}
-          className="py-12 md:py-20 lg:py-28"
+          className="my-12"
+          textboxLayout="default"
         />
       </div>
+      <FooterSimple
+        columns={[
+          {
+            title: "Product", items: [
+              { label: "Features", href: "/features" },
+              { label: "Pricing", href: "/pricing" }
+            ]
+          },
+          {
+            title: "Company", items: [
+              { label: "About Us", href: "/about" },
+              { label: "Careers", href: "#careers" }
+            ]
+          }
+        ]}
+        bottomLeftText="Webild"
+        bottomRightText="© 2024 Webild. All rights reserved."
+      />
     </ThemeProvider>
   );
-}
+}