new pages created
This commit is contained in:
@@ -1,40 +1,45 @@
|
||||
import React from 'react';
|
||||
import { motion, Variants } from 'framer-motion';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowRight, CheckCircle, Users, Target, Award, Sparkles } from 'lucide-react';
|
||||
import { home } from '@/services/Constants';
|
||||
|
||||
import React from "react";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Users,
|
||||
Target,
|
||||
Award,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
const AboutUs: React.FC = () => {
|
||||
|
||||
const containerVariants:Variants = {
|
||||
const containerVariants: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.3
|
||||
}
|
||||
}
|
||||
delayChildren: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants:Variants = {
|
||||
const itemVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.6, ease: "easeOut" }
|
||||
}
|
||||
transition: { duration: 0.6, ease: "easeOut" },
|
||||
},
|
||||
};
|
||||
|
||||
const imageVariants:Variants = {
|
||||
const imageVariants: Variants = {
|
||||
hidden: { opacity: 0, scale: 0.8 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { duration: 0.8, ease: "easeOut" }
|
||||
}
|
||||
transition: { duration: 0.8, ease: "easeOut" },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -59,7 +64,9 @@ const AboutUs: React.FC = () => {
|
||||
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
|
||||
<Users className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<p className="text-gray-600 font-medium">Team Collaboration</p>
|
||||
<p className="text-gray-600 font-medium">
|
||||
Team Collaboration
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -107,7 +114,7 @@ const AboutUs: React.FC = () => {
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 90, 0]
|
||||
rotate: [0, 90, 0],
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-30 -z-10"
|
||||
@@ -162,7 +169,9 @@ const AboutUs: React.FC = () => {
|
||||
className="text-center p-4 rounded-xl bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-100"
|
||||
>
|
||||
<stat.icon className="w-8 h-8 mx-auto mb-2 text-blue-600" />
|
||||
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 mt-1">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -222,4 +231,4 @@ const AboutUs: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
export default AboutUs;
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
"use client";
|
||||
import React, { } from "react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import AnimatedSection from "./Animated";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
|
||||
|
||||
// Benefits Section
|
||||
const Benefits = () => {
|
||||
return (
|
||||
<section
|
||||
@@ -19,27 +16,31 @@ const Benefits = () => {
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 relative z-10">
|
||||
{/* Heading */}
|
||||
<AnimatedSection className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Why Choose TalentFlow?
|
||||
Why Choose Winixco?
|
||||
</h2>
|
||||
<p className="text-xl text-purple-100 max-w-3xl mx-auto">
|
||||
Experience the future of recruitment with our innovative platform
|
||||
Winixco helps companies stay efficient, connected, and future-ready.
|
||||
With automation, accuracy, and real-time syncing, every department works smarter — not harder.
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{home.benefits.map((benefit, index) => (
|
||||
{home.benefits.map((feature, index) => (
|
||||
<AnimatedSection key={index}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="text-center p-8 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 hover:bg-white/20 transition-all"
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
|
||||
<div className="text-white">{benefit.icon}</div>
|
||||
<span className="text-white">{feature.icon}</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3">{benefit.title}</h3>
|
||||
<p className="text-purple-100">{benefit.description}</p>
|
||||
|
||||
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
||||
<p className="text-purple-100">{feature.description}</p>
|
||||
</motion.div>
|
||||
</AnimatedSection>
|
||||
))}
|
||||
@@ -49,4 +50,4 @@ const Benefits = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Benefits
|
||||
export default Benefits;
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
"use client";
|
||||
import React, { } from "react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
|
||||
// CTA Section
|
||||
const CTA = () => {
|
||||
return (
|
||||
@@ -21,10 +18,16 @@ const CTA = () => {
|
||||
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-4xl md:text-6xl font-bold mb-6">
|
||||
Ready to Transform Your Hiring?
|
||||
Transform the way your business
|
||||
<span className="bg-gradient-to-r from-pink-400 to-yellow-300 bg-clip-text text-transparent">
|
||||
{" "}
|
||||
hires, manages & grows
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-purple-100 mb-10">
|
||||
Join 10,000+ HR teams using TalentFlow to hire smarter and faster
|
||||
Winixco brings HRMS, ATS & CRM together — so your teams stay aligned,
|
||||
productive and future-ready.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
@@ -32,19 +35,25 @@ const CTA = () => {
|
||||
size="lg"
|
||||
className="px-10 py-6 text-lg bg-white text-purple-700 font-bold rounded-xl shadow-lg hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
|
||||
>
|
||||
Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
{" "}
|
||||
Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />{" "}
|
||||
</Button>{" "}
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 text-purple-700 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
|
||||
>
|
||||
Book a Demo
|
||||
{" "}
|
||||
Book a Demo{" "}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-sm text-purple-200">
|
||||
No credit card required · Quick setup · Cancel anytime
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CTA
|
||||
export default CTA;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import React, { } from "react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import AnimatedSection from "./Animated";
|
||||
@@ -18,14 +18,14 @@ const Features = () => {
|
||||
POWERFUL FEATURES
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Everything You Need to{" "}
|
||||
All-in-One ATS, HRMS & CRP{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
Hire Smarter
|
||||
Solutions
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Our comprehensive ATS platform combines cutting-edge AI with
|
||||
intuitive design to revolutionize your recruitment process.
|
||||
Explore features across all our products designed to scale your
|
||||
hiring success.
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -60,4 +60,4 @@ const Features = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Features
|
||||
export default Features;
|
||||
|
||||
@@ -1,133 +1,144 @@
|
||||
"use client";
|
||||
import React, { } from "react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Check,
|
||||
ArrowRight,
|
||||
PlayCircle,
|
||||
} from "lucide-react";
|
||||
import { Check, ArrowRight, PlayCircle, Users, UserCog, Briefcase } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className="relative pt-32 pb-20 px-4 overflow-hidden bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
|
||||
{/* Animated Background Elements */}
|
||||
<section className="relative pt-32 pb-24 px-4 overflow-hidden bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
|
||||
{/* Background Animation */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 90, 0],
|
||||
}}
|
||||
animate={{ scale: [1, 1.2, 1], rotate: [0, 90, 0] }}
|
||||
transition={{ duration: 20, repeat: Infinity }}
|
||||
className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
||||
className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
rotate: [90, 0, 90],
|
||||
}}
|
||||
animate={{ scale: [1.2, 1, 1.2], rotate: [90, 0, 90] }}
|
||||
transition={{ duration: 25, repeat: Infinity }}
|
||||
className="absolute top-40 -right-20 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
||||
className="absolute top-40 -right-20 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.3, 1],
|
||||
rotate: [0, -90, 0],
|
||||
}}
|
||||
animate={{ scale: [1, 1.3, 1], rotate: [0, -90, 0] }}
|
||||
transition={{ duration: 30, repeat: Infinity }}
|
||||
className="absolute -bottom-20 left-1/2 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
||||
className="absolute -bottom-20 left-1/2 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto relative z-10">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-6">
|
||||
✨ AI-Powered Recruitment Platform
|
||||
</span>
|
||||
</motion.div>
|
||||
<div className="max-w-7xl mx-auto relative z-10 text-center">
|
||||
{/* Badge */}
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-6"
|
||||
>
|
||||
🚀 All-In-One Talent & Workforce Platform
|
||||
</motion.span>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-5xl md:text-7xl font-bold mb-6 leading-tight"
|
||||
>
|
||||
Hire Top Talent{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||
10x Faster
|
||||
</span>
|
||||
</motion.h1>
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight"
|
||||
>
|
||||
Build Powerful{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||
ATS, HRMS & CRM
|
||||
</span>{" "}
|
||||
Solutions
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-xl md:text-2xl text-gray-600 mb-10 leading-relaxed"
|
||||
>
|
||||
The world's most intelligent ATS that automates screening,
|
||||
scheduling, and hiring. Join 10,000+ companies who trust TalentFlow.
|
||||
</motion.p>
|
||||
{/* Subtext */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto"
|
||||
>
|
||||
Winixco helps organizations simplify hiring, manage employees,
|
||||
and enhance client relationships — all in one platform.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-6 text-lg font-semibold rounded-xl shadow-xl hover:scale-105 transition-all"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-8 py-6 text-lg font-semibold rounded-xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all"
|
||||
Book a Demo <ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="px-8 py-6 text-lg font-semibold rounded-xl border-2 hover:bg-gray-50"
|
||||
>
|
||||
<PlayCircle className="mr-2 w-5 h-5" />
|
||||
Watch Overview
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Trust checklist */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="mt-8 flex justify-center gap-4 text-gray-600 text-sm"
|
||||
>
|
||||
<Check className="w-5 h-5 text-green-500" /> No credit card required
|
||||
<span className="mx-2">•</span>
|
||||
<Check className="w-5 h-5 text-green-500" /> 14-day free trial
|
||||
</motion.div>
|
||||
|
||||
{/* Product Highlight Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.45 }}
|
||||
className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||
>
|
||||
{[
|
||||
{ icon: Users, title: "ATS", desc: "Automate hiring, AI screening & smoother interviews." },
|
||||
{ icon: UserCog, title: "HRMS", desc: "Employee onboarding, payroll & performance." },
|
||||
{ icon: Briefcase, title: "CRM", desc: "Manage clients & strengthen candidate relationships." },
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-white p-6 rounded-2xl shadow-lg border border-purple-100"
|
||||
>
|
||||
Start Free Trial
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="px-8 py-6 text-lg font-semibold rounded-xl border-2 hover:bg-gray-50"
|
||||
>
|
||||
<PlayCircle className="mr-2 w-5 h-5" />
|
||||
Watch Demo
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="mt-8 flex items-center justify-center gap-2 text-sm text-gray-600"
|
||||
>
|
||||
<Check className="w-5 h-5 text-green-500" />
|
||||
<span>No credit card required</span>
|
||||
<span className="mx-2">•</span>
|
||||
<Check className="w-5 h-5 text-green-500" />
|
||||
<span>14-day free trial</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
<item.icon className="w-10 h-10 text-purple-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold mb-2">{item.title}</h3>
|
||||
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||
transition={{ duration: 0.8, delay: 0.55 }}
|
||||
className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||
>
|
||||
{home.stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="text-center p-6 rounded-2xl bg-white/80 backdrop-blur-sm shadow-lg"
|
||||
className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg"
|
||||
>
|
||||
<div className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">
|
||||
<div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 font-medium">{stat.label}</div>
|
||||
<div className="text-gray-700 font-medium">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
@@ -136,4 +147,4 @@ const Hero = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero
|
||||
export default Hero;
|
||||
107
app/(public)/_homeComponents/HowItWorks.tsx
Normal file
107
app/(public)/_homeComponents/HowItWorks.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Briefcase, Users, ClipboardCheck, UserPlus, DollarSign, Handshake } from "lucide-react";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
icon: <Briefcase className="w-10 h-10" />,
|
||||
title: "Post Jobs in 1 Click",
|
||||
desc: "Publish roles across multiple job boards instantly.",
|
||||
},
|
||||
{
|
||||
icon: <Users className="w-10 h-10" />,
|
||||
title: "Track Applications",
|
||||
desc: "View, filter & collaborate on candidates with smart ATS.",
|
||||
},
|
||||
{
|
||||
icon: <ClipboardCheck className="w-10 h-10" />,
|
||||
title: "Hire Smarter",
|
||||
desc: "Shortlist, schedule interviews & make quick decisions.",
|
||||
},
|
||||
{
|
||||
icon: <UserPlus className="w-10 h-10" />,
|
||||
title: "Onboard to Employee",
|
||||
desc: "Convert hires seamlessly into HRMS — no data re-entry!",
|
||||
},
|
||||
{
|
||||
icon: <DollarSign className="w-10 h-10" />,
|
||||
title: "Manage HR & Payroll",
|
||||
desc: "Attendance, payroll & performance in one place.",
|
||||
},
|
||||
{
|
||||
icon: <Handshake className="w-10 h-10" />,
|
||||
title: "Nurture Clients & Grow",
|
||||
desc: "Built-in CRM to boost retention, sales & business scale.",
|
||||
},
|
||||
];
|
||||
|
||||
const HowItWorks = () => {
|
||||
return (
|
||||
<section className="py-32 bg-gradient-to-br from-purple-600 to-pink-600 text-white text-center relative overflow-hidden">
|
||||
<motion.div
|
||||
animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.1, 1] }}
|
||||
transition={{ duration: 10, repeat: Infinity }}
|
||||
className="absolute bg-white rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 12, repeat: Infinity }}
|
||||
className="absolute bg-pink-300 rounded-full blur-3xl opacity-20 w-[26rem] h-[26rem] -bottom-20 -left-20"
|
||||
/>
|
||||
|
||||
<div className="relative max-w-6xl mx-auto px-6 z-10">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-4xl md:text-6xl font-extrabold mb-6"
|
||||
>
|
||||
How It <span className="text-yellow-300">Works</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="max-w-3xl mx-auto text-lg md:text-xl text-purple-200 mb-16"
|
||||
>
|
||||
Winixco connects your hiring, HR and CRM workflows into one powerful operating system — from job posting to payroll & business growth.
|
||||
</motion.p>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||
{steps.map((step, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.15 }}
|
||||
className="bg-white/10 backdrop-blur-xl p-6 rounded-2xl shadow-lg hover:scale-105 transition transform"
|
||||
>
|
||||
<div className="flex justify-center mb-4 text-yellow-300">
|
||||
{step.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
|
||||
<p className="text-sm text-purple-200">{step.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.p
|
||||
whileInView={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="mt-12 text-sm text-purple-200"
|
||||
>
|
||||
Complete the loop. Grow endlessly. 💼✨
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowItWorks;
|
||||
254
app/(public)/_homeComponents/Modules.tsx
Normal file
254
app/(public)/_homeComponents/Modules.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
"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 { ArrowRight, CheckCircle, Sparkles } from "lucide-react";
|
||||
import {
|
||||
home,
|
||||
Module,
|
||||
ModuleCardProps,
|
||||
ModuleFeature,
|
||||
} from "@/services/Constants";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
|
||||
|
||||
const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
const [isHovered, setIsHovered] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleClick = (): void => {
|
||||
router.push(module.route);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.2, duration: 0.6 }}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Card
|
||||
className={`bg-gradient-to-br ${module.bgColor} border-2 border-transparent hover:border-gray-200 transition-all duration-500 cursor-pointer group h-full ${module.hoverColor} overflow-hidden relative`}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<CardContent className="p-8 md:p-10 relative z-10">
|
||||
{/* Icon and Badge */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: isHovered ? 1.1 : 1,
|
||||
rotate: isHovered ? 5 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`w-20 h-20 bg-gradient-to-br ${module.color} rounded-2xl flex items-center justify-center shadow-lg`}
|
||||
>
|
||||
<module.icon className="w-10 h-10 text-white" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: index * 0.2 + 0.3 }}
|
||||
>
|
||||
<Badge className={`${module.accentColor} bg-white border-2`}>
|
||||
New
|
||||
</Badge>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<motion.div
|
||||
className="mb-6 rounded-2xl overflow-hidden shadow-lg h-48 relative"
|
||||
animate={{
|
||||
y: isHovered ? -10 : 0,
|
||||
scale: isHovered ? 1.05 : 1,
|
||||
}}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<img
|
||||
src={module.imageUrl}
|
||||
alt={module.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${module.color} opacity-20 group-hover:opacity-30 transition-opacity`}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<h3
|
||||
className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:bg-clip-text"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(to right, var(--tw-gradient-stops))`,
|
||||
}}
|
||||
>
|
||||
{module.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-3 leading-relaxed">
|
||||
{module.description}
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm mb-6 leading-relaxed">
|
||||
{module.subDescription}
|
||||
</p>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||
{module.features.map((feature: ModuleFeature, idx: number) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.2 + idx * 0.1 }}
|
||||
className="flex items-center gap-2 bg-white/60 backdrop-blur-sm rounded-lg p-3"
|
||||
>
|
||||
<feature.icon className={`w-4 h-4 ${module.accentColor}`} />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{feature.label}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
|
||||
<Button
|
||||
className={`w-full bg-gradient-to-r ${module.color} hover:shadow-xl text-white font-semibold group-hover:scale-105 transition-transform`}
|
||||
size="lg"
|
||||
>
|
||||
Learn More
|
||||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Checkmark for Completeness */}
|
||||
<motion.div
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
whileInView={{ scale: 1, rotate: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.2 + 0.5, type: "spring" }}
|
||||
className="absolute top-4 right-4 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
</motion.div>
|
||||
</CardContent>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: isHovered ? 1.5 : 1,
|
||||
opacity: isHovered ? 0.3 : 0.1,
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br ${module.color} rounded-full blur-3xl`}
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const ModulesSection: React.FC = () => {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-gradient-to-b from-white via-gray-50 to-white relative overflow-hidden">
|
||||
{/* Background Decorative Elements */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 90, 0],
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute top-1/4 left-0 w-96 h-96 bg-blue-100 rounded-full blur-3xl opacity-20"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
rotate: [90, 0, 90],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute bottom-1/4 right-0 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<Badge className="mb-4 px-6 py-2 bg-purple-100 text-purple-700 border-0">
|
||||
<Sparkles className="w-4 h-4 mr-2 inline" />
|
||||
{home.module.badge}
|
||||
</Badge>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
||||
{home.module.title}{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||
Offers
|
||||
</span>{" "}
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
{home.module.subtitle}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Modules Grid */}
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{home.module.modules.map((module: Module, index: number) => (
|
||||
<ModuleCard key={module.id} module={module} index={index} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 border-0 max-w-4xl mx-auto">
|
||||
<CardContent className="p-8 md:p-12">
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Ready to Transform Your Business?
|
||||
</h3>
|
||||
<p className="text-lg text-blue-100 mb-8">
|
||||
Get started with all three 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-blue-600 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 bg-white hover:bg-white/10"
|
||||
>
|
||||
Schedule Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModulesSection;
|
||||
@@ -30,7 +30,7 @@ const Testimonials = () => {
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Loved by{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
Hiring Teams
|
||||
Our Clients
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
|
||||
Reference in New Issue
Block a user