Update src/app/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { useEffect, useState } from "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 AboutPage() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <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="about-us" data-section="about-us">
+        <SplitAbout
+          title="About Our Mission"
+          description="At Webild, we're dedicated to empowering businesses with innovative solutions that drive growth and efficiency. Our team is passionate about creating tools that make a real difference."
+          bulletPoints={[
+            { title: "Innovation", description: "Continuously pushing boundaries with cutting-edge technology." },
+            { title: "Efficiency", description: "Streamlining processes to maximize productivity." },
+            { title: "Impact", description: "Creating solutions that deliver measurable value." }
+          ]}
+          imageSrc="https://picsum.photos/id/243/800/600"
+          imageAlt="Team collaborating in an office"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          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>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+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 ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <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="contact-us" data-section="contact-us">
+        <ContactText
+          text="Get in touch with us to learn more about our solutions."
+          buttons={[]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          className="py-12 md:py-20 lg:py-28"
+          textClassName="text-center"
+        />
+      </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>
+  );
+}

src/app/dashboard/tracker/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+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"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <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="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: "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="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>
+  );
+}

src/app/features/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { useEffect, useState } from "react";
+import { Sparkles, BarChart, Settings } 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 FeaturesPage() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={navbarLinks}
+          brandName="Webild"
+        />
+      </div>
+      <div id="features-section" data-section="features-section">
+        <FeatureHoverPattern
+          title="Powerful Features"
+          description="Discover how Webild can streamline your operations and boost efficiency."
+          animationType="slide-up"
+          useInvertedBackground={false}
+          textboxLayout="default"
+          features={[
+            { icon: Sparkles, title: "Automated Workflows", description: "Automate repetitive tasks and focus on what matters." },
+            { icon: BarChart, title: "Advanced Analytics", description: "Gain insights with comprehensive data reporting." },
+            { icon: Settings, title: "Customizable Settings", description: "Tailor the platform to fit your unique needs." }
+          ]}
+        />
+      </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>
+  );
+}

src/app/page.tsx

@@ -1,5 +1,71 @@
-import { redirect } from 'next/navigation';
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 
-export default function Home() {
+const navbarLinks = [
-  redirect('/components');
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
+];
+
+export default function HomePage() {
+  const heroSlides = [
+    { imageSrc: "/path/to/hero1.jpg", imageAlt: "Hero slide 1" },
+    { imageSrc: "/path/to/hero2.jpg", imageAlt: "Hero slide 2" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={navbarLinks}
+          brandName="Webild"
+        />
+      </div>
+      <div id="hero" data-section="hero">
+        <HeroCarouselLogo
+          logoText="Webild"
+          description="Your ultimate solution for modern web development."
+          buttons={[
+            { text: "Get Started", href: "/contact" },
+            { text: "Learn More", href: "/features" }
+          ]}
+          slides={heroSlides}
+        />
+      </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>
+  );
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #e3deea;
-  --card: #1a1a1a;
+  --card: #ffffff;
-  --foreground: #fff5f5e6;
+  --foreground: #1f2027;
-  --primary-cta: #ff7a7a;
+  --primary-cta: #1f2027;
-  --primary-cta-text: #0a0a0a;
+  --primary-cta-text: #e3deea;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #fff5f5e6;
+  --secondary-cta-text: #1f2027;
-  --accent: #737373;
+  --accent: #627dc6;
-  --background-accent: #737373;
+  --background-accent: #627dc6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);