Book demo model and functionalities added
This commit is contained in:
220
app/(public)/_homeComponents/DemoModal.tsx
Normal file
220
app/(public)/_homeComponents/DemoModal.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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"},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
154
app/(public)/_homeComponents/PricingSection.tsx
Normal file
154
app/(public)/_homeComponents/PricingSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
>
|
||||
<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">Our Vision</h3>
|
||||
<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">
|
||||
@@ -159,7 +161,6 @@ export default function AboutUs() {
|
||||
Explore Careers
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
import {
|
||||
Send,
|
||||
CheckCircle} from 'lucide-react';
|
||||
|
||||
"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 {
|
||||
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 (
|
||||
@@ -52,7 +110,7 @@ const ContactForm: React.FC = () => {
|
||||
Fill out the form below and we'll get back to you within 24 hours
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{submitted ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
@@ -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"
|
||||
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;
|
||||
|
||||
@@ -15,6 +15,7 @@ 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 (
|
||||
@@ -27,8 +28,7 @@ export default function Page() {
|
||||
<ModulesSection />
|
||||
<TestimonialsSection />
|
||||
<Benefits />
|
||||
|
||||
<Pricing />
|
||||
<PricingSection />
|
||||
<HowItWorks />
|
||||
<FAQ />
|
||||
<CTA />
|
||||
|
||||
32
app/api/demo-lead/route.ts
Normal file
32
app/api/demo-lead/route.ts
Normal file
@@ -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 });
|
||||
}
|
||||
Reference in New Issue
Block a user