home page colour changed

app/(public)/_homeComponents/About.tsx

@@ -43,7 +43,7 @@ const AboutUs: React.FC = () => {
   };
 
   return (
-    <section className="py-16 md:py-24 bg-white overflow-hidden">
+    <section className="py-16 md:py-24 bg-gradient-to-b from-[#c3dbe0]/30 to-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-blue-100 via-purple-50 to-pink-100 flex items-center justify-center">
+              <div className="aspect-[4/3] bg-gradient-to-br from-[#13afdc]/20 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-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
+                  <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">
                     <Users className="w-12 h-12 text-white" />
                   </div>
-                  <p className="text-gray-600 font-medium">
+                  <p className="text-[#7c7a7c] 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-orange-100 to-red-100 flex items-center justify-center border-4 border-white">
+              <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">
-                <Sparkles className="w-12 h-12 text-orange-500" />
+                <Sparkles className="w-12 h-12 text-[#13afdc]" />
               </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-green-100 to-teal-100 flex items-center justify-center border-4 border-white">
+              <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">
-                <Award className="w-14 h-14 text-green-600" />
+                <Award className="w-14 h-14 text-[#13afdc]" />
               </div>
             </motion.div>
 
@@ -97,27 +97,27 @@ const AboutUs: React.FC = () => {
             <motion.div
               variants={imageVariants}
               transition={{ delay: 0.6 }}
-              className="absolute bottom-4 right-4 z-30 bg-white rounded-xl shadow-2xl p-4 border border-gray-100"
+              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-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                <div className="w-12 h-12 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-lg flex items-center justify-center">
                   <Target className="w-6 h-6 text-white" />
                 </div>
                 <div>
-                  <p className="font-bold text-gray-900">500K+</p>
+                  <p className="font-bold text-[#0d0d0d]">500K+</p>
-                  <p className="text-xs text-gray-500">Successful Hires</p>
+                  <p className="text-xs text-[#7c7a7c]">Successful Hires</p>
                 </div>
               </div>
             </motion.div>
 
-            {/* Decorative Elements */}
+            {/* Decorative Blur */}
             <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 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-30 -z-10"
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-[#13afdc]/20 rounded-full blur-3xl opacity-40 -z-10"
             />
           </motion.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-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100">
+              <Badge className="mb-4 px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
                 <Sparkles className="w-4 h-4 mr-2 inline" />
                 {home.about.badge}
               </Badge>
@@ -138,21 +138,21 @@ const AboutUs: React.FC = () => {
 
             <motion.h2
               variants={itemVariants}
-              className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight"
+              className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0d0d0d] leading-tight"
             >
               {home.about.heading}
             </motion.h2>
 
             <motion.h3
               variants={itemVariants}
-              className="text-xl sm:text-2xl font-semibold text-blue-600"
+              className="text-xl sm:text-2xl font-semibold text-[#13afdc]"
             >
               {home.about.subheading}
             </motion.h3>
 
             <motion.p
               variants={itemVariants}
-              className="text-gray-600 text-lg leading-relaxed"
+              className="text-[#7c7a7c] text-lg leading-relaxed"
             >
               {home.about.description}
             </motion.p>
@@ -166,13 +166,15 @@ const AboutUs: React.FC = () => {
                 <motion.div
                   key={index}
                   whileHover={{ scale: 1.05 }}
-                  className="text-center p-4 rounded-xl bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-100"
+                  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-blue-600" />
+                  <stat.icon className="w-8 h-8 mx-auto mb-2 text-[#13afdc]" />
-                  <p className="text-2xl font-bold text-gray-900">
+                  <p className="text-2xl font-bold text-[#0d0d0d]">
                     {stat.value}
                   </p>
-                  <p className="text-xs text-gray-600 mt-1">{stat.label}</p>
+                  <p className="text-xs text-[#7c7a7c] mt-1">
+                    {stat.label}
+                  </p>
                 </motion.div>
               ))}
             </motion.div>
@@ -188,10 +190,10 @@ 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-green-100 rounded-full flex items-center justify-center">
+                  <div className="flex-shrink-0 w-6 h-6 bg-[#13afdc]/15 rounded-full flex items-center justify-center">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <CheckCircle className="w-4 h-4 text-[#13afdc]" />
                   </div>
-                  <span className="text-gray-700">{highlight}</span>
+                  <span className="text-[#0d0d0d]">{highlight}</span>
                 </motion.div>
               ))}
             </motion.div>
