leadstocompany/ATS-HRMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Service Page added

Browse Source
This commit is contained in:
Sandip Chowdhury
2026-03-16 17:03:54 +05:30
parent 627d3e0a54
commit 3e059b0a4c
10 changed files with 209 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/(public)/_homeComponents/CTA.tsx
View File

@@ -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>

10
app/(public)/_homeComponents/Header.tsx
View File

@@ -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

13
app/(public)/_homeComponents/HeroSection.tsx
View File

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

4
app/(public)/_homeComponents/Pricing.tsx
View File

@@ -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?

37
app/(public)/services/_components/ServiceCTA.tsx Normal file
View File

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

37
app/(public)/services/_components/ServiceCard.tsx Normal file
View File

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

32
app/(public)/services/_components/ServiceHero.tsx Normal file
View File

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

66
app/(public)/services/_components/ServicesList.tsx Normal file
View File

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

16
app/(public)/services/page.tsx Normal file
View File

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

1
services/Constants.tsx
View File

@@ -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" },