From 3e059b0a4c0642d8fe6c6ead175a3666476f7afe Mon Sep 17 00:00:00 2001
From: Sandip Chowdhury <chowdhurysandip2016@gmail.com>
Date: Mon, 16 Mar 2026 17:03:54 +0530
Subject: [PATCH] Service Page added

---
 app/(public)/_homeComponents/CTA.tsx          |  5 +-
 app/(public)/_homeComponents/Header.tsx       | 10 ++-
 app/(public)/_homeComponents/HeroSection.tsx  | 15 +++--
 app/(public)/_homeComponents/Pricing.tsx      |  4 +-
 .../services/_components/ServiceCTA.tsx       | 37 +++++++++++
 .../services/_components/ServiceCard.tsx      | 37 +++++++++++
 .../services/_components/ServiceHero.tsx      | 32 +++++++++
 .../services/_components/ServicesList.tsx     | 66 +++++++++++++++++++
 app/(public)/services/page.tsx                | 16 +++++
 services/Constants.tsx                        |  1 +
 10 files changed, 209 insertions(+), 14 deletions(-)
 create mode 100644 app/(public)/services/_components/ServiceCTA.tsx
 create mode 100644 app/(public)/services/_components/ServiceCard.tsx
 create mode 100644 app/(public)/services/_components/ServiceHero.tsx
 create mode 100644 app/(public)/services/_components/ServicesList.tsx
 create mode 100644 app/(public)/services/page.tsx

