src/app/about/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { SplitAbout } from "@/components/sections/about/SplitAbout";
+import { FooterBase } from "@/components/sections/footer/FooterBase";
+import { Sparkles, Lightbulb, TrendingUp, Handshake } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" }
+];
+
+export default function AboutPage() {
+  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="about" data-section="about">
+        <SplitAbout
+          title="Our Vision: Revolutionizing Talent Acquisition"
+          description="At Webild, we are passionate about creating intelligent solutions that empower businesses to find, attract, and hire the best talent efficiently and fairly."
+          tag="Who We Are"
+          bulletPoints={[
+            {
+              title: "Innovation-Driven",              description: "We constantly research and implement the latest technologies to bring you cutting-edge features.",              icon: Lightbulb
+            },
+            {
+              title: "Customer Success",              description: "Your success is our priority. We design our platform with user experience and effectiveness in mind.",              icon: TrendingUp
+            },
+            {
+              title: "Ethical & Inclusive",              description: "Committed to fair hiring practices and promoting diversity and inclusion in the workplace.",              icon: Handshake
+            }
+          ]}
+          imageSrc="https://picsum.photos/id/1015/800/600"
+          imageAlt="Team collaborating"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+          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>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState } from 'react';
+import { ThemeProvider } from "@/components/theme-provider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import GlowingOrbBackground from "@/components/background/GlowingOrbBackground";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import Input from '@/components/form/Input';
+import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
+import { Mail, Phone, MapPin } from 'lucide-react';
+
+
+export default function ContactPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission logic here
+    console.log('Form submitted:', { name, email, message });
+    alert('Thank you for your message! We will get back to you shortly.');
+    setName('');
+    setEmail('');
+    setMessage('');
+  };
+
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      <div className="relative min-h-screen">
+        <GlowingOrbBackground />
+        <div className="relative z-10 flex flex-col items-center justify-center py-20 px-4 md:px-8 lg:px-16 text-center">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Get in Touch</h1>
+          <p className="text-lg md:text-xl text-gray-400 max-w-2xl mb-12">
+            Have a question or want to work together? Fill out the form below or reach out to us directly.
+          </p>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl w-full">
+            {/* Contact Information Section */}
+            <div className="text-left">
+              <ContactText
+                text="Reach Out to Us"
+                buttons={[]} 
+                background={{ variant: 'plain' }}
+                useInvertedBackground={false}
+                className="!py-0 !pb-8"
+                textBoxClassName="!max-w-none"
+                textClassName="!text-3xl !md:text-4xl !lg:text-5xl !font-semibold !mb-6"
+              />
+              <p className="text-gray-300 text-lg mb-8">
+                We're here to help! Whether you have questions about our services, need support, or just want to say hello, our team is ready to connect.
+              </p>
+              <div className="space-y-6 text-gray-200">
+                <div className="flex items-start gap-4">
+                  <Mail className="w-6 h-6 text-primary-cta mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-xl mb-1">Email Us</h3>
+                    <p>info@webild.com</p>
+                    <p>support@webild.com</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <Phone className="w-6 h-6 text-primary-cta mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-xl mb-1">Call Us</h3>
+                    <p>+1 (555) 123-4567</p>
+                </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <MapPin className="w-6 h-6 text-primary-cta mt-1" />
+                  <div>
+                    <h3 className="font-semibold text-xl mb-1">Our Office</h3>
+                    <p>123 Main Street, Suite 400</p>
+                    <p>Cityville, State, 12345</p>
+                    <p>Country</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Contact Form Section */}
+            <div className="bg-card p-8 rounded-lg shadow-xl text-left">
+              <h2 className="text-3xl font-semibold mb-6">Send us a Message</h2>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
+                    Name
+                  </label>
+                  <Input
+                    value={name}
+                    onChange={setName}
+                    placeholder="Your Name"
+                    required
+                    ariaLabel="Your Name"
+                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+                    Email
+                  </label>
+                  <Input
+                    value={email}
+                    onChange={setEmail}
+                    type="email"
+                    placeholder="you@example.com"
+                    required
+                    ariaLabel="Your Email"
+                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    rows={5}
+                    placeholder="Your message..."
+                    required
+                    aria-label="Your Message"
+                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground resize-y"
+                  ></textarea>
+                </div>
+                <ButtonBounceEffect
+                  text="Send Message"
+                  type="submit"
+                  ariaLabel="Send Message"
+                  className="w-full py-3 bg-primary-cta text-white font-semibold rounded-md hover:bg-opacity-90 transition-colors"
+                />
+              </form>
+            </div>
+          </div>
+        </div>
+        <FooterLogoEmphasis
+          logoText="Webild"
+          columns={[
+            {
+              items: [
+                { label: 'Home', href: '/' },
+                { label: 'Contact', href: '/contact' }
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/tracker/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { ThemeProvider } from "@/app/theme-provider";
+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
+
+export default function DashboardTrackerPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      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>
+
+      <div id="interview-timeline" data-section="interview-timeline">
+        <FeatureBento
+          tag="Your Journey"
+          title="Interview Timeline"
+          description="Visualize your progress through different interview stages."
+          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" },
+                { label: "Hiring Manager Interview", detail: "March 20, 2024 - Pending" },
+                { label: "Final Round", detail: "TBD" }
+              ],
+              completedLabel: "Completed"
+            }
+          ]}
+          className="py-12 md:py-20 lg:py-28"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

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>
+  );
+}

src/app/page.tsx

@@ -1,5 +1,89 @@
-import { redirect } from 'next/navigation';
+"use client";
+import { ThemeProvider } from "next-themes";
+import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { HeroBillboardRotatedCarousel } from "@/components/sections/hero/HeroBillboardRotatedCarousel";
+import { FooterBase } from "@/components/sections/footer/FooterBase";
+import { Sparkles } from "lucide-react";
+import { useEffect, useState } from "react";
+
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" }
+];
 
 export default function Home() {
-  redirect('/components');
+  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="hero" data-section="hero">
+        <HeroBillboardRotatedCarousel
+          title="Innovate Your Recruitment Process"
+          description="Transform your hiring with our cutting-edge talent acquisition platform."
+          buttons={[
+            { text: "Learn More", href: "/features" },
+            { text: "Contact Us", href: "https://webild.com/contact" }
+          ]}
+          carouselItems={[
+            { id: "1", imageSrc: "https://picsum.photos/id/237/800/600", imageAlt: "Applicant tracking dashboard" },
+            { id: "2", imageSrc: "https://picsum.photos/id/238/800/600", imageAlt: "Interview scheduling interface" },
+            { id: "3", imageSrc: "https://picsum.photos/id/239/800/600", imageAlt: "Candidate communication tools" },
+            { id: "4", imageSrc: "https://picsum.photos/id/240/800/600", imageAlt: "Analytics and reporting" },
+            { id: "5", imageSrc: "https://picsum.photos/id/241/800/600", imageAlt: "Team collaboration features" },
+            { id: "6", imageSrc: "https://picsum.photos/id/242/800/600", imageAlt: "Customizable workflows" }
+          ]}
+          background={{ variant: "radial-gradient" }}
+          animationType="slide-up"
+        />
+      </div>
+      <FooterBase
+        columns={[
+          {
+            title: "Product",            items: [
+              { 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>
+  );
 }