leadstocompany/ATS-HRMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes and color theme changed

Browse Source
This commit is contained in:
Sandip Chowdhury
2026-03-16 15:37:09 +05:30
parent b5a3569ee9
commit fdb3a19407
48 changed files with 409 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/(public)/_homeComponents/About.tsx
View File

@@ -43,7 +43,7 @@ const AboutUs: React.FC = () => {
};
return (
<section className="py-16 md:py-24 bg-gradient-to-b from-[#c3dbe0]/30 to-white overflow-hidden">
<section className="py-16 md:py-16 bg-white overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{/* Left Side - Images */}
@@ -59,12 +59,12 @@ const AboutUs: React.FC = () => {
variants={imageVariants}
className="relative z-10 rounded-2xl overflow-hidden shadow-2xl"
>
<div className="aspect-[4/3] bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center">
<div className="aspect-[4/3] bg-gradient-to-br from-[#2563eb] to-[#c3dbe0] flex items-center justify-center">
<div className="text-center p-8">
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center">
<div className="w-24 h-24 mx-auto mb-4 bg-[#2563eb] rounded-2xl flex items-center justify-center">
<Users className="w-12 h-12 text-white" />
</div>
<p className="text-[#7c7a7c] font-medium">
<p className="text-black font-medium">
Team Collaboration
</p>
</div>
@@ -77,8 +77,8 @@ const AboutUs: React.FC = () => {
transition={{ delay: 0.2 }}
className="absolute -top-6 -right-6 w-32 h-32 md:w-40 md:h-40 z-20"
>
<div className="w-full h-full rounded-xl overflow-hidden shadow-xl bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center border-4 border-white">
<Sparkles className="w-12 h-12 text-[#13afdc]" />
<div className="w-full h-full rounded-xl overflow-hidden shadow-xl bg-[#2563eb] flex items-center justify-center border-4 border-white">
<Sparkles className="w-12 h-12 text-white" />
</div>
</motion.div>
@@ -88,8 +88,8 @@ const AboutUs: React.FC = () => {
transition={{ delay: 0.4 }}
className="absolute -bottom-8 -left-8 w-36 h-36 md:w-44 md:h-44 z-20"
>
<div className="w-full h-full rounded-2xl overflow-hidden shadow-xl bg-gradient-to-br from-[#13afdc]/20 to-[#c3dbe0] flex items-center justify-center border-4 border-white">
<Award className="w-14 h-14 text-[#13afdc]" />
<div className="w-full h-full rounded-2xl overflow-hidden shadow-xl bg-[#2563eb] flex items-center justify-center border-4 border-white">
<Award className="w-14 h-14 text-white" />
</div>
</motion.div>
@@ -100,7 +100,7 @@ const AboutUs: React.FC = () => {
className="absolute bottom-4 right-4 z-30 bg-white rounded-xl shadow-2xl p-4 border border-[#c3dbe0]"
>
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-lg flex items-center justify-center">
<div className="w-12 h-12 bg-[#2563eb] rounded-lg flex items-center justify-center">
<Target className="w-6 h-6 text-white" />
</div>
<div>
@@ -130,7 +130,7 @@ const AboutUs: React.FC = () => {
className="space-y-6"
>
<motion.div variants={itemVariants}>
<Badge className="mb-4 px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
<Badge className="mb-4 px-4 py-2 bg-blue-50 text-[#2563eb] font-semibold">
<Sparkles className="w-4 h-4 mr-2 inline" />
{home.about.badge}
</Badge>
@@ -145,7 +145,7 @@ const AboutUs: React.FC = () => {
<motion.h3
variants={itemVariants}
className="text-xl sm:text-2xl font-semibold text-[#13afdc]"
className="text-xl sm:text-2xl font-semibold text-[#2563eb]"
>
{home.about.subheading}
</motion.h3>
@@ -168,7 +168,7 @@ const AboutUs: React.FC = () => {
whileHover={{ scale: 1.05 }}
className="text-center p-4 rounded-xl bg-gradient-to-br from-white to-[#c3dbe0]/40 border border-[#c3dbe0]"
>
<stat.icon className="w-8 h-8 mx-auto mb-2 text-[#13afdc]" />
<stat.icon className="w-8 h-8 mx-auto mb-2 text-[#2563eb]" />
<p className="text-2xl font-bold text-[#0d0d0d]">
{stat.value}
</p>
@@ -190,8 +190,8 @@ const AboutUs: React.FC = () => {
transition={{ delay: 0.8 + index * 0.1 }}
className="flex items-center gap-3"
>
<div className="flex-shrink-0 w-6 h-6 bg-[#13afdc]/15 rounded-full flex items-center justify-center">
<CheckCircle className="w-4 h-4 text-[#13afdc]" />
<div className="flex-shrink-0 w-6 h-6 bg-blue-50 rounded-full flex items-center justify-center">
<CheckCircle className="w-4 h-4 text-[#2563eb]" />
</div>
<span className="text-[#0d0d0d]">{highlight}</span>
</motion.div>
@@ -202,7 +202,7 @@ const AboutUs: React.FC = () => {
<motion.div variants={itemVariants} className="pt-4">
<Button
size="lg"
className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white shadow-lg hover:shadow-xl transition-all duration-300"
className="bg-[#2563eb] text-white shadow-lg hover:shadow-xl transition-all duration-300"
>
{home.about.cta}
<ArrowRight className="ml-2 w-5 h-5" />
@@ -218,7 +218,7 @@ const AboutUs: React.FC = () => {
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="w-8 h-8 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] border-2 border-white flex items-center justify-center text-white text-xs font-bold"
className="w-8 h-8 rounded-full bg-[#2563eb] border-2 border-white flex items-center justify-center text-white text-xs font-bold"
>
{i}
</div>

10
app/(public)/_homeComponents/Benefits.tsx
View File

@@ -8,7 +8,7 @@ const Benefits = () => {
return (
<section
id="solutions"
className="py-24 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] relative overflow-hidden"
className="py-16 bg-[#2563eb] relative overflow-hidden"
>
{/* Soft background glow */}
<div className="absolute inset-0 opacity-20">
@@ -19,10 +19,10 @@ const Benefits = () => {
<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 text-[#0d0d0d]">
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-white">
Why Choose Winixco?
</h2>
<p className="text-xl text-[#0d0d0d]/70 max-w-3xl mx-auto">
<p className="text-xl text-white max-w-3xl mx-auto">
Winixco helps companies stay efficient, connected, and future-ready.
With automation, accuracy, and real-time syncing, every department
works smarter — not harder.
@@ -35,9 +35,9 @@ const Benefits = () => {
<AnimatedSection key={index}>
<motion.div
whileHover={{ scale: 1.05 }}
className="text-center p-8 rounded-2xl bg-white/80 backdrop-blur-lg border border-[#c3dbe0] hover:bg-white transition-all shadow-lg"
className="text-center p-8 rounded-2xl bg-white backdrop-blur-lg border border-[#c3dbe0] hover:bg-white transition-all shadow-lg"
>
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center">
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-[#2563eb] flex items-center justify-center">
<span className="text-white">{feature.icon}</span>
</div>

30
app/(public)/_homeComponents/CTA.tsx
View File

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
// CTA Section
const CTA = () => {
return (
<section className="py-24 bg-gradient-to-r from-[#1FC8DB] to-[#7FD8E7] text-white text-center relative overflow-hidden">
<section className="py-24 bg-[#2563eb] text-white text-center relative overflow-hidden">
<motion.div
className="absolute top-0 left-0 w-full h-full opacity-20"
animate={{ scale: [1, 1.1, 1] }}
@@ -18,41 +18,25 @@ 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">
Transform the way your business
<span className="bg-gradient-to-r from-white to-cyan-100 bg-clip-text text-transparent">
{" "}
hires, manages & grows
</span>
Ready to Transform Your Hiring?
</h2>
<p className="text-lg md:text-xl text-white/90 mb-10">
Winixco brings HRMS, ATS & CRM together — so your teams stay aligned,
productive and future-ready.
Join hundreds of companies already using Winixco to hire smarter,
faster, and with confidence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="px-10 py-6 text-lg bg-white text-[#0ea5b7] font-bold rounded-xl shadow-lg hover:bg-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
>
Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
</Button>
<Button
size="lg"
variant="outline"
className="border-2 border-white text-slate-600 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
>
Book a Demo
Start Your Free Trial Today<ArrowRight className="ml-2 w-5 h-5" />
</Button>
</div>
<p className="mt-6 text-sm text-white/80">
No credit card required · Quick setup · Cancel anytime
</p>
</div>
</section>
);
};
export default CTA;
export default CTA;

9
app/(public)/_homeComponents/FAQ.tsx
View File

@@ -19,16 +19,13 @@ const FAQ = () => {
>
<div className="max-w-4xl mx-auto px-4">
<AnimatedSection className="text-center mb-16">
<span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
<span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
FAQ
</span>
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
Frequently Asked{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
Questions
</span>
Frequently Asked Questions
</h2>
<p className="text-xl text-[#7c7a7c]">
<p className="text-xl text-black">
Everything you need to know about Winixco
</p>
</AnimatedSection>

18
app/(public)/_homeComponents/Features.tsx
View File

@@ -10,24 +10,20 @@ const Features = () => {
return (
<section
id="features"
className="py-24 bg-gradient-to-b from-[#c3dbe0]/40 to-white"
className="py-24 bg-white"
>
<div className="max-w-7xl mx-auto px-4">
<AnimatedSection className="text-center mb-16">
<span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
<span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
POWERFUL FEATURES
</span>
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
All-in-One ATS, HRMS & CRP{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#13afdc] bg-clip-text text-transparent">
Solutions
</span>
Powerful Features Built for Modern Recruiting
</h2>
<p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
Explore features across all our products designed to scale your
hiring success.
Everything you need to streamline your hiring process with AI-powered intelligence.
</p>
</AnimatedSection>
@@ -43,14 +39,14 @@ const Features = () => {
<div
className="
w-14 h-14 rounded-xl
bg-gradient-to-br from-[#13afdc] to-[#c3dbe0]
bg-blue-100
flex items-center justify-center
mb-6
group-hover:scale-110
group-hover:scale-110
transition-transform
"
>
<div className="text-white">
<div className="text-white text-3xl text-center">
{feature.icon}
</div>
</div>

15
app/(public)/_homeComponents/Header.tsx
View File

@@ -49,7 +49,7 @@ const Header = () => {
<motion.div key={item.name} whileHover={{ scale: 1.05 }}>
<Link
href={item.href}
className="text-gray-700 hover:text-[#1FC8DB] font-medium"
className="text-gray-700 hover:text-[#2563eb] font-medium"
>
{item.name}
</Link>
@@ -62,11 +62,7 @@ const Header = () => {
Sign In
</Button>
<Button
className="text-white font-medium"
style={{
background:
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
}}
className="text-white font-medium bg-[#2563eb]"
>
Start Free Trial
</Button>
@@ -104,11 +100,8 @@ const Header = () => {
Sign In
</Button>
<Button
className="w-full text-white"
style={{
background:
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
}}
className="w-full text-white bg-[#2563eb]"
>
Start Free Trial
</Button>

77
app/(public)/_homeComponents/HeroSection.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
export default function HeroSection() {
return (
<section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-30">
<div className="max-w-7xl px-6 mx-auto grid lg:grid-cols-2 gap-16 items-center">
{/* LEFT CONTENT */}
<motion.div
initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<h1 className="text-5xl lg:text-5xl font-extrabold text-gray-900 leading-tight">
Hire Smarter with AI-Powered Recruitment Software
</h1>
<p className="mt-6 text-lg text-gray-600 max-w-xl">
All-in-one ATS, HRMS, and Recruitment CRM platform designed for
modern hiring teams
</p>
<div className="flex gap-5 mt-10">
<Button className="bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-lg rounded-xl">
Start Free Trial
</Button>
<Button
variant="outline"
className="border-[#2563eb] text-[#2563eb] px-8 py-6 text-lg rounded-xl"
>
Schedule Demo
</Button>
</div>
</motion.div>
{/* RIGHT CARD */}
<motion.div
initial={{ opacity: 0, x: 40 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
className="bg-gray-50 rounded-3xl shadow-xl p-12 border border-gray-300"
>
<div
className="bg-white rounded-3xl shadow-xl p-8"
>
<div className="flex items-center justify-between mb-6">
<h4 className="text-lg font-semibold text-gray-700">
Recruitment Pipeline
</h4>
<span className="h-3 w-3 rounded-full bg-green-500"></span>
</div>
<div className="grid grid-cols-2 gap-6">
<StatCard title="ACTIVE POSITIONS" value="24" />
<StatCard title="TOTAL CANDIDATES" value="1,847" />
<StatCard title="INTERVIEWS THIS WEEK" value="12" />
<StatCard title="AVG TIME TO HIRE" value="18d" />
</div>
</div>
</motion.div>
</div>
</section>
);
}
function StatCard({ title, value }: { title: string; value: string }) {
return (
<div className="border-l-4 border-[#2563eb] bg-gray-50 rounded-xl p-6">
<p className="text-sm text-gray-500">{title}</p>
<p className="text-2xl font-bold text-[#2563eb] mt-2">{value}</p>
</div>
);
}

27
app/(public)/_homeComponents/HowItWorks.tsx
View File

@@ -45,19 +45,7 @@ const steps = [
const HowItWorks = () => {
return (
<section className="py-32 bg-gradient-to-br from-[#c3dbe0] to-white text-center relative overflow-hidden">
{/* Soft animated background blobs */}
<motion.div
animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.1, 1] }}
transition={{ duration: 10, repeat: Infinity }}
className="absolute bg-[#13afdc] rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
/>
<motion.div
animate={{ opacity: [0.3, 0.5, 0.3], scale: [1, 1.05, 1] }}
transition={{ duration: 12, repeat: Infinity }}
className="absolute bg-[#0d0d0d] rounded-full blur-3xl opacity-10 w-[26rem] h-[26rem] -bottom-20 -left-20"
/>
<section className="py-32 bg-[#2563eb] text-center relative overflow-hidden">
<div className="relative max-w-6xl mx-auto px-6 z-10">
{/* Heading */}
<motion.h2
@@ -65,12 +53,9 @@ const HowItWorks = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-4xl md:text-6xl font-extrabold mb-6 text-[#0d0d0d]"
className="text-4xl md:text-6xl font-extrabold mb-6 text-white"
>
How It{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
Works
</span>
How It Works
</motion.h2>
<motion.p
@@ -78,7 +63,7 @@ const HowItWorks = () => {
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-[#7c7a7c] mb-16"
className="max-w-3xl mx-auto text-lg md:text-xl text-white mb-16"
>
Winixco connects your hiring, HR and CRM workflows into one powerful
operating system — from job posting to payroll & business growth.
@@ -95,7 +80,7 @@ const HowItWorks = () => {
transition={{ delay: i * 0.15 }}
className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition"
>
<div className="flex justify-center mb-4 text-[#13afdc]">
<div className="flex justify-center mb-4 text-[#2563eb]">
{step.icon}
</div>
<h3 className="text-xl font-bold mb-2 text-[#0d0d0d]">
@@ -119,4 +104,4 @@ const HowItWorks = () => {
);
};
export default HowItWorks;
export default HowItWorks;

25
app/(public)/_homeComponents/Modules.tsx
View File

@@ -42,12 +42,12 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
rotate: isHovered ? 5 : 0,
}}
transition={{ duration: 0.3 }}
className="w-20 h-20 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center shadow-lg"
className="w-20 h-20 bg-[#2563eb] rounded-2xl flex items-center justify-center shadow-lg"
>
<module.icon className="w-10 h-10 text-white" />
</motion.div>
<Badge className="bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
<Badge className="bg-blue-50 text-[#2563eb] border-[#13afdc]/20">
New
</Badge>
</div>
@@ -70,7 +70,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
</motion.div>
{/* Title */}
<h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#13afdc] transition-colors">
<h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#2563eb] transition-colors">
{module.title}
</h3>
@@ -93,7 +93,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
transition={{ delay: index * 0.2 + idx * 0.1 }}
className="flex items-center gap-2 bg-[#c3dbe0]/30 rounded-lg p-3"
>
<feature.icon className="w-4 h-4 text-[#13afdc]" />
<feature.icon className="w-4 h-4 text-[#2563eb]" />
<span className="text-sm font-medium text-[#0d0d0d]">
{feature.label}
</span>
@@ -104,7 +104,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
{/* CTA Button */}
<motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
<Button
className="w-full bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white font-semibold hover:shadow-xl"
className="w-full bg-[#2563eb] text-white font-semibold hover:shadow-xl"
size="lg"
>
Learn More
@@ -113,7 +113,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
</motion.div>
{/* Checkmark */}
<div className="absolute top-4 right-4 w-8 h-8 bg-[#13afdc] rounded-full flex items-center justify-center shadow-lg">
<div className="absolute top-4 right-4 w-8 h-8 bg-[#2563eb] rounded-full flex items-center justify-center shadow-lg">
<CheckCircle className="w-5 h-5 text-white" />
</div>
</CardContent>
@@ -134,7 +134,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
const ModulesSection: React.FC = () => {
return (
<section className="py-16 md:py-24 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
<section className="py-16 md:py-16 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
{/* Decorative background */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<motion.div
@@ -152,19 +152,16 @@ const ModulesSection: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 px-6 py-2 bg-[#13afdc]/10 text-[#13afdc] border-0">
<Badge className="mb-4 px-6 py-2 bg-blue-50 text-[#2563eb] border-0 font-bold">
<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-[#0d0d0d] mb-6">
{home.module.title}{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
Offers
</span>
</h2>
<p className="text-lg md:text-xl text-[#7c7a7c] max-w-3xl mx-auto">
<p className="text-lg md:text-xl text-black max-w-3xl mx-auto">
{home.module.subtitle}
</p>
</motion.div>
@@ -184,7 +181,7 @@ const ModulesSection: React.FC = () => {
transition={{ delay: 0.6 }}
className="mt-16 text-center"
>
<Card className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] border-0 max-w-4xl mx-auto">
<Card className="bg-[#2563eb] 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?
@@ -195,7 +192,7 @@ const ModulesSection: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="bg-white text-[#13afdc] hover:bg-gray-100 font-semibold"
className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
>
Start Free Trial
<Sparkles className="ml-2 w-5 h-5" />

56
app/(public)/_homeComponents/Pricing.tsx
View File

@@ -5,14 +5,7 @@ import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Check,
Sparkles,
Zap,
Shield,
Star,
Clock,
} from "lucide-react";
import { Check, Sparkles, Zap, Shield, Star, Clock } from "lucide-react";
import { useRouter } from "next/navigation";
/* ------------------ DATA ------------------ */
@@ -95,26 +88,19 @@ const comparisonData = [
/* ------------------ HERO ------------------ */
const PricingHero = () => (
<section className="py-20 bg-gradient-to-br from-[#c3dbe0] to-white relative overflow-hidden">
<section className="py-20 bg-[#2563eb] relative overflow-hidden">
<div className="max-w-6xl mx-auto px-4 text-center">
<Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white border-0 text-base">
<Badge className="mb-6 px-6 py-3 bg-white text-[#2563eb] font-bold border-0 text-base">
<Star className="w-4 h-4 mr-2 inline fill-white" />
SPECIAL LAUNCH OFFER
</Badge>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-[#0d0d0d] mb-6">
Hire smarter. Track smarter.{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
Manage everything
</span>{" "}
from one platform.
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6">
Hire smarter. Track smarter, Manage everything from one platform.
</h1>
<p className="text-xl md:text-2xl text-[#7c7a7c] max-w-4xl mx-auto">
One powerful ATS with{" "}
<span className="font-bold text-[#13afdc]">
FREE HRMS & CRM
</span>
<p className="text-xl md:text-2xl text-white max-w-4xl mx-auto">
One powerful ATS with FREE HRMS & CRM{" "}
</p>
</div>
</section>
@@ -123,15 +109,16 @@ const PricingHero = () => (
/* ------------------ PRICING CARD ------------------ */
const MainPricingCard = () => {
const [billingCycle, setBillingCycle] =
useState<"monthly" | "yearly">("monthly");
const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
"monthly",
);
return (
<section className="py-16 bg-white">
<div className="max-w-5xl mx-auto px-4">
<Card className="rounded-3xl shadow-xl border border-[#c3dbe0] overflow-hidden">
<CardContent className="p-10 text-center">
<Badge className="mb-4 px-6 py-2 bg-[#c3dbe0] text-[#0d0d0d]">
<Badge className="mb-4 px-6 py-2 bg-blue-50 text-[#2563eb] font-extrabold">
ALL-IN-ONE PLAN
</Badge>
@@ -145,7 +132,7 @@ const MainPricingCard = () => {
onClick={() => setBillingCycle("monthly")}
className={`px-6 py-2 rounded-lg font-semibold ${
billingCycle === "monthly"
? "bg-[#13afdc] text-white"
? "bg-[#2563eb] text-white"
: "bg-gray-100 text-[#7c7a7c]"
}`}
>
@@ -155,7 +142,7 @@ const MainPricingCard = () => {
onClick={() => setBillingCycle("yearly")}
className={`px-6 py-2 rounded-lg font-semibold ${
billingCycle === "yearly"
? "bg-[#13afdc] text-white"
? "bg-[#2563eb] text-white"
: "bg-gray-100 text-[#7c7a7c]"
}`}
>
@@ -181,7 +168,7 @@ const MainPricingCard = () => {
)}
{/* CTA */}
<Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
<Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-[#2563eb] text-white">
<Zap className="w-5 h-5 mr-2" />
Start 30-Day Free Trial
</Button>
@@ -192,10 +179,10 @@ const MainPricingCard = () => {
<div
key={i}
className={`flex gap-3 p-3 rounded-lg ${
f.highlight ? "bg-[#c3dbe0]" : ""
f.highlight ? "bg-blue-100" : ""
}`}
>
<Check className="text-[#13afdc]" />
<Check className="text-[#2563eb]" />
<span className="text-[#0d0d0d]">{f.text}</span>
</div>
))}
@@ -218,7 +205,7 @@ const ComparisonTable = () => (
<div className="overflow-x-auto rounded-2xl shadow border border-[#c3dbe0]">
<table className="w-full">
<thead className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
<thead className="bg-[#2563eb] text-white">
<tr>
<th className="px-6 py-4 text-left">Feature</th>
<th className="px-6 py-4 text-center">Winixco</th>
@@ -229,10 +216,7 @@ const ComparisonTable = () => (
</thead>
<tbody>
{comparisonData.map((row, i) => (
<tr
key={i}
className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}
>
<tr key={i} className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}>
<td className="px-6 py-4 font-medium text-[#0d0d0d]">
{row.feature}
</td>
@@ -268,12 +252,12 @@ const CtaSection = () => {
<h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
Need Bulk Pricing or a Demo?
</h2>
<p className="text-xl text-[#7c7a7c] mb-8">
<p className="text-xl text-black mb-8">
Talk to our sales team for custom enterprise plans
</p>
<Button
className="bg-[#13afdc] text-white px-10 py-6 text-lg"
className="bg-[#2563eb] text-white px-10 py-6 text-lg"
onClick={() => router.push("/contact")}
>
Contact Us

48
app/(public)/_homeComponents/StatsSection.tsx Normal file
View File

@@ -0,0 +1,48 @@
"use client";
import { motion } from "framer-motion";
const stats = [
{
value: "60-80%",
label: "Faster Hiring Process",
},
{
value: "500+",
label: "Happy Customers",
},
{
value: "50+",
label: "Countries Supported",
},
{
value: "100+",
label: "Integrations Available",
},
];
export default function StatsSection() {
return (
<section className="bg-[#dbe7f4] py-20">
<div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-10 text-center">
{stats.map((stat, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.2 }}
viewport={{ once: true }}
>
<h2 className="text-5xl font-bold text-[#2563eb]">
{stat.value}
</h2>
<p className="mt-3 text-gray-700 text-lg">
{stat.label}
</p>
</motion.div>
))}
</div>
</section>
);
}

76
app/(public)/_homeComponents/TestiMonialSection.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
const testimonials = [
{
quote:
"Winixco cut our hiring time in half. The AI resume screening is incredibly accurate, and our team loves the seamless integration.",
name: "Sarah Chen",
role: "Head of Talent, TechScale Inc.",
},
{
quote:
"The best recruitment platform we've used. From candidate sourcing to onboarding, everything is in one place.",
name: "Marcus Rodriguez",
role: "Founder, Recruiting Plus",
},
{
quote:
"Implementing Winixco was a game-changer. The automation alone has freed up 20 hours per week for strategic work.",
name: "Emily Watson",
role: "VP HR, Global Enterprises Ltd.",
},
];
export default function TestimonialsSection() {
return (
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900">
Trusted by Leading Companies
</h2>
<p className="mt-4 text-gray-600 text-lg">
See what recruiters and HR teams say about Winixco
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{testimonials.map((item, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.2 }}
viewport={{ once: true }}
>
<Card className="border-l-4 border-[#2563eb] shadow-md rounded-xl">
<CardContent className="p-6">
<p className="text-gray-600 italic leading-relaxed">
"{item.quote}"
</p>
<div className="mt-6">
<h4 className="font-semibold text-gray-900">
{item.name}
</h4>
<p className="text-[#2563eb] text-sm">
{item.role}
</p>
</div>
</CardContent>
</Card>
</motion.div>
))}
</div>
</div>
</section>
);
}

27
app/(public)/_homeComponents/Testimonials.tsx
View File

@@ -20,16 +20,13 @@ const Testimonials = () => {
<section id="testimonials" className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-4">
<AnimatedSection className="text-center mb-16">
<span className="inline-block px-4 py-2 bg-[#c3dbe0] text-[#0d0d0d] rounded-full text-sm font-semibold mb-4">
<span className="inline-block px-4 py-2 bg-blue-50 text-[#2563eb] rounded-full text-sm font-semibold mb-4">
TESTIMONIALS
</span>
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
Loved by{" "}
<span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
Our Clients
</span>
Loved by Our Clients
</h2>
<p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
<p className="text-xl text-black max-w-3xl mx-auto">
See what our customers have to say about their experience
</p>
</AnimatedSection>
@@ -42,25 +39,25 @@ const Testimonials = () => {
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -60 }}
transition={{ duration: 0.5, ease: "easeInOut" }}
className="bg-gradient-to-br from-[#c3dbe0] to-white rounded-3xl p-12 shadow-xl"
className="bg-[#2563eb] rounded-3xl p-12 shadow-xl"
>
<Quote className="w-12 h-12 text-[#13afdc] mb-6" />
<Quote className="w-12 h-12 text-white mb-6" />
<p className="text-2xl text-[#0d0d0d] mb-8 leading-relaxed italic">
<p className="text-2xl text-white mb-8 leading-relaxed italic">
"{testimonial.content}"
</p>
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center text-3xl">
<div className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-3xl">
{testimonial.image}
</div>
<div>
<h4 className="font-bold text-lg text-[#0d0d0d]">
<h4 className="font-bold text-lg text-white">
{testimonial.name}
</h4>
<p className="text-[#7c7a7c]">{testimonial.role}</p>
<p className="text-[#13afdc] font-semibold">
<p className="text-white">{testimonial.role}</p>
<p className="text-white font-semibold">
{testimonial.company}
</p>
</div>
@@ -69,7 +66,7 @@ const Testimonials = () => {
{[...Array(testimonial.rating)].map((_, i) => (
<Star
key={i}
className="w-5 h-5 fill-[#13afdc] text-[#13afdc]"
className="w-5 h-5 fill-[#dccb13] text-[#dccb13]"
/>
))}
</div>
@@ -85,7 +82,7 @@ const Testimonials = () => {
onClick={() => setCurrentIndex(index)}
className={`h-3 rounded-full transition-all duration-300 ${
index === currentIndex
? "bg-[#13afdc] w-8"
? "bg-[#2563eb] w-8"
: "bg-gray-300 w-3 hover:bg-[#c3dbe0]"
}`}
/>