Ui cahnges and button linking
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -11,8 +12,10 @@ import {
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { home } from "@/services/Constants";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const AboutUs: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
@@ -203,6 +206,7 @@ const AboutUs: React.FC = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#2563eb] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
onClick={() => router.push("/features")}
|
||||
>
|
||||
{home.about.cta}
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
|
||||
@@ -26,7 +26,7 @@ const footerLinks = [
|
||||
items: [
|
||||
{ label: "About Us", url: "/about" },
|
||||
{ label: "Careers", url: "/careers" },
|
||||
{ label: "Blog", url: "/blog" },
|
||||
{ label: "Features", url: "/features" },
|
||||
{ label: "Contact", url: "/contact" },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
ModuleFeature,
|
||||
} from "@/services/Constants";
|
||||
import { useRouter } from "next/navigation";
|
||||
import DemoModal from "./DemoModal";
|
||||
|
||||
const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
const [isHovered, setIsHovered] = useState<boolean>(false);
|
||||
@@ -190,21 +191,30 @@ const ModulesSection: React.FC = () => {
|
||||
Get started with all modules and experience seamless integration
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
|
||||
>
|
||||
Start Free Trial
|
||||
<Sparkles className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-white text-slate-600 hover:bg-white/10"
|
||||
>
|
||||
Schedule Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<DemoModal
|
||||
trigger={
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
|
||||
>
|
||||
Start Free Trial
|
||||
<Sparkles className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<DemoModal
|
||||
trigger={
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-white text-slate-600 hover:bg-white/10"
|
||||
>
|
||||
Schedule Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -214,4 +224,4 @@ const ModulesSection: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ModulesSection;
|
||||
export default ModulesSection;
|
||||
|
||||
@@ -4,8 +4,11 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Check } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import DemoModal from "./DemoModal";
|
||||
|
||||
export default function PricingSection() {
|
||||
const router = useRouter();
|
||||
const features = [
|
||||
"Unlimited Jobs & Candidates",
|
||||
"FREE HRMS & CRM",
|
||||
@@ -20,9 +23,11 @@ export default function PricingSection() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div id="pricing" className="w-full bg-gradient-to-b from-slate-50 to-white text-slate-900">
|
||||
<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.
|
||||
@@ -30,42 +35,41 @@ export default function PricingSection() {
|
||||
|
||||
<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
|
||||
<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>
|
||||
<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-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">
|
||||
<Button
|
||||
className="w-full mt-6 text-lg py-6 rounded-xl"
|
||||
onClick={() => router.push("https://app.winixco.com/plans")}
|
||||
>
|
||||
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">
|
||||
<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>
|
||||
@@ -76,12 +80,12 @@ export default function PricingSection() {
|
||||
|
||||
{/* 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.
|
||||
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">
|
||||
@@ -114,9 +118,7 @@ export default function PricingSection() {
|
||||
<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>
|
||||
<p className="mt-2 text-blue-600 font-bold">{plan.price}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
@@ -128,7 +130,8 @@ export default function PricingSection() {
|
||||
<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.
|
||||
10 recruiters using Winixco can save ~400 hours/month through AI
|
||||
automation resulting in productivity worth ₹4L+ per month.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -136,12 +139,14 @@ export default function PricingSection() {
|
||||
|
||||
{/* 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>
|
||||
<p className="mb-4 text-slate-600">Need bulk pricing or demo?</p>
|
||||
<DemoModal
|
||||
trigger={
|
||||
<Button className="px-8 py-6 text-lg rounded-xl">
|
||||
Contact Sales
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -151,4 +156,4 @@ export default function PricingSection() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user