Ui cahnges and button linking

This commit is contained in:
2026-04-18 21:53:42 +05:30
parent 174faf5ccd
commit 7cd9585c8f
21 changed files with 292 additions and 210 deletions

View File

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

View File

@@ -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" },
],
},

View File

@@ -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;

View File

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