UI changes and color theme changed

This commit is contained in:
2026-03-16 15:37:09 +05:30
parent b5a3569ee9
commit fdb3a19407
48 changed files with 409 additions and 333 deletions

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>

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>

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;

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>

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>

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>

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

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;

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

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

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

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

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]"
}`}
/>

View File

@@ -62,7 +62,7 @@ export default function AboutUs() {
className="bg-white p-10 rounded-3xl shadow-xl border"
>
<Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
<Lightbulb className="w-12 h-12 text-blue-600 mb-4" />
<h3 className="text-3xl font-semibold mb-3">Our Vision</h3>
<p className="text-gray-600 text-lg leading-relaxed">
To be a global leader in CRM innovation transforming how teams connect,
@@ -147,7 +147,7 @@ export default function AboutUs() {
</section> */}
{/* CTA */}
<section className="py-24 bg-gradient-to-r from-purple-600 to-blue-600 text-center text-white">
<section className="py-24 bg-[#2563eb] text-center text-white">
<h2 className="text-4xl font-bold mb-4">We Grow Together</h2>
<p className="text-lg max-w-2xl mx-auto mb-8">
Become part of a story thats transforming the future of CRM.

View File

@@ -13,7 +13,7 @@ import { atsPageData } from "@/services/Constants";
// CTA Section Component
const CtaSection: React.FC = () => {
return (
<section className="py-20 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
<section className="py-20 bg-[#2563eb] to-pink-600">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}

View File

@@ -4,37 +4,12 @@ import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
PlayCircle,
ArrowRight,
Sparkles,
} from "lucide-react";
import { PlayCircle, ArrowRight, Sparkles } from "lucide-react";
import { atsPageData } from "@/services/Constants";
const HeroSection: React.FC = () => {
return (
<section className="relative py-24 md:py-32 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 overflow-hidden">
{/* Background Animation */}
<div className="absolute inset-0 overflow-hidden">
<motion.div
animate={{
scale: [1, 1.2, 1],
rotate: [0, 90, 0],
}}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
className="absolute -top-1/2 -left-1/2 w-full h-full bg-blue-500/20 rounded-full blur-3xl"
/>
<motion.div
animate={{
scale: [1.2, 1, 1.2],
rotate: [90, 0, 90],
}}
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-purple-500/20 rounded-full blur-3xl"
/>
</div>
<section className="relative py-24 md:py-32 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] overflow-hidden">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
<motion.div
@@ -42,12 +17,12 @@ const HeroSection: React.FC = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<Badge className="mb-6 px-6 py-2 bg-purple-100 text-purple-700 border-white/30 backdrop-blur-sm text-sm font-semibold">
<Badge className="mb-6 px-6 py-2 bg-blue-50 text-[#2563eb] border-blue-200 backdrop-blur-sm text-sm font-semibold">
<Sparkles className="w-4 h-4 mr-2 inline" />
{atsPageData.hero.badge}
</Badge>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 bg-black bg-clip-text text-transparent">
{atsPageData.hero.title}
</h1>
@@ -78,4 +53,4 @@ const HeroSection: React.FC = () => {
);
};
export default HeroSection
export default HeroSection;

View File

@@ -42,7 +42,7 @@ const OverviewSection: React.FC = () => {
>
<Card className="h-full hover:shadow-xl transition-shadow duration-300 border-0 shadow-lg">
<CardContent className="p-8">
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
<div className="w-16 h-16 bg-[#2563eb] rounded-2xl flex items-center justify-center mb-6">
<Sparkles className="w-8 h-8 text-white" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">

View File

@@ -29,10 +29,7 @@ const BookDemoSection = () => {
animate={{ opacity: 1, y: 0 }}
className="text-4xl md:text-6xl font-extrabold text-gray-900"
>
🗓 Book a Demo or{" "}
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Consultation
</span>
🗓 Book a Demo or Consultation
</motion.h2>
<motion.p
@@ -52,7 +49,7 @@ const BookDemoSection = () => {
>
{features.map((item, index) => (
<div key={index} className="flex items-center gap-3">
<CheckCircle className="text-purple-600 w-6 h-6" />
<CheckCircle className="text-[#2563eb] w-6 h-6" />
<p className="text-gray-700 font-medium">{item}</p>
</div>
))}
@@ -66,7 +63,7 @@ const BookDemoSection = () => {
>
<Button
size="lg"
className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-purple-600 text-white hover:bg-purple-700 hover:scale-105 transition-transform"
className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
>
<CalendarCheck className="mr-2 w-5 h-5" />
Book My Demo
@@ -74,7 +71,7 @@ const BookDemoSection = () => {
<Button
variant="outline"
size="lg"
className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-purple-700 hover:bg-purple-100 transition-all"
className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-blue-700 hover:bg-purple-100 transition-all"
>
<Send className="mr-2 w-5 h-5" />
Contact Sales

View File

@@ -26,10 +26,7 @@ const ChooseWinixco = () => {
viewport={{ once: true }}
className="text-4xl md:text-5xl font-bold text-gray-900"
>
Why Businesses{" "}
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Choose Winixco
</span>
Why Businesses Choose Winixco
</motion.h2>
{/* Feature Grid */}
@@ -43,7 +40,7 @@ const ChooseWinixco = () => {
viewport={{ once: true }}
className="bg-white border border-gray-200 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 flex items-center gap-4"
>
<item.icon className="w-8 h-8 text-purple-600" />
<item.icon className="w-8 h-8 text-[#2563eb]" />
<p className="text-lg text-gray-700 font-medium">{item.text}</p>
</motion.div>
))}
@@ -78,14 +75,14 @@ const WeLoveToHearFromYou = () => {
<div className="mt-10 flex flex-wrap justify-center gap-6">
<Link
href="#contact"
className="px-8 py-4 text-lg font-semibold rounded-xl bg-purple-600 hover:bg-purple-700 text-white transition-all hover:scale-105"
className="px-8 py-4 text-lg font-semibold rounded-xl bg-[#2563eb] hover:bg-blue-700 text-white transition-all hover:scale-105"
>
👉 Send Message
</Link>
<Link
href="#book-demo"
className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-purple-600 text-purple-700 hover:bg-purple-50 transition-all hover:scale-105"
className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
>
👉 Book a Demo
</Link>

View File

@@ -142,7 +142,7 @@ const ContactForm: React.FC = () => {
<Button
onClick={handleSubmit}
size="lg"
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
className="w-full bg-[#2563eb] hover:from-purple-700 hover:to-pink-700 text-white"
>
Send Message
<Send className="ml-2 w-5 h-5" />

View File

@@ -25,7 +25,7 @@ const GetInTouch: React.FC = () => {
className="text-4xl md:text-5xl font-extrabold text-gray-900"
>
{CONTACT_DATA.getInTouch.title}
<span className="block mt-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
<span className="block mt-2 bg-[#2563eb] bg-clip-text text-transparent">
Lets Connect
</span>
</motion.h2>
@@ -64,7 +64,7 @@ const GetInTouch: React.FC = () => {
<p className="text-gray-600 text-sm mb-2">{method.description}</p>
<p className="font-semibold text-purple-700">{method.contact}</p>
<p className="font-semibold text-[#2563eb]">{method.contact}</p>
</motion.div>
))}
</div>

View File

@@ -31,7 +31,7 @@ const HappyCustomers: React.FC = () => (
</h2>
<Button
size="lg"
className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white"
className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
>
Try for FREE
</Button>
@@ -40,7 +40,7 @@ const HappyCustomers: React.FC = () => (
<div>
<div className="flex items-center gap-4 mb-8">
<div className="flex items-center gap-2">
<Users className="w-8 h-8 text-purple-600" />
<Users className="w-8 h-8 text-[#2563eb]" />
<div>
<p className="text-3xl font-bold text-gray-900">{CONTACT_DATA.customers.count}</p>
<p className="text-sm text-gray-600">{CONTACT_DATA.customers.label}</p>

View File

@@ -4,32 +4,19 @@ import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
const HeroSection: React.FC = () => (
<section className="relative overflow-hidden py-24">
{/* Animated Background Glow */}
<motion.div
className="absolute inset-0 opacity-20 pointer-events-none"
animate={{ scale: [1, 1.05, 1] }}
transition={{ duration: 10, repeat: Infinity }}
>
<div className="absolute w-96 h-96 bg-purple-400 blur-3xl rounded-full -top-10 -left-10"></div>
<div className="absolute w-80 h-80 bg-pink-400 blur-3xl rounded-full bottom-0 right-0"></div>
</motion.div>
<section className="relative overflow-hidden py-16 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)]">
{/* Content */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
className="relative z-10 text-center px-6 max-w-4xl mx-auto"
>
<Badge className="mb-5 px-6 py-3 bg-purple-100 text-purple-700 tracking-wide">
<Badge className="mb-5 px-6 py-3 bg-blue-50 text-[#2563eb] tracking-wide">
#1 CUSTOMER SUPPORT
</Badge>
<h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 leading-tight">
Were Here to Help You{" "}
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Transform Your Business
</span>
Were Here to Help You Transform Your Business
</h1>
<p className="text-lg md:text-xl mt-6 text-gray-600 max-w-3xl mx-auto leading-relaxed">

View File

@@ -29,10 +29,7 @@ const PartnerWithUsSection = () => {
animate={{ opacity: 1, y: 0 }}
className="text-4xl md:text-5xl font-extrabold text-gray-900"
>
🤝 Partner With{" "}
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Winixco
</span>
🤝 Partner With Winixco
</motion.h2>
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
@@ -49,7 +46,7 @@ const PartnerWithUsSection = () => {
transition={{ delay: index * 0.1 }}
className="flex items-center gap-3"
>
<BadgeCheck className="text-purple-600 w-6 h-6" />
<BadgeCheck className="text-[#2563eb] w-6 h-6" />
<p className="text-gray-700 font-medium">{item}</p>
</motion.div>
))}
@@ -60,7 +57,7 @@ const PartnerWithUsSection = () => {
animate={{ opacity: 1, scale: 1 }}
className="mt-12"
>
<Button className="px-10 py-5 text-lg bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 hover:scale-105 transition-all">
<Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all">
Become a Partner
</Button>
</motion.div>

View File

@@ -29,10 +29,7 @@ const TechnicalSupportSection = () => {
animate={{ opacity: 1, y: 0 }}
className="text-4xl md:text-5xl font-extrabold text-gray-900"
>
🛠 Technical Support &{" "}
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Assistance
</span>
🛠 Technical Support & Assistance
</motion.h2>
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
@@ -51,7 +48,7 @@ const TechnicalSupportSection = () => {
transition={{ delay: index * 0.1 }}
className="flex items-center gap-3"
>
<HelpCircle className="text-purple-600 w-6 h-6" />
<HelpCircle className="text-[#2563eb] w-6 h-6" />
<p className="text-gray-700 font-medium">{item}</p>
</motion.div>
))}
@@ -60,7 +57,7 @@ const TechnicalSupportSection = () => {
<div className="text-center mt-12">
<Button
variant="outline"
className="px-10 py-5 text-lg font-bold text-purple-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
className="px-10 py-5 text-lg font-bold text-blue-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
>
Contact Support
</Button>

View File

@@ -13,7 +13,7 @@ import { crm } from "@/services/Constants";
const CRMAdvantages: React.FC = () => {
return (
<section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
<section className="py-20 px-4 bg-gradient-to-br from-blue-50 to-white">
<div className="container mx-auto max-w-7xl">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,7 @@ const CRMAdvantages: React.FC = () => {
Why Choose Us
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Why Companies Choose{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Our CRM
</span>
Why Companies Choose Our CRM
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Boost sales performance, strengthen customer relationships, and grow faster with a modern CRM solution.
@@ -44,9 +41,9 @@ const CRMAdvantages: React.FC = () => {
viewport={{ once: true }}
transition={{ delay: idx * 0.1 }}
>
<Card className="bg-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-2xl transition-all duration-300 h-full group">
<Card className="bg-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-2xl transition-all duration-300 h-full group">
<CardContent className="pt-8">
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
<div className="w-14 h-14 rounded-xl bg-[#2563eb] flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
<div className="text-white">{advantage.icon}</div>
</div>
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">

View File

@@ -8,7 +8,7 @@ import { crm } from "@/services/Constants";
const CRMAnalytics: React.FC = () => {
return (
<section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
<section className="py-20 px-4 bg-[#2563eb] text-white relative overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
<div className="container mx-auto max-w-7xl relative z-10">
@@ -18,7 +18,7 @@ const CRMAnalytics: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-blue-500 flex items-center justify-center shadow-2xl">
<BarChart3 className="w-8 h-8 text-white" />
</div>

View File

@@ -22,14 +22,11 @@ const FAQSection: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
FAQ
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Frequently Asked{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Questions
</span>
Frequently Asked Questions
</h2>
<p className="text-xl text-gray-600">
Everything you need to know about our CRM Software

View File

@@ -10,7 +10,7 @@ import { crm } from "@/services/Constants";
const FinalCTA: React.FC = () => {
return (
<section className="relative py-24 px-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white overflow-hidden">
<section className="relative py-24 px-6 bg-[#2563eb] text-white overflow-hidden">
{/* Animated Background Pattern */}
<motion.div
aria-hidden

View File

@@ -34,7 +34,7 @@ const CRMHero: React.FC = () => {
</Badge>
<h1 className="text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight text-gray-900 mb-6">
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
<span className="bg-black bg-clip-text text-transparent">
A Powerful CRM
</span>
<br />
@@ -48,7 +48,7 @@ const CRMHero: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4">
<Button
size="lg"
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
>
{crm.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
</Button>
@@ -88,7 +88,7 @@ const CRMHero: React.FC = () => {
/>
<div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
<div className="w-12 h-12 bg-[#2563eb] rounded-xl flex items-center justify-center">
<UserCheck className="w-7 h-7 text-white" />
</div>
<div>

View File

@@ -21,15 +21,13 @@ const ModulesOverview: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
Core CRM Features
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
CRM{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Modules Overview
</span>
CRM Modules Overview{" "}
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">

View File

@@ -24,14 +24,11 @@ const WorkflowProcess: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
Simple Process
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
How{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
CRM Works
</span>
How CRM Works
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Four simple steps to revolutionize your CRM Software
@@ -50,7 +47,7 @@ const WorkflowProcess: React.FC = () => {
>
<Card className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full">
<CardContent className="pt-8 text-center">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#2563eb] flex items-center justify-center text-white text-2xl font-bold shadow-lg">
{step.step}
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-3">

View File

@@ -54,10 +54,7 @@ export default function FeaturesPage() {
{/* HERO */}
<section className="py-24 text-center px-6 bg-gradient-to-b from-white to-blue-50">
<h1 className="text-4xl md:text-6xl font-extrabold text-gray-900">
Powerful Features to Turbocharge Your{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Hiring & CRM
</span>
Powerful Features to Turbocharge Your Hiring & CRM
</h1>
<p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
Everything you need to streamline recruitment, manage clients and
@@ -73,7 +70,7 @@ export default function FeaturesPage() {
key={i}
className="p-8 bg-white rounded-3xl border shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
>
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 text-white flex items-center justify-center shadow-md mb-5">
<div className="w-14 h-14 rounded-xl bg-[#2563eb] text-white flex items-center justify-center shadow-md mb-5">
<feature.icon className="w-7 h-7" />
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
@@ -86,7 +83,7 @@ export default function FeaturesPage() {
</section>
{/* CTA STRIP */}
<section className="py-20 bg-gradient-to-r from-blue-700 to-purple-700 text-white text-center px-6">
<section className="py-20 bg-[#2563eb] text-white text-center px-6">
<h2 className="text-3xl md:text-4xl font-bold mb-4">
Experience The Future of Hiring & Client Management
</h2>

View File

@@ -7,7 +7,7 @@ export default function GDPRCookiesPage() {
return (
<div className="bg-gray-50">
{/* HEADER */}
<section className="bg-sky-200 text-gray-900 py-20 px-6">
<section className="bg-[#2563eb] text-white py-20 px-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

View File

@@ -13,7 +13,7 @@ import { hrms } from "@/services/Constants";
const HRMSAdvantages: React.FC = () => {
return (
<section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
<section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-white">
<div className="container mx-auto max-w-7xl">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,8 @@ const HRMSAdvantages: React.FC = () => {
Why Choose Us
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Why Companies Choose{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Our HRMS
</span>
Why Companies Choose Our HRMS
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Transform your HR operations with cutting-edge automation and
@@ -47,7 +45,7 @@ const HRMSAdvantages: React.FC = () => {
>
<Card className="bg-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-2xl transition-all duration-300 h-full group">
<CardContent className="pt-8">
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
<div className="w-14 h-14 rounded-xl bg-[#2563eb] flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
<div className="text-white">{advantage.icon}</div>
</div>
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">

View File

@@ -22,14 +22,12 @@ const FAQSection: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
FAQ
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Frequently Asked{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Questions
</span>
Frequently Asked Questions
</h2>
<p className="text-xl text-gray-600">
Everything you need to know about our HRMS platform

View File

@@ -10,7 +10,7 @@ import { hrms } from "@/services/Constants";
const FinalCTA: React.FC = () => {
return (
<section className="relative py-24 px-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white overflow-hidden">
<section className="relative py-24 px-6 bg-[#2563eb] text-white overflow-hidden">
{/* Animated Background Pattern */}
<motion.div
aria-hidden

View File

@@ -13,7 +13,7 @@ import { hrms } from "@/services/Constants";
const HRAnalytics: React.FC = () => {
return (
<section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
<section className="py-20 px-4 bg-[#2563eb] text-white relative overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
<div className="container mx-auto max-w-7xl relative z-10">
@@ -23,7 +23,7 @@ const HRAnalytics: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-blue-500 flex items-center justify-center shadow-2xl">
<BarChart3 className="w-8 h-8 text-white" />
</div>
<h2 className="text-4xl md:text-5xl font-bold mb-4">

View File

@@ -34,7 +34,7 @@ const HRMSHero: React.FC = () => {
</Badge>
<h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight text-gray-900 mb-6">
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
<span className="text-gray-900 ">
Modern HRMS
</span>
<br />
@@ -48,7 +48,7 @@ const HRMSHero: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4">
<Button
size="lg"
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
>
{hrms.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
</Button>
@@ -88,7 +88,7 @@ const HRMSHero: React.FC = () => {
/>
<div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
<div className="w-12 h-12 bg-[#2563eb] rounded-xl flex items-center justify-center">
<UserCheck className="w-7 h-7 text-white" />
</div>
<div>

View File

@@ -23,14 +23,12 @@ const ModulesOverview: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-purple-200">
Core Modules
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
HRMS{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Modules Overview
</span>
HRMS Modules Overview
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Comprehensive HR management tools to streamline every aspect of your

View File

@@ -24,14 +24,11 @@ const WorkflowProcess: React.FC = () => {
viewport={{ once: true }}
className="text-center mb-16"
>
<Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
<Badge className="mb-4 bg-blue-50 text-[#2563eb] border-blue-200">
Simple Process
</Badge>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
How{" "}
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
HRMS Works
</span>
How HRMS Works
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Four simple steps to revolutionize your HR management
@@ -50,7 +47,7 @@ const WorkflowProcess: React.FC = () => {
>
<Card className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full">
<CardContent className="pt-8 text-center">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#2563eb] flex items-center justify-center text-white text-2xl font-bold shadow-lg">
{step.step}
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-3">

View File

@@ -12,15 +12,20 @@ import CTA from "./_homeComponents/CTA";
import AboutUs from "./_homeComponents/About";
import ModulesSection from "./_homeComponents/Modules";
import HowItWorks from "./_homeComponents/HowItWorks";
import HeroSection from "./_homeComponents/HeroSection";
import StatsSection from "./_homeComponents/StatsSection";
import TestimonialsSection from "./_homeComponents/TestiMonialSection";
export default function Page() {
return (
<div className="min-h-screen bg-white">
<Hero />
<HeroSection />
<CompanySlider />
<Features />
<StatsSection />
<AboutUs />
<ModulesSection />
<TestimonialsSection />
<Benefits />
<Testimonials />
<Pricing />

View File

@@ -7,20 +7,20 @@ export default function PrivacyPolicyPage() {
return (
<div className="bg-gray-50">
{/* HEADER SECTION */}
<section className="bg-sky-200 text-gray-900 py-20 px-6">
<section className="bg-[#2563eb] text-gray-900 py-20 px-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-5xl mx-auto text-center"
>
<div className="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-white/20 backdrop-blur-xl rounded-3xl shadow-2xl">
<Shield className="w-10 h-10" />
<Shield className="w-10 h-10 text-white" />
</div>
<h1 className="text-4xl md:text-6xl font-bold mb-4">
<h1 className="text-4xl md:text-6xl font-bold mb-4 text-white">
Privacy Policy
</h1>
<p className="text-lg md:text-xl max-w-3xl mx-auto">
<p className="text-lg md:text-xl max-w-3xl mx-auto text-white">
Your trust matters. We protect your data with top-tier security,
transparency, and compliance.
</p>

View File

@@ -7,7 +7,7 @@ export default function RefundCancellationPage() {
return (
<div className="bg-gray-50">
{/* HEADER SECTION */}
<section className="bg-sky-200 text-gray-900 py-20 px-6">
<section className="bg-[#2563eb] text-white py-20 px-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

View File

@@ -7,7 +7,7 @@ export default function TermsPage() {
return (
<div className="bg-gray-50">
{/* HEADER SECTION */}
<section className="bg-sky-200 text-gray-900 py-20 px-6">
<section className="bg-[#2563eb] text-white py-20 px-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

View File

@@ -6,6 +6,9 @@ import { AuthProvider } from "./provider";
export const metadata: Metadata = {
title: "ATS System",
description: "Applicant Tracking System",
icons:{
icon: "./favicon.svg"
}
};
export default function RootLayout({