Book demo model and functionalities added

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/Features.tsx

@@ -19,7 +19,7 @@ const Features = () => {
           </span>
 
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
-            Powerful Features Built for Modern Recruiting
+            Powerful AI Driven Features to Turbocharge your Hiring Process
           </h2>
 
           <p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">

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

@@ -6,6 +6,7 @@ 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);
@@ -19,9 +20,7 @@ const Header = () => {
   }, []);
 
   // Remove Blogs and Careers
-  const navigation = home.navigation.filter(
-    (item) => item.name !== "Blog" && item.name !== "Careers"
-  );
+  const navigation = home.navigation.filter((item) => item.name !== "Blog");
 
   return (
     <motion.header
@@ -33,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="/">
@@ -60,9 +58,15 @@ const Header = () => {
           </nav>
 
           <div className="hidden md:flex items-center space-x-4">
+            <DemoModal
+              trigger={
+                <Button className="text-white bg-[#2563eb]">Book Demo</Button>
+              }
+            />
+
             <Button
               className="text-white font-medium bg-[#2563eb]"
-              onClick={()=>router.push("#pricing")}
+              onClick={() => router.push("#pricing")}
             >
               Start Free Trial
             </Button>
@@ -96,10 +100,17 @@ const Header = () => {
                   {item.name}
                 </Link>
               ))}
+              <DemoModal
+                trigger={
+                  <Button className="w-full text-white bg-[#2563eb]">
+                    Book Demo
+                  </Button>
+                }
+              />
+
               <Button
                 className="w-full text-white bg-[#2563eb]"
-                onClick={()=>router.push("#pricing")}
-                
+                onClick={() => router.push("#pricing")}
               >
                 Start Free Trial
               </Button>

app/(public)/_homeComponents/HeroSection.tsx

@@ -3,6 +3,7 @@
 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();
@@ -34,12 +35,16 @@ export default function HeroSection() {
               Start Free Trial
             </Button>
 
-            <Button
-              variant="outline"
-              className="w-full sm:w-auto border-[#2563eb] text-[#2563eb] px-8 py-6 text-base rounded-xl"
-            >
-              Schedule Demo
-            </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>
 

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