Service Page added

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

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

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

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