UI changes and color theme changed

app/(public)/_homeComponents/HeroSection.tsx

@@ -0,0 +1,77 @@
+"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>
+  );
+}