78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export default function HeroSection() {
|
|
return (
|
|
<section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-30">
|
|
<div className="max-w-7xl px-6 mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
|
{/* LEFT CONTENT */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -40 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h1 className="text-5xl lg:text-5xl font-extrabold text-gray-900 leading-tight">
|
|
Hire Smarter with AI-Powered Recruitment Software
|
|
</h1>
|
|
|
|
<p className="mt-6 text-lg text-gray-600 max-w-xl">
|
|
All-in-one ATS, HRMS, and Recruitment CRM platform designed for
|
|
modern hiring teams
|
|
</p>
|
|
|
|
<div className="flex gap-5 mt-10">
|
|
<Button className="bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-lg rounded-xl">
|
|
Start Free Trial
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="border-[#2563eb] text-[#2563eb] px-8 py-6 text-lg rounded-xl"
|
|
>
|
|
Schedule Demo
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* RIGHT CARD */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 40 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="bg-gray-50 rounded-3xl shadow-xl p-12 border border-gray-300"
|
|
>
|
|
<div
|
|
className="bg-white rounded-3xl shadow-xl p-8"
|
|
>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h4 className="text-lg font-semibold text-gray-700">
|
|
Recruitment Pipeline
|
|
</h4>
|
|
|
|
<span className="h-3 w-3 rounded-full bg-green-500"></span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<StatCard title="ACTIVE POSITIONS" value="24" />
|
|
<StatCard title="TOTAL CANDIDATES" value="1,847" />
|
|
<StatCard title="INTERVIEWS THIS WEEK" value="12" />
|
|
<StatCard title="AVG TIME TO HIRE" value="18d" />
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function StatCard({ title, value }: { title: string; value: string }) {
|
|
return (
|
|
<div className="border-l-4 border-[#2563eb] bg-gray-50 rounded-xl p-6">
|
|
<p className="text-sm text-gray-500">{title}</p>
|
|
<p className="text-2xl font-bold text-[#2563eb] mt-2">{value}</p>
|
|
</div>
|
|
);
|
|
}
|