Add src/app/applications/page.tsx

src/app/applications/page.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import CardStack from "@/components/cardStack/CardStack";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { CheckCircle, Clock, AlertCircle, Mail } from "lucide-react";
+import { useState } from "react";
+
+const navItems = [
+  { name: "Search Jobs", id: "search" },
+  { name: "Post a Job", id: "post-job" },
+  { name: "Admin", id: "admin-login" },
+  { name: "Browse", id: "browse" },
+  { name: "Applications", id: "/applications" },
+  { name: "Contact", id: "contact" },
+];
+
+const footerColumns = [
+  {
+    title: "Product",    items: [
+      { label: "Search Jobs", href: "/search" },
+      { label: "Post a Job", href: "/post-job" },
+      { label: "Browse by Province", href: "#provinces" },
+      { label: "For Employers", href: "#" },
+    ],
+  },
+  {
+    title: "Company",    items: [
+      { label: "About Jobee", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Contact Us", href: "#contact" },
+      { label: "Blog", href: "#" },
+    ],
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "FAQ", href: "#" },
+      { label: "Support", href: "#" },
+    ],
+  },
+];
+
+interface Application {
+  id: string;
+  jobTitle: string;
+  company: string;
+  status: "pending" | "accepted" | "rejected" | "interviewing";
+  appliedDate: string;
+  lastUpdated: string;
+  description: string;
+}
+
+export default function ApplicationsPage() {
+  const [applications] = useState<Application[]>([
+    {
+      id: "1",      jobTitle: "Senior Frontend Developer",      company: "Tech Innovations Amsterdam",      status: "interviewing",      appliedDate: "2025-01-10",      lastUpdated: "2025-01-15",      description:
+        "You've been selected for the interview round. Check your email for scheduling details and prepare for a technical assessment."},
+    {
+      id: "2",      jobTitle: "UX/UI Designer",      company: "Creative Studio Rotterdam",      status: "accepted",      appliedDate: "2025-01-08",      lastUpdated: "2025-01-16",      description:
+        "Congratulations! Your application has been accepted. Please review the job offer details and respond within 5 business days."},
+    {
+      id: "3",      jobTitle: "Data Analyst",      company: "Analytics Corp Utrecht",      status: "pending",      appliedDate: "2025-01-12",      lastUpdated: "2025-01-12",      description:
+        "Your application is being reviewed by the hiring team. You'll receive an update within 7-10 business days."},
+    {
+      id: "4",      jobTitle: "Marketing Manager",      company: "Brand Solutions Hague",      status: "rejected",      appliedDate: "2025-01-05",      lastUpdated: "2025-01-14",      description:
+        "Thank you for your application. We've decided to move forward with other candidates but encourage you to apply for future opportunities."},
+    {
+      id: "5",      jobTitle: "Full Stack Developer",      company: "Web Tech Solutions",      status: "interviewing",      appliedDate: "2025-01-11",      lastUpdated: "2025-01-16",      description:
+        "First round interview scheduled for January 20, 2025 at 14:00 CET. Confirmation link sent to your email."},
+    {
+      id: "6",      jobTitle: "Content Writer",      company: "Digital Media Groningen",      status: "pending",      appliedDate: "2025-01-13",      lastUpdated: "2025-01-13",      description:
+        "Your portfolio and writing samples are being evaluated. We'll contact you soon with next steps."},
+  ]);
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "accepted":
+        return CheckCircle;
+      case "interviewing":
+        return Clock;
+      case "rejected":
+        return AlertCircle;
+      default:
+        return Clock;
+    }
+  };
+
+  const getStatusColor = (status: string): string => {
+    switch (status) {
+      case "accepted":
+        return "success";
+      case "interviewing":
+        return "info";
+      case "rejected":
+        return "error";
+      default:
+        return "warning";
+    }
+  };
+
+  const applicationCards = applications.map((app) => (
+    <div
+      key={app.id}
+      className="p-6 rounded-lg border border-border bg-card hover:shadow-lg transition-shadow"
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-foreground mb-1">
+            {app.jobTitle}
+          </h3>
+          <p className="text-sm text-foreground/70 mb-3">{app.company}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {getStatusIcon(app.status) &&
+            (() => {
+              const Icon = getStatusIcon(app.status);
+              return (
+                <Icon
+                  className="w-5 h-5"
+                  style={{
+                    color:
+                      app.status === "accepted"
+                        ? "#10b981"
+                        : app.status === "rejected"
+                          ? "#ef4444"
+                          : app.status === "interviewing"
+                            ? "#3b82f6"
+                            : "#f59e0b"}}
+                />
+              );
+            })()}
+          <span
+            className={`px-3 py-1 rounded-full text-xs font-medium capitalize ${
+              app.status === "accepted"
+                ? "bg-green-100 text-green-800"
+                : app.status === "rejected"
+                  ? "bg-red-100 text-red-800"
+                  : app.status === "interviewing"
+                    ? "bg-blue-100 text-blue-800"
+                    : "bg-amber-100 text-amber-800"
+            }`}
+          >
+            {app.status}
+          </span>
+        </div>
+      </div>
+      <p className="text-sm text-foreground/60 mb-4">{app.description}</p>
+      <div className="flex justify-between text-xs text-foreground/50 pt-4 border-t border-border/30">
+        <span>Applied: {new Date(app.appliedDate).toLocaleDateString()}</span>
+        <span>Updated: {new Date(app.lastUpdated).toLocaleDateString()}</span>
+      </div>
+    </div>
+  ));
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Jobee"
+          navItems={navItems}
+          button={{
+            text: "Post a Job",            href: "/post-job"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero" className="py-20">
+        <FeatureCardEight
+          title="Your Job Applications"
+          description="Track the status of all your job applications, monitor interview schedules, and manage your career journey in one place."
+          tag="Application Tracker"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              title: "Real-Time Status Updates",              description:
+                "Get instant notifications when employers review or respond to your applications. Never miss an important update.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1",              imageAlt: "Real-time notifications"},
+            {
+              id: 2,
+              title: "Interview Management",              description:
+                "Keep track of interview dates, times, and preparation materials. Get reminders so you never miss an interview opportunity.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1",              imageAlt: "Interview scheduler"},
+            {
+              id: 3,
+              title: "Application Analytics",              description:
+                "View detailed insights about your application success rate, response times, and which job types get the most attention.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1",              imageAlt: "Analytics dashboard"},
+            {
+              id: 4,
+              title: "Personalized Recommendations",              description:
+                "Based on your applications and preferences, get tailored job suggestions that match your skills and career goals.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1",              imageAlt: "Personalized recommendations"},
+          ]}
+          buttons={[
+            {
+              text: "Browse More Jobs",              href: "/search"},
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="applications" data-section="applications" className="py-20">
+        <CardStack
+          title="Your Active Applications"
+          description="Manage and track all your job applications in one convenient dashboard. Click on any application to view details and take action."
+          tag="Application Management"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
+          mode="buttons"
+          carouselThreshold={5}
+        >
+          {applicationCards}
+        </CardStack>
+      </div>
+
+      <div id="stats" data-section="stats" className="py-20">
+        <FeatureCardEight
+          title="Application Statistics"
+          description="Monitor your application metrics and track your job search progress over time."
+          tag="Your Progress"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          features={[
+            {
+              id: 1,
+              title: "Total Applications",              description: `You've submitted ${applications.length} applications across various positions and companies in the Netherlands.`,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1",              imageAlt: "Total applications"},
+            {
+              id: 2,
+              title: "Response Rate",              description: `${Math.round((applications.filter((a) => a.status !== "pending").length / applications.length) * 100)}% of your applications have received responses from employers.`,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1",              imageAlt: "Response rate"},
+            {
+              id: 3,
+              title: "Interviews Scheduled",              description: `You have ${applications.filter((a) => a.status === "interviewing").length} interviews currently in the process or scheduled. Prepare and shine!",`,
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1",              imageAlt: "Interviews"},
+            {
+              id: 4,
+              title: "Success Stories",              description: `Congratulations! You have ${applications.filter((a) => a.status === "accepted").length} job offers. Review and respond to secure your next opportunity!`,
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1",              imageAlt: "Accepted offers"},
+          ]}
+          buttons={[
+            {
+              text: "Continue Searching",              href: "/search"},
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Need Help?"
+          title="Stay in Touch with Your Job Search"
+          description="Get personalized job recommendations and career advice delivered to your inbox. Subscribe to stay updated on new opportunities."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{
+            variant: "animated-grid"}}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email address"
+          buttonText="Subscribe"
+          termsText="We'll send you job recommendations and updates relevant to your applications. Unsubscribe anytime."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}