Book demo model and functionalities added

app/(public)/_homeComponents/About.tsx

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

app/(public)/_homeComponents/Benefits.tsx

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

app/(public)/_homeComponents/CTA.tsx

@@ -3,11 +3,13 @@ import React from "react";
 import { motion } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 // CTA Section
 const CTA = () => {
+  const router = useRouter();
   return (
-    <section className="py-24 bg-gradient-to-r from-[#1FC8DB] to-[#7FD8E7] text-white text-center relative overflow-hidden">
+    <section className="py-24 bg-[#2563eb] text-white text-center relative overflow-hidden">
       <motion.div
         className="absolute top-0 left-0 w-full h-full opacity-20"
         animate={{ scale: [1, 1.1, 1] }}
@@ -18,38 +20,23 @@ 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-white to-cyan-100 bg-clip-text text-transparent">
-            {" "}
-            hires, manages & grows
-          </span>
+          Ready to Transform Your Hiring?
         </h2>
 
         <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.
+          Join hundreds of companies already using Winixco to hire smarter,
+          faster, and with confidence.
         </p>
 
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <Button
             size="lg"
-            className="px-10 py-6 text-lg bg-white text-[#0ea5b7] font-bold rounded-xl shadow-lg hover:bg-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
+            className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-white hover:text-[#2563eb] hover:shadow-2xl hover:scale-105 transition-transform"
+            onClick={()=>router.push("#pricing")}
           >
-            Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
-          </Button>
-
-          <Button
-            size="lg"
-            variant="outline"
-            className="border-2 border-white text-slate-600 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
-          >
-            Book a Demo
+            Start Your Free Trial Today<ArrowRight className="ml-2 w-5 h-5" />
           </Button>
         </div>
-
-        <p className="mt-6 text-sm text-white/80">
-          No credit card required · Quick setup · Cancel anytime
-        </p>
       </div>
     </section>
   );

app/(public)/_homeComponents/DemoModal.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
+
+const blockedDomains = [
+  "gmail.com",
+  "yahoo.com",
+  "outlook.com",
+  "hotmail.com",
+  "icloud.com",
+];
+
+export default function DemoModal({ trigger }: { trigger: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    phoneNumber: "",
+    company: "",
+    designation: "",
+    solution: "",
+    description: "",
+  });
+
+  // 🔹 Business Email Validation
+  const isBusinessEmail = (email: string) => {
+    const domain = email.split("@")[1];
+    return domain && !blockedDomains.includes(domain.toLowerCase());
+  };
+
+  const handleSubmit = async () => {
+    if (
+      !form.name ||
+      !form.email ||
+      !form.phoneNumber ||
+      !form.company ||
+      !form.designation ||
+      !form.solution
+    ) {
+      toast.error("Please fill all required fields.");
+      return;
+    }
+
+    if (!isBusinessEmail(form.email)) {
+      toast.error("Please use your business email (no Gmail/Yahoo etc.)");
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      // 🔹 Call API (you will create below)
+      const res = await fetch("/api/demo-lead", {
+        method: "POST",
+        body: JSON.stringify(form),
+      });
+
+      if (!res.ok) throw new Error();
+
+      toast.success("Demo request submitted successfully!");
+
+      setOpen(false);
+      setForm({
+        name: "",
+        email: "",
+        phoneNumber: "",
+        company: "",
+        designation: "",
+        solution: "",
+        description: "",
+      });
+    } catch (err) {
+      toast.error("Something went wrong. Try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent
+        className="
+    w-[95%] sm:w-full
+    max-w-lg
+    p-0
+    rounded-2xl
+    overflow-hidden
+    max-h-[90vh]
+    flex flex-col
+  "
+      >
+        {/* Header (Fixed) */}
+        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 p-5 sm:p-6 text-white shrink-0">
+          <DialogHeader>
+            <DialogTitle className="text-xl sm:text-2xl font-bold">
+              Book a Demo
+            </DialogTitle>
+            <p className="text-xs sm:text-sm opacity-90">
+              See how Winixco can transform your hiring process
+            </p>
+          </DialogHeader>
+        </div>
+
+        {/* Scrollable Body */}
+        <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-5 space-y-4">
+          <div>
+            <Label className="mb-2 block">Name *</Label>
+            <Input
+              placeholder="Enter your name"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Business Email *</Label>
+            <Input
+              placeholder="you@company.com"
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Phone Number *</Label>
+            <Input
+              type="tel"
+              placeholder="+91 9876543210"
+              value={form.phoneNumber}
+              onChange={(e) =>
+                setForm({ ...form, phoneNumber: e.target.value })
+              }
+            />
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Company Name *</Label>
+            <Input
+              placeholder="Your company"
+              value={form.company}
+              onChange={(e) => setForm({ ...form, company: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Designation *</Label>
+            <Input
+              placeholder="Your role"
+              value={form.designation}
+              onChange={(e) =>
+                setForm({ ...form, designation: e.target.value })
+              }
+            />
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Solution *</Label>
+            <Select
+              onValueChange={(value) => setForm({ ...form, solution: value })}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select solution" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ATS">ATS</SelectItem>
+                <SelectItem value="HRMS">HRMS</SelectItem>
+                <SelectItem value="CRM">CRM</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label className="mb-2 block">Description (Optional)</Label>
+            <Textarea
+              placeholder="Tell us your requirement..."
+              value={form.description}
+              onChange={(e) =>
+                setForm({ ...form, description: e.target.value })
+              }
+            />
+          </div>
+        </div>
+
+        {/* Sticky Footer Button */}
+        <div className="p-4 sm:p-5 border-t bg-white">
+          <Button
+            onClick={handleSubmit}
+            disabled={loading}
+            className="w-full text-base sm:text-lg py-5 rounded-xl bg-blue-600 hover:bg-blue-700"
+          >
+            {loading ? "Submitting..." : "Submit Request"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/(public)/_homeComponents/FAQ.tsx

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

app/(public)/_homeComponents/Features.tsx

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

app/(public)/_homeComponents/Footer.tsx

@@ -36,7 +36,7 @@ const footerLinks = [
       { label: "Privacy Policy", url: "/privacy-policy" },
       { label: "Terms of Service", url: "/terms-and-conditions" },
       { label: "Refund Policy", url: "/refund-policy" },
-      { label: "GDPR & Cookies", url: "/gdpr-cookies" },
+      //{ label: "GDPR & Cookies", url: "/gdpr-cookies"},
     ],
   },
 ];

app/(public)/_homeComponents/Header.tsx

@@ -5,10 +5,13 @@ import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { home } from "@/services/Constants";
+import { useRouter } from "next/navigation";
+import DemoModal from "./DemoModal";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 10);
@@ -17,9 +20,7 @@ const Header = () => {
   }, []);
 
   // Remove Blogs and Careers
-  const navigation = home.navigation.filter(
-    (item) => item.name !== "Blogs" && item.name !== "Careers"
-  );
+  const navigation = home.navigation.filter((item) => item.name !== "Blog");
 
   return (
     <motion.header
@@ -31,7 +32,6 @@ 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 */}
           <motion.div whileHover={{ scale: 1.05 }}>
             <Link href="/">
@@ -49,7 +49,7 @@ const Header = () => {
               <motion.div key={item.name} whileHover={{ scale: 1.05 }}>
                 <Link
                   href={item.href}
-                  className="text-gray-700 hover:text-[#1FC8DB] font-medium"
+                  className="text-gray-700 hover:text-[#2563eb] font-medium"
                 >
                   {item.name}
                 </Link>
@@ -58,15 +58,15 @@ const Header = () => {
           </nav>
 
           <div className="hidden md:flex items-center space-x-4">
-            <Button variant="ghost" className="font-medium">
-              Sign In
-            </Button>
+            <DemoModal
+              trigger={
+                <Button className="text-white bg-[#2563eb]">Book Demo</Button>
+              }
+            />
+
             <Button
-              className="text-white font-medium"
-              style={{
-                background:
-                  "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
-              }}
+              className="text-white font-medium bg-[#2563eb]"
+              onClick={() => router.push("#pricing")}
             >
               Start Free Trial
             </Button>
@@ -100,15 +100,17 @@ const Header = () => {
                   {item.name}
                 </Link>
               ))}
-              <Button variant="outline" className="w-full">
-                Sign In
+              <DemoModal
+                trigger={
+                  <Button className="w-full text-white bg-[#2563eb]">
+                    Book Demo
                   </Button>
+                }
+              />
+
               <Button
-                className="w-full text-white"
-                style={{
-                  background:
-                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
-                }}
+                className="w-full text-white bg-[#2563eb]"
+                onClick={() => router.push("#pricing")}
               >
                 Start Free Trial
               </Button>

app/(public)/_homeComponents/Hero.tsx

@@ -91,11 +91,8 @@ const Hero = () => {
             >
               Hire faster with a{" "}
               <span
-                className="bg-clip-text text-transparent"
-                style={{
-                  backgroundImage:
-                    "linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
-                }}
+                className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent"
+                
               >
                 clean ATS workflow
               </span>

app/(public)/_homeComponents/HeroSection.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import DemoModal from "./DemoModal";
+
+export default function HeroSection() {
+  const router = useRouter();
+  return (
+    <section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-26 md:py-20 lg:py-28">
+      <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+        {/* LEFT CONTENT */}
+        <motion.div
+          initial={{ opacity: 0, x: -40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center lg:text-left"
+        >
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-5xl font-extrabold text-gray-900 leading-tight">
+            Hire Smarter with AI-Powered Recruitment Software
+          </h1>
+
+          <p className="mt-6 text-base sm:text-lg text-gray-600 max-w-xl mx-auto lg:mx-0">
+            All-in-one ATS, HRMS, and Recruitment CRM platform designed for
+            modern hiring teams
+          </p>
+
+          {/* Buttons */}
+          <div className="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-4 mt-8">
+            <Button
+              className="w-full sm:w-auto bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-base rounded-xl"
+              onClick={() => router.push("#pricing")}
+            >
+              Start Free Trial
+            </Button>
+
+            <DemoModal
+              trigger={
+                <Button
+                  variant="outline"
+                  className="w-full sm:w-auto border-[#2563eb] text-[#2563eb] px-8 py-6 text-base rounded-xl"
+                >
+                  Schedule Demo
+                </Button>
+              }
+            />
+          </div>
+        </motion.div>
+
+        {/* RIGHT CARD */}
+        <motion.div
+          initial={{ opacity: 0, x: 40 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6 }}
+          className="bg-gray-50 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200"
+        >
+          <div className="bg-white rounded-3xl shadow-md p-6 sm:p-8">
+            <div className="flex items-center justify-between mb-6">
+              <h4 className="text-base sm:text-lg font-semibold text-gray-700">
+                Recruitment Pipeline
+              </h4>
+
+              <span className="h-3 w-3 rounded-full bg-green-500"></span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 sm:gap-6">
+              <StatCard title="ACTIVE POSITIONS" value="24" />
+              <StatCard title="TOTAL CANDIDATES" value="1,847" />
+              <StatCard title="INTERVIEWS THIS WEEK" value="12" />
+              <StatCard title="AVG TIME TO HIRE" value="18d" />
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+function StatCard({ title, value }: { title: string; value: string }) {
+  return (
+    <div className="border-l-4 border-[#2563eb] bg-gray-50 rounded-xl p-4 sm:p-5">
+      <p className="text-xs sm:text-sm text-gray-500">{title}</p>
+      <p className="text-lg sm:text-xl font-bold text-[#2563eb] mt-1">
+        {value}
+      </p>
+    </div>
+  );
+}

app/(public)/_homeComponents/HowItWorks.tsx

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

app/(public)/_homeComponents/Modules.tsx

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

app/(public)/_homeComponents/Pricing.tsx

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

app/(public)/_homeComponents/PricingSection.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Check } from "lucide-react";
+
+export default function PricingSection() {
+  const features = [
+    "Unlimited Jobs & Candidates",
+    "FREE HRMS & CRM",
+    "AI Resume Parsing",
+    "AI JD Generator",
+    "AI Candidate Scoring",
+    "AI Technical Assessments",
+    "Geo-Location Enabled HRMS",
+    "Live Attendance with Location",
+    "Recruiter Performance Analytics",
+    "Client & Vendor CRM",
+  ];
+
+  return (
+    <div id="pricing" className="w-full bg-gradient-to-b from-slate-50 to-white text-slate-900">
+      <div className="max-w-6xl mx-auto px-4 py-16 text-center">
+        
+        {/* Heading */}
+        <h1 className="text-3xl md:text-5xl font-extrabold leading-tight">
+          Hire smarter. Track smarter. Manage everything from one platform.
+        </h1>
+
+        <p className="mt-4 text-base md:text-lg text-slate-600">
+          One powerful ATS with{" "}
+          <span className="font-semibold text-black">
+            FREE HRMS & CRM
+          </span>{" "}
+          , AI automation and real-time geo-location tracking
+        </p>
+
+        {/* Pricing Card */}
+        <Card className="mt-12 max-w-xl mx-auto rounded-3xl shadow-xl border-0">
+          <CardContent className="p-8 md:p-10">
+            
+            <Badge className="bg-green-100 text-green-700 mb-4">
+              ALL-IN-ONE PLAN • HRMS & CRM FREE
+            </Badge>
+
+            <h2 className="text-2xl font-bold">
+              Winixco ATS – One Plan
+            </h2>
+
+            <div className="mt-6">
+              <div className="text-5xl font-extrabold">₹1,999</div>
+              <div className="text-sm text-slate-500">
+                per user / month
+              </div>
+              <div className="text-green-600 font-semibold mt-2">
+                ₹19,990 per user / year (2 months FREE)
+              </div>
+            </div>
+
+            <Button className="w-full mt-6 text-lg py-6 rounded-xl">
+              Start 30-Day Free Trial
+            </Button>
+
+            {/* Features */}
+            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3 text-left">
+              {features.map((item, index) => (
+                <div key={index} className="flex items-start gap-2 text-sm text-slate-700">
+                  <Check className="text-green-600 w-4 h-4 mt-1" />
+                  {item}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Sections */}
+        <div className="mt-16 space-y-12 text-left">
+          
+          {/* Simple Pricing */}
+          <div>
+            <h2 className="text-2xl font-bold">Simple Per-Seat Pricing</h2>
+            <p className="text-slate-600 mt-2">
+              Each recruiter or HR team member requires one seat. All seats include full access to ATS, HRMS, CRM and AI features.
+            </p>
+
+            <ul className="mt-4 list-disc list-inside space-y-1 text-slate-700">
+              <li>1 Seat = 1 User</li>
+              <li>No separate charges</li>
+              <li>All AI features included</li>
+              <li>Scale anytime</li>
+            </ul>
+          </div>
+
+          {/* Bulk Pricing */}
+          <div>
+            <h2 className="text-2xl font-bold">Bulk Team Pricing</h2>
+
+            <div className="grid md:grid-cols-3 gap-4 mt-4">
+              {[
+                {
+                  title: "Startup Team (5-20 seats)",
+                  price: "₹1,899 / seat / month",
+                },
+                {
+                  title: "Growth Team (21-50 seats)",
+                  price: "₹1,799 / seat / month",
+                },
+                {
+                  title: "Enterprise (50+ seats)",
+                  price: "Custom pricing",
+                },
+              ].map((plan, i) => (
+                <Card key={i} className="rounded-2xl shadow-md">
+                  <CardContent className="p-6">
+                    <h3 className="font-semibold">{plan.title}</h3>
+                    <p className="mt-2 text-blue-600 font-bold">
+                      {plan.price}
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* ROI Section */}
+          <div>
+            <h2 className="text-2xl font-bold">Recruitment ROI Example</h2>
+            <Card className="mt-4 rounded-2xl shadow-md">
+              <CardContent className="p-6 text-slate-700">
+                10 recruiters using Winixco can save ~400 hours/month through AI automation resulting in productivity worth ₹4L+ per month.
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        {/* Footer CTA */}
+        <div className="mt-16 text-center">
+          <p className="mb-4 text-slate-600">
+            Need bulk pricing or demo?
+          </p>
+          <Button className="px-8 py-6 text-lg rounded-xl">
+            Contact Sales
+          </Button>
+        </div>
+      </div>
+
+      {/* Sticky CTA */}
+      <div className="fixed bottom-0 left-0 right-0 bg-blue-600 text-white text-center py-3 font-semibold">
+        Start 30-Day Free Trial – ₹67/day per recruiter
+      </div>
+    </div>
+  );
+}

app/(public)/_homeComponents/StatsSection.tsx

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

app/(public)/_homeComponents/TestiMonialSection.tsx

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

app/(public)/_homeComponents/Testimonials.tsx

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

app/(public)/about/page.tsx

@@ -6,72 +6,74 @@ const leaders = [
   {
     name: "Amit Sharma",
     role: "Founder & CEO",
-    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
+    image:
+      "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
     linkedin: "#",
   },
   {
     name: "Neha Verma",
     role: "Head of Product",
-    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
+    image:
+      "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
     linkedin: "#",
   },
   {
     name: "Rahul Mehta",
     role: "CTO",
-    image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
+    image:
+      "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
     linkedin: "#",
   },
 ];
 
-
 export default function AboutUs() {
   return (
     <div className="min-h-screen bg-gray-50 text-gray-900">
-
       {/* HERO */}
       <section className="py-28 bg-gradient-to-b from-white to-blue-50 text-center">
-        <h1
-          
-          className="text-5xl font-bold mb-6"
-        >
+        <h1 className="text-5xl font-bold mb-6">
           Empowering Businesses with Smart CRM Innovation
         </h1>
-        <p
-          
-          className="text-xl max-w-3xl mx-auto"
-        >
-          We help companies build stronger customer relationships through intelligent automation and seamless workflows.
+        <p className="text-xl max-w-3xl mx-auto">
+          We help companies build stronger customer relationships through
+          intelligent automation and seamless workflows.
         </p>
       </section>
 
       {/* OUR MISSION / VISION */}
       <section className="py-20 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
-        <div
-          
-          className="bg-white p-10 rounded-3xl shadow-xl border"
-        >
+        <div className="bg-white p-10 rounded-3xl shadow-xl border">
           <Target className="w-12 h-12 text-blue-600 mb-4" />
-          <h3 className="text-3xl font-semibold mb-3">Our Mission</h3>
+          <h3 className="text-3xl font-semibold mb-3">Mission</h3>
           <p className="text-gray-600 text-lg leading-relaxed">
-            To simplify customer management through powerful yet user-friendly CRM tools,
-            enabling businesses of every size to scale faster and smarter.
+            At Winixco, our mission is to develop innovative and accessible
+            AI-driven platforms that transform how businesses hire, manage
+            people, and grow customer relationships. <br />
+            We aim to deliver powerful yet easy-to-use solutions such as
+            AI-powered ATS, HRMS, CRM, and digital automation tools that help
+            organizations streamline operations, reduce costs, and achieve
+            sustainable growth.
+            <br />
+            Through continuous innovation, customer-centric design, and
+            cutting-edge technology, Winixco strives to be a trusted partner in
+            digital transformation for companies worldwide.
           </p>
         </div>
 
-        <div
-          
-          className="bg-white p-10 rounded-3xl shadow-xl border"
-        >
-          <Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
-          <h3 className="text-3xl font-semibold mb-3">Our Vision</h3>
+        <div className="bg-white p-10 rounded-3xl shadow-xl border">
+          <Lightbulb className="w-12 h-12 text-blue-600 mb-4" />
+          <h3 className="text-3xl font-semibold mb-3">Vision</h3>
           <p className="text-gray-600 text-lg leading-relaxed">
-            To be a global leader in CRM innovation — transforming how teams connect,
-            collaborate and grow with their customers.
+            To become a global leader in AI-powered business automation by
+            empowering organizations with intelligent technology that simplifies
+            recruitment, workforce management, and customer engagement. <br />
+            Winixco envisions a future where businesses of all sizes can
+            leverage advanced AI solutions to make smarter decisions, increase
+            productivity, and build scalable, efficient operations.
           </p>
         </div>
       </section>
 
-      
       {/* COMPANY STORY TIMELINE }
       <section className="py-24 bg-white">
         <div className="text-center mb-16">
@@ -147,7 +149,7 @@ export default function AboutUs() {
       </section> */}
 
       {/* CTA */}
-      <section className="py-24 bg-gradient-to-r from-purple-600 to-blue-600 text-center text-white">
+      <section className="py-24 bg-[#2563eb] text-center text-white">
         <h2 className="text-4xl font-bold mb-4">We Grow Together</h2>
         <p className="text-lg max-w-2xl mx-auto mb-8">
           Become part of a story that’s transforming the future of CRM.
@@ -159,7 +161,6 @@ export default function AboutUs() {
           Explore Careers
         </Link>
       </section>
-
     </div>
   );
 }

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">

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

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

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

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

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

@@ -1,38 +1,96 @@
-"use client"
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
+"use client";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Send, CheckCircle } from "lucide-react";
+import { toast } from "sonner";
+import { Label } from "@/components/ui/label";
 import {
-  Send,
-  CheckCircle} from 'lucide-react';
-
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
+const blockedDomains = [
+  "gmail.com",
+  "yahoo.com",
+  "outlook.com",
+  "hotmail.com",
+  "icloud.com",
+];
 
 // Contact Form Component
 const ContactForm: React.FC = () => {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    phone: '',
-    address: '',
-    message: ''
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    phoneNumber: "",
+    company: "",
+    designation: "",
+    solution: "",
+    description: "",
   });
+  const [loading, setLoading] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 
-  const handleSubmit = () => {
-    console.log('Form submitted:', formData);
-    setSubmitted(true);
-    setTimeout(() => setSubmitted(false), 3000);
+  // 🔹 Business Email Validation
+  const isBusinessEmail = (email: string) => {
+    const domain = email.split("@")[1];
+    return domain && !blockedDomains.includes(domain.toLowerCase());
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
+  const handleSubmit = async () => {
+    if (
+      !form.name ||
+      !form.email ||
+      !form.phoneNumber ||
+      !form.company ||
+      !form.designation ||
+      !form.solution
+    ) {
+      toast.error("Please fill all required fields.");
+      return;
+    }
+
+    if (!isBusinessEmail(form.email)) {
+      toast.error("Please use your business email (no Gmail/Yahoo etc.)");
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      // 🔹 Call API (you will create below)
+      const res = await fetch("/api/demo-lead", {
+        method: "POST",
+        body: JSON.stringify(form),
       });
+
+      if (!res.ok) throw new Error();
+
+      toast.success("Demo request submitted successfully!");
+
+      setSubmitted(true);
+      setForm({
+        name: "",
+        email: "",
+        phoneNumber: "",
+        company: "",
+        designation: "",
+        solution: "",
+        description: "",
+      });
+      setTimeout(() => setSubmitted(false), 3000);
+    } catch (err) {
+      toast.error("Something went wrong. Try again.");
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -62,89 +120,108 @@ const ContactForm: React.FC = () => {
               <div className="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
                 <CheckCircle className="w-10 h-10 text-green-600" />
               </div>
-              <h3 className="text-2xl font-bold text-gray-900 mb-2">Thank you!</h3>
-              <p className="text-gray-600">Your message has been sent successfully.</p>
+              <h3 className="text-2xl font-bold text-gray-900 mb-2">
+                Thank you!
+              </h3>
+              <p className="text-gray-600">
+                Your message has been sent successfully.
+              </p>
             </motion.div>
           ) : (
             <div className="space-y-6">
               <div className="grid md:grid-cols-2 gap-6">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Full Name *
-                  </label>
+                  <Label className="mb-2 block">Name *</Label>
                   <Input
-                    type="text"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    placeholder="John Doe"
-                    className="w-full"
+                    placeholder="Enter your name"
+                    value={form.name}
+                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                   />
                 </div>
+
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Email Address *
-                  </label>
+                  <Label className="mb-2 block">Business Email *</Label>
                   <Input
-                    type="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    placeholder="john@example.com"
-                    className="w-full"
+                    placeholder="you@company.com"
+                    value={form.email}
+                    onChange={(e) =>
+                      setForm({ ...form, email: e.target.value })
+                    }
                   />
                 </div>
               </div>
 
               <div className="grid md:grid-cols-2 gap-6">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Phone Number *
-                  </label>
+                  <Label className="mb-2 block">Phone Number *</Label>
                   <Input
                     type="tel"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleChange}
-                    placeholder="+1 (555) 000-0000"
-                    className="w-full"
+                    placeholder="+91 9876543210"
+                    value={form.phoneNumber}
+                    onChange={(e) =>
+                      setForm({ ...form, phoneNumber: e.target.value })
+                    }
                   />
                 </div>
+
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Address
-                  </label>
+                  <Label className="mb-2 block">Company Name *</Label>
                   <Input
-                    type="text"
-                    name="address"
-                    value={formData.address}
-                    onChange={handleChange}
-                    placeholder="City, Country"
-                    className="w-full"
+                    placeholder="Your company"
+                    value={form.company}
+                    onChange={(e) =>
+                      setForm({ ...form, company: e.target.value })
+                    }
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Message *
-                </label>
+                <Label className="mb-2 block">Designation *</Label>
+                <Input
+                  placeholder="Your role"
+                  value={form.designation}
+                  onChange={(e) =>
+                    setForm({ ...form, designation: e.target.value })
+                  }
+                />
+              </div>
+
+              <div>
+                <Label className="mb-2 block">Solution *</Label>
+                <Select
+                  onValueChange={(value) =>
+                    setForm({ ...form, solution: value })
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select solution" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ATS">ATS</SelectItem>
+                    <SelectItem value="HRMS">HRMS</SelectItem>
+                    <SelectItem value="CRM">CRM</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label className="mb-2 block">Description (Optional)</Label>
                 <Textarea
-                  name="message"
-                  value={formData.message}
-                  onChange={handleChange}
-                  placeholder="Tell us how we can help you..."
-                  rows={6}
-                  className="w-full"
+                  placeholder="Tell us your requirement..."
+                  value={form.description}
+                  onChange={(e) =>
+                    setForm({ ...form, description: e.target.value })
+                  }
                 />
               </div>
 
               <Button
                 onClick={handleSubmit}
-                size="lg"
-                className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
+                disabled={loading}
+                className="w-full bg-[#2563eb] hover:from-purple-700 hover:to-pink-700 text-white"
               >
-                Send Message
+                {loading ? "Submitting..." : "Submit Request"}{" "}
                 <Send className="ml-2 w-5 h-5" />
               </Button>
             </div>
@@ -155,4 +232,4 @@ const ContactForm: React.FC = () => {
   );
 };
 
-export default ContactForm
+export default ContactForm;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/(public)/features/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/(public)/page.tsx

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

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

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

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

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

app/(public)/services/_components/ServiceCTA.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+export default function ServiceCTA() {
+  return (
+    <section className="py-20 bg-[#2563eb] text-white">
+
+      <div className="max-w-6xl mx-auto px-6 text-center">
+
+        <motion.h2
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="text-3xl md:text-4xl font-bold"
+        >
+          Ready to Transform Your Hiring Process?
+        </motion.h2>
+
+        <p className="mt-6 text-lg text-blue-100">
+          Start using our AI-powered recruitment platform today.
+        </p>
+
+        <div className="mt-8 flex justify-center gap-4 flex-wrap">
+
+          <Button className="bg-white text-[#2563eb] hover:bg-gray-100 px-8 py-6 text-lg rounded-xl">
+            Start Free Trial
+          </Button>
+
+        </div>
+
+      </div>
+
+    </section>
+  );
+}

app/(public)/services/_components/ServiceCard.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface Props {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+export default function ServiceCard({ title, description, icon }: Props) {
+  return (
+    <motion.div
+      whileHover={{ y: -8 }}
+      transition={{ duration: 0.3 }}
+    >
+      <Card className="h-full border border-gray-200 shadow-md hover:shadow-xl rounded-2xl">
+        <CardContent className="p-8">
+
+          <div className="text-[#2563eb] mb-5">
+            {icon}
+          </div>
+
+          <h3 className="text-xl font-semibold text-gray-900">
+            {title}
+          </h3>
+
+          <p className="mt-4 text-gray-600 leading-relaxed">
+            {description}
+          </p>
+
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

app/(public)/services/_components/ServiceHero.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function ServiceHero() {
+  return (
+    <section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-20 lg:py-28">
+      <div className="max-w-7xl mx-auto px-6 text-center">
+
+        <motion.h1
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-5xl font-bold text-gray-900"
+        >
+          Our Services
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="mt-6 text-lg text-gray-600 max-w-2xl mx-auto"
+        >
+          We provide powerful AI-driven recruitment solutions to help
+          businesses hire faster, smarter, and more efficiently.
+        </motion.p>
+
+      </div>
+    </section>
+  );
+}

app/(public)/services/_components/ServicesList.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import ServiceCard from "./ServiceCard";
+import { Users, Brain, BarChart, Shield } from "lucide-react";
+
+const services = [
+  {
+    title: "AI Resume Screening",
+    description:
+      "Automatically analyze thousands of resumes and identify the best candidates using advanced AI matching algorithms.",
+    icon: <Brain size={40} />,
+  },
+  {
+    title: "Candidate Management",
+    description:
+      "Organize and manage candidate pipelines with powerful tools for tracking interviews, feedback, and hiring stages.",
+    icon: <Users size={40} />,
+  },
+  {
+    title: "Recruitment Analytics",
+    description:
+      "Track hiring performance with detailed insights, reports, and analytics to improve your recruitment strategy.",
+    icon: <BarChart size={40} />,
+  },
+  {
+    title: "Secure HR Management",
+    description:
+      "Ensure secure handling of candidate data with enterprise-level security and compliance features.",
+    icon: <Shield size={40} />,
+  },
+];
+
+export default function ServicesList() {
+  return (
+    <section className="py-20 bg-white">
+
+      <div className="max-w-7xl mx-auto px-6">
+
+        <div className="text-center mb-16">
+          <h2 className="text-3xl font-bold text-gray-900">
+            What We Offer
+          </h2>
+
+          <p className="mt-4 text-gray-600">
+            Our platform provides everything modern hiring teams need.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+
+          {services.map((service, index) => (
+            <ServiceCard
+              key={index}
+              title={service.title}
+              description={service.description}
+              icon={service.icon}
+            />
+          ))}
+
+        </div>
+
+      </div>
+
+    </section>
+  );
+}

app/(public)/services/page.tsx

@@ -0,0 +1,16 @@
+'use client'
+import ModulesSection from "../_homeComponents/Modules";
+import ServiceCTA from "./_components/ServiceCTA";
+import ServiceHero from "./_components/ServiceHero";
+import ServicesList from "./_components/ServicesList";
+
+export default function ServicesPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <ServiceHero />
+      <ModulesSection />
+      <ServicesList />
+      <ServiceCTA />
+    </div>
+  );
+}

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

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

app/api/demo-lead/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import nodemailer from "nodemailer";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+
+  const transporter = nodemailer.createTransport({
+    service: "gmail",
+    auth: {
+      user: process.env.EMAIL_USER,
+      pass: process.env.EMAIL_PASS,
+    },
+  });
+
+  await transporter.sendMail({
+    from: process.env.EMAIL_USER,
+    to: "lead@winixco.com",
+    subject: "New Demo Request",
+    html: `
+      <h2>New Demo Lead</h2>
+      <p><strong>Name:</strong> ${body.name}</p>
+      <p><strong>Email:</strong> ${body.email}</p>
+      <p><strong><Phone Number:</strong>${body.phoneNumber}</p>
+      <p><strong>Company:</strong> ${body.company}</p>
+      <p><strong>Designation:</strong> ${body.designation}</p>
+      <p><strong>Solution:</strong> ${body.solution}</p>
+      <p><strong>Description:</strong> ${body.description}</p>
+    `,
+  });
+
+  return NextResponse.json({ success: true });
+}

app/layout.tsx

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

package-lock.json

@@ -33,6 +33,7 @@
         "jodit-react": "^5.2.26",
         "lucide-react": "^0.544.0",
         "next": "^16.0.10",
+        "nodemailer": "^8.0.3",
         "react": "^19.2.3",
         "react-day-picker": "^9.11.0",
         "react-dom": "^19.2.3",
@@ -45,6 +46,7 @@
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
+        "@types/nodemailer": "^7.0.11",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "baseline-browser-mapping": "^2.9.19",
@@ -2709,6 +2711,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/phoenix": {
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
@@ -3639,6 +3651,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.3.tgz",
+      "integrity": "sha512-JQNBqvK+bj3NMhUFR3wmCl3SYcOeMotDiwDBvIoCuQdF0PvlIY0BH+FJ2CG7u4cXKPChplE78oowlH/Otsc4ZQ==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/orderedmap": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "jodit-react": "^5.2.26",
     "lucide-react": "^0.544.0",
     "next": "^16.0.10",
+    "nodemailer": "^8.0.3",
     "react": "^19.2.3",
     "react-day-picker": "^9.11.0",
     "react-dom": "^19.2.3",
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/nodemailer": "^7.0.11",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "baseline-browser-mapping": "^2.9.19",

services/Constants.tsx

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

winixco_policies.html

@@ -1,229 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Winixco — Policy Suite (Privacy | Terms | Refunds | GDPR)</title>
-  <style>
-    :root{--bg:#f7f8fb;--card:#ffffff;--muted:#6b7280;--accent:#0f172a}
-    body{font-family:Inter,ui-sans-serif,system-ui,Helvetica,Arial;color:var(--accent);background:var(--bg);margin:0;padding:24px}
-    .container{max-width:980px;margin:0 auto}
-    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
-    header h1{font-size:20px;margin:0}
-    nav a{margin-left:12px;color:var(--muted);text-decoration:none}
-    .card{background:var(--card);border-radius:12px;padding:22px;box-shadow:0 6px 18px rgba(15,23,42,0.06);margin-bottom:18px}
-    h2{margin-top:0}
-    .muted{color:var(--muted)}
-    ul{margin-top:0}
-    pre.code{background:#0b1220;color:#e6eef8;padding:12px;border-radius:8px;overflow:auto}
-    footer{font-size:13px;color:var(--muted);text-align:center;padding:14px}
-    .note{background:#fffbeb;border-left:4px solid #f59e0b;padding:12px;border-radius:6px}
-  </style>
-</head>
-<body>
-  <div class="container">
-    <header>
-      <h1>Winixco — Policy Suite</h1>
-      <nav>
-        <a href="#privacy">Privacy Policy</a>
-        <a href="#terms">Terms of Service</a>
-        <a href="#refund">Refund &amp; Cancellation</a>
-        <a href="#gdpr">GDPR &amp; Data Processing</a>
-        <a href="#cookies">Cookies &amp; Tracking</a>
-      </nav>
-    </header>
-
-    <section id="intro" class="card">
-      <h2>Introduction</h2>
-      <p class="muted">Effective Date: <strong>[YYYY-MM-DD]</strong></p>
-      <p>These documents form the full policy suite for <strong>Winixco</strong> — an AI-powered ATS (Applicant Tracking System) and SaaS platform (collectively, the “Service”). This single HTML contains the Privacy Policy, Terms of Service, Refund &amp; Cancellation Policy, GDPR compliance summary, and Cookies &amp; Tracking notice. Replace placeholders (company address, contact email) before publishing.</p>
-      <p><strong>Contact:</strong> <a href="mailto:support@winixco.com">support@winixco.com</a></p>
-    </section>
-
-    <!-- PRIVACY POLICY -->
-    <section id="privacy" class="card">
-      <h2>Privacy Policy</h2>
-      <p><strong>Scope.</strong> This Privacy Policy explains how Winixco collects, uses, discloses, and protects personal data of users of our AI-powered ATS and SaaS products worldwide.</p>
-
-      <h3>1. Data We Collect</h3>
-      <ul>
-        <li><strong>Account &amp; Contact Data:</strong> name, company, business email, phone number, billing address, job title.</li>
-        <li><strong>Credentials:</strong> username, password (stored securely — hashed).</li>
-        <li><strong>Payment &amp; Billing Data:</strong> payment instrument identifiers (only as needed for billing) — note: we use PCI-compliant third-party payment processors and do not store full card numbers on our servers unless required by a certified provider.</li>
-        <li><strong>Usage &amp; Analytics:</strong> platform usage logs, feature usage, API keys usage metadata, session times, IP address, device and browser metadata, and audit logs (for admin/customer security and compliance).</li>
-        <li><strong>Recruitment Data (if uploaded):</strong> CVs/resumes, candidate contact details, interview notes, assessment results and other recruitment-related data that customers upload to the platform. Customers remain the data controllers for applicant data; Winixco acts as a data processor under applicable laws.</li>
-        <li><strong>Support &amp; Communications:</strong> support emails, chat transcripts, feedback, and survey responses.</li>
-      </ul>
-
-      <h3>2. How We Use Your Data</h3>
-      <p>We process personal data to:</p>
-      <ul>
-        <li>Provide, operate and maintain the Service;</li>
-        <li>Process subscriptions, invoices, refunds, and payments;</li>
-        <li>Allow customers to onboard, administer accounts, and manage hiring workflows;</li>
-        <li>Improve, personalize and develop features (including AI models and candidate-matching algorithms) using aggregated/anonymized data where possible;</li>
-        <li>Detect and prevent fraud, abuse or security incidents;</li>
-        <li>Comply with legal obligations and respond to lawful requests.</li>
-      </ul>
-
-      <h3>3. Legal Bases for Processing (where applicable)</h3>
-      <p>For users in jurisdictions that require a legal basis (e.g., EU):</p>
-      <ul>
-        <li><strong>Contractual necessity:</strong> processing required to deliver the Service and fulfil contracts.</li>
-        <li><strong>Legitimate interests:</strong> platform security, fraud prevention, and improving services (balanced against individual rights).</li>
-        <li><strong>Consent:</strong> where processing (e.g., marketing emails) relies on explicit consent.</li>
-      </ul>
-
-      <h3>4. Sharing &amp; Disclosures</h3>
-      <ul>
-        <li>We share data with <em>service providers</em> (payment processors, cloud hosting, analytics, email delivery, identity providers) under written contracts requiring confidentiality and limiting use to service delivery.</li>
-        <li>Customer-uploaded applicant data: Winixco processes this data at the direction of our customers; we will not access or use it except to provide the Service, to comply with law, or to protect the rights and safety of users.</li>
-        <li>Legal obligations: we may disclose data to comply with laws, lawsuits, government requests, or to protect rights, safety, or property.</li>
-      </ul>
-
-      <h3>5. Data Retention</h3>
-      <p>We retain personal data only as long as necessary to provide the Service or to comply with legal obligations. Customers may export or request deletion of their uploaded recruitment data in accordance with their account and service agreement.</p>
-
-      <h3>6. Security</h3>
-      <p>We implement administrative, technical and physical safeguards (encryption in transit and at rest, access controls, monitoring) to protect data. However, no system is 100% secure — if a security incident affecting personal data occurs, we will notify affected parties and regulators as required by law.</p>
-
-      <h3>7. International Transfers</h3>
-      <p>Winixco operates globally. Personal data may be transferred to countries with different data protection laws. We protect transfers with appropriate safeguards (standard contractual clauses, intra-group agreements, or other lawful mechanisms).</p>
-
-      <h3>8. Your Rights &amp; Controls</h3>
-      <ul>
-        <li>Access, rectify, erase, restrict or object to processing, and data portability — where applicable under local law.</li>
-        <li>Withdraw consent to marketing communications at any time.</li>
-        <li>To exercise rights, contact: <a href="mailto:support@winixco.com">support@winixco.com</a>.</li>
-      </ul>
-
-      <h3>9. Children</h3>
-      <p>Our Service is not directed to children under 16. We do not knowingly collect personal data from children; please contact us to request removal if you believe a child has provided information.</p>
-    </section>
-
-    <!-- TERMS -->
-    <section id="terms" class="card">
-      <h2>Terms of Service (SaaS)</h2>
-      <p><strong>Scope.</strong> These Terms govern your use of Winixco’s SaaS platform, including web application, APIs, and related services.</p>
-
-      <h3>1. Account Registration</h3>
-      <p>Customers must provide accurate information and keep account credentials secure. You are liable for all activity under your account.</p>
-
-      <h3>2. Subscriptions &amp; Billing</h3>
-      <ul>
-        <li>Subscriptions are offered on monthly or annual plans. Billing cycles begin on activation date.</li>
-        <li>By subscribing you authorize Winixco (and our payment processors) to charge the payment method you provide for recurring fees until subscription cancellation.</li>
-        <li>We may offer trial periods — trial usage and limits will be disclosed. At the end of a trial, charges begin as per chosen plan unless cancelled before the trial ends.</li>
-      </ul>
-
-      <h3>3. Non-Refundable Items</h3>
-      <p>The following items are explicitly non-refundable once charged or consumed:</p>
-      <ul>
-        <li>Monthly subscription fees</li>
-        <li>Annual subscription fees once activated</li>
-        <li>AI credits consumed (usage-based credits for AI-powered features)</li>
-        <li>Setup charges or onboarding fees (if applicable)</li>
-        <li>Custom integrations</li>
-        <li><strong>Cloud Storage charges</strong> (storage fees for customer data and backups)</li>
-      </ul>
-
-      <h3>4. Usage Limits &amp; Fair Use</h3>
-      <p>Plans may include limits (users, seats, API calls, AI credits, storage). Excess usage will be billed or throttled per plan terms. Abusive or fraudulent use may result in suspension.</p>
-
-      <h3>5. Customer Data &amp; Ownership</h3>
-      <p>Customers retain ownership of all uploaded and generated recruitment data. Winixco processes such data only to provide services and as otherwise directed by the customer. Customers are responsible for obtaining necessary consents from job applicants and other data subjects under applicable law.</p>
-
-      <h3>6. Service Levels &amp; Support</h3>
-      <p>We aim to provide high availability but cannot guarantee uninterrupted service. Service Level Agreements (SLAs) — if any — will be specified in separate agreements. Support channels and expected response times are listed in your subscription plan.</p>
-
-      <h3>7. Intellectual Property</h3>
-      <p>Winixco owns the Service, trademarks and software. Customers are granted a limited, non-exclusive, non-transferable license to use the Service during their subscription term. Customer-provided content remains the customer’s property.</p>
-
-      <h3>8. Confidentiality</h3>
-      <p>Each party agrees to protect confidential information of the other and not disclose it except as necessary to perform the Service or required by law.</p>
-
-      <h3>9. Limitations of Liability</h3>
-      <p>To the fullest extent permitted by law, Winixco’s aggregate liability for claims arising from the Service will not exceed the total subscription fees paid by the customer in the 12 months prior to the claim. We are not liable for indirect, consequential, or punitive damages.</p>
-
-      <h3>10. Termination</h3>
-      <p>Either party may terminate subscriptions per the agreed cancellation terms. On termination, customer access will be disabled; customers may export their data for a limited period. We may delete retained data after the export window and per our retention policy.</p>
-
-      <h3>11. Governing Law &amp; Jurisdiction</h3>
-      <p>These Terms are governed by the laws of <strong>India</strong>. For global customers, the parties agree to resolve disputes either through arbitration in India or another mutually agreed forum. Where local law mandates otherwise, applicable local consumer protection laws will apply.</p>
-    </section>
-
-    <!-- REFUND & CANCELLATION -->
-    <section id="refund" class="card">
-      <h2>Refund &amp; Cancellation Policy (SaaS)</h2>
-
-      <h3>1. Cancellation</h3>
-      <p>Customers may cancel subscriptions at any time via the dashboard or by contacting support. Cancellation takes effect at the end of the current billing period (unless otherwise stated in the plan). No partial-period refunds will be given for time remaining in the billing cycle except as described below.</p>
-
-      <h3>2. Refund Eligibility</h3>
-      <p>Refunds are discretionary and subject to the following:</p>
-      <ul>
-        <li>Refunds for technical failure: if a material service outage occurs and Winixco fails to restore service within a reasonable timeframe, partial refunds or credits may be issued pro rata at our discretion or as specified in your SLA.</li>
-        <li>Duplicate or erroneous charges: if a charge was made in error, we will refund the duplicate or incorrect charge after verification.</li>
-        <li>Trials: if charged erroneously at the end of a trial, we will refund the trial-to-paid charge upon timely request.</li>
-      </ul>
-
-      <h3>3. Non-Refundable Items</h3>
-      <p>The following are non-refundable once billed or consumed (repeat of Terms for clarity):</p>
-      <ul>
-        <li>Monthly subscription fees</li>
-        <li>Annual subscription fees once activated</li>
-        <li>AI credits consumed</li>
-        <li>Setup charges or onboarding fees</li>
-        <li>Custom integrations</li>
-        <li><strong>Cloud Storage charges</strong></li>
-      </ul>
-
-      <h3>4. Refund Process</h3>
-      <ol>
-        <li>Contact <a href="mailto:support@winixco.com">support@winixco.com</a> with order/subscription details.</li>
-        <li>We will acknowledge within 3 business days and may request documentation.</li>
-        <li>If approved, refunds will be processed to the original payment method within 7–14 business days (processing time may vary by provider).</li>
-      </ol>
-
-      <h3>5. Chargebacks</h3>
-      <p>Initiating a chargeback with your bank for disputes may lead to account suspension while we investigate. If a chargeback is found to be unjustified, we reserve the right to recover owed fees and reinstate charges.</p>
-    </section>
-
-    <!-- GDPR -->
-    <section id="gdpr" class="card">
-      <h2>GDPR &amp; Data Processing</h2>
-      <p><strong>Controller vs Processor:</strong> For recruitment data uploaded by customers (applicant CVs, interview notes, candidate profiles), Winixco acts as a <strong>Data Processor</strong> and the subscribing customer is the <strong>Data Controller</strong>. For user account data collected by Winixco directly (e.g., admin account), Winixco is the Data Controller.</p>
-
-      <h3>Data Processing Addendum (DPA)</h3>
-      <p>We provide a DPA upon request or include it in our subscription agreement. The DPA includes:</p>
-      <ul>
-        <li>Permitted processing activities and purposes (hosting, storage, backups, support).</li>
-        <li>Security measures (encryption, access controls, logging).</li>
-        <li>Sub-processor list and notification obligations for changes.</li>
-        <li>Data subject rights assistance and deletion/return of data at contract end.</li>
-      </ul>
-
-      <h3>GDPR Rights &amp; Assistance</h3>
-      <p>We assist customers in fulfilling data subject requests (access, rectification, erasure, portability) for data processed on their behalf. Customers should contact <a href="mailto:support@winixco.com">support@winixco.com</a> with specifics and proof of identity when required.</p>
-
-      <h3>Standard Contractual Clauses &amp; International Transfers</h3>
-      <p>Where we transfer personal data from the EU to non‑adequate jurisdictions, we rely on appropriate safeguards such as Standard Contractual Clauses (SCCs) or other lawful mechanisms. Customers may request copies of relevant safeguards.</p>
-    </section>
-
-    <!-- COOKIES -->
-    <section id="cookies" class="card">
-      <h2>Cookies &amp; Tracking</h2>
-      <p>We use cookies and similar technologies to operate the Service, authenticate users, remember preferences, perform analytics, and for security. You can manage cookie settings via the platform UI or browser preferences. Our cookie categories:</p>
-      <ul>
-        <li><strong>Essential:</strong> required for authentication and core platform functionality.</li>
-        <li><strong>Performance &amp; Analytics:</strong> usage metrics to help us improve the product.</li>
-        <li><strong>Marketing:</strong> if enabled and with consent, used for product updates and outreach.</li>
-      </ul>
-    </section>
-
-    <footer>
-      <p class="muted">This policy suite is a template and does not constitute legal advice. For regulatory or country‑specific compliance (e.g., GDPR, CCPA, India’s DPDP), please consult qualified counsel. Contact: <a href="mailto:support@winixco.com">support@winixco.com</a></p>
-    </footer>
-  </div>
-</body>
-</html>