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

Responsive Issue solved

Browse Source
This commit is contained in:
Sandip Chowdhury
2026-03-16 16:03:44 +05:30
parent 45705a5379
commit 627d3e0a54
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,31 +5,34 @@ 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">
<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 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
className="text-center lg:text-left"
>
<h1 className="text-5xl lg:text-5xl font-extrabold text-gray-900 leading-tight">
<h1 className="text-3xl sm:text-4xl md: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">
<p className="mt-6 text-base sm:text-lg text-gray-600 max-w-xl mx-auto lg:mx-0">
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">
{/* 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">
Start Free Trial
</Button>
<Button
variant="outline"
className="border-[#2563eb] text-[#2563eb] px-8 py-6 text-lg rounded-xl"
className="w-full sm:w-auto border-[#2563eb] text-[#2563eb] px-8 py-6 text-base rounded-xl"
>
Schedule Demo
</Button>
@@ -41,20 +44,18 @@ export default function HeroSection() {
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"
className="bg-gray-50 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200"
>
<div
className="bg-white rounded-3xl shadow-xl p-8"
>
<div className="bg-white rounded-3xl shadow-md p-6 sm:p-8">
<div className="flex items-center justify-between mb-6">
<h4 className="text-lg font-semibold text-gray-700">
<h4 className="text-base sm: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">
<div className="grid grid-cols-2 gap-4 sm:gap-6">
<StatCard title="ACTIVE POSITIONS" value="24" />
<StatCard title="TOTAL CANDIDATES" value="1,847" />
<StatCard title="INTERVIEWS THIS WEEK" value="12" />
@@ -62,6 +63,7 @@ export default function HeroSection() {
</div>
</div>
</motion.div>
</div>
</section>
);
@@ -69,9 +71,9 @@ export default function HeroSection() {
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 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>
</div>
);
}