diff --git a/app/(public)/_homeComponents/CTA.tsx b/app/(public)/_homeComponents/CTA.tsx
index 2b2bdb9..1aa7ef2 100644
--- a/app/(public)/_homeComponents/CTA.tsx
+++ b/app/(public)/_homeComponents/CTA.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { motion } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 // CTA Section
 const CTA = () => {
+  const router = useRouter();
   return (
     <section className="py-24 bg-[#2563eb] text-white text-center relative overflow-hidden">
       <motion.div
@@ -29,7 +31,8 @@ const CTA = () => {
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <Button
             size="lg"
-            className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
+            className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-white hover:text-[#2563eb] hover:shadow-2xl hover:scale-105 transition-transform"
+            onClick={()=>router.push("#pricing")}
           >
             Start Your Free Trial Today<ArrowRight className="ml-2 w-5 h-5" />
           </Button>
diff --git a/app/(public)/_homeComponents/Header.tsx b/app/(public)/_homeComponents/Header.tsx
index 03f91f5..b022dc1 100644
--- a/app/(public)/_homeComponents/Header.tsx
+++ b/app/(public)/_homeComponents/Header.tsx
@@ -5,10 +5,12 @@ import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { home } from "@/services/Constants";
+import { useRouter } from "next/navigation";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 10);
@@ -58,11 +60,9 @@ const Header = () => {
           </nav>
 
           <div className="hidden md:flex items-center space-x-4">
-            <Button variant="ghost" className="font-medium">
-              Sign In
-            </Button>
             <Button
               className="text-white font-medium bg-[#2563eb]"
+              onClick={()=>router.push("#pricing")}
             >
               Start Free Trial
             </Button>
@@ -96,11 +96,9 @@ const Header = () => {
                   {item.name}
                 </Link>
               ))}
-              <Button variant="outline" className="w-full">
-                Sign In
-              </Button>
               <Button
                 className="w-full text-white bg-[#2563eb]"
+                onClick={()=>router.push("#pricing")}
                 
               >
                 Start Free Trial
diff --git a/app/(public)/_homeComponents/HeroSection.tsx b/app/(public)/_homeComponents/HeroSection.tsx
index a4512a5..4757314 100644
--- a/app/(public)/_homeComponents/HeroSection.tsx
+++ b/app/(public)/_homeComponents/HeroSection.tsx
@@ -2,12 +2,13 @@
 
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 export default function HeroSection() {
+  const router = useRouter();
   return (
     <section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-26 md:py-20 lg:py-28">
       <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-
         {/* LEFT CONTENT */}
         <motion.div
           initial={{ opacity: 0, x: -40 }}
@@ -26,7 +27,10 @@ export default function HeroSection() {
 
           {/* Buttons */}
           <div className="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-4 mt-8">
-            <Button className="w-full sm:w-auto bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-base rounded-xl">
+            <Button
+              className="w-full sm:w-auto bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-base rounded-xl"
+              onClick={() => router.push("#pricing")}
+            >
               Start Free Trial
             </Button>
 
@@ -63,7 +67,6 @@ export default function HeroSection() {
             </div>
           </div>
         </motion.div>
-
       </div>
     </section>
   );
@@ -73,7 +76,9 @@ function StatCard({ title, value }: { title: string; value: string }) {
   return (
     <div className="border-l-4 border-[#2563eb] bg-gray-50 rounded-xl p-4 sm:p-5">
       <p className="text-xs sm:text-sm text-gray-500">{title}</p>
-      <p className="text-lg sm:text-xl font-bold text-[#2563eb] mt-1">{value}</p>
+      <p className="text-lg sm:text-xl font-bold text-[#2563eb] mt-1">
+        {value}
+      </p>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/(public)/_homeComponents/Pricing.tsx b/app/(public)/_homeComponents/Pricing.tsx
index dfa62be..9f29416 100644
--- a/app/(public)/_homeComponents/Pricing.tsx
+++ b/app/(public)/_homeComponents/Pricing.tsx
@@ -114,7 +114,7 @@ const MainPricingCard = () => {
   );
 
   return (
-    <section className="py-16 bg-white">
+    <section id="pricing" className="py-16 bg-white">
       <div className="max-w-5xl mx-auto px-4">
         <Card className="rounded-3xl shadow-xl border border-[#c3dbe0] overflow-hidden">
           <CardContent className="p-10 text-center">
@@ -247,7 +247,7 @@ const CtaSection = () => {
   const router = useRouter();
 
   return (
-    <section className="py-20 bg-white">
+    <section  className="py-20 bg-white">
       <div className="max-w-4xl mx-auto text-center px-4">
         <h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
           Need Bulk Pricing or a Demo?
diff --git a/app/(public)/services/_components/ServiceCTA.tsx b/app/(public)/services/_components/ServiceCTA.tsx
new file mode 100644
index 0000000..fd698aa
--- /dev/null
+++ b/app/(public)/services/_components/ServiceCTA.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+export default function ServiceCTA() {
+  return (
+    <section className="py-20 bg-[#2563eb] text-white">
+
+      <div className="max-w-6xl mx-auto px-6 text-center">
+
+        <motion.h2
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="text-3xl md:text-4xl font-bold"
+        >
+          Ready to Transform Your Hiring Process?
+        </motion.h2>
+
+        <p className="mt-6 text-lg text-blue-100">
+          Start using our AI-powered recruitment platform today.
+        </p>
+
+        <div className="mt-8 flex justify-center gap-4 flex-wrap">
+
+          <Button className="bg-white text-[#2563eb] hover:bg-gray-100 px-8 py-6 text-lg rounded-xl">
+            Start Free Trial
+          </Button>
+
+        </div>
+
+      </div>
+
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/app/(public)/services/_components/ServiceCard.tsx b/app/(public)/services/_components/ServiceCard.tsx
new file mode 100644
index 0000000..01bf4cd
--- /dev/null
+++ b/app/(public)/services/_components/ServiceCard.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface Props {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+export default function ServiceCard({ title, description, icon }: Props) {
+  return (
+    <motion.div
+      whileHover={{ y: -8 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Card className="h-full border border-gray-200 shadow-md hover:shadow-xl rounded-2xl">
+        <CardContent className="p-8">
+
+          <div className="text-[#2563eb] mb-5">
+            {icon}
+          </div>
+
+          <h3 className="text-xl font-semibold text-gray-900">
+            {title}
+          </h3>
+
+          <p className="mt-4 text-gray-600 leading-relaxed">
+            {description}
+          </p>
+
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}
\ No newline at end of file
diff --git a/app/(public)/services/_components/ServiceHero.tsx b/app/(public)/services/_components/ServiceHero.tsx
new file mode 100644
index 0000000..2dfe048
--- /dev/null
+++ b/app/(public)/services/_components/ServiceHero.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function ServiceHero() {
+  return (
+    <section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-20 lg:py-28">
+      <div className="max-w-7xl mx-auto px-6 text-center">
+
+        <motion.h1
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-5xl font-bold text-gray-900"
+        >
+          Our Services
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="mt-6 text-lg text-gray-600 max-w-2xl mx-auto"
+        >
+          We provide powerful AI-driven recruitment solutions to help
+          businesses hire faster, smarter, and more efficiently.
+        </motion.p>
+
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/app/(public)/services/_components/ServicesList.tsx b/app/(public)/services/_components/ServicesList.tsx
new file mode 100644
index 0000000..ec2fd5a
--- /dev/null
+++ b/app/(public)/services/_components/ServicesList.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import ServiceCard from "./ServiceCard";
+import { Users, Brain, BarChart, Shield } from "lucide-react";
+
+const services = [
+  {
+    title: "AI Resume Screening",
+    description:
+      "Automatically analyze thousands of resumes and identify the best candidates using advanced AI matching algorithms.",
+    icon: <Brain size={40} />,
+  },
+  {
+    title: "Candidate Management",
+    description:
+      "Organize and manage candidate pipelines with powerful tools for tracking interviews, feedback, and hiring stages.",
+    icon: <Users size={40} />,
+  },
+  {
+    title: "Recruitment Analytics",
+    description:
+      "Track hiring performance with detailed insights, reports, and analytics to improve your recruitment strategy.",
+    icon: <BarChart size={40} />,
+  },
+  {
+    title: "Secure HR Management",
+    description:
+      "Ensure secure handling of candidate data with enterprise-level security and compliance features.",
+    icon: <Shield size={40} />,
+  },
+];
+
+export default function ServicesList() {
+  return (
+    <section className="py-20 bg-white">
+
+      <div className="max-w-7xl mx-auto px-6">
+
+        <div className="text-center mb-16">
+          <h2 className="text-3xl font-bold text-gray-900">
+            What We Offer
+          </h2>
+
+          <p className="mt-4 text-gray-600">
+            Our platform provides everything modern hiring teams need.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+
+          {services.map((service, index) => (
+            <ServiceCard
+              key={index}
+              title={service.title}
+              description={service.description}
+              icon={service.icon}
+            />
+          ))}
+
+        </div>
+
+      </div>
+
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/app/(public)/services/page.tsx b/app/(public)/services/page.tsx
new file mode 100644
index 0000000..784a140
--- /dev/null
+++ b/app/(public)/services/page.tsx
@@ -0,0 +1,16 @@
+'use client'
+import ModulesSection from "../_homeComponents/Modules";
+import ServiceCTA from "./_components/ServiceCTA";
+import ServiceHero from "./_components/ServiceHero";
+import ServicesList from "./_components/ServicesList";
+
+export default function ServicesPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <ServiceHero />
+      <ModulesSection />
+      <ServicesList />
+      <ServiceCTA />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/services/Constants.tsx b/services/Constants.tsx
index 78cef31..2bcaf39 100644
--- a/services/Constants.tsx
+++ b/services/Constants.tsx
@@ -148,6 +148,7 @@ export interface HomeContent {
 
 export const home: HomeContent = {
   navigation: [
+    {name: "Services", href: "/services"},
     { name: "Features", href: "/features" },
     { name: "Blog", href: "/blogs" },
     { name: "Careers", href: "/careers" },