UI changes and color theme changed

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 {
-  PlayCircle,
-  ArrowRight,
-  Sparkles,
-} from "lucide-react";
+import { 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">
-      {/* 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>
+    <section className="relative py-24 md:py-32 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] overflow-hidden">
 
       <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">