@@ -200,7 +202,7 @@ const AboutUs: React.FC = () => {
             <motion.div variants={itemVariants} className="pt-4">
               <Button
                 size="lg"
-                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
+                className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white shadow-lg hover:shadow-xl transition-all duration-300"
               >
                 {home.about.cta}
                 <ArrowRight className="ml-2 w-5 h-5" />
@@ -210,13 +212,13 @@ const AboutUs: React.FC = () => {
             {/* Trust Badge */}
             <motion.div
               variants={itemVariants}
-              className="flex items-center gap-2 pt-4 text-sm text-gray-500"
+              className="flex items-center gap-2 pt-4 text-sm text-[#7c7a7c]"
             >
               <div className="flex -space-x-2">
                 {[1, 2, 3, 4].map((i) => (
                   <div
                     key={i}
-                    className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold"
+                    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"
                   >
                     {i}
                   </div>

app/(public)/_homeComponents/Benefits.tsx

@@ -8,22 +8,24 @@ const Benefits = () => {
   return (
     <section
       id="solutions"
-      className="py-24 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden"
+      className="py-24 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] relative overflow-hidden"
     >
-      <div className="absolute inset-0 opacity-10">
+      {/* Soft background glow */}
-        <div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full filter blur-3xl" />
+      <div className="absolute inset-0 opacity-20">
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full filter blur-3xl" />
+        <div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl" />
       </div>
 
       <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">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
             Why Choose Winixco?
           </h2>
-          <p className="text-xl text-purple-100 max-w-3xl mx-auto">
+          <p className="text-xl text-[#0d0d0d]/70 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.
+            With automation, accuracy, and real-time syncing, every department
+            works smarter — not harder.
           </p>
         </AnimatedSection>
 
@@ -33,14 +35,18 @@ const Benefits = () => {
             <AnimatedSection key={index}>
               <motion.div
                 whileHover={{ scale: 1.05 }}
-                className="text-center p-8 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 hover:bg-white/20 transition-all"
+                className="text-center p-8 rounded-2xl bg-white/80 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-white/20 flex items-center justify-center">
+                <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">
                   <span className="text-white">{feature.icon}</span>
                 </div>
 
-                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                <h3 className="text-xl font-bold mb-3 text-[#0d0d0d]">
-                <p className="text-purple-100">{feature.description}</p>
+                  {feature.title}
+                </h3>
+                <p className="text-[#7c7a7c]">
+                  {feature.description}
+                </p>
               </motion.div>
             </AnimatedSection>
           ))}

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-purple-700 to-pink-600 text-white text-center relative overflow-hidden">
+    <section className="py-24 bg-gradient-to-r from-[#1FC8DB] to-[#7FD8E7] 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] }}
@@ -19,13 +19,13 @@ 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
-          <span className="bg-gradient-to-r from-pink-400 to-yellow-300 bg-clip-text text-transparent">
+          <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-purple-100 mb-10">
+        <p className="text-lg md:text-xl text-white/90 mb-10">
           Winixco brings HRMS, ATS & CRM together — so your teams stay aligned,
           productive and future-ready.
         </p>
@@ -33,22 +33,21 @@ const CTA = () => {
         <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-purple-700 font-bold rounded-xl shadow-lg hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
+            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"
           >
-            {" "}
+            Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
-            Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />{" "}
+          </Button>
-          </Button>{" "}
+
           <Button
             size="lg"
             variant="outline"
-            className="border-2 text-purple-700 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
+            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
-            Book a Demo{" "}
           </Button>
         </div>
 
-        <p className="mt-6 text-sm text-purple-200">
+        <p className="mt-6 text-sm text-white/80">
           No credit card required · Quick setup · Cancel anytime
         </p>
       </div>

app/(public)/_homeComponents/CompanySlider.tsx

@@ -49,3 +49,66 @@ const CompanySlider = () => {
 };
 
 export default CompanySlider
+
+
+/*"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import AnimatedSection from "./Animated";
+import { home } from "@/services/Constants";
+
+// Company Logos Slider
+const CompanySlider = () => {
+  return (
+    <section className="py-16 bg-[#0d0d0d]">
+      <div className="max-w-7xl mx-auto px-4">
+        <AnimatedSection>
+          <p className="text-center text-[#c3dbe0] font-semibold mb-12 tracking-wider">
+            TRUSTED BY LEADING COMPANIES WORLDWIDE
+          </p>
+        </AnimatedSection>
+
+        <div className="relative overflow-hidden">
+          <motion.div
+            animate={{ x: ["0%", "-50%"] }}
+            transition={{
+              duration: 30,
+              repeat: Infinity,
+              ease: "linear",
+            }}
+            className="flex gap-12 items-center"
+          >
+            {[...home.companies, ...home.companies].map(
+              (company, index) => (
+                <div
+                  key={index}
+                  className="
+                    flex items-center gap-3 
+                    px-6 py-4 
+                    bg-[#c3dbe0]/10 
+                    border border-[#c3dbe0]/20
+                    rounded-xl 
+                    min-w-fit
+                    transition-all duration-300
+                    hover:bg-[#13afdc]
+                    hover:shadow-lg
+                    hover:scale-105
+                  "
+                >
+                  <span className="text-4xl text-[#13afdc]">
+                    {company.logo}
+                  </span>
+                  <span className="text-xl font-bold text-[#c3dbe0] whitespace-nowrap group-hover:text-white">
+                    {company.name}
+                  </span>
+                </div>
+              )
+            )}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CompanySlider; */

app/(public)/_homeComponents/FAQ.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, {  } from "react";
+import React from "react";
 import { motion } from "framer-motion";
 import {
   Accordion,
@@ -10,28 +10,26 @@ import {
 import AnimatedSection from "./Animated";
 import { home } from "@/services/Constants";
 
-
-
 // FAQ Section
 const FAQ = () => {
   return (
     <section
       id="faq"
-      className="py-24 bg-gradient-to-b from-white to-purple-50"
+      className="py-24 bg-gradient-to-b from-white to-[#c3dbe0]/40"
     >
       <div className="max-w-4xl mx-auto px-4">
         <AnimatedSection className="text-center mb-16">
-          <span className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
             FAQ
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
             Frequently Asked{" "}
-            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
               Questions
             </span>
           </h2>
-          <p className="text-xl text-gray-600">
+          <p className="text-xl text-[#7c7a7c]">
-            Everything you need to know about TalentFlow
+            Everything you need to know about Winixco
           </p>
         </AnimatedSection>
 
@@ -47,12 +45,12 @@ const FAQ = () => {
               >
                 <AccordionItem
                   value={`item-${index}`}
-                  className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow border-0 px-6"
+                  className="bg-white rounded-xl shadow-md hover:shadow-lg transition-all border border-[#c3dbe0]/60 px-6"
                 >
-                  <AccordionTrigger className="text-left font-semibold text-lg hover:no-underline py-6">
+                  <AccordionTrigger className="text-left font-semibold text-lg text-[#0d0d0d] hover:no-underline py-6">
                     {item.question}
                   </AccordionTrigger>
-                  <AccordionContent className="text-gray-600 pb-6 leading-relaxed">
+                  <AccordionContent className="text-[#7c7a7c] pb-6 leading-relaxed">
                     {item.answer}
                   </AccordionContent>
                 </AccordionItem>
@@ -65,4 +63,4 @@ const FAQ = () => {
   );
 };
 
-export default FAQ
+export default FAQ;

app/(public)/_homeComponents/Features.tsx

@@ -10,20 +10,22 @@ const Features = () => {
   return (
     <section
       id="features"
-      className="py-24 bg-gradient-to-b from-white to-purple-50"
+      className="py-24 bg-gradient-to-b from-[#c3dbe0]/40 to-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-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
             POWERFUL FEATURES
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
             All-in-One ATS, HRMS & CRP{" "}
-            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[#13afdc] to-[#13afdc] bg-clip-text text-transparent">
               Solutions
             </span>
           </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+
+          <p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
             Explore features across all our products designed to scale your
             hiring success.
           </p>
@@ -36,17 +38,28 @@ const Features = () => {
                 whileHover={{ y: -8, scale: 1.02 }}
                 className="h-full"
               >
-                <Card className="h-full border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
+                <Card className="h-full bg-white border border-[#c3dbe0] shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
                   <CardContent className="p-8">
                     <div
-                      className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}
+                      className="
+                        w-14 h-14 rounded-xl 
+                        bg-gradient-to-br from-[#13afdc] to-[#c3dbe0]
+                        flex items-center justify-center 
+                        mb-6 
+                        group-hover:scale-110 
+                        transition-transform
+                      "
                     >
-                      <div className="text-white">{feature.icon}</div>
+                      <div className="text-white">
+                        {feature.icon}
                       </div>
-                    <h3 className="text-xl font-bold mb-3 text-gray-800">
+                    </div>
+
+                    <h3 className="text-xl font-bold mb-3 text-[#0d0d0d]">
                       {feature.title}
                     </h3>
-                    <p className="text-gray-600 leading-relaxed">
+
+                    <p className="text-[#7c7a7c] leading-relaxed">
                       {feature.description}
                     </p>
                   </CardContent>

app/(public)/_homeComponents/Header.tsx

@@ -13,10 +13,14 @@ const Header = () => {
   useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 10);
     window.addEventListener("scroll", handleScroll);
-
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  // Remove Blogs and Careers
+  const navigation = home.navigation.filter(
+    (item) => item.name !== "Blogs" && item.name !== "Careers"
+  );
+
   return (
     <motion.header
       initial={{ y: -80 }}
@@ -28,7 +32,7 @@ const Header = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center py-4">
 
-          {/* 🔥 Logo */}
+          {/* Logo */}
           <motion.div whileHover={{ scale: 1.05 }}>
             <Link href="/">
               <img
@@ -39,13 +43,13 @@ const Header = () => {
             </Link>
           </motion.div>
 
-          {/* 🖥️ Desktop Navigation */}
+          {/* Desktop Navigation */}
           <nav className="hidden md:flex items-center space-x-8">
-            {home.navigation.map((item) => (
+            {navigation.map((item) => (
               <motion.div key={item.name} whileHover={{ scale: 1.05 }}>
                 <Link
                   href={item.href}
-                  className="text-gray-700 hover:text-purple-600 font-medium"
+                  className="text-gray-700 hover:text-[#1FC8DB] font-medium"
                 >
                   {item.name}
                 </Link>
@@ -57,12 +61,18 @@ const Header = () => {
             <Button variant="ghost" className="font-medium">
               Sign In
             </Button>
-            <Button className="bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium">
+            <Button
+              className="text-white font-medium"
+              style={{
+                background:
+                  "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
+              }}
+            >
               Start Free Trial
             </Button>
           </div>
 
-          {/* 📱 Mobile Menu Icon */}
+          {/* Mobile Menu Icon */}
           <button
             onClick={() => setIsOpen(!isOpen)}
             className="md:hidden p-2 rounded-lg hover:bg-gray-100"
@@ -71,7 +81,7 @@ const Header = () => {
           </button>
         </div>
 
-        {/* 📱 Mobile Drawer Menu */}
+        {/* Mobile Drawer Menu */}
         {isOpen && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}
@@ -80,11 +90,11 @@ const Header = () => {
             className="md:hidden pb-6"
           >
             <div className="flex flex-col space-y-4">
-              {home.navigation.map((item) => (
+              {navigation.map((item) => (
                 <Link
                   key={item.name}
                   href={item.href}
-                  className="text-gray-700 hover:text-purple-600 font-medium"
+                  className="text-gray-700 hover:text-[#1FC8DB] font-medium"
                   onClick={() => setIsOpen(false)}
                 >
                   {item.name}
@@ -93,7 +103,13 @@ const Header = () => {
               <Button variant="outline" className="w-full">
                 Sign In
               </Button>
-              <Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600">
+              <Button
+                className="w-full text-white"
+                style={{
+                  background:
+                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
+                }}
+              >
                 Start Free Trial
               </Button>
             </div>

app/(public)/_homeComponents/Hero.tsx

@@ -1,148 +1,345 @@
 "use client";
-import React from "react";
+
 import { motion } from "framer-motion";
-import { Check, ArrowRight, PlayCircle, Users, UserCog, Briefcase } from "lucide-react";
+import {
+  ArrowRight,
+  PlayCircle,
+  Users,
+  UserCog,
+  Briefcase,
+  Check,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { home } from "@/services/Constants";
 
 const Hero = () => {
   return (
-    <section className="relative pt-32 pb-24 px-4 overflow-hidden bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
+    <section
-      {/* Background Animation */}
+      className="
-      <div className="absolute inset-0 overflow-hidden">
+        relative overflow-hidden
-        <motion.div
+        bg-white
-          animate={{ scale: [1, 1.2, 1], rotate: [0, 90, 0] }}
+        pt-28 pb-20 md:pt-32 md:pb-24
-          transition={{ duration: 20, repeat: Infinity }}
+      "
-          className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
+    >
+      {/* Background grid + Java/Botticelli glow */}
+      <div className="pointer-events-none absolute inset-0">
+        <div
+          className="absolute inset-0 opacity-[0.05]"
+          style={{
+            backgroundImage:
+              "linear-gradient(to right, rgba(15,23,42,1) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,1) 1px, transparent 1px)",
+            backgroundSize: "56px 56px",
+          }}
         />
+
+        {/* Top glow */}
         <motion.div
-          animate={{ scale: [1.2, 1, 1.2], rotate: [90, 0, 90] }}
+          aria-hidden
-          transition={{ duration: 25, repeat: Infinity }}
+          initial={{ opacity: 0.35, scale: 0.95 }}
-          className="absolute top-40 -right-20 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
+          animate={{ opacity: [0.25, 0.4, 0.25], scale: [0.95, 1.05, 0.95] }}
+          transition={{ duration: 12, repeat: Infinity }}
+          className="absolute -top-24 -left-24 h-80 w-80 rounded-full blur-3xl"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(31,200,219,0.45) 0%, transparent 60%)",
+          }}
         />
+
+        {/* Bottom glow */}
         <motion.div
-          animate={{ scale: [1, 1.3, 1], rotate: [0, -90, 0] }}
+          aria-hidden
-          transition={{ duration: 30, repeat: Infinity }}
+          initial={{ opacity: 0.25, scale: 0.95 }}
-          className="absolute -bottom-20 left-1/2 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
+          animate={{ opacity: [0.18, 0.32, 0.18], scale: [0.95, 1.08, 0.95] }}
+          transition={{ duration: 14, repeat: Infinity }}
+          className="absolute -bottom-32 right-0 h-[28rem] w-[28rem] rounded-full blur-3xl"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(127,216,231,0.55) 0%, transparent 62%)",
+          }}
         />
       </div>
 
-      <div className="max-w-7xl mx-auto relative z-10 text-center">
+      <div className="relative mx-auto max-w-7xl px-4">
+        <div className="grid items-center gap-10 lg:grid-cols-2">
+          {/* Left: copy */}
+          <div className="text-center lg:text-left">
             {/* Badge */}
-        <motion.span
+            <motion.div
-          initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
+              transition={{ duration: 0.5 }}
-          className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-6"
+              className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium"
+              style={{
+                borderColor: "rgba(31,200,219,0.35)",
+                backgroundColor: "rgba(31,200,219,0.10)",
+                color: "#065F67",
+              }}
             >
-          🚀 All-In-One Talent & Workforce Platform
+              <span
-        </motion.span>
+                className="inline-block h-2 w-2 rounded-full"
+                style={{ backgroundColor: "#1FC8DB" }}
+              />
+              All-in-one ATS • HRMS • CRM for modern teams
+            </motion.div>
 
             {/* Title */}
             <motion.h1
-          initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 14 }}
               animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.1 }}
+              transition={{ duration: 0.55, delay: 0.05 }}
-          className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight"
+              className="mt-6 text-4xl font-extrabold tracking-tight text-slate-900 md:text-6xl"
             >
-          Build Powerful{" "}
+              Hire faster with a{" "}
-          <span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
+              <span
-            ATS, HRMS & CRM
+                className="bg-clip-text text-transparent"
-          </span>{" "}
+                style={{
-          Solutions
+                  backgroundImage:
+                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
+                }}
+              >
+                clean ATS workflow
+              </span>
             </motion.h1>
 
             {/* Subtext */}
             <motion.p
-          initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 14 }}
               animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
+              transition={{ duration: 0.55, delay: 0.12 }}
-          className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto"
+              className="mt-5 max-w-xl text-lg leading-relaxed text-slate-600 md:text-xl"
             >
-          Winixco helps organizations simplify hiring, manage employees,
+              Winixco streamlines pipelines, interview scheduling, and employee
-          and enhance client relationships — all in one platform.
+              operations—so your team can focus on decisions, not admin work.
             </motion.p>
 
-        {/* CTA Buttons */}
+            {/* CTAs */}
             <motion.div
-          initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 14 }}
               animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.3 }}
+              transition={{ duration: 0.55, delay: 0.2 }}
-          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+              className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center lg:justify-start justify-center"
             >
               <Button
                 size="lg"
-            className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-6 text-lg font-semibold rounded-xl shadow-xl hover:scale-105 transition-all"
+                className="rounded-xl px-7 py-6 text-base font-semibold shadow-md text-white"
+                style={{
+                  background:
+                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
+                }}
               >
-            Book a Demo <ArrowRight className="ml-2 w-5 h-5" />
+                Book a Demo <ArrowRight className="ml-2 h-5 w-5" />
               </Button>
+
               <Button
                 size="lg"
                 variant="outline"
-            className="px-8 py-6 text-lg font-semibold rounded-xl border-2 hover:bg-gray-50"
+                className="rounded-xl px-7 py-6 text-base font-semibold border-slate-300"
               >
-            <PlayCircle className="mr-2 w-5 h-5" />
+                <PlayCircle className="mr-2 h-5 w-5" />
                 Watch Overview
               </Button>
             </motion.div>
 
-        {/* Trust checklist */}
+            {/* Trust line */}
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
+              transition={{ duration: 0.55, delay: 0.28 }}
-          className="mt-8 flex justify-center gap-4 text-gray-600 text-sm"
+              className="mt-5 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-600 lg:justify-start"
             >
-          <Check className="w-5 h-5 text-green-500" /> No credit card required
+              <span className="inline-flex items-center gap-2">
-          <span className="mx-2">•</span>
+                <Check className="h-4 w-4 text-emerald-500" />
-          <Check className="w-5 h-5 text-green-500" /> 14-day free trial
+                No credit card required
+              </span>
+              <span className="hidden sm:inline text-slate-300">•</span>
+              <span className="inline-flex items-center gap-2">
+                <Check className="h-4 w-4 text-emerald-500" />
+                14-day free trial
+              </span>
             </motion.div>
 
-        {/* Product Highlight Cards */}
+            {/* Feature chips */}
-        <motion.div
+            <div className="mt-10 flex flex-wrap justify-center gap-3 lg:justify-start">
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.7, delay: 0.45 }}
-          className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6"
-        >
               {[
-            { icon: Users, title: "ATS", desc: "Automate hiring, AI screening & smoother interviews." },
+                { icon: Users, title: "ATS", desc: "Pipeline + sourcing" },
-            { icon: UserCog, title: "HRMS", desc: "Employee onboarding, payroll & performance." },
+                { icon: UserCog, title: "HRMS", desc: "Onboarding + reviews" },
-            { icon: Briefcase, title: "CRM", desc: "Manage clients & strengthen candidate relationships." },
+                { icon: Briefcase, title: "CRM", desc: "Clients + pools" },
-          ].map((item, i) => (
+              ].map((f, i) => (
-            <motion.div
+                <div
                   key={i}
-              whileHover={{ scale: 1.05 }}
+                  className="flex items-center gap-3 rounded-2xl border bg-white px-4 py-3"
-              className="bg-white p-6 rounded-2xl shadow-lg border border-purple-100"
+                  style={{ borderColor: "rgba(15,23,42,0.10)" }}
                 >
-              <item.icon className="w-10 h-10 text-purple-600 mx-auto mb-4" />
+                  <div
-              <h3 className="text-xl font-bold mb-2">{item.title}</h3>
+                    className="grid h-10 w-10 place-items-center rounded-xl"
-              <p className="text-gray-600 text-sm">{item.desc}</p>
+                    style={{ backgroundColor: "rgba(31,200,219,0.14)" }}
-            </motion.div>
-          ))}
-        </motion.div>
-
-        {/* Stats Section */}
-        <motion.div
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.55 }}
-          className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8"
                   >
-          {home.stats.map((stat, index) => (
+                    <f.icon className="h-5 w-5 text-slate-800" />
-            <motion.div
+                  </div>
-              key={index}
+                  <div className="leading-tight">
-              whileHover={{ scale: 1.05 }}
+                    <div className="text-sm font-semibold text-slate-900">
-              className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg"
+                      {f.title}
-            >
+                    </div>
-              <div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">
+                    <div className="text-xs text-slate-600">{f.desc}</div>
-                {stat.value}
+                  </div>
                 </div>
-              <div className="text-gray-700 font-medium">{stat.label}</div>
-            </motion.div>
               ))}
+            </div>
+          </div>
+
+          {/* Right preview stays same, only accent changed */}
+          <motion.div
+            initial={{ opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.65, delay: 0.18 }}
+            className="relative"
+          >
+            <div className="rounded-3xl border bg-white shadow-xl border-slate-200">
+              {/* Fake topbar */}{" "}
+              <div
+                className="flex items-center justify-between border-b px-5 py-4"
+                style={{ borderColor: "rgba(15,23,42,0.08)" }}
+              >
+                {" "}
+                <div className="flex items-center gap-3">
+                  {" "}
+                  <div className="flex gap-1.5">
+                    {" "}
+                    <span className="h-2.5 w-2.5 rounded-full bg-red-400/80" />{" "}
+                    <span className="h-2.5 w-2.5 rounded-full bg-yellow-400/80" />{" "}
+                    <span className="h-2.5 w-2.5 rounded-full bg-green-400/80" />{" "}
+                  </div>{" "}
+                  <div className="text-sm font-semibold text-slate-900">
+                    Winixco ATS
+                  </div>{" "}
+                </div>{" "}
+                <div className="text-xs text-slate-500">Today</div>{" "}
+              </div>{" "}
+              {/* Fake content */}{" "}
+              <div className="p-5">
+                {" "}
+                <div className="grid gap-4 md:grid-cols-2">
+                  {" "}
+                  <div
+                    className="rounded-2xl border p-4"
+                    style={{ borderColor: "rgba(15,23,42,0.10)" }}
+                  >
+                    {" "}
+                    <div className="text-xs font-semibold text-slate-500">
+                      Pipeline
+                    </div>{" "}
+                    <div className="mt-2 space-y-2">
+                      {" "}
+                      {["Applied", "Screening", "Interview", "Offer"].map(
+                        (t) => (
+                          <div
+                            key={t}
+                            className="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2"
+                          >
+                            {" "}
+                            <span className="text-sm font-medium text-slate-800">
+                              {t}
+                            </span>{" "}
+                            <span className="text-xs text-slate-500">
+                              +12
+                            </span>{" "}
+                          </div>
+                        ),
+                      )}{" "}
+                    </div>{" "}
+                  </div>{" "}
+                  <div
+                    className="rounded-2xl border p-4"
+                    style={{ borderColor: "rgba(15,23,42,0.10)" }}
+                  >
+                    {" "}
+                    <div className="text-xs font-semibold text-slate-500">
+                      Upcoming interviews
+                    </div>{" "}
+                    <div className="mt-3 space-y-2">
+                      {" "}
+                      {[
+                        {
+                          name: "A. Roy",
+                          role: "Frontend Dev",
+                          time: "11:00 AM",
+                        },
+                        {
+                          name: "S. Das",
+                          role: "Sales Lead",
+                          time: "02:30 PM",
+                        },
+                        { name: "K. Singh", role: "HR Ops", time: "05:00 PM" },
+                      ].map((x) => (
+                        <div
+                          key={x.name}
+                          className="flex items-center justify-between rounded-xl px-3 py-2 bg-white"
+                        >
+                          {" "}
+                          <div>
+                            {" "}
+                            <div className="text-sm font-semibold text-slate-900">
+                              {x.name}
+                            </div>{" "}
+                            <div className="text-xs text-slate-500">
+                              {x.role}
+                            </div>{" "}
+                          </div>{" "}
+                          <div
+                            className="rounded-full px-3 py-1 text-xs font-semibold"
+                            style={{
+                              backgroundColor: "rgba(5,245,228,0.18)",
+                              color: "#064E47",
+                            }}
+                          >
+                            {" "}
+                            {x.time}{" "}
+                          </div>{" "}
+                        </div>
+                      ))}{" "}
+                    </div>{" "}
+                  </div>{" "}
+                </div>{" "}
+                {/* Stats row from your constants */}{" "}
+                <div className="mt-5 grid grid-cols-2 gap-3">
+                  {" "}
+                  {home.stats.slice(0, 2).map((s, idx) => (
+                    <div
+                      key={idx}
+                      className="rounded-2xl border p-4"
+                      style={{ borderColor: "rgba(15,23,42,0.10)" }}
+                    >
+                      {" "}
+                      <div className="text-xs font-semibold text-slate-500">
+                        {s.label}
+                      </div>{" "}
+                      <div className="mt-2 text-2xl font-extrabold text-slate-900">
+                        {s.value}
+                      </div>{" "}
+                      <div className="mt-2 h-1.5 w-full rounded-full bg-slate-100">
+                        {" "}
+                        <div
+                          className="h-1.5 rounded-full"
+                          style={{ width: "62%", backgroundColor: "#05F5E4" }}
+                        />{" "}
+                      </div>{" "}
+                    </div>
+                  ))}{" "}
+                </div>{" "}
+              </div>
+            </div>
+
+            {/* Accent glow */}
+            <div
+              className="pointer-events-none absolute -inset-2 -z-10 rounded-[2rem] opacity-60 blur-2xl"
+              style={{
+                background:
+                  "linear-gradient(135deg, rgba(31,200,219,0.45), rgba(127,216,231,0.35))",
+              }}
+            />
           </motion.div>
         </div>
+      </div>
     </section>
   );
 };

app/(public)/_homeComponents/HowItWorks.tsx

@@ -1,7 +1,14 @@
 "use client";
 import React from "react";
 import { motion } from "framer-motion";
-import { Briefcase, Users, ClipboardCheck, UserPlus, DollarSign, Handshake } from "lucide-react";
+import {
+  Briefcase,
+  Users,
+  ClipboardCheck,
+  UserPlus,
+  DollarSign,
+  Handshake,
+} from "lucide-react";
 
 const steps = [
   {
@@ -38,27 +45,32 @@ const steps = [
 
 const HowItWorks = () => {
   return (
-    <section className="py-32 bg-gradient-to-br from-purple-600 to-pink-600 text-white text-center relative overflow-hidden">
+    <section className="py-32 bg-gradient-to-br from-[#c3dbe0] to-white text-center relative overflow-hidden">
+      {/* Soft animated background blobs */}
       <motion.div
-        animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.1, 1] }}
+        animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.1, 1] }}
         transition={{ duration: 10, repeat: Infinity }}
-        className="absolute bg-white rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
+        className="absolute bg-[#13afdc] rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
       />
       <motion.div
-        animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.05, 1] }}
+        animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.05, 1] }}
         transition={{ duration: 12, repeat: Infinity }}
-        className="absolute bg-pink-300 rounded-full blur-3xl opacity-20 w-[26rem] h-[26rem] -bottom-20 -left-20"
+        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
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
-          className="text-4xl md:text-6xl font-extrabold mb-6"
+          className="text-4xl md:text-6xl font-extrabold mb-6 text-[#0d0d0d]"
         >
-          How It <span className="text-yellow-300">Works</span>
+          How It{" "}
+          <span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
+            Works
+          </span>
         </motion.h2>
 
         <motion.p
@@ -66,9 +78,10 @@ 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-purple-200 mb-16"
+          className="max-w-3xl mx-auto text-lg md:text-xl text-[#7c7a7c] mb-16"
         >
-          Winixco connects your hiring, HR and CRM workflows into one powerful operating system — from job posting to payroll & business growth.
+          Winixco connects your hiring, HR and CRM workflows into one powerful
+          operating system — from job posting to payroll & business growth.
         </motion.p>
 
         {/* Steps */}
@@ -80,13 +93,15 @@ const HowItWorks = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: i * 0.15 }}
-              className="bg-white/10 backdrop-blur-xl p-6 rounded-2xl shadow-lg hover:scale-105 transition transform"
+              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-yellow-300">
+              <div className="flex justify-center mb-4 text-[#13afdc]">
                 {step.icon}
               </div>
-              <h3 className="text-xl font-bold mb-2">{step.title}</h3>
+              <h3 className="text-xl font-bold mb-2 text-[#0d0d0d]">
-              <p className="text-sm text-purple-200">{step.desc}</p>
+                {step.title}
+              </h3>
+              <p className="text-sm text-[#7c7a7c]">{step.desc}</p>
             </motion.div>
           ))}
         </div>
@@ -95,9 +110,9 @@ const HowItWorks = () => {
           whileInView={{ opacity: 1 }}
           initial={{ opacity: 0 }}
           transition={{ delay: 0.9 }}
-          className="mt-12 text-sm text-purple-200"
+          className="mt-12 text-sm text-[#7c7a7c]"
         >
-          Complete the loop. Grow endlessly. 💼✨
+          Complete the loop. Grow endlessly.
         </motion.p>
       </div>
     </section>

app/(public)/_homeComponents/Modules.tsx

@@ -1,4 +1,3 @@
-"use client"
 import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
@@ -13,8 +12,6 @@ import {
 } from "@/services/Constants";
 import { useRouter } from "next/navigation";
 
-
-
 const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
   const [isHovered, setIsHovered] = useState<boolean>(false);
   const router = useRouter();
@@ -33,7 +30,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
       onMouseLeave={() => setIsHovered(false)}
     >
       <Card
-        className={`bg-gradient-to-br ${module.bgColor} border-2 border-transparent hover:border-gray-200 transition-all duration-500 cursor-pointer group h-full ${module.hoverColor} overflow-hidden relative`}
+        className="bg-white border border-[#c3dbe0] hover:shadow-xl transition-all duration-500 cursor-pointer group h-full overflow-hidden relative"
         onClick={handleClick}
       >
         <CardContent className="p-8 md:p-10 relative z-10">
@@ -45,20 +42,14 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
                 rotate: isHovered ? 5 : 0,
               }}
               transition={{ duration: 0.3 }}
-              className={`w-20 h-20 bg-gradient-to-br ${module.color} rounded-2xl flex items-center justify-center shadow-lg`}
+              className="w-20 h-20 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center shadow-lg"
             >
               <module.icon className="w-10 h-10 text-white" />
             </motion.div>
 
-            <motion.div
+            <Badge className="bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              transition={{ delay: index * 0.2 + 0.3 }}
-            >
-              <Badge className={`${module.accentColor} bg-white border-2`}>
               New
             </Badge>
-            </motion.div>
           </div>
 
           {/* Image */}
@@ -75,26 +66,19 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
               alt={module.title}
               className="w-full h-full object-cover"
             />
-            <div
+            <div className="absolute inset-0 bg-gradient-to-t from-[#13afdc]/20 to-transparent" />
-              className={`absolute inset-0 bg-gradient-to-t ${module.color} opacity-20 group-hover:opacity-30 transition-opacity`}
-            />
           </motion.div>
 
           {/* Title */}
-          <h3
+          <h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#13afdc] transition-colors">
-            className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:bg-clip-text"
-            style={{
-              backgroundImage: `linear-gradient(to right, var(--tw-gradient-stops))`,
-            }}
-          >
             {module.title}
           </h3>
 
           {/* Description */}
-          <p className="text-gray-700 mb-3 leading-relaxed">
+          <p className="text-[#0d0d0d] mb-3 leading-relaxed">
             {module.description}
           </p>
-          <p className="text-gray-600 text-sm mb-6 leading-relaxed">
+          <p className="text-[#7c7a7c] text-sm mb-6 leading-relaxed">
             {module.subDescription}
           </p>
 
@@ -107,10 +91,10 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
                 whileInView={{ opacity: 1, x: 0 }}
                 viewport={{ once: true }}
                 transition={{ delay: index * 0.2 + idx * 0.1 }}
-                className="flex items-center gap-2 bg-white/60 backdrop-blur-sm rounded-lg p-3"
+                className="flex items-center gap-2 bg-[#c3dbe0]/30 rounded-lg p-3"
               >
-                <feature.icon className={`w-4 h-4 ${module.accentColor}`} />
+                <feature.icon className="w-4 h-4 text-[#13afdc]" />
-                <span className="text-sm font-medium text-gray-700">
+                <span className="text-sm font-medium text-[#0d0d0d]">
                   {feature.label}
                 </span>
               </motion.div>
@@ -120,34 +104,28 @@ 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 ${module.color} hover:shadow-xl text-white font-semibold group-hover:scale-105 transition-transform`}
+              className="w-full bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white font-semibold hover:shadow-xl"
               size="lg"
             >
               Learn More
-              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              <ArrowRight className="ml-2 w-5 h-5" />
             </Button>
           </motion.div>
 
-          {/* Checkmark for Completeness */}
+          {/* Checkmark */}
-          <motion.div
+          <div className="absolute top-4 right-4 w-8 h-8 bg-[#13afdc] rounded-full flex items-center justify-center shadow-lg">
-            initial={{ scale: 0, rotate: -180 }}
-            whileInView={{ scale: 1, rotate: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: index * 0.2 + 0.5, type: "spring" }}
-            className="absolute top-4 right-4 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg"
-          >
             <CheckCircle className="w-5 h-5 text-white" />
-          </motion.div>
+          </div>
         </CardContent>
 
-        {/* Decorative Elements */}
+        {/* Decorative Blur */}
         <motion.div
           animate={{
             scale: isHovered ? 1.5 : 1,
-            opacity: isHovered ? 0.3 : 0.1,
+            opacity: isHovered ? 0.25 : 0.1,
           }}
           transition={{ duration: 0.5 }}
-          className={`absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br ${module.color} rounded-full blur-3xl`}
+          className="absolute -bottom-10 -right-10 w-40 h-40 bg-[#13afdc] rounded-full blur-3xl"
         />
       </Card>
     </motion.div>
@@ -156,24 +134,13 @@ 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-gray-50 to-white relative overflow-hidden">
+    <section className="py-16 md:py-24 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
-      {/* Background Decorative Elements */}
+      {/* Decorative background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
         <motion.div
-          animate={{
+          animate={{ scale: [1, 1.2, 1], rotate: [0, 90, 0] }}
-            scale: [1, 1.2, 1],
-            rotate: [0, 90, 0],
-          }}
           transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-          className="absolute top-1/4 left-0 w-96 h-96 bg-blue-100 rounded-full blur-3xl opacity-20"
+          className="absolute top-1/4 left-0 w-96 h-96 bg-[#13afdc]/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/4 right-0 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-20"
         />
       </div>
 
@@ -185,19 +152,19 @@ const ModulesSection: React.FC = () => {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <Badge className="mb-4 px-6 py-2  bg-purple-100 text-purple-700  border-0">
+          <Badge className="mb-4 px-6 py-2 bg-[#13afdc]/10 text-[#13afdc] border-0">
             <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-gray-900 mb-6">
+          <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-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
               Offers
-            </span>{" "}
+            </span>
           </h2>
 
-          <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
+          <p className="text-lg md:text-xl text-[#7c7a7c] max-w-3xl mx-auto">
             {home.module.subtitle}
           </p>
         </motion.div>
@@ -209,7 +176,7 @@ const ModulesSection: React.FC = () => {
           ))}
         </div>
 
-        {/* Bottom CTA Section */}
+        {/* Bottom CTA */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -217,19 +184,18 @@ const ModulesSection: React.FC = () => {
           transition={{ delay: 0.6 }}
           className="mt-16 text-center"
         >
-          <Card className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 border-0 max-w-4xl mx-auto">
+          <Card className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] 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?
               </h3>
-              <p className="text-lg text-blue-100 mb-8">
+              <p className="text-white/90 mb-8">
-                Get started with all three modules and experience seamless
+                Get started with all modules and experience seamless integration
-                integration
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-white text-blue-600 hover:bg-gray-100 font-semibold"
+                  className="bg-white text-[#13afdc] hover:bg-gray-100 font-semibold"
                 >
                   Start Free Trial
                   <Sparkles className="ml-2 w-5 h-5" />
@@ -237,7 +203,7 @@ const ModulesSection: React.FC = () => {
                 <Button
                   size="lg"
                   variant="outline"
-                  className="border-2 border-white  bg-white hover:bg-white/10"
+                  className="border-2 border-white text-slate-600 hover:bg-white/10"
                 >
                   Schedule Demo
                   <ArrowRight className="ml-2 w-5 h-5" />

app/(public)/_homeComponents/Pricing.tsx

@@ -10,53 +10,30 @@ import {
   Sparkles,
   Zap,
   Shield,
-  TrendingUp,
-  Users,
-  ChevronDown,
   Star,
   Clock,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 
-// Types
+/* ------------------ DATA ------------------ */
-interface Feature {
-  text: string;
-  highlight?: boolean;
-}
 
-interface ComparisonRow {
+const features = [
-  feature: string;
-  winixco: string;
-  zoho: string;
-  freshteam: string;
-  darwinbox: string;
-}
-
-interface BenefitCard {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  color: string;
-}
-
-// Data
-const features: Feature[] = [
   { text: "Unlimited Jobs & Candidates", highlight: true },
   { text: "FREE HRMS & CRM (No extra cost)", highlight: true },
-  { text: "AI Resume Parsing", highlight: false },
+  { text: "AI Resume Parsing" },
-  { text: "AI Resume Formatting & Standardization", highlight: false },
+  { text: "AI Resume Formatting & Standardization" },
-  { text: "AI JD Generator", highlight: false },
+  { text: "AI JD Generator" },
-  { text: "AI Based Candidate Scoring & Ranking", highlight: false },
+  { text: "AI Based Candidate Scoring & Ranking" },
-  { text: "AI Technical Assessments", highlight: false },
+  { text: "AI Technical Assessments" },
-  { text: "AI Interview Insights & Notes", highlight: false },
+  { text: "AI Interview Insights & Notes" },
-  { text: "Geo‑Location Enabled HRMS", highlight: false },
+  { text: "Geo-Location Enabled HRMS" },
-  { text: "Live Attendance with Real‑Time Location", highlight: false },
+  { text: "Live Attendance with Real-Time Location" },
-  { text: "Recruiter & Team Performance Analytics", highlight: false },
+  { text: "Recruiter & Team Performance Analytics" },
-  { text: "Client & Vendor CRM (Included)", highlight: false },
+  { text: "Client & Vendor CRM (Included)" },
-  { text: "PDPA, ISO 27001 & SOC 2 Ready", highlight: false },
+  { text: "PDPA, ISO 27001 & SOC 2 Ready" },
 ];
 
-const comparisonData: ComparisonRow[] = [
+const comparisonData = [
   {
     feature: "AI Resume Parsing",
     winixco: "✔",
@@ -100,7 +77,7 @@ const comparisonData: ComparisonRow[] = [
     darwinbox: "✖",
   },
   {
-    feature: "Geo‑Location HRMS",
+    feature: "Geo-Location HRMS",
     winixco: "✔",
     zoho: "✖",
     freshteam: "✖",
@@ -115,413 +92,204 @@ const comparisonData: ComparisonRow[] = [
   },
 ];
 
-const benefitCards: BenefitCard[] = [
+/* ------------------ HERO ------------------ */
-  {
-    icon: <Sparkles className="w-6 h-6" />,
-    title: "All-In-One Platform",
-    description:
-      "Get ATS, HRMS, and CRM in one unified platform. No need for multiple subscriptions or integrations.",
-    color: "from-purple-500 to-pink-500",
-  },
-  {
-    icon: <Zap className="w-6 h-6" />,
-    title: "AI-Powered Automation",
-    description:
-      "All AI features bundled in — no add-ons, no hidden limits. Automate screening, scoring, and more.",
-    color: "from-blue-500 to-cyan-500",
-  },
-  {
-    icon: <Shield className="w-6 h-6" />,
-    title: "Enterprise Security",
-    description:
-      "PDPA, ISO 27001 & SOC 2 ready. Your candidate data is protected with enterprise-grade security.",
-    color: "from-orange-500 to-red-500",
-  },
-];
 
-// Hero Section
+const PricingHero = () => (
-const PricingHero: React.FC = () => {
+  <section className="py-20 bg-gradient-to-br from-[#c3dbe0] to-white relative overflow-hidden">
-  return (
+    <div className="max-w-6xl mx-auto px-4 text-center">
-    <section className="py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 relative overflow-hidden">
+      <Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white border-0 text-base">
-      {/* Background Decoration */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <motion.div
-          animate={{
-            scale: [1, 1.2, 1],
-            rotate: [0, 90, 0],
-          }}
-          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-          className="absolute top-0 left-0 w-96 h-96 bg-blue-200/30 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-0 right-0 w-96 h-96 bg-purple-200/30 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
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-        >
-          <Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white 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-gray-900 mb-6 leading-tight">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-[#0d0d0d] mb-6">
         Hire smarter. Track smarter.{" "}
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+        <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-gray-700 max-w-4xl mx-auto">
+      <p className="text-xl md:text-2xl text-[#7c7a7c] max-w-4xl mx-auto">
         One powerful ATS with{" "}
-            <span className="font-bold text-blue-600">FREE HRMS & CRM</span>, AI
+        <span className="font-bold text-[#13afdc]">
-            automation and real-time geo‑location tracking
+          FREE HRMS & CRM
+        </span>
       </p>
-        </motion.div>
     </div>
   </section>
-  );
+);
-};
 
-// Main Pricing Card
+/* ------------------ PRICING CARD ------------------ */
-const MainPricingCard: React.FC = () => {
+
-  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
+const MainPricingCard = () => {
-    "monthly"
+  const [billingCycle, setBillingCycle] =
-  );
+    useState<"monthly" | "yearly">("monthly");
 
   return (
     <section className="py-16 bg-white">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-5xl mx-auto px-4">
-        <motion.div
+        <Card className="rounded-3xl shadow-xl border border-[#c3dbe0] overflow-hidden">
-          initial={{ opacity: 0, y: 30 }}
+          <CardContent className="p-10 text-center">
-          whileInView={{ opacity: 1, y: 0 }}
+            <Badge className="mb-4 px-6 py-2 bg-[#c3dbe0] text-[#0d0d0d]">
-          viewport={{ once: true }}
+              ALL-IN-ONE PLAN
-          transition={{ duration: 0.6 }}
-        >
-          <Card className="max-w-4xl mx-auto rounded-3xl shadow-2xl border-2 border-blue-100 overflow-hidden relative">
-            {/* Popular Badge */}
-            <div className="absolute top-0 right-0 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 text-sm font-bold rounded-bl-2xl">
-              <Sparkles className="w-4 h-4 inline mr-1" />
-              MOST POPULAR
-            </div>
-
-            <CardContent className="p-8 md:p-12">
-              {/* Header */}
-              <div className="text-center mb-8">
-                <Badge className="mb-4 px-6 py-2 bg-green-100 text-green-700 border-green-200 text-base">
-                  ALL‑IN‑ONE PLAN • HRMS & CRM FREE
             </Badge>
 
-                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            <h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
-                  Winixco ATS – One Plan
+              Winixco ATS
             </h2>
 
-                {/* Billing Toggle */}
+            {/* Toggle */}
-                <div className="flex items-center justify-center gap-4 mb-6">
+            <div className="flex justify-center gap-4 mb-8">
               <button
                 onClick={() => setBillingCycle("monthly")}
-                    className={`px-6 py-2 rounded-lg font-semibold transition-all ${
+                className={`px-6 py-2 rounded-lg font-semibold ${
                   billingCycle === "monthly"
-                        ? "bg-blue-600 text-white shadow-lg"
+                    ? "bg-[#13afdc] text-white"
-                        : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                    : "bg-gray-100 text-[#7c7a7c]"
                 }`}
               >
                 Monthly
               </button>
               <button
                 onClick={() => setBillingCycle("yearly")}
-                    className={`px-6 py-2 rounded-lg font-semibold transition-all relative ${
+                className={`px-6 py-2 rounded-lg font-semibold ${
                   billingCycle === "yearly"
-                        ? "bg-blue-600 text-white shadow-lg"
+                    ? "bg-[#13afdc] text-white"
-                        : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                    : "bg-gray-100 text-[#7c7a7c]"
                 }`}
               >
                 Yearly
-                    <span className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">
-                      Save 17%
-                    </span>
               </button>
             </div>
 
-                {/* Pricing Display */}
+            {/* Price */}
             {billingCycle === "monthly" ? (
-                  <div>
+              <>
-                    <div className="text-5xl md:text-6xl font-extrabold text-gray-900 mb-2">
+                <div className="text-6xl font-extrabold text-[#0d0d0d]">
                   ₹1,499
                 </div>
-                    <p className="text-lg text-gray-600">per user / month</p>
+                <p className="text-[#7c7a7c]">per user / month</p>
-                    <p className="mt-3 text-sm text-blue-600 font-semibold">
+              </>
-                      <Clock className="w-4 h-4 inline mr-1" />
-                      Just ₹50/day per recruiter
-                    </p>
-                  </div>
             ) : (
-                  <div>
+              <>
-                    <div className="text-5xl md:text-6xl font-extrabold text-gray-900 mb-2">
+                <div className="text-6xl font-extrabold text-[#0d0d0d]">
                   ₹14,999
                 </div>
-                    <p className="text-lg text-gray-600">per user / year</p>
+                <p className="text-[#7c7a7c]">per user / year</p>
-                    <p className="mt-3 text-lg text-green-600 font-bold">
+              </>
-                      Save ₹3,000 — Get 2 months FREE! 🎉
-                    </p>
-                  </div>
             )}
-              </div>
 
-              {/* CTA Button */}
+            {/* CTA */}
-              <Button
+            <Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
-                size="lg"
+              <Zap className="w-5 h-5 mr-2" />
-                className="w-full h-16 text-xl font-bold rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-xl mb-4"
+              Start 30-Day Free Trial
-              >
-                <Zap className="w-6 h-6 mr-2" />
-                Start 30‑Day Free Trial
             </Button>
 
-              <p className="text-center text-sm text-gray-500 mb-8">
+            {/* Features */}
-                No credit card required • Cancel anytime • Full access during
+            <div className="grid md:grid-cols-2 gap-4 mt-10 text-left">
-                trial
+              {features.map((f, i) => (
-              </p>
-
-              {/* Features Grid */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {features.map((item: Feature, index: number) => (
-                  <motion.div
-                    key={item.text}
-                    initial={{ opacity: 0, x: -10 }}
-                    whileInView={{ opacity: 1, x: 0 }}
-                    viewport={{ once: true }}
-                    transition={{ delay: index * 0.02 }}
-                    className={`flex items-start gap-3 p-3 rounded-lg transition-colors ${
-                      item.highlight ? "bg-blue-50" : ""
-                    }`}
-                  >
-                    <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-                    <span
-                      className={`text-sm md:text-base ${
-                        item.highlight
-                          ? "text-blue-700 font-semibold"
-                          : "text-gray-700"
-                      }`}
-                    >
-                      {item.text}
-                    </span>
-                  </motion.div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </motion.div>
-      </div>
-    </section>
-  );
-};
-
-// Benefits Section
-const BenefitsSection: React.FC = () => {
-  return (
-    <section className="py-20 bg-gradient-to-b from-gray-50 to-white">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <motion.h2
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          className="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-900"
-        >
-          Why Choose Winixco?
-        </motion.h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {benefitCards.map((card: BenefitCard, index: number) => (
-            <motion.div
-              key={card.title}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: index * 0.1, duration: 0.6 }}
-            >
-              <Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
-                <CardContent className="p-8">
                 <div
-                    className={`w-14 h-14 rounded-xl bg-gradient-to-br ${card.color} flex items-center justify-center text-white mb-6`}
+                  key={i}
+                  className={`flex gap-3 p-3 rounded-lg ${
+                    f.highlight ? "bg-[#c3dbe0]" : ""
+                  }`}
                 >
-                    {card.icon}
+                  <Check className="text-[#13afdc]" />
+                  <span className="text-[#0d0d0d]">{f.text}</span>
                 </div>
-                  <h3 className="text-xl font-bold text-gray-900 mb-3">
-                    {card.title}
-                  </h3>
-                  <p className="text-gray-600 leading-relaxed">
-                    {card.description}
-                  </p>
-                </CardContent>
-              </Card>
-            </motion.div>
               ))}
             </div>
+          </CardContent>
+        </Card>
       </div>
     </section>
   );
 };
 
-// Comparison Table
+/* ------------------ COMPARISON ------------------ */
-const ComparisonTable: React.FC = () => {
+
-  return (
+const ComparisonTable = () => (
   <section className="py-20 bg-white">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div className="max-w-6xl mx-auto px-4">
-        <motion.div
+      <h2 className="text-4xl font-bold text-[#0d0d0d] mb-8">
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-        >
-          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-gray-900">
         Compare with Others
       </h2>
-          <p className="text-lg text-gray-600 mb-8">
-            See why Winixco offers the best value for your investment
-          </p>
 
-          <div className="overflow-x-auto rounded-2xl shadow-xl border border-gray-200">
+      <div className="overflow-x-auto rounded-2xl shadow border border-[#c3dbe0]">
         <table className="w-full">
-              <thead className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+          <thead className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
             <tr>
-                  <th className="px-6 py-4 text-left font-semibold">Feature</th>
+              <th className="px-6 py-4 text-left">Feature</th>
-                  <th className="px-6 py-4 text-center font-semibold">
+              <th className="px-6 py-4 text-center">Winixco</th>
-                    Winixco
+              <th className="px-6 py-4 text-center">Zoho</th>
-                  </th>
+              <th className="px-6 py-4 text-center">Freshteam</th>
-                  <th className="px-6 py-4 text-center font-semibold">
+              <th className="px-6 py-4 text-center">Darwinbox</th>
-                    Zoho Recruit
-                  </th>
-                  <th className="px-6 py-4 text-center font-semibold">
-                    Freshteam
-                  </th>
-                  <th className="px-6 py-4 text-center font-semibold">
-                    Darwinbox
-                  </th>
             </tr>
           </thead>
           <tbody>
-                {comparisonData.map((row: ComparisonRow, index: number) => (
+            {comparisonData.map((row, i) => (
               <tr
-                    key={row.feature}
+                key={i}
-                    className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}
+                className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}
               >
-                    <td className="px-6 py-4 font-medium text-gray-900">
+                <td className="px-6 py-4 font-medium text-[#0d0d0d]">
                   {row.feature}
                 </td>
-                    <td className="px-6 py-4 text-center">
+                <td className="px-6 py-4 text-center text-[#13afdc]">
-                      <span
-                        className={`${
-                          row.winixco === "✔"
-                            ? "text-green-600 text-2xl"
-                            : row.winixco === "✖"
-                            ? "text-red-500 text-2xl"
-                            : "font-semibold text-blue-600"
-                        }`}
-                      >
                   {row.winixco}
-                      </span>
                 </td>
-                    <td className="px-6 py-4 text-center">
+                <td className="px-6 py-4 text-center text-[#7c7a7c]">
-                      <span
-                        className={`${
-                          row.zoho === "✔"
-                            ? "text-green-600 text-2xl"
-                            : row.zoho === "✖"
-                            ? "text-red-500 text-2xl"
-                            : "text-gray-700"
-                        }`}
-                      >
                   {row.zoho}
-                      </span>
                 </td>
-                    <td className="px-6 py-4 text-center">
+                <td className="px-6 py-4 text-center text-[#7c7a7c]">
-                      <span
-                        className={`${
-                          row.freshteam === "✔"
-                            ? "text-green-600 text-2xl"
-                            : row.freshteam === "✖"
-                            ? "text-red-500 text-2xl"
-                            : "text-gray-700"
-                        }`}
-                      >
                   {row.freshteam}
-                      </span>
                 </td>
-                    <td className="px-6 py-4 text-center">
+                <td className="px-6 py-4 text-center text-[#7c7a7c]">
-                      <span
-                        className={`${
-                          row.darwinbox === "✔"
-                            ? "text-green-600 text-2xl"
-                            : row.darwinbox === "✖"
-                            ? "text-red-500 text-2xl"
-                            : "text-gray-700"
-                        }`}
-                      >
                   {row.darwinbox}
-                      </span>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
       </div>
-        </motion.div>
     </div>
   </section>
-  );
+);
-};
 
-// CTA Section
+/* ------------------ CTA ------------------ */
-const CtaSection: React.FC = () => {
+
+const CtaSection = () => {
   const router = useRouter();
+
   return (
     <section className="py-20 bg-white">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <div className="max-w-4xl mx-auto text-center px-4">
-        <motion.div
+        <h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6 }}
-        >
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
           Need Bulk Pricing or a Demo?
         </h2>
-          <p className="text-xl mb-10">
+        <p className="text-xl text-[#7c7a7c] mb-8">
-            Talk to our sales team for custom enterprise plans and volume
+          Talk to our sales team for custom enterprise plans
-            discounts
         </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+
         <Button
-              size="lg"
+          className="bg-[#13afdc] text-white px-10 py-6 text-lg"
-              className="bg-white border text-blue-700 hover:bg-gray-100 font-semibold px-10 py-7 text-lg shadow-xl"
+          onClick={() => router.push("/contact")}
-              onClick={()=>router.push("/contact")}
         >
           Contact Us
         </Button>
-            
-          </div>
-        </motion.div>
       </div>
     </section>
   );
 };
 
-// Main Component
+/* ------------------ MAIN ------------------ */
+
 export default function PricingSection() {
   return (
     <div className="min-h-screen bg-white">
       <PricingHero />
       <MainPricingCard />
-      <BenefitsSection />
       <ComparisonTable />
       <CtaSection />
     </div>

app/(public)/_homeComponents/Testimonials.tsx

@@ -20,16 +20,16 @@ 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-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
+          <span className="inline-block px-4 py-2 bg-[#c3dbe0] text-[#0d0d0d] rounded-full text-sm font-semibold mb-4">
             TESTIMONIALS
           </span>
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
             Loved by{" "}
-            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
               Our Clients
             </span>
           </h2>
-          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+          <p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
             See what our customers have to say about their experience
           </p>
         </AnimatedSection>
@@ -42,25 +42,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-purple-50 to-pink-50 rounded-3xl p-12 shadow-xl"
+              className="bg-gradient-to-br from-[#c3dbe0] to-white rounded-3xl p-12 shadow-xl"
             >
-              <Quote className="w-12 h-12 text-purple-300 mb-6" />
+              <Quote className="w-12 h-12 text-[#13afdc] mb-6" />
 
-              <p className="text-2xl text-gray-800 mb-8 leading-relaxed italic">
+              <p className="text-2xl text-[#0d0d0d] 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-purple-400 to-pink-400 flex items-center justify-center text-3xl">
+                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center text-3xl">
                   {testimonial.image}
                 </div>
 
                 <div>
-                  <h4 className="font-bold text-lg text-gray-800">
+                  <h4 className="font-bold text-lg text-[#0d0d0d]">
                     {testimonial.name}
                   </h4>
-                  <p className="text-gray-600">{testimonial.role}</p>
+                  <p className="text-[#7c7a7c]">{testimonial.role}</p>
-                  <p className="text-purple-600 font-semibold">
+                  <p className="text-[#13afdc] font-semibold">
                     {testimonial.company}
                   </p>
                 </div>
@@ -69,7 +69,7 @@ const Testimonials = () => {
                   {[...Array(testimonial.rating)].map((_, i) => (
                     <Star
                       key={i}
-                      className="w-5 h-5 fill-yellow-400 text-yellow-400"
+                      className="w-5 h-5 fill-[#13afdc] text-[#13afdc]"
                     />
                   ))}
                 </div>
@@ -85,8 +85,8 @@ const Testimonials = () => {
                 onClick={() => setCurrentIndex(index)}
                 className={`h-3 rounded-full transition-all duration-300 ${
                   index === currentIndex
-                    ? "bg-purple-600 w-8"
+                    ? "bg-[#13afdc] w-8"
-                    : "bg-gray-300 w-3 hover:bg-gray-400"
+                    : "bg-gray-300 w-3 hover:bg-[#c3dbe0]"
                 }`}
               />
             ))}
@@ -96,5 +96,5 @@ const Testimonials = () => {
     </section>
   );
 };
-export default Testimonials;
 
+export default Testimonials;

package-lock.json

@@ -47,6 +47,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "baseline-browser-mapping": "^2.9.19",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.3.8",
         "typescript": "^5"
@@ -2777,6 +2778,16 @@
         "npm": ">=6.4.1"
       }
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001741",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",

package.json

@@ -47,6 +47,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "baseline-browser-mapping": "^2.9.19",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.8",
     "typescript": "^5"