UI changes and color theme changed

app/(public)/_homeComponents/About.tsx

@@ -43,7 +43,7 @@ const AboutUs: React.FC = () => {
   };
 
   return (
-    <section className="py-16 md:py-24 bg-gradient-to-b from-[#c3dbe0]/30 to-white overflow-hidden">
+    <section className="py-16 md:py-16 bg-white overflow-hidden">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
           {/* Left Side - Images */}
@@ -59,12 +59,12 @@ const AboutUs: React.FC = () => {
               variants={imageVariants}
               className="relative z-10 rounded-2xl overflow-hidden shadow-2xl"
             >
-              <div className="aspect-[4/3] bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center">
+              <div className="aspect-[4/3] bg-gradient-to-br from-[#2563eb] to-[#c3dbe0] flex items-center justify-center">
                 <div className="text-center p-8">
-                  <div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center">
+                  <div className="w-24 h-24 mx-auto mb-4 bg-[#2563eb] rounded-2xl flex items-center justify-center">
                     <Users className="w-12 h-12 text-white" />
                   </div>
-                  <p className="text-[#7c7a7c] font-medium">
+                  <p className="text-black font-medium">
                     Team Collaboration
                   </p>
                 </div>
@@ -77,8 +77,8 @@ const AboutUs: React.FC = () => {
               transition={{ delay: 0.2 }}
               className="absolute -top-6 -right-6 w-32 h-32 md:w-40 md:h-40 z-20"
             >
-              <div className="w-full h-full rounded-xl overflow-hidden shadow-xl bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center border-4 border-white">
+              <div className="w-full h-full rounded-xl overflow-hidden shadow-xl bg-[#2563eb] flex items-center justify-center border-4 border-white">
-                <Sparkles className="w-12 h-12 text-[#13afdc]" />
+                <Sparkles className="w-12 h-12 text-white" />
               </div>
             </motion.div>
 
@@ -88,8 +88,8 @@ const AboutUs: React.FC = () => {
               transition={{ delay: 0.4 }}
               className="absolute -bottom-8 -left-8 w-36 h-36 md:w-44 md:h-44 z-20"
             >
-              <div className="w-full h-full rounded-2xl overflow-hidden shadow-xl bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center border-4 border-white">
+              <div className="w-full h-full rounded-2xl overflow-hidden shadow-xl bg-[#2563eb] flex items-center justify-center border-4 border-white">
-                <Award className="w-14 h-14 text-[#13afdc]" />
+                <Award className="w-14 h-14 text-white" />
               </div>
             </motion.div>
 
@@ -100,7 +100,7 @@ const AboutUs: React.FC = () => {
               className="absolute bottom-4 right-4 z-30 bg-white rounded-xl shadow-2xl p-4 border border-[#c3dbe0]"
             >
               <div className="flex items-center gap-3">
-                <div className="w-12 h-12 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-lg flex items-center justify-center">
+                <div className="w-12 h-12 bg-[#2563eb] rounded-lg flex items-center justify-center">
                   <Target className="w-6 h-6 text-white" />
                 </div>
                 <div>
@@ -130,7 +130,7 @@ const AboutUs: React.FC = () => {
             className="space-y-6"
           >
             <motion.div variants={itemVariants}>
-              <Badge className="mb-4 px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
+              <Badge className="mb-4 px-4 py-2 bg-blue-50 text-[#2563eb] font-semibold">
                 <Sparkles className="w-4 h-4 mr-2 inline" />
                 {home.about.badge}
               </Badge>
@@ -145,7 +145,7 @@ const AboutUs: React.FC = () => {
 
             <motion.h3
               variants={itemVariants}
-              className="text-xl sm:text-2xl font-semibold text-[#13afdc]"
+              className="text-xl sm:text-2xl font-semibold text-[#2563eb]"
             >
               {home.about.subheading}
             </motion.h3>
@@ -168,7 +168,7 @@ const AboutUs: React.FC = () => {
                   whileHover={{ scale: 1.05 }}
                   className="text-center p-4 rounded-xl bg-gradient-to-br from-white to-[#c3dbe0]/40 border border-[#c3dbe0]"
                 >
-                  <stat.icon className="w-8 h-8 mx-auto mb-2 text-[#13afdc]" />
+                  <stat.icon className="w-8 h-8 mx-auto mb-2 text-[#2563eb]" />
                   <p className="text-2xl font-bold text-[#0d0d0d]">
                     {stat.value}
                   </p>
@@ -190,8 +190,8 @@ const AboutUs: React.FC = () => {
                   transition={{ delay: 0.8 + index * 0.1 }}
                   className="flex items-center gap-3"
                 >
-                  <div className="flex-shrink-0 w-6 h-6 bg-[#13afdc]/15 rounded-full flex items-center justify-center">
+                  <div className="flex-shrink-0 w-6 h-6 bg-blue-50 rounded-full flex items-center justify-center">
-                    <CheckCircle className="w-4 h-4 text-[#13afdc]" />
+                    <CheckCircle className="w-4 h-4 text-[#2563eb]" />
                   </div>
                   <span className="text-[#0d0d0d]">{highlight}</span>
                 </motion.div>
@@ -202,7 +202,7 @@ const AboutUs: React.FC = () => {
             <motion.div variants={itemVariants} className="pt-4">
               <Button
                 size="lg"
-                className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white shadow-lg hover:shadow-xl transition-all duration-300"
+                className="bg-[#2563eb] text-white shadow-lg hover:shadow-xl transition-all duration-300"
               >
                 {home.about.cta}
                 <ArrowRight className="ml-2 w-5 h-5" />
@@ -218,7 +218,7 @@ const AboutUs: React.FC = () => {
                 {[1, 2, 3, 4].map((i) => (
                   <div
                     key={i}
-                    className="w-8 h-8 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] border-2 border-white flex items-center justify-center text-white text-xs font-bold"
+                    className="w-8 h-8 rounded-full bg-[#2563eb] border-2 border-white flex items-center justify-center text-white text-xs font-bold"
                   >
                     {i}
                   </div>

app/(public)/_homeComponents/Benefits.tsx

@@ -8,7 +8,7 @@ const Benefits = () => {
   return (
     <section
       id="solutions"
-      className="py-24 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] relative overflow-hidden"
+      className="py-16 bg-[#2563eb] relative overflow-hidden"
     >
       {/* Soft background glow */}
       <div className="absolute inset-0 opacity-20">
@@ -19,10 +19,10 @@ const Benefits = () => {
       <div className="max-w-7xl mx-auto px-4 relative z-10">
         {/* Heading */}
         <AnimatedSection className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-white">
             Why Choose Winixco?
           </h2>
-          <p className="text-xl text-[#0d0d0d]/70 max-w-3xl mx-auto">
+          <p className="text-xl text-white max-w-3xl mx-auto">
             Winixco helps companies stay efficient, connected, and future-ready.
             With automation, accuracy, and real-time syncing, every department
             works smarter — not harder.
@@ -35,9 +35,9 @@ const Benefits = () => {
             <AnimatedSection key={index}>
               <motion.div
                 whileHover={{ scale: 1.05 }}
-                className="text-center p-8 rounded-2xl bg-white/80 backdrop-blur-lg border border-[#c3dbe0] hover:bg-white transition-all shadow-lg"
+                className="text-center p-8 rounded-2xl bg-white backdrop-blur-lg border border-[#c3dbe0] hover:bg-white transition-all shadow-lg"
               >
-                <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center">
+                <div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[#2563eb] flex items-center justify-center">
                   <span className="text-white">{feature.icon}</span>
                 </div>
 

app/(public)/_homeComponents/CTA.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 // CTA Section
 const CTA = () => {
   return (
-    <section className="py-24 bg-gradient-to-r from-[#1FC8DB] to-[#7FD8E7] text-white text-center relative overflow-hidden">
+    <section className="py-24 bg-[#2563eb] text-white text-center relative overflow-hidden">
       <motion.div
         className="absolute top-0 left-0 w-full h-full opacity-20"
         animate={{ scale: [1, 1.1, 1] }}
@@ -18,38 +18,22 @@ const CTA = () => {
 
       <div className="relative z-10 max-w-4xl mx-auto px-4">
         <h2 className="text-4xl md:text-6xl font-bold mb-6">
-          Transform the way your business
+          Ready to Transform Your Hiring?
-          <span className="bg-gradient-to-r from-white to-cyan-100 bg-clip-text text-transparent">
-            {" "}
-            hires, manages & grows
-          </span>
         </h2>
 
         <p className="text-lg md:text-xl text-white/90 mb-10">
-          Winixco brings HRMS, ATS & CRM together — so your teams stay aligned,
+          Join hundreds of companies already using Winixco to hire smarter,
-          productive and future-ready.
+          faster, and with confidence.
         </p>
 
         <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-[#0ea5b7] font-bold 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-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
           >
-            Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
+            Start Your Free Trial Today<ArrowRight className="ml-2 w-5 h-5" />
-          </Button>
-
-          <Button
-            size="lg"
-            variant="outline"
-            className="border-2 border-white text-slate-600 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
-          >
-            Book a Demo
           </Button>
         </div>
-
-        <p className="mt-6 text-sm text-white/80">
-          No credit card required · Quick setup · Cancel anytime
-        </p>
       </div>
     </section>
   );

app/(public)/_homeComponents/FAQ.tsx

@@ -19,16 +19,13 @@ const FAQ = () => {
     >
       <div className="max-w-4xl mx-auto px-4">
         <AnimatedSection className="text-center mb-16">
-          <span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
             FAQ
           </span>
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
-            Frequently Asked{" "}
+            Frequently Asked Questions
-            <span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
-              Questions
-            </span>
           </h2>
-          <p className="text-xl text-[#7c7a7c]">
+          <p className="text-xl text-black">
             Everything you need to know about Winixco
           </p>
         </AnimatedSection>

app/(public)/_homeComponents/Features.tsx

@@ -10,24 +10,20 @@ const Features = () => {
   return (
     <section
       id="features"
-      className="py-24 bg-gradient-to-b from-[#c3dbe0]/40 to-white"
+      className="py-24 bg-white"
     >
       <div className="max-w-7xl mx-auto px-4">
         <AnimatedSection className="text-center mb-16">
-          <span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
             POWERFUL FEATURES
           </span>
 
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
-            All-in-One ATS, HRMS & CRP{" "}
+            Powerful Features Built for Modern Recruiting
-            <span className="bg-gradient-to-r from-[#13afdc] to-[#13afdc] bg-clip-text text-transparent">
-              Solutions
-            </span>
           </h2>
 
           <p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
-            Explore features across all our products designed to scale your
+            Everything you need to streamline your hiring process with AI-powered intelligence.
-            hiring success.
           </p>
         </AnimatedSection>
 
@@ -43,14 +39,14 @@ const Features = () => {
                     <div
                       className="
                         w-14 h-14 rounded-xl 
-                        bg-gradient-to-br from-[#13afdc] to-[#c3dbe0]
+                        bg-blue-100
                         flex items-center justify-center 
                         mb-6 
                         group-hover:scale-110
                         transition-transform
                       "
                     >
-                      <div className="text-white">
+                      <div className="text-white text-3xl text-center">
                         {feature.icon}
                       </div>
                     </div>

app/(public)/_homeComponents/Header.tsx

@@ -49,7 +49,7 @@ const Header = () => {
               <motion.div key={item.name} whileHover={{ scale: 1.05 }}>
                 <Link
                   href={item.href}
-                  className="text-gray-700 hover:text-[#1FC8DB] font-medium"
+                  className="text-gray-700 hover:text-[#2563eb] font-medium"
                 >
                   {item.name}
                 </Link>
@@ -62,11 +62,7 @@ const Header = () => {
               Sign In
             </Button>
             <Button
-              className="text-white font-medium"
+              className="text-white font-medium bg-[#2563eb]"
-              style={{
-                background:
-                  "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
-              }}
             >
               Start Free Trial
             </Button>
@@ -104,11 +100,8 @@ const Header = () => {
                 Sign In
               </Button>
               <Button
-                className="w-full text-white"
+                className="w-full text-white bg-[#2563eb]"
-                style={{
+                
-                  background:
-                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
-                }}
               >
                 Start Free Trial
               </Button>

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

app/(public)/_homeComponents/HowItWorks.tsx

@@ -45,19 +45,7 @@ const steps = [
 
 const HowItWorks = () => {
   return (
-    <section className="py-32 bg-gradient-to-br from-[#c3dbe0] to-white text-center relative overflow-hidden">
+    <section className="py-32 bg-[#2563eb] text-center relative overflow-hidden">
-      {/* Soft animated background blobs */}
-      <motion.div
-        animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.1, 1] }}
-        transition={{ duration: 10, repeat: Infinity }}
-        className="absolute bg-[#13afdc] rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
-      />
-      <motion.div
-        animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.05, 1] }}
-        transition={{ duration: 12, repeat: Infinity }}
-        className="absolute bg-[#0d0d0d] rounded-full blur-3xl opacity-10 w-[26rem] h-[26rem] -bottom-20 -left-20"
-      />
-
       <div className="relative max-w-6xl mx-auto px-6 z-10">
         {/* Heading */}
         <motion.h2
@@ -65,12 +53,9 @@ const HowItWorks = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
-          className="text-4xl md:text-6xl font-extrabold mb-6 text-[#0d0d0d]"
+          className="text-4xl md:text-6xl font-extrabold mb-6 text-white"
         >
-          How It{" "}
+          How It Works
-          <span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
-            Works
-          </span>
         </motion.h2>
 
         <motion.p
@@ -78,7 +63,7 @@ const HowItWorks = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6, delay: 0.2 }}
-          className="max-w-3xl mx-auto text-lg md:text-xl text-[#7c7a7c] mb-16"
+          className="max-w-3xl mx-auto text-lg md:text-xl text-white mb-16"
         >
           Winixco connects your hiring, HR and CRM workflows into one powerful
           operating system — from job posting to payroll & business growth.
@@ -95,7 +80,7 @@ const HowItWorks = () => {
               transition={{ delay: i * 0.15 }}
               className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition"
             >
-              <div className="flex justify-center mb-4 text-[#13afdc]">
+              <div className="flex justify-center mb-4 text-[#2563eb]">
                 {step.icon}
               </div>
               <h3 className="text-xl font-bold mb-2 text-[#0d0d0d]">

app/(public)/_homeComponents/Modules.tsx

@@ -42,12 +42,12 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
                 rotate: isHovered ? 5 : 0,
               }}
               transition={{ duration: 0.3 }}
-              className="w-20 h-20 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center shadow-lg"
+              className="w-20 h-20 bg-[#2563eb] rounded-2xl flex items-center justify-center shadow-lg"
             >
               <module.icon className="w-10 h-10 text-white" />
             </motion.div>
 
-            <Badge className="bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
+            <Badge className="bg-blue-50 text-[#2563eb] border-[#13afdc]/20">
               New
             </Badge>
           </div>
@@ -70,7 +70,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
           </motion.div>
 
           {/* Title */}
-          <h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#13afdc] transition-colors">
+          <h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#2563eb] transition-colors">
             {module.title}
           </h3>
 
@@ -93,7 +93,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
                 transition={{ delay: index * 0.2 + idx * 0.1 }}
                 className="flex items-center gap-2 bg-[#c3dbe0]/30 rounded-lg p-3"
               >
-                <feature.icon className="w-4 h-4 text-[#13afdc]" />
+                <feature.icon className="w-4 h-4 text-[#2563eb]" />
                 <span className="text-sm font-medium text-[#0d0d0d]">
                   {feature.label}
                 </span>
@@ -104,7 +104,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
           {/* CTA Button */}
           <motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
             <Button
-              className="w-full bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white font-semibold hover:shadow-xl"
+              className="w-full bg-[#2563eb] text-white font-semibold hover:shadow-xl"
               size="lg"
             >
               Learn More
@@ -113,7 +113,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
           </motion.div>
 
           {/* Checkmark */}
-          <div className="absolute top-4 right-4 w-8 h-8 bg-[#13afdc] rounded-full flex items-center justify-center shadow-lg">
+          <div className="absolute top-4 right-4 w-8 h-8 bg-[#2563eb] rounded-full flex items-center justify-center shadow-lg">
             <CheckCircle className="w-5 h-5 text-white" />
           </div>
         </CardContent>
@@ -134,7 +134,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
 
 const ModulesSection: React.FC = () => {
   return (
-    <section className="py-16 md:py-24 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
+    <section className="py-16 md:py-16 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
       {/* Decorative background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         <motion.div
@@ -152,19 +152,16 @@ const ModulesSection: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 px-6 py-2 bg-[#13afdc]/10 text-[#13afdc] border-0">
+          <Badge className="mb-4 px-6 py-2 bg-blue-50 text-[#2563eb] border-0 font-bold">
             <Sparkles className="w-4 h-4 mr-2 inline" />
             {home.module.badge}
           </Badge>
 
           <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#0d0d0d] mb-6">
             {home.module.title}{" "}
-            <span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
-              Offers
-            </span>
           </h2>
 
-          <p className="text-lg md:text-xl text-[#7c7a7c] max-w-3xl mx-auto">
+          <p className="text-lg md:text-xl text-black max-w-3xl mx-auto">
             {home.module.subtitle}
           </p>
         </motion.div>
@@ -184,7 +181,7 @@ const ModulesSection: React.FC = () => {
           transition={{ delay: 0.6 }}
           className="mt-16 text-center"
         >
-          <Card className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] border-0 max-w-4xl mx-auto">
+          <Card className="bg-[#2563eb] border-0 max-w-4xl mx-auto">
             <CardContent className="p-8 md:p-12">
               <h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
                 Ready to Transform Your Business?
@@ -195,7 +192,7 @@ const ModulesSection: React.FC = () => {
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-white text-[#13afdc] hover:bg-gray-100 font-semibold"
+                  className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
                 >
                   Start Free Trial
                   <Sparkles className="ml-2 w-5 h-5" />

app/(public)/_homeComponents/Pricing.tsx

@@ -5,14 +5,7 @@ import { motion } from "framer-motion";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import {
+import { Check, Sparkles, Zap, Shield, Star, Clock } from "lucide-react";
-  Check,
-  Sparkles,
-  Zap,
-  Shield,
-  Star,
-  Clock,
-} from "lucide-react";
 import { useRouter } from "next/navigation";
 
 /* ------------------ DATA ------------------ */
@@ -95,26 +88,19 @@ const comparisonData = [
 /* ------------------ HERO ------------------ */
 
 const PricingHero = () => (
-  <section className="py-20 bg-gradient-to-br from-[#c3dbe0] to-white relative overflow-hidden">
+  <section className="py-20 bg-[#2563eb] relative overflow-hidden">
     <div className="max-w-6xl mx-auto px-4 text-center">
-      <Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white border-0 text-base">
+      <Badge className="mb-6 px-6 py-3 bg-white text-[#2563eb] font-bold border-0 text-base">
         <Star className="w-4 h-4 mr-2 inline fill-white" />
         SPECIAL LAUNCH OFFER
       </Badge>
 
-      <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-[#0d0d0d] mb-6">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6">
-        Hire smarter. Track smarter.{" "}
+        Hire smarter. Track smarter, Manage everything from one platform.
-        <span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
-          Manage everything
-        </span>{" "}
-        from one platform.
       </h1>
 
-      <p className="text-xl md:text-2xl text-[#7c7a7c] max-w-4xl mx-auto">
+      <p className="text-xl md:text-2xl text-white max-w-4xl mx-auto">
-        One powerful ATS with{" "}
+        One powerful ATS with FREE HRMS & CRM{" "}
-        <span className="font-bold text-[#13afdc]">
-          FREE HRMS & CRM
-        </span>
       </p>
     </div>
   </section>
@@ -123,15 +109,16 @@ const PricingHero = () => (
 /* ------------------ PRICING CARD ------------------ */
 
 const MainPricingCard = () => {
-  const [billingCycle, setBillingCycle] =
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
-    useState<"monthly" | "yearly">("monthly");
+    "monthly",
+  );
 
   return (
     <section 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">
-            <Badge className="mb-4 px-6 py-2 bg-[#c3dbe0] text-[#0d0d0d]">
+            <Badge className="mb-4 px-6 py-2 bg-blue-50 text-[#2563eb] font-extrabold">
               ALL-IN-ONE PLAN
             </Badge>
 
@@ -145,7 +132,7 @@ const MainPricingCard = () => {
                 onClick={() => setBillingCycle("monthly")}
                 className={`px-6 py-2 rounded-lg font-semibold ${
                   billingCycle === "monthly"
-                    ? "bg-[#13afdc] text-white"
+                    ? "bg-[#2563eb] text-white"
                     : "bg-gray-100 text-[#7c7a7c]"
                 }`}
               >
@@ -155,7 +142,7 @@ const MainPricingCard = () => {
                 onClick={() => setBillingCycle("yearly")}
                 className={`px-6 py-2 rounded-lg font-semibold ${
                   billingCycle === "yearly"
-                    ? "bg-[#13afdc] text-white"
+                    ? "bg-[#2563eb] text-white"
                     : "bg-gray-100 text-[#7c7a7c]"
                 }`}
               >
@@ -181,7 +168,7 @@ const MainPricingCard = () => {
             )}
 
             {/* CTA */}
-            <Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
+            <Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-[#2563eb] text-white">
               <Zap className="w-5 h-5 mr-2" />
               Start 30-Day Free Trial
             </Button>
@@ -192,10 +179,10 @@ const MainPricingCard = () => {
                 <div
                   key={i}
                   className={`flex gap-3 p-3 rounded-lg ${
-                    f.highlight ? "bg-[#c3dbe0]" : ""
+                    f.highlight ? "bg-blue-100" : ""
                   }`}
                 >
-                  <Check className="text-[#13afdc]" />
+                  <Check className="text-[#2563eb]" />
                   <span className="text-[#0d0d0d]">{f.text}</span>
                 </div>
               ))}
@@ -218,7 +205,7 @@ const ComparisonTable = () => (
 
       <div className="overflow-x-auto rounded-2xl shadow border border-[#c3dbe0]">
         <table className="w-full">
-          <thead className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
+          <thead className="bg-[#2563eb] text-white">
             <tr>
               <th className="px-6 py-4 text-left">Feature</th>
               <th className="px-6 py-4 text-center">Winixco</th>
@@ -229,10 +216,7 @@ const ComparisonTable = () => (
           </thead>
           <tbody>
             {comparisonData.map((row, i) => (
-              <tr
+              <tr key={i} className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}>
-                key={i}
-                className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}
-              >
                 <td className="px-6 py-4 font-medium text-[#0d0d0d]">
                   {row.feature}
                 </td>
@@ -268,12 +252,12 @@ const CtaSection = () => {
         <h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
           Need Bulk Pricing or a Demo?
         </h2>
-        <p className="text-xl text-[#7c7a7c] mb-8">
+        <p className="text-xl text-black mb-8">
           Talk to our sales team for custom enterprise plans
         </p>
 
         <Button
-          className="bg-[#13afdc] text-white px-10 py-6 text-lg"
+          className="bg-[#2563eb] text-white px-10 py-6 text-lg"
           onClick={() => router.push("/contact")}
         >
           Contact Us

app/(public)/_homeComponents/StatsSection.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const stats = [
+  {
+    value: "60-80%",
+    label: "Faster Hiring Process",
+  },
+  {
+    value: "500+",
+    label: "Happy Customers",
+  },
+  {
+    value: "50+",
+    label: "Countries Supported",
+  },
+  {
+    value: "100+",
+    label: "Integrations Available",
+  },
+];
+
+export default function StatsSection() {
+  return (
+    <section className="bg-[#dbe7f4] py-20">
+      <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-10 text-center">
+        {stats.map((stat, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.2 }}
+            viewport={{ once: true }}
+          >
+            <h2 className="text-5xl font-bold text-[#2563eb]">
+              {stat.value}
+            </h2>
+
+            <p className="mt-3 text-gray-700 text-lg">
+              {stat.label}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/(public)/_homeComponents/TestiMonialSection.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
+
+const testimonials = [
+  {
+    quote:
+      "Winixco cut our hiring time in half. The AI resume screening is incredibly accurate, and our team loves the seamless integration.",
+    name: "Sarah Chen",
+    role: "Head of Talent, TechScale Inc.",
+  },
+  {
+    quote:
+      "The best recruitment platform we've used. From candidate sourcing to onboarding, everything is in one place.",
+    name: "Marcus Rodriguez",
+    role: "Founder, Recruiting Plus",
+  },
+  {
+    quote:
+      "Implementing Winixco was a game-changer. The automation alone has freed up 20 hours per week for strategic work.",
+    name: "Emily Watson",
+    role: "VP HR, Global Enterprises Ltd.",
+  },
+];
+
+export default function TestimonialsSection() {
+  return (
+    <section className="py-16 bg-white">
+      <div className="max-w-7xl mx-auto px-6">
+
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold text-gray-900">
+            Trusted by Leading Companies
+          </h2>
+
+          <p className="mt-4 text-gray-600 text-lg">
+            See what recruiters and HR teams say about Winixco
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {testimonials.map((item, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.2 }}
+              viewport={{ once: true }}
+            >
+              <Card className="border-l-4 border-[#2563eb] shadow-md rounded-xl">
+                <CardContent className="p-6">
+
+                  <p className="text-gray-600 italic leading-relaxed">
+                    "{item.quote}"
+                  </p>
+
+                  <div className="mt-6">
+                    <h4 className="font-semibold text-gray-900">
+                      {item.name}
+                    </h4>
+
+                    <p className="text-[#2563eb] text-sm">
+                      {item.role}
+                    </p>
+                  </div>
+
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

app/(public)/_homeComponents/Testimonials.tsx

@@ -20,16 +20,13 @@ const Testimonials = () => {
     <section id="testimonials" className="py-24 bg-white">
       <div className="max-w-7xl mx-auto px-4">
         <AnimatedSection className="text-center mb-16">
-          <span className="inline-block px-4 py-2 bg-[#c3dbe0] text-[#0d0d0d] rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
             TESTIMONIALS
           </span>
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
-            Loved by{" "}
+            Loved by Our Clients
-            <span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
-              Our Clients
-            </span>
           </h2>
-          <p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
+          <p className="text-xl text-black max-w-3xl mx-auto">
             See what our customers have to say about their experience
           </p>
         </AnimatedSection>
@@ -42,25 +39,25 @@ const Testimonials = () => {
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -60 }}
               transition={{ duration: 0.5, ease: "easeInOut" }}
-              className="bg-gradient-to-br from-[#c3dbe0] to-white rounded-3xl p-12 shadow-xl"
+              className="bg-[#2563eb] rounded-3xl p-12 shadow-xl"
             >
-              <Quote className="w-12 h-12 text-[#13afdc] mb-6" />
+              <Quote className="w-12 h-12 text-white mb-6" />
 
-              <p className="text-2xl text-[#0d0d0d] mb-8 leading-relaxed italic">
+              <p className="text-2xl text-white mb-8 leading-relaxed italic">
                 "{testimonial.content}"
               </p>
 
               <div className="flex items-center gap-4">
-                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center text-3xl">
+                <div className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-3xl">
                   {testimonial.image}
                 </div>
 
                 <div>
-                  <h4 className="font-bold text-lg text-[#0d0d0d]">
+                  <h4 className="font-bold text-lg text-white">
                     {testimonial.name}
                   </h4>
-                  <p className="text-[#7c7a7c]">{testimonial.role}</p>
+                  <p className="text-white">{testimonial.role}</p>
-                  <p className="text-[#13afdc] font-semibold">
+                  <p className="text-white font-semibold">
                     {testimonial.company}
                   </p>
                 </div>
@@ -69,7 +66,7 @@ const Testimonials = () => {
                   {[...Array(testimonial.rating)].map((_, i) => (
                     <Star
                       key={i}
-                      className="w-5 h-5 fill-[#13afdc] text-[#13afdc]"
+                      className="w-5 h-5 fill-[#dccb13] text-[#dccb13]"
                     />
                   ))}
                 </div>
@@ -85,7 +82,7 @@ const Testimonials = () => {
                 onClick={() => setCurrentIndex(index)}
                 className={`h-3 rounded-full transition-all duration-300 ${
                   index === currentIndex
-                    ? "bg-[#13afdc] w-8"
+                    ? "bg-[#2563eb] w-8"
                     : "bg-gray-300 w-3 hover:bg-[#c3dbe0]"
                 }`}
               />

app/(public)/about/page.tsx

@@ -62,7 +62,7 @@ export default function AboutUs() {
           
           className="bg-white p-10 rounded-3xl shadow-xl border"
         >
-          <Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
+          <Lightbulb className="w-12 h-12 text-blue-600 mb-4" />
           <h3 className="text-3xl font-semibold mb-3">Our Vision</h3>
           <p className="text-gray-600 text-lg leading-relaxed">
             To be a global leader in CRM innovation — transforming how teams connect,
@@ -147,7 +147,7 @@ export default function AboutUs() {
       </section> */}
 
       {/* CTA */}
-      <section className="py-24 bg-gradient-to-r from-purple-600 to-blue-600 text-center text-white">
+      <section className="py-24 bg-[#2563eb] text-center text-white">
         <h2 className="text-4xl font-bold mb-4">We Grow Together</h2>
         <p className="text-lg max-w-2xl mx-auto mb-8">
           Become part of a story that’s transforming the future of CRM.

app/(public)/ats/_components/CTA.tsx

@@ -13,7 +13,7 @@ import { atsPageData } from "@/services/Constants";
 // CTA Section Component
 const CtaSection: React.FC = () => {
   return (
-    <section className="py-20 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
+    <section className="py-20 bg-[#2563eb] to-pink-600">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <motion.div
           initial={{ opacity: 0, y: 20 }}

app/(public)/ats/_components/Hero.tsx

@@ -4,37 +4,12 @@ import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import {
+import { PlayCircle, ArrowRight, Sparkles } from "lucide-react";
-  PlayCircle,
-  ArrowRight,
-  Sparkles,
-} from "lucide-react";
 import { atsPageData } from "@/services/Constants";
 
-
-
 const HeroSection: React.FC = () => {
   return (
-    <section className="relative py-24 md:py-32 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 overflow-hidden">
+    <section className="relative py-24 md:py-32 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] overflow-hidden">
-      {/* Background Animation */}
-      <div className="absolute inset-0 overflow-hidden">
-        <motion.div
-          animate={{
-            scale: [1, 1.2, 1],
-            rotate: [0, 90, 0],
-          }}
-          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-          className="absolute -top-1/2 -left-1/2 w-full h-full bg-blue-500/20 rounded-full blur-3xl"
-        />
-        <motion.div
-          animate={{
-            scale: [1.2, 1, 1.2],
-            rotate: [90, 0, 90],
-          }}
-          transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
-          className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-purple-500/20 rounded-full blur-3xl"
-        />
-      </div>
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
         <motion.div
@@ -42,12 +17,12 @@ const HeroSection: React.FC = () => {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
         >
-          <Badge className="mb-6 px-6 py-2  bg-purple-100 text-purple-700  border-white/30 backdrop-blur-sm text-sm font-semibold">
+          <Badge className="mb-6 px-6 py-2  bg-blue-50 text-[#2563eb]  border-blue-200 backdrop-blur-sm text-sm font-semibold">
             <Sparkles className="w-4 h-4 mr-2 inline" />
             {atsPageData.hero.badge}
           </Badge>
 
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 bg-black bg-clip-text text-transparent">
             {atsPageData.hero.title}
           </h1>
 
@@ -78,4 +53,4 @@ const HeroSection: React.FC = () => {
   );
 };
 
-export default HeroSection
+export default HeroSection;

app/(public)/ats/_components/Overview.tsx

@@ -42,7 +42,7 @@ const OverviewSection: React.FC = () => {
             >
               <Card className="h-full hover:shadow-xl transition-shadow duration-300 border-0 shadow-lg">
                 <CardContent className="p-8">
-                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
+                  <div className="w-16 h-16 bg-[#2563eb] rounded-2xl flex items-center justify-center mb-6">
                     <Sparkles className="w-8 h-8 text-white" />
                   </div>
                   <h3 className="text-xl font-semibold mb-3 text-gray-900">

app/(public)/contact/_components/BookDemo.tsx

@@ -29,10 +29,7 @@ const BookDemoSection = () => {
           animate={{ opacity: 1, y: 0 }}
           className="text-4xl md:text-6xl font-extrabold text-gray-900"
         >
-          🗓️ Book a Demo or{" "}
+          🗓️ Book a Demo or Consultation
-          <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-            Consultation
-          </span>
         </motion.h2>
 
         <motion.p
@@ -52,7 +49,7 @@ const BookDemoSection = () => {
         >
           {features.map((item, index) => (
             <div key={index} className="flex items-center gap-3">
-              <CheckCircle className="text-purple-600 w-6 h-6" />
+              <CheckCircle className="text-[#2563eb] w-6 h-6" />
               <p className="text-gray-700 font-medium">{item}</p>
             </div>
           ))}
@@ -66,7 +63,7 @@ const BookDemoSection = () => {
         >
           <Button
             size="lg"
-            className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-purple-600 text-white hover:bg-purple-700 hover:scale-105 transition-transform"
+            className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
           >
             <CalendarCheck className="mr-2 w-5 h-5" />
             Book My Demo
@@ -74,7 +71,7 @@ const BookDemoSection = () => {
           <Button
             variant="outline"
             size="lg"
-            className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-purple-700 hover:bg-purple-100 transition-all"
+            className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-blue-700 hover:bg-purple-100 transition-all"
           >
             <Send className="mr-2 w-5 h-5" />
             Contact Sales

app/(public)/contact/_components/ChooseWinixco.tsx

@@ -26,10 +26,7 @@ const ChooseWinixco = () => {
           viewport={{ once: true }}
           className="text-4xl md:text-5xl font-bold text-gray-900"
         >
-          ⭐ Why Businesses{" "}
+          ⭐ Why Businesses Choose Winixco
-          <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-            Choose Winixco
-          </span>
         </motion.h2>
 
         {/* Feature Grid */}
@@ -43,7 +40,7 @@ const ChooseWinixco = () => {
               viewport={{ once: true }}
               className="bg-white border border-gray-200 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 flex items-center gap-4"
             >
-              <item.icon className="w-8 h-8 text-purple-600" />
+              <item.icon className="w-8 h-8 text-[#2563eb]" />
               <p className="text-lg text-gray-700 font-medium">{item.text}</p>
             </motion.div>
           ))}
@@ -78,14 +75,14 @@ const WeLoveToHearFromYou = () => {
         <div className="mt-10 flex flex-wrap justify-center gap-6">
           <Link
             href="#contact"
-            className="px-8 py-4 text-lg font-semibold rounded-xl bg-purple-600 hover:bg-purple-700 text-white transition-all hover:scale-105"
+            className="px-8 py-4 text-lg font-semibold rounded-xl bg-[#2563eb] hover:bg-blue-700 text-white transition-all hover:scale-105"
           >
             👉 Send Message
           </Link>
 
           <Link
             href="#book-demo"
-            className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-purple-600 text-purple-700 hover:bg-purple-50 transition-all hover:scale-105"
+            className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
           >
             👉 Book a Demo
           </Link>

app/(public)/contact/_components/ContactForm.tsx

@@ -142,7 +142,7 @@ const ContactForm: React.FC = () => {
               <Button
                 onClick={handleSubmit}
                 size="lg"
-                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
+                className="w-full bg-[#2563eb] hover:from-purple-700 hover:to-pink-700 text-white"
               >
                 Send Message
                 <Send className="ml-2 w-5 h-5" />

app/(public)/contact/_components/GetInTouch.tsx

@@ -25,7 +25,7 @@ const GetInTouch: React.FC = () => {
           className="text-4xl md:text-5xl font-extrabold text-gray-900"
         >
           {CONTACT_DATA.getInTouch.title}
-          <span className="block mt-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+          <span className="block mt-2 bg-[#2563eb] bg-clip-text text-transparent">
             Let’s Connect
           </span>
         </motion.h2>
@@ -64,7 +64,7 @@ const GetInTouch: React.FC = () => {
 
               <p className="text-gray-600 text-sm mb-2">{method.description}</p>
 
-              <p className="font-semibold text-purple-700">{method.contact}</p>
+              <p className="font-semibold text-[#2563eb]">{method.contact}</p>
             </motion.div>
           ))}
         </div>

app/(public)/contact/_components/HappyCustomers.tsx

@@ -31,7 +31,7 @@ const HappyCustomers: React.FC = () => (
           </h2>
           <Button
             size="lg"
-            className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white"
+            className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
           >
             Try for FREE
           </Button>
@@ -40,7 +40,7 @@ const HappyCustomers: React.FC = () => (
         <div>
           <div className="flex items-center gap-4 mb-8">
             <div className="flex items-center gap-2">
-              <Users className="w-8 h-8 text-purple-600" />
+              <Users className="w-8 h-8 text-[#2563eb]" />
               <div>
                 <p className="text-3xl font-bold text-gray-900">{CONTACT_DATA.customers.count}</p>
                 <p className="text-sm text-gray-600">{CONTACT_DATA.customers.label}</p>

app/(public)/contact/_components/HeroSection.tsx

@@ -4,32 +4,19 @@ import { motion } from "framer-motion";
 import { Badge } from "@/components/ui/badge";
 
 const HeroSection: React.FC = () => (
-  <section className="relative overflow-hidden py-24">
+  <section className="relative overflow-hidden py-16 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)]">
-    {/* Animated Background Glow */}
-    <motion.div
-      className="absolute inset-0 opacity-20 pointer-events-none"
-      animate={{ scale: [1, 1.05, 1] }}
-      transition={{ duration: 10, repeat: Infinity }}
-    >
-      <div className="absolute w-96 h-96 bg-purple-400 blur-3xl rounded-full -top-10 -left-10"></div>
-      <div className="absolute w-80 h-80 bg-pink-400 blur-3xl rounded-full bottom-0 right-0"></div>
-    </motion.div>
-
     {/* Content */}
     <motion.div
       initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
       className="relative z-10 text-center px-6 max-w-4xl mx-auto"
     >
-      <Badge className="mb-5 px-6 py-3 bg-purple-100 text-purple-700 tracking-wide">
+      <Badge className="mb-5 px-6 py-3 bg-blue-50 text-[#2563eb] tracking-wide">
         #1 CUSTOMER SUPPORT
       </Badge>
 
       <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 leading-tight">
-        We’re Here to Help You{" "}
+        We’re Here to Help You Transform Your Business
-        <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-          Transform Your Business
-        </span>
       </h1>
 
       <p className="text-lg md:text-xl mt-6 text-gray-600 max-w-3xl mx-auto leading-relaxed">

app/(public)/contact/_components/PartnerWithUs.tsx

@@ -29,10 +29,7 @@ const PartnerWithUsSection = () => {
           animate={{ opacity: 1, y: 0 }}
           className="text-4xl md:text-5xl font-extrabold text-gray-900"
         >
-          🤝 Partner With{" "}
+          🤝 Partner With Winixco
-          <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-            Winixco
-          </span>
         </motion.h2>
 
         <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
@@ -49,7 +46,7 @@ const PartnerWithUsSection = () => {
               transition={{ delay: index * 0.1 }}
               className="flex items-center gap-3"
             >
-              <BadgeCheck className="text-purple-600 w-6 h-6" />
+              <BadgeCheck className="text-[#2563eb] w-6 h-6" />
               <p className="text-gray-700 font-medium">{item}</p>
             </motion.div>
           ))}
@@ -60,7 +57,7 @@ const PartnerWithUsSection = () => {
           animate={{ opacity: 1, scale: 1 }}
           className="mt-12"
         >
-          <Button className="px-10 py-5 text-lg bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 hover:scale-105 transition-all">
+          <Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all">
             Become a Partner
           </Button>
         </motion.div>

app/(public)/contact/_components/TechnicalSupport.tsx

@@ -29,10 +29,7 @@ const TechnicalSupportSection = () => {
             animate={{ opacity: 1, y: 0 }}
             className="text-4xl md:text-5xl font-extrabold text-gray-900"
           >
-            🛠️ Technical Support &{" "}
+            🛠️ Technical Support & Assistance
-            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-              Assistance
-            </span>
           </motion.h2>
 
           <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
@@ -51,7 +48,7 @@ const TechnicalSupportSection = () => {
               transition={{ delay: index * 0.1 }}
               className="flex items-center gap-3"
             >
-              <HelpCircle className="text-purple-600 w-6 h-6" />
+              <HelpCircle className="text-[#2563eb] w-6 h-6" />
               <p className="text-gray-700 font-medium">{item}</p>
             </motion.div>
           ))}
@@ -60,7 +57,7 @@ const TechnicalSupportSection = () => {
         <div className="text-center mt-12">
           <Button
             variant="outline"
-            className="px-10 py-5 text-lg font-bold text-purple-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
+            className="px-10 py-5 text-lg font-bold text-blue-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
           >
             Contact Support
           </Button>

app/(public)/crm/_components/Advantages.tsx

@@ -13,7 +13,7 @@ import { crm } from "@/services/Constants";
 
 const CRMAdvantages: React.FC = () => {
   return (
-    <section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
+    <section className="py-20 px-4 bg-gradient-to-br from-blue-50 to-white">
       <div className="container mx-auto max-w-7xl">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,7 @@ const CRMAdvantages: React.FC = () => {
             Why Choose Us
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            Why Companies Choose{" "}
+            Why Companies Choose Our CRM
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              Our CRM
-            </span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Boost sales performance, strengthen customer relationships, and grow faster with a modern CRM solution.
@@ -44,9 +41,9 @@ const CRMAdvantages: React.FC = () => {
               viewport={{ once: true }}
               transition={{ delay: idx * 0.1 }}
             >
-              <Card className="bg-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-2xl transition-all duration-300 h-full group">
+              <Card className="bg-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-2xl transition-all duration-300 h-full group">
                 <CardContent className="pt-8">
-                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
+                  <div className="w-14 h-14 rounded-xl bg-[#2563eb] flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
                     <div className="text-white">{advantage.icon}</div>
                   </div>
                   <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">

app/(public)/crm/_components/CRMAnalytics.tsx

@@ -8,7 +8,7 @@ import { crm } from "@/services/Constants";
 
 const CRMAnalytics: React.FC = () => {
   return (
-    <section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
+    <section className="py-20 px-4 bg-[#2563eb] text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
 
       <div className="container mx-auto max-w-7xl relative z-10">
@@ -18,7 +18,7 @@ const CRMAnalytics: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
+          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-blue-500 flex items-center justify-center shadow-2xl">
             <BarChart3 className="w-8 h-8 text-white" />
           </div>
 

app/(public)/crm/_components/FAQ.tsx

@@ -22,14 +22,11 @@ const FAQSection: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
             FAQ
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            Frequently Asked{" "}
+            Frequently Asked Questions
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              Questions
-            </span>
           </h2>
           <p className="text-xl text-gray-600">
             Everything you need to know about our CRM Software

app/(public)/crm/_components/FinalCTA.tsx

@@ -10,7 +10,7 @@ import { crm } from "@/services/Constants";
 
 const FinalCTA: React.FC = () => {
   return (
-    <section className="relative py-24 px-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white overflow-hidden">
+    <section className="relative py-24 px-6 bg-[#2563eb] text-white overflow-hidden">
       {/* Animated Background Pattern */}
       <motion.div
         aria-hidden

app/(public)/crm/_components/Hero.tsx

@@ -34,7 +34,7 @@ const CRMHero: React.FC = () => {
             </Badge>
 
             <h1 className="text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight text-gray-900 mb-6">
-              <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+              <span className="bg-black bg-clip-text text-transparent">
                 A Powerful CRM
               </span>
               <br />
@@ -48,7 +48,7 @@ const CRMHero: React.FC = () => {
             <div className="flex flex-col sm:flex-row gap-4">
               <Button
                 size="lg"
-                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+                className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
               >
                 {crm.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
               </Button>
@@ -88,7 +88,7 @@ const CRMHero: React.FC = () => {
               />
               <div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
+                  <div className="w-12 h-12 bg-[#2563eb] rounded-xl flex items-center justify-center">
                     <UserCheck className="w-7 h-7 text-white" />
                   </div>
                   <div>

app/(public)/crm/_components/Modules.tsx

@@ -21,15 +21,13 @@ const ModulesOverview: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
             Core CRM Features
           </Badge>
 
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            CRM{" "}
+            CRM Modules Overview{" "}
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+            
-              Modules Overview
-            </span>
           </h2>
 
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">

app/(public)/crm/_components/WorkFlow.tsx

@@ -24,14 +24,11 @@ const WorkflowProcess: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
             Simple Process
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            How{" "}
+            How CRM Works
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              CRM Works
-            </span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Four simple steps to revolutionize your CRM Software
@@ -50,7 +47,7 @@ const WorkflowProcess: React.FC = () => {
             >
               <Card className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full">
                 <CardContent className="pt-8 text-center">
-                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
+                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#2563eb] flex items-center justify-center text-white text-2xl font-bold shadow-lg">
                     {step.step}
                   </div>
                   <h3 className="text-2xl font-bold text-gray-900 mb-3">

app/(public)/features/page.tsx

@@ -54,10 +54,7 @@ export default function FeaturesPage() {
       {/* HERO */}
       <section className="py-24 text-center px-6 bg-gradient-to-b from-white to-blue-50">
         <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900">
-          Powerful Features to Turbocharge Your{" "}
+          Powerful Features to Turbocharge Your Hiring & CRM
-          <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-            Hiring & CRM
-          </span>
         </h1>
         <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
           Everything you need to streamline recruitment, manage clients and
@@ -73,7 +70,7 @@ export default function FeaturesPage() {
               key={i}
               className="p-8 bg-white rounded-3xl border shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
             >
-              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 text-white flex items-center justify-center shadow-md mb-5">
+              <div className="w-14 h-14 rounded-xl bg-[#2563eb] text-white flex items-center justify-center shadow-md mb-5">
                 <feature.icon className="w-7 h-7" />
               </div>
               <h3 className="text-xl font-semibold text-gray-900 mb-2">
@@ -86,7 +83,7 @@ export default function FeaturesPage() {
       </section>
 
       {/* CTA STRIP */}
-      <section className="py-20 bg-gradient-to-r from-blue-700 to-purple-700 text-white text-center px-6">
+      <section className="py-20 bg-[#2563eb] text-white text-center px-6">
         <h2 className="text-3xl md:text-4xl font-bold mb-4">
           Experience The Future of Hiring & Client Management
         </h2>

app/(public)/gdpr-cookies/page.tsx

@@ -7,7 +7,7 @@ export default function GDPRCookiesPage() {
   return (
     <div className="bg-gray-50">
       {/* HEADER */}
-      <section className="bg-sky-200 text-gray-900 py-20 px-6">
+      <section className="bg-[#2563eb] text-white py-20 px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}

app/(public)/hrms/_components/Advantages.tsx

@@ -13,7 +13,7 @@ import { hrms } from "@/services/Constants";
 
 const HRMSAdvantages: React.FC = () => {
   return (
-    <section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
+    <section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-white">
       <div className="container mx-auto max-w-7xl">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,8 @@ const HRMSAdvantages: React.FC = () => {
             Why Choose Us
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            Why Companies Choose{" "}
+            Why Companies Choose Our HRMS
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+           
-              Our HRMS
-            </span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Transform your HR operations with cutting-edge automation and
@@ -47,7 +45,7 @@ const HRMSAdvantages: React.FC = () => {
             >
               <Card className="bg-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-2xl transition-all duration-300 h-full group">
                 <CardContent className="pt-8">
-                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
+                  <div className="w-14 h-14 rounded-xl bg-[#2563eb] flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
                     <div className="text-white">{advantage.icon}</div>
                   </div>
                   <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">

app/(public)/hrms/_components/FAQ.tsx

@@ -22,14 +22,12 @@ const FAQSection: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
             FAQ
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            Frequently Asked{" "}
+            Frequently Asked Questions
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+            
-              Questions
-            </span>
           </h2>
           <p className="text-xl text-gray-600">
             Everything you need to know about our HRMS platform

app/(public)/hrms/_components/FinalCTA.tsx

@@ -10,7 +10,7 @@ import { hrms } from "@/services/Constants";
 
 const FinalCTA: React.FC = () => {
   return (
-    <section className="relative py-24 px-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white overflow-hidden">
+    <section className="relative py-24 px-6 bg-[#2563eb] text-white overflow-hidden">
       {/* Animated Background Pattern */}
       <motion.div
         aria-hidden

app/(public)/hrms/_components/HRAnalytics.tsx

@@ -13,7 +13,7 @@ import { hrms } from "@/services/Constants";
 
 const HRAnalytics: React.FC = () => {
   return (
-    <section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
+    <section className="py-20 px-4 bg-[#2563eb] text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
 
       <div className="container mx-auto max-w-7xl relative z-10">
@@ -23,7 +23,7 @@ const HRAnalytics: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
+          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-blue-500 flex items-center justify-center shadow-2xl">
             <BarChart3 className="w-8 h-8 text-white" />
           </div>
           <h2 className="text-4xl md:text-5xl font-bold mb-4">

app/(public)/hrms/_components/Hero.tsx

@@ -34,7 +34,7 @@ const HRMSHero: React.FC = () => {
             </Badge>
 
             <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight text-gray-900 mb-6">
-              <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+              <span className="text-gray-900 ">
                 Modern HRMS
               </span>
               <br />
@@ -48,7 +48,7 @@ const HRMSHero: React.FC = () => {
             <div className="flex flex-col sm:flex-row gap-4">
               <Button
                 size="lg"
-                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+                className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
               >
                 {hrms.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
               </Button>
@@ -88,7 +88,7 @@ const HRMSHero: React.FC = () => {
               />
               <div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
                 <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
+                  <div className="w-12 h-12 bg-[#2563eb] rounded-xl flex items-center justify-center">
                     <UserCheck className="w-7 h-7 text-white" />
                   </div>
                   <div>

app/(public)/hrms/_components/Modules.tsx

@@ -23,14 +23,12 @@ const ModulesOverview: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-purple-200">
             Core Modules
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            HRMS{" "}
+            HRMS Modules Overview
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+           
-              Modules Overview
-            </span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Comprehensive HR management tools to streamline every aspect of your

app/(public)/hrms/_components/WorkFlow.tsx

@@ -24,14 +24,11 @@ const WorkflowProcess: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
+          <Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
             Simple Process
           </Badge>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
-            How{" "}
+            How HRMS Works
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              HRMS Works
-            </span>
           </h2>
           <p className="text-xl text-gray-600 max-w-3xl mx-auto">
             Four simple steps to revolutionize your HR management
@@ -50,7 +47,7 @@ const WorkflowProcess: React.FC = () => {
             >
               <Card className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full">
                 <CardContent className="pt-8 text-center">
-                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
+                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#2563eb] flex items-center justify-center text-white text-2xl font-bold shadow-lg">
                     {step.step}
                   </div>
                   <h3 className="text-2xl font-bold text-gray-900 mb-3">

app/(public)/page.tsx

@@ -12,15 +12,20 @@ import CTA from "./_homeComponents/CTA";
 import AboutUs from "./_homeComponents/About";
 import ModulesSection from "./_homeComponents/Modules";
 import HowItWorks from "./_homeComponents/HowItWorks";
+import HeroSection from "./_homeComponents/HeroSection";
+import StatsSection from "./_homeComponents/StatsSection";
+import TestimonialsSection from "./_homeComponents/TestiMonialSection";
 
 export default function Page() {
   return (
     <div className="min-h-screen bg-white">
-      <Hero />
+      <HeroSection />
       <CompanySlider />
       <Features />
+      <StatsSection />
       <AboutUs />
       <ModulesSection />
+      <TestimonialsSection />
       <Benefits />
       <Testimonials />
       <Pricing />

app/(public)/privacy-policy/page.tsx

@@ -7,20 +7,20 @@ export default function PrivacyPolicyPage() {
   return (
     <div className="bg-gray-50">
       {/* HEADER SECTION */}
-      <section className="bg-sky-200 text-gray-900 py-20 px-6">
+      <section className="bg-[#2563eb] text-gray-900 py-20 px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           className="max-w-5xl mx-auto text-center"
         >
           <div className="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-white/20 backdrop-blur-xl rounded-3xl shadow-2xl">
-            <Shield className="w-10 h-10" />
+            <Shield className="w-10 h-10 text-white" />
           </div>
 
-          <h1 className="text-4xl md:text-6xl font-bold mb-4">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-white">
             Privacy Policy
           </h1>
-          <p className="text-lg md:text-xl max-w-3xl mx-auto">
+          <p className="text-lg md:text-xl max-w-3xl mx-auto text-white">
             Your trust matters. We protect your data with top-tier security,
             transparency, and compliance.
           </p>

app/(public)/refund-policy/page.tsx

@@ -7,7 +7,7 @@ export default function RefundCancellationPage() {
   return (
     <div className="bg-gray-50">
       {/* HEADER SECTION */}
-      <section className="bg-sky-200 text-gray-900 py-20 px-6">
+      <section className="bg-[#2563eb] text-white py-20 px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}

app/(public)/terms-and-conditions/page.tsx

@@ -7,7 +7,7 @@ export default function TermsPage() {
   return (
     <div className="bg-gray-50">
       {/* HEADER SECTION */}
-      <section className="bg-sky-200 text-gray-900 py-20 px-6">
+      <section className="bg-[#2563eb] text-white py-20 px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}

app/layout.tsx

@@ -6,6 +6,9 @@ import { AuthProvider } from "./provider";
 export const metadata: Metadata = {
   title: "ATS System",
   description: "Applicant Tracking System",
+  icons:{
+    icon: "./favicon.svg"
+  }
 };
 
 export default function RootLayout({

services/Constants.tsx

@@ -168,47 +168,53 @@ export const home: HomeContent = {
 
   features: [
     {
-      icon: <Sparkles className="w-6 h-6" />,
+      //icon: <Sparkles className="w-6 h-6" />,
-      title: "AI-Powered Screening",
+      icon: "🤖",
+      title: "AI Resume Screening",
       description:
-        "Advanced AI algorithms automatically screen and rank candidates based on job requirements, saving hours of manual work.",
+        "Automatically parse and rank resumes using advanced AI. Reduce screening time by 80% and find top candidates instantly.",
       color: "from-purple-500 to-pink-500",
     },
     {
-      icon: <Users className="w-6 h-6" />,
+      //icon: <Users className="w-6 h-6" />,
-      title: "Collaborative Hiring",
+      icon: "🎯",
+      title: "Smart Candidate Matching",
       description:
-        "Enable seamless collaboration between hiring managers, recruiters, and team members with real-time feedback.",
+        "ML-powered matching algorithm identifies the best-fit candidates based on skills, experience, and cultural fit.",
       color: "from-blue-500 to-cyan-500",
     },
     {
-      icon: <Zap className="w-6 h-6" />,
+      //icon: <BarChart3 className="w-6 h-6" />,
-      title: "Automated Workflows",
+      icon: "📅",
+      title: "Interview Scheduling",
       description:
-        "Set up custom workflows to automate repetitive tasks like interview scheduling, email notifications, and status updates.",
+        "Automated scheduling with calendar sync, reminders, and video interview integration. No back-and-forth emails.",
-      color: "from-orange-500 to-red-500",
-    },
-    {
-      icon: <BarChart3 className="w-6 h-6" />,
-      title: "Advanced Analytics",
-      description:
-        "Get deep insights into your hiring funnel with comprehensive reports and real-time dashboards.",
       color: "from-green-500 to-emerald-500",
     },
     {
-      icon: <Clock className="w-6 h-6" />,
+      //icon: <Clock className="w-6 h-6" />,
-      title: "Time-to-Hire Reduction",
+      icon: "🤝",
+      title: "Recruitment CRM",
       description:
-        "Reduce your hiring timeline by 60% with streamlined processes and intelligent automation.",
+        "Build and nurture your talent community. Stay connected with passive candidates for future opportunities.",
       color: "from-indigo-500 to-purple-500",
     },
     {
-      icon: <Shield className="w-6 h-6" />,
+      //icon: <Shield className="w-6 h-6" />,
-      title: "Enterprise Security",
+      icon: "👥",
+      title: "HRMS & Employee Management",
       description:
-        "SOC2 and ISO27001 certified platform ensuring your candidate data is always protected.",
+        "Seamless transition from recruitment to onboarding. Manage employee data, documents, and lifecycle in one place.",
       color: "from-teal-500 to-blue-500",
     },
+    {
+      //icon: <Zap className="w-6 h-6" />,
+      icon: "📊",
+      title: "Advanced Analytics",
+      description:
+        "Real-time insights into hiring metrics, time-to-hire, cost-per-hire, and team productivity dashboards.",
+      color: "from-orange-500 to-red-500",
+    },
   ],
 
   about: {
@@ -314,7 +320,7 @@ export const home: HomeContent = {
 
   module : {
     badge: "OUR SOLUTIONS",
-    title: "Modules We",
+    title: "Modules We Offers",
     subtitle:
       "Powerful tools designed to streamline your recruitment and HR operations",
     modules: [