Add src/app/features/page.tsx

2026-06-09 08:04:26 +00:00
parent 6c51f78127
commit be38bb67e1
1 changed files with 98 additions and 0 deletions
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { FeatureCardTwentyFour } from "@/components/sections/feature/FeatureCardTwentyFour";
+import { FooterBase } from "@/components/sections/footer/FooterBase";
+import { Sparkles, Briefcase, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" }
+];
+
+export default function FeaturesPage() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem
+      disableTransitionOnChange
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={navbarLinks}
+        brandName="Webild"
+        logoSrc="/logo.svg"
+        logoAlt="Webild Logo"
+        button={{ text: "Get Started", href: "https://webild.com" }}
+      />
+      <div id="features" data-section="features">
+        <FeatureCardTwentyFour
+          title="Streamline Your Hiring with Powerful Features"
+          description="Optimize every step of your recruitment process from application to offer."
+          tag="Our Solutions"
+          features={[
+            {
+              id: "1",              title: "Interview Tracking & Scheduling",              author: "Efficiency",              description: "Easily schedule, track, and manage all candidate interviews in one place. Gather feedback, rate candidates, and move them through stages with intuitive tools.",              tags: ["Interview", "Scheduling", "Tracking"],
+              imageSrc: "https://picsum.photos/id/243/800/600",              imageAlt: "Interview scheduling calendar"
+            },
+            {
+              id: "2",              title: "Comprehensive Application Management",              author: "Organization",              description: "Handle high volumes of applications with ease. Filter, sort, and review candidates, ensuring no great talent gets overlooked. Automate communication and save time.",              tags: ["Applications", "Management", "Filtering"],
+              imageSrc: "https://picsum.photos/id/244/800/600",              imageAlt: "Applicant tracking system dashboard"
+            },
+            {
+              id: "3",              title: "Customizable Workflows",              author: "Flexibility",              description: "Adapt the platform to your unique hiring process. Create custom stages, forms, and email templates to match your brand and needs.",              tags: ["Workflows", "Customization", "Automation"],
+              imageSrc: "https://picsum.photos/id/245/800/600",              imageAlt: "Workflow customization interface"
+            },
+            {
+              id: "4",              title: "Collaborative Team Tools",              author: "Teamwork",              description: "Foster seamless collaboration among hiring managers and recruiters. Share notes, ratings, and communicate effectively to make informed decisions.",              tags: ["Collaboration", "Team", "Communication"],
+              imageSrc: "https://picsum.photos/id/246/800/600",              imageAlt: "Team collaboration tools"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+      <FooterBase
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Home", href: "/" },
+              { label: "Features", href: "/features" },
+              { label: "Pricing", href: "/pricing" }
+            ]
+          },
+          {
+            title: "Company",            items: [
+              { label: "About Us", href: "/about" },
+              { label: "Careers", href: "#careers" }
+            ]
+          }
+        ]}
+        logoText="Webild"
+        copyrightText="© 2024 Webild. All rights reserved."
+      />
+    </ThemeProvider>
+  );
+}