From 627d3e0a54c93848f8ff8b4eb72b84c925277371 Mon Sep 17 00:00:00 2001
From: Sandip Chowdhury <chowdhurysandip2016@gmail.com>
Date: Mon, 16 Mar 2026 16:03:44 +0530
Subject: [PATCH] Responsive Issue solved

---
 app/(public)/_homeComponents/HeroSection.tsx | 36 +++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/(public)/_homeComponents/HeroSection.tsx b/app/(public)/_homeComponents/HeroSection.tsx
index 4298185..a4512a5 100644
--- a/app/(public)/_homeComponents/HeroSection.tsx
+++ b/app/(public)/_homeComponents/HeroSection.tsx
@@ -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>
   );
-}
+}
\ No newline at end of file