new pages created

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

@@ -0,0 +1,88 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { CalendarCheck, Send, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const features = [
+  "Personalized walkthrough of ATS, HRMS & CRM",
+  "Explore dashboards, workflows & automation",
+  "Pricing, setup & integration guidance",
+  "Ask anything tailored to your business needs",
+];
+
+const BookDemoSection = () => {
+  return (
+    <section className="relative py-24 px-6 bg-white overflow-hidden">
+      {/* Background Glow */}
+      <motion.div
+        className="absolute inset-0 opacity-30 pointer-events-none"
+        animate={{ scale: [1, 1.05, 1] }}
+        transition={{ duration: 14, repeat: Infinity }}
+      >
+        
+      </motion.div>
+
+      <div className="relative z-10 max-w-5xl mx-auto text-center">
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          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>
+        </motion.h2>
+
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mt-6 text-lg md:text-xl text-gray-600 max-w-3xl mx-auto"
+        >
+          Want to see how Winixco can improve hiring, HR operations or client
+          management? Get your free 1-on-1 demo — our team responds within 12 hours.
+        </motion.p>
+
+        {/* Feature List */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="grid gap-4 md:grid-cols-2 max-w-2xl mx-auto mt-10 text-left"
+        >
+          {features.map((item, index) => (
+            <div key={index} className="flex items-center gap-3">
+              <CheckCircle className="text-purple-600 w-6 h-6" />
+              <p className="text-gray-700 font-medium">{item}</p>
+            </div>
+          ))}
+        </motion.div>
+
+        {/* CTA Buttons */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex flex-col sm:flex-row gap-5 justify-center mt-12"
+        >
+          <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"
+          >
+            <CalendarCheck className="mr-2 w-5 h-5" />
+            Book My Demo
+          </Button>
+          <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"
+          >
+            <Send className="mr-2 w-5 h-5" />
+            Contact Sales
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default BookDemoSection;

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

@@ -0,0 +1,98 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { CheckCircle, Rocket, Shield, Zap, MessageCircle, Calendar, Clock } from "lucide-react";
+import Link from "next/link";
+
+// Feature data
+const features = [
+  { text: "Fast and transparent customer support", icon: Rocket },
+  { text: "Simple onboarding and quick implementation", icon: Zap },
+  { text: "Scalable modules for startups to enterprises", icon: CheckCircle },
+  { text: "Custom features built on request", icon: MessageCircle },
+  { text: "Secure, cloud-based infrastructure", icon: Shield },
+  { text: "Real-time analytics and reporting", icon: Clock }, // New feature added
+];
+
+
+const ChooseWinixco = () => {
+  return (
+    <section className="py-24 px-6 bg-white">
+      <div className="max-w-6xl mx-auto text-center">
+        {/* Title */}
+        <motion.h2
+          initial={{ opacity: 0, y: 25 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          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>
+        </motion.h2>
+
+        {/* Feature Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-14 justify-center">
+          {features.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              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" />
+              <p className="text-lg text-gray-700 font-medium">{item.text}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+// Contact CTA Section
+const WeLoveToHearFromYou = () => {
+  return (
+    <section className="py-24 px-6 bg-white">
+      <motion.div
+        initial={{ opacity: 0, y: 25 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        className="max-w-4xl mx-auto text-center bg-white p-12 rounded-3xl shadow-xl"
+      >
+        {/* Title */}
+        <h2 className="text-4xl md:text-5xl font-bold text-gray-900">
+          📣 We’d Love to Hear From You
+        </h2>
+
+        <p className="text-gray-600 mt-6 text-lg">
+          Your message helps us understand your business better — and deliver the right solution.
+          Let’s build something powerful for your organisation.
+        </p>
+
+        {/* CTA Buttons */}
+        <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"
+          >
+            👉 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"
+          >
+            👉 Book a Demo
+          </Link>
+        </div>
+      </motion.div>
+    </section>
+  );
+};
+
+export { ChooseWinixco, WeLoveToHearFromYou };

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

@@ -1,46 +1,77 @@
-"use client"
-import React from 'react';
-import { motion } from 'framer-motion';
-import { CONTACT_DATA } from '@/services/Constants';
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { CONTACT_DATA } from "@/services/Constants";
 
+const GetInTouch: React.FC = () => {
+  return (
+    <section className="relative py-24 px-6 overflow-hidden">
+      
+      {/* Background Gradient Blobs */}
+      <motion.div
+        className="absolute inset-0 pointer-events-none opacity-30"
+        animate={{ scale: [1, 1.08, 1] }}
+        transition={{ duration: 18, repeat: Infinity }}
+      >
+      
+      </motion.div>
 
-
-// Get In Touch Component
-const GetInTouch: React.FC = () => (
-  <motion.div
-    initial={{ opacity: 0, y: 20 }}
-    whileInView={{ opacity: 1, y: 0 }}
-    viewport={{ once: true }}
-    className="bg-gray-50 rounded-3xl p-8 md:p-12 mb-20"
-  >
-    <div className="text-center mb-12">
-      <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-        {CONTACT_DATA.getInTouch.title}
-      </h2>
-      <p className="text-gray-600 max-w-2xl mx-auto">
-        {CONTACT_DATA.getInTouch.description}
-      </p>
-    </div>
-    <div className="grid md:grid-cols-3 gap-8">
-      {CONTACT_DATA.getInTouch.methods.map((method, index) => (
-        <motion.div
-          key={index}
+      <div className="relative z-10 max-w-6xl mx-auto text-center">
+        {/* Title */}
+        <motion.h2
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
-          transition={{ delay: index * 0.1 }}
-          className="text-center"
+          className="text-4xl md:text-5xl font-extrabold text-gray-900"
         >
-          <div className={`w-16 h-16 mx-auto mb-4 bg-white rounded-2xl shadow-md flex items-center justify-center ${method.color}`}>
-            <method.icon className="w-8 h-8" />
-          </div>
-          <h3 className="text-xl font-bold text-gray-900 mb-2">{method.title}</h3>
-          <p className="text-gray-600 text-sm mb-2">{method.description}</p>
-          <p className={`font-semibold ${method.color}`}>{method.contact}</p>
-        </motion.div>
-      ))}
-    </div>
-  </motion.div>
-);
+          {CONTACT_DATA.getInTouch.title}
+          <span className="block mt-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+            Let’s Connect
+          </span>
+        </motion.h2>
 
-export default GetInTouch
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="mt-6 text-lg text-gray-600 max-w-2xl mx-auto"
+        >
+          {CONTACT_DATA.getInTouch.description}
+        </motion.p>
+
+        {/* Contact Methods */}
+        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-8 mt-16">
+          {CONTACT_DATA.getInTouch.methods.map((method, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 25 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.15 }}
+              whileHover={{ scale: 1.05 }}
+              className="p-8 bg-white/70 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl transition-all cursor-pointer"
+            >
+              {/* Icon */}
+              <div
+                className={`w-14 h-14 mx-auto mb-5 rounded-xl flex items-center justify-center shadow-md ${method.color} `}
+              >
+                <method.icon className="w-7 h-7" />
+              </div>
+
+              <h3 className="text-xl font-bold text-gray-900 mb-2">
+                {method.title}
+              </h3>
+
+              <p className="text-gray-600 text-sm mb-2">{method.description}</p>
+
+              <p className="font-semibold text-purple-700">{method.contact}</p>
+            </motion.div>
+          ))}
+        </div>
+
+      </div>
+    </section>
+  );
+};
+
+export default GetInTouch;

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

@@ -2,30 +2,46 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { Badge } from "@/components/ui/badge";
-import { CONTACT_DATA } from "@/services/Constants";
 
 const HeroSection: React.FC = () => (
-  <motion.div
-    initial={{ opacity: 0, y: 20 }}
-    animate={{ opacity: 1, y: 0 }}
-    className="text-center mb-16 mt-10"
-  >
-    <Badge className="mb-4 px-4 py-2 bg-purple-100 text-purple-700">
-      {CONTACT_DATA.hero.badge}
-    </Badge>
-    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
-      {CONTACT_DATA.hero.title}{" "}
-      <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-        us
-      </span>
-    </h1>
-    <p className="text-lg md:text-xl text-gray-600 mb-2 max-w-3xl mx-auto">
-      {CONTACT_DATA.hero.description}
-    </p>
-    <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
-      {CONTACT_DATA.hero.subtitle}
-    </p>
-  </motion.div>
+  <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>
+
+    {/* 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">
+        #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>
+      </h1>
+
+      <p className="text-lg md:text-xl mt-6 text-gray-600 max-w-3xl mx-auto leading-relaxed">
+        Whether you're exploring our ATS, HRMS, or CRM solutions — or need
+        support for your existing account — our team is ready with fast, expert guidance.
+      </p>
+
+      <p className="text-lg md:text-xl mt-3 text-gray-700 max-w-3xl mx-auto font-medium">
+        Let’s Connect & Grow Together.
+      </p>
+    </motion.div>
+  </section>
 );
 
 export default HeroSection;

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

@@ -0,0 +1,72 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { BadgeCheck, Handshake, Globe, Layers } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const partnerships = [
+  "White-label & reseller partnership",
+  "Revenue-sharing models",
+  "API-based integrations",
+  "Custom enterprise solutions",
+];
+
+const PartnerWithUsSection = () => {
+  return (
+    <section className="relative py-24 px-6 bg-white overflow-hidden">
+      <motion.div
+        className="absolute inset-0 opacity-20 pointer-events-none"
+        animate={{ scale: [1, 1.08, 1] }}
+        transition={{ duration: 14, repeat: Infinity }}
+      >
+        <div className="absolute w-96 h-96 bg-purple-300 blur-[120px] rounded-full -top-10 -left-10"></div>
+        <div className="absolute w-80 h-80 bg-pink-400 blur-[130px] rounded-full bottom-0 right-0"></div>
+      </motion.div>
+
+      <div className="relative z-10 max-w-6xl mx-auto text-center">
+        <motion.h2
+          initial={{ opacity: 0, y: 25 }}
+          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>
+        </motion.h2>
+
+        <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
+          Winixco empowers recruitment agencies, IT firms, HR consultants and
+          SaaS resellers to expand their service offerings & grow revenue.
+        </p>
+
+        <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto mt-10 text-left">
+          {partnerships.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="flex items-center gap-3"
+            >
+              <BadgeCheck className="text-purple-600 w-6 h-6" />
+              <p className="text-gray-700 font-medium">{item}</p>
+            </motion.div>
+          ))}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          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">
+            Become a Partner
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default PartnerWithUsSection;

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

@@ -0,0 +1,73 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { Wrench, Clock, Zap, HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const supportPoints = [
+  "ATS, HRMS & CRM module setup guidance",
+  "Integrations including email, SSO & APIs",
+  "Troubleshooting & bug resolution",
+  "Custom workflow or feature implementation",
+];
+
+const TechnicalSupportSection = () => {
+  return (
+    <section className="relative py-24 px-6 bg-white overflow-hidden">
+      {/* Glow */}
+      <motion.div
+        className="absolute inset-0 opacity-25 pointer-events-none"
+        animate={{ scale: [1, 1.05, 1] }}
+        transition={{ duration: 14, repeat: Infinity }}
+      >
+      </motion.div>
+
+      <div className="relative z-10 max-w-6xl mx-auto">
+        <div className="text-center">
+          <motion.h2
+            initial={{ opacity: 0, y: 25 }}
+            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>
+          </motion.h2>
+
+          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
+            Already using Winixco? We’re here to ensure everything works seamlessly
+            — fast responses & expert support guaranteed.
+          </p>
+        </div>
+
+        {/* Support Features */}
+        <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto mt-12">
+          {supportPoints.map((item, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="flex items-center gap-3"
+            >
+              <HelpCircle className="text-purple-600 w-6 h-6" />
+              <p className="text-gray-700 font-medium">{item}</p>
+            </motion.div>
+          ))}
+        </div>
+
+        <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"
+          >
+            Contact Support
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TechnicalSupportSection;

app/(public)/contact/page.tsx

@@ -1,29 +1,15 @@
 "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 { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { 
-  Headphones, 
-  LifeBuoy, 
-  Mail, 
-  MessageSquare, 
-  Phone, 
-  MapPin,
-  Send,
-  CheckCircle,
-  Users,
-  Star
-} from 'lucide-react';
+import React from 'react';
 import HeroSection from './_components/HeroSection';
 import QuickActions from './_components/QuickActions';
 import GetInTouch from './_components/GetInTouch';
 import GlobalOffices from './_components/GlobalOffices';
 import ContactForm from './_components/ContactForm';
 import HappyCustomers from './_components/HappyCustomers';
+import BookDemoSection from './_components/BookDemo';
+import PartnerWithUsSection from './_components/PartnerWithUs';
+import TechnicalSupportSection from './_components/TechnicalSupport';
+import { ChooseWinixco, WeLoveToHearFromYou } from './_components/ChooseWinixco';
 
 // Main Contact Page Component
 export default function ContactUsPage() {
@@ -31,10 +17,13 @@ export default function ContactUsPage() {
     <div className="min-h-screen bg-white">
       <div className="px-4 sm:px-4 lg:px-10 py-16 md:py-24">
         <HeroSection />
-        <QuickActions />
         <GetInTouch />
-        <GlobalOffices />
+        <BookDemoSection />
+        <PartnerWithUsSection />
+        <TechnicalSupportSection />
         <ContactForm />
+        <ChooseWinixco />
+        <WeLoveToHearFromYou />
         <HappyCustomers />
       </div>
     </div>