home page colour changed
This commit is contained in:
@@ -43,7 +43,7 @@ const AboutUs: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-white overflow-hidden">
|
||||
<section className="py-16 md:py-24 bg-gradient-to-b from-[#c3dbe0]/30 to-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-blue-100 via-purple-50 to-pink-100 flex items-center justify-center">
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-[#13afdc]/20 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-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
|
||||
<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">
|
||||
<Users className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<p className="text-gray-600 font-medium">
|
||||
<p className="text-[#7c7a7c] 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-orange-100 to-red-100 flex items-center justify-center border-4 border-white">
|
||||
<Sparkles className="w-12 h-12 text-orange-500" />
|
||||
<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>
|
||||
</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-green-100 to-teal-100 flex items-center justify-center border-4 border-white">
|
||||
<Award className="w-14 h-14 text-green-600" />
|
||||
<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>
|
||||
</motion.div>
|
||||
|
||||
@@ -97,27 +97,27 @@ const AboutUs: React.FC = () => {
|
||||
<motion.div
|
||||
variants={imageVariants}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="absolute bottom-4 right-4 z-30 bg-white rounded-xl shadow-2xl p-4 border border-gray-100"
|
||||
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-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-lg flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold text-gray-900">500K+</p>
|
||||
<p className="text-xs text-gray-500">Successful Hires</p>
|
||||
<p className="font-bold text-[#0d0d0d]">500K+</p>
|
||||
<p className="text-xs text-[#7c7a7c]">Successful Hires</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
{/* Decorative Blur */}
|
||||
<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 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-30 -z-10"
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-[#13afdc]/20 rounded-full blur-3xl opacity-40 -z-10"
|
||||
/>
|
||||
</motion.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-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100">
|
||||
<Badge className="mb-4 px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
|
||||
<Sparkles className="w-4 h-4 mr-2 inline" />
|
||||
{home.about.badge}
|
||||
</Badge>
|
||||
@@ -138,21 +138,21 @@ const AboutUs: React.FC = () => {
|
||||
|
||||
<motion.h2
|
||||
variants={itemVariants}
|
||||
className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight"
|
||||
className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0d0d0d] leading-tight"
|
||||
>
|
||||
{home.about.heading}
|
||||
</motion.h2>
|
||||
|
||||
<motion.h3
|
||||
variants={itemVariants}
|
||||
className="text-xl sm:text-2xl font-semibold text-blue-600"
|
||||
className="text-xl sm:text-2xl font-semibold text-[#13afdc]"
|
||||
>
|
||||
{home.about.subheading}
|
||||
</motion.h3>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="text-gray-600 text-lg leading-relaxed"
|
||||
className="text-[#7c7a7c] text-lg leading-relaxed"
|
||||
>
|
||||
{home.about.description}
|
||||
</motion.p>
|
||||
@@ -166,13 +166,15 @@ const AboutUs: React.FC = () => {
|
||||
<motion.div
|
||||
key={index}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="text-center p-4 rounded-xl bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-100"
|
||||
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-blue-600" />
|
||||
<p className="text-2xl font-bold text-gray-900">
|
||||
<stat.icon className="w-8 h-8 mx-auto mb-2 text-[#13afdc]" />
|
||||
<p className="text-2xl font-bold text-[#0d0d0d]">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-xs text-gray-600 mt-1">{stat.label}</p>
|
||||
<p className="text-xs text-[#7c7a7c] mt-1">
|
||||
{stat.label}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
@@ -188,10 +190,10 @@ 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-green-100 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||
<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>
|
||||
<span className="text-gray-700">{highlight}</span>
|
||||
<span className="text-[#0d0d0d]">{highlight}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
@@ -200,7 +202,7 @@ const AboutUs: React.FC = () => {
|
||||
<motion.div variants={itemVariants} className="pt-4">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
{home.about.cta}
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
@@ -210,13 +212,13 @@ const AboutUs: React.FC = () => {
|
||||
{/* Trust Badge */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="flex items-center gap-2 pt-4 text-sm text-gray-500"
|
||||
className="flex items-center gap-2 pt-4 text-sm text-[#7c7a7c]"
|
||||
>
|
||||
<div className="flex -space-x-2">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-purple-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold"
|
||||
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"
|
||||
>
|
||||
{i}
|
||||
</div>
|
||||
@@ -231,4 +233,4 @@ const AboutUs: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
export default AboutUs;
|
||||
@@ -8,22 +8,24 @@ const Benefits = () => {
|
||||
return (
|
||||
<section
|
||||
id="solutions"
|
||||
className="py-24 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden"
|
||||
className="py-24 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full filter blur-3xl" />
|
||||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full filter blur-3xl" />
|
||||
{/* Soft background glow */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl" />
|
||||
</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">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
|
||||
Why Choose Winixco?
|
||||
</h2>
|
||||
<p className="text-xl text-purple-100 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.
|
||||
<p className="text-xl text-[#0d0d0d]/70 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.
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -33,14 +35,18 @@ const Benefits = () => {
|
||||
<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"
|
||||
className="text-center p-8 rounded-2xl bg-white/80 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-white/20 flex items-center justify-center">
|
||||
<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">
|
||||
<span className="text-white">{feature.icon}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
||||
<p className="text-purple-100">{feature.description}</p>
|
||||
<h3 className="text-xl font-bold mb-3 text-[#0d0d0d]">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-[#7c7a7c]">
|
||||
{feature.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatedSection>
|
||||
))}
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
|
||||
// CTA Section
|
||||
const CTA = () => {
|
||||
return (
|
||||
<section className="py-24 bg-gradient-to-r from-purple-700 to-pink-600 text-white text-center relative overflow-hidden">
|
||||
<section className="py-24 bg-gradient-to-r from-[#1FC8DB] to-[#7FD8E7] 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] }}
|
||||
@@ -19,13 +19,13 @@ 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-pink-400 to-yellow-300 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-white to-cyan-100 bg-clip-text text-transparent">
|
||||
{" "}
|
||||
hires, manages & grows
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-purple-100 mb-10">
|
||||
<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.
|
||||
</p>
|
||||
@@ -33,22 +33,21 @@ const CTA = () => {
|
||||
<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-purple-700 font-bold rounded-xl shadow-lg hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
|
||||
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"
|
||||
>
|
||||
{" "}
|
||||
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"
|
||||
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{" "}
|
||||
Book a Demo
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="mt-6 text-sm text-purple-200">
|
||||
<p className="mt-6 text-sm text-white/80">
|
||||
No credit card required · Quick setup · Cancel anytime
|
||||
</p>
|
||||
</div>
|
||||
@@ -56,4 +55,4 @@ const CTA = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CTA;
|
||||
export default CTA;
|
||||
@@ -48,4 +48,67 @@ const CompanySlider = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanySlider
|
||||
export default CompanySlider
|
||||
|
||||
|
||||
/*"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import AnimatedSection from "./Animated";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
// Company Logos Slider
|
||||
const CompanySlider = () => {
|
||||
return (
|
||||
<section className="py-16 bg-[#0d0d0d]">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<AnimatedSection>
|
||||
<p className="text-center text-[#c3dbe0] font-semibold mb-12 tracking-wider">
|
||||
TRUSTED BY LEADING COMPANIES WORLDWIDE
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
|
||||
<div className="relative overflow-hidden">
|
||||
<motion.div
|
||||
animate={{ x: ["0%", "-50%"] }}
|
||||
transition={{
|
||||
duration: 30,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
className="flex gap-12 items-center"
|
||||
>
|
||||
{[...home.companies, ...home.companies].map(
|
||||
(company, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="
|
||||
flex items-center gap-3
|
||||
px-6 py-4
|
||||
bg-[#c3dbe0]/10
|
||||
border border-[#c3dbe0]/20
|
||||
rounded-xl
|
||||
min-w-fit
|
||||
transition-all duration-300
|
||||
hover:bg-[#13afdc]
|
||||
hover:shadow-lg
|
||||
hover:scale-105
|
||||
"
|
||||
>
|
||||
<span className="text-4xl text-[#13afdc]">
|
||||
{company.logo}
|
||||
</span>
|
||||
<span className="text-xl font-bold text-[#c3dbe0] whitespace-nowrap group-hover:text-white">
|
||||
{company.name}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanySlider; */
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import React, { } from "react";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Accordion,
|
||||
@@ -10,28 +10,26 @@ import {
|
||||
import AnimatedSection from "./Animated";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
|
||||
|
||||
// FAQ Section
|
||||
const FAQ = () => {
|
||||
return (
|
||||
<section
|
||||
id="faq"
|
||||
className="py-24 bg-gradient-to-b from-white to-purple-50"
|
||||
className="py-24 bg-gradient-to-b from-white to-[#c3dbe0]/40"
|
||||
>
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<AnimatedSection className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
|
||||
<span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
|
||||
FAQ
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
|
||||
Frequently Asked{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
|
||||
Questions
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
Everything you need to know about TalentFlow
|
||||
<p className="text-xl text-[#7c7a7c]">
|
||||
Everything you need to know about Winixco
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -47,12 +45,12 @@ const FAQ = () => {
|
||||
>
|
||||
<AccordionItem
|
||||
value={`item-${index}`}
|
||||
className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow border-0 px-6"
|
||||
className="bg-white rounded-xl shadow-md hover:shadow-lg transition-all border border-[#c3dbe0]/60 px-6"
|
||||
>
|
||||
<AccordionTrigger className="text-left font-semibold text-lg hover:no-underline py-6">
|
||||
<AccordionTrigger className="text-left font-semibold text-lg text-[#0d0d0d] hover:no-underline py-6">
|
||||
{item.question}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-gray-600 pb-6 leading-relaxed">
|
||||
<AccordionContent className="text-[#7c7a7c] pb-6 leading-relaxed">
|
||||
{item.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
@@ -65,4 +63,4 @@ const FAQ = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQ
|
||||
export default FAQ;
|
||||
@@ -10,20 +10,22 @@ const Features = () => {
|
||||
return (
|
||||
<section
|
||||
id="features"
|
||||
className="py-24 bg-gradient-to-b from-white to-purple-50"
|
||||
className="py-24 bg-gradient-to-b from-[#c3dbe0]/40 to-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-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
|
||||
<span className="inline-block px-4 py-2 bg-[#13afdc]/10 text-[#13afdc] rounded-full text-sm font-semibold mb-4">
|
||||
POWERFUL FEATURES
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
|
||||
<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-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#13afdc] bg-clip-text text-transparent">
|
||||
Solutions
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
|
||||
<p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
|
||||
Explore features across all our products designed to scale your
|
||||
hiring success.
|
||||
</p>
|
||||
@@ -36,17 +38,28 @@ const Features = () => {
|
||||
whileHover={{ y: -8, scale: 1.02 }}
|
||||
className="h-full"
|
||||
>
|
||||
<Card className="h-full border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
|
||||
<Card className="h-full bg-white border border-[#c3dbe0] shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
|
||||
<CardContent className="p-8">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}
|
||||
className="
|
||||
w-14 h-14 rounded-xl
|
||||
bg-gradient-to-br from-[#13afdc] to-[#c3dbe0]
|
||||
flex items-center justify-center
|
||||
mb-6
|
||||
group-hover:scale-110
|
||||
transition-transform
|
||||
"
|
||||
>
|
||||
<div className="text-white">{feature.icon}</div>
|
||||
<div className="text-white">
|
||||
{feature.icon}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-gray-800">
|
||||
|
||||
<h3 className="text-xl font-bold mb-3 text-[#0d0d0d]">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
|
||||
<p className="text-[#7c7a7c] leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
@@ -13,10 +13,14 @@ const Header = () => {
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrolled(window.scrollY > 10);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Remove Blogs and Careers
|
||||
const navigation = home.navigation.filter(
|
||||
(item) => item.name !== "Blogs" && item.name !== "Careers"
|
||||
);
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
initial={{ y: -80 }}
|
||||
@@ -28,7 +32,7 @@ const Header = () => {
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center py-4">
|
||||
|
||||
{/* 🔥 Logo */}
|
||||
{/* Logo */}
|
||||
<motion.div whileHover={{ scale: 1.05 }}>
|
||||
<Link href="/">
|
||||
<img
|
||||
@@ -39,13 +43,13 @@ const Header = () => {
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* 🖥️ Desktop Navigation */}
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{home.navigation.map((item) => (
|
||||
{navigation.map((item) => (
|
||||
<motion.div key={item.name} whileHover={{ scale: 1.05 }}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-700 hover:text-purple-600 font-medium"
|
||||
className="text-gray-700 hover:text-[#1FC8DB] font-medium"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -57,12 +61,18 @@ const Header = () => {
|
||||
<Button variant="ghost" className="font-medium">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button className="bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium">
|
||||
<Button
|
||||
className="text-white font-medium"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
>
|
||||
Start Free Trial
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 📱 Mobile Menu Icon */}
|
||||
{/* Mobile Menu Icon */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg hover:bg-gray-100"
|
||||
@@ -71,7 +81,7 @@ const Header = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 📱 Mobile Drawer Menu */}
|
||||
{/* Mobile Drawer Menu */}
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
@@ -80,11 +90,11 @@ const Header = () => {
|
||||
className="md:hidden pb-6"
|
||||
>
|
||||
<div className="flex flex-col space-y-4">
|
||||
{home.navigation.map((item) => (
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-gray-700 hover:text-purple-600 font-medium"
|
||||
className="text-gray-700 hover:text-[#1FC8DB] font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
@@ -93,7 +103,13 @@ const Header = () => {
|
||||
<Button variant="outline" className="w-full">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button className="w-full bg-gradient-to-r from-purple-600 to-pink-600">
|
||||
<Button
|
||||
className="w-full text-white"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
>
|
||||
Start Free Trial
|
||||
</Button>
|
||||
</div>
|
||||
@@ -104,4 +120,4 @@ const Header = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
export default Header;
|
||||
|
||||
@@ -1,150 +1,347 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Check, ArrowRight, PlayCircle, Users, UserCog, Briefcase } from "lucide-react";
|
||||
import {
|
||||
ArrowRight,
|
||||
PlayCircle,
|
||||
Users,
|
||||
UserCog,
|
||||
Briefcase,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { home } from "@/services/Constants";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<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] }}
|
||||
transition={{ duration: 20, repeat: Infinity }}
|
||||
className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||
<section
|
||||
className="
|
||||
relative overflow-hidden
|
||||
bg-white
|
||||
pt-28 pb-20 md:pt-32 md:pb-24
|
||||
"
|
||||
>
|
||||
{/* Background grid + Java/Botticelli glow */}
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.05]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, rgba(15,23,42,1) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,1) 1px, transparent 1px)",
|
||||
backgroundSize: "56px 56px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Top glow */}
|
||||
<motion.div
|
||||
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 blur-3xl opacity-30"
|
||||
aria-hidden
|
||||
initial={{ opacity: 0.35, scale: 0.95 }}
|
||||
animate={{ opacity: [0.25, 0.4, 0.25], scale: [0.95, 1.05, 0.95] }}
|
||||
transition={{ duration: 12, repeat: Infinity }}
|
||||
className="absolute -top-24 -left-24 h-80 w-80 rounded-full blur-3xl"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(31,200,219,0.45) 0%, transparent 60%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Bottom glow */}
|
||||
<motion.div
|
||||
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 blur-3xl opacity-30"
|
||||
aria-hidden
|
||||
initial={{ opacity: 0.25, scale: 0.95 }}
|
||||
animate={{ opacity: [0.18, 0.32, 0.18], scale: [0.95, 1.08, 0.95] }}
|
||||
transition={{ duration: 14, repeat: Infinity }}
|
||||
className="absolute -bottom-32 right-0 h-[28rem] w-[28rem] rounded-full blur-3xl"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(127,216,231,0.55) 0%, transparent 62%)",
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
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) => (
|
||||
<div className="relative mx-auto max-w-7xl px-4">
|
||||
<div className="grid items-center gap-10 lg:grid-cols-2">
|
||||
{/* Left: copy */}
|
||||
<div className="text-center lg:text-left">
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-white p-6 rounded-2xl shadow-lg border border-purple-100"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium"
|
||||
style={{
|
||||
borderColor: "rgba(31,200,219,0.35)",
|
||||
backgroundColor: "rgba(31,200,219,0.10)",
|
||||
color: "#065F67",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: "#1FC8DB" }}
|
||||
/>
|
||||
All-in-one ATS • HRMS • CRM for modern teams
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
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 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg"
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.05 }}
|
||||
className="mt-6 text-4xl font-extrabold tracking-tight text-slate-900 md:text-6xl"
|
||||
>
|
||||
<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}
|
||||
Hire faster with a{" "}
|
||||
<span
|
||||
className="bg-clip-text text-transparent"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
>
|
||||
clean ATS workflow
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtext */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.12 }}
|
||||
className="mt-5 max-w-xl text-lg leading-relaxed text-slate-600 md:text-xl"
|
||||
>
|
||||
Winixco streamlines pipelines, interview scheduling, and employee
|
||||
operations—so your team can focus on decisions, not admin work.
|
||||
</motion.p>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.55, delay: 0.2 }}
|
||||
className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center lg:justify-start justify-center"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="rounded-xl px-7 py-6 text-base font-semibold shadow-md text-white"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
>
|
||||
Book a Demo <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="rounded-xl px-7 py-6 text-base font-semibold border-slate-300"
|
||||
>
|
||||
<PlayCircle className="mr-2 h-5 w-5" />
|
||||
Watch Overview
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Trust line */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.55, delay: 0.28 }}
|
||||
className="mt-5 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-600 lg:justify-start"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-emerald-500" />
|
||||
No credit card required
|
||||
</span>
|
||||
<span className="hidden sm:inline text-slate-300">•</span>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-emerald-500" />
|
||||
14-day free trial
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature chips */}
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-3 lg:justify-start">
|
||||
{[
|
||||
{ icon: Users, title: "ATS", desc: "Pipeline + sourcing" },
|
||||
{ icon: UserCog, title: "HRMS", desc: "Onboarding + reviews" },
|
||||
{ icon: Briefcase, title: "CRM", desc: "Clients + pools" },
|
||||
].map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 rounded-2xl border bg-white px-4 py-3"
|
||||
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
||||
>
|
||||
<div
|
||||
className="grid h-10 w-10 place-items-center rounded-xl"
|
||||
style={{ backgroundColor: "rgba(31,200,219,0.14)" }}
|
||||
>
|
||||
<f.icon className="h-5 w-5 text-slate-800" />
|
||||
</div>
|
||||
<div className="leading-tight">
|
||||
<div className="text-sm font-semibold text-slate-900">
|
||||
{f.title}
|
||||
</div>
|
||||
<div className="text-xs text-slate-600">{f.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right preview stays same, only accent changed */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.65, delay: 0.18 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="rounded-3xl border bg-white shadow-xl border-slate-200">
|
||||
{/* Fake topbar */}{" "}
|
||||
<div
|
||||
className="flex items-center justify-between border-b px-5 py-4"
|
||||
style={{ borderColor: "rgba(15,23,42,0.08)" }}
|
||||
>
|
||||
{" "}
|
||||
<div className="flex items-center gap-3">
|
||||
{" "}
|
||||
<div className="flex gap-1.5">
|
||||
{" "}
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-red-400/80" />{" "}
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-yellow-400/80" />{" "}
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-green-400/80" />{" "}
|
||||
</div>{" "}
|
||||
<div className="text-sm font-semibold text-slate-900">
|
||||
Winixco ATS
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
<div className="text-xs text-slate-500">Today</div>{" "}
|
||||
</div>{" "}
|
||||
{/* Fake content */}{" "}
|
||||
<div className="p-5">
|
||||
{" "}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{" "}
|
||||
<div
|
||||
className="rounded-2xl border p-4"
|
||||
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
||||
>
|
||||
{" "}
|
||||
<div className="text-xs font-semibold text-slate-500">
|
||||
Pipeline
|
||||
</div>{" "}
|
||||
<div className="mt-2 space-y-2">
|
||||
{" "}
|
||||
{["Applied", "Screening", "Interview", "Offer"].map(
|
||||
(t) => (
|
||||
<div
|
||||
key={t}
|
||||
className="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2"
|
||||
>
|
||||
{" "}
|
||||
<span className="text-sm font-medium text-slate-800">
|
||||
{t}
|
||||
</span>{" "}
|
||||
<span className="text-xs text-slate-500">
|
||||
+12
|
||||
</span>{" "}
|
||||
</div>
|
||||
),
|
||||
)}{" "}
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
<div
|
||||
className="rounded-2xl border p-4"
|
||||
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
||||
>
|
||||
{" "}
|
||||
<div className="text-xs font-semibold text-slate-500">
|
||||
Upcoming interviews
|
||||
</div>{" "}
|
||||
<div className="mt-3 space-y-2">
|
||||
{" "}
|
||||
{[
|
||||
{
|
||||
name: "A. Roy",
|
||||
role: "Frontend Dev",
|
||||
time: "11:00 AM",
|
||||
},
|
||||
{
|
||||
name: "S. Das",
|
||||
role: "Sales Lead",
|
||||
time: "02:30 PM",
|
||||
},
|
||||
{ name: "K. Singh", role: "HR Ops", time: "05:00 PM" },
|
||||
].map((x) => (
|
||||
<div
|
||||
key={x.name}
|
||||
className="flex items-center justify-between rounded-xl px-3 py-2 bg-white"
|
||||
>
|
||||
{" "}
|
||||
<div>
|
||||
{" "}
|
||||
<div className="text-sm font-semibold text-slate-900">
|
||||
{x.name}
|
||||
</div>{" "}
|
||||
<div className="text-xs text-slate-500">
|
||||
{x.role}
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
<div
|
||||
className="rounded-full px-3 py-1 text-xs font-semibold"
|
||||
style={{
|
||||
backgroundColor: "rgba(5,245,228,0.18)",
|
||||
color: "#064E47",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{x.time}{" "}
|
||||
</div>{" "}
|
||||
</div>
|
||||
))}{" "}
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
{/* Stats row from your constants */}{" "}
|
||||
<div className="mt-5 grid grid-cols-2 gap-3">
|
||||
{" "}
|
||||
{home.stats.slice(0, 2).map((s, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-2xl border p-4"
|
||||
style={{ borderColor: "rgba(15,23,42,0.10)" }}
|
||||
>
|
||||
{" "}
|
||||
<div className="text-xs font-semibold text-slate-500">
|
||||
{s.label}
|
||||
</div>{" "}
|
||||
<div className="mt-2 text-2xl font-extrabold text-slate-900">
|
||||
{s.value}
|
||||
</div>{" "}
|
||||
<div className="mt-2 h-1.5 w-full rounded-full bg-slate-100">
|
||||
{" "}
|
||||
<div
|
||||
className="h-1.5 rounded-full"
|
||||
style={{ width: "62%", backgroundColor: "#05F5E4" }}
|
||||
/>{" "}
|
||||
</div>{" "}
|
||||
</div>
|
||||
))}{" "}
|
||||
</div>{" "}
|
||||
</div>
|
||||
<div className="text-gray-700 font-medium">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Accent glow */}
|
||||
<div
|
||||
className="pointer-events-none absolute -inset-2 -z-10 rounded-[2rem] opacity-60 blur-2xl"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(31,200,219,0.45), rgba(127,216,231,0.35))",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
export default Hero;
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Briefcase, Users, ClipboardCheck, UserPlus, DollarSign, Handshake } from "lucide-react";
|
||||
import {
|
||||
Briefcase,
|
||||
Users,
|
||||
ClipboardCheck,
|
||||
UserPlus,
|
||||
DollarSign,
|
||||
Handshake,
|
||||
} from "lucide-react";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
@@ -38,27 +45,32 @@ const steps = [
|
||||
|
||||
const HowItWorks = () => {
|
||||
return (
|
||||
<section className="py-32 bg-gradient-to-br from-purple-600 to-pink-600 text-white text-center relative overflow-hidden">
|
||||
<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.4, 0.6, 0.4], scale: [1, 1.1, 1] }}
|
||||
animate={{ opacity: [0.3, 0.5, 0.3], 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"
|
||||
className="absolute bg-[#13afdc] 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] }}
|
||||
animate={{ opacity: [0.3, 0.5, 0.3], 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"
|
||||
className="absolute bg-[#0d0d0d] rounded-full blur-3xl opacity-10 w-[26rem] h-[26rem] -bottom-20 -left-20"
|
||||
/>
|
||||
|
||||
<div className="relative max-w-6xl mx-auto px-6 z-10">
|
||||
{/* Heading */}
|
||||
<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"
|
||||
className="text-4xl md:text-6xl font-extrabold mb-6 text-[#0d0d0d]"
|
||||
>
|
||||
How It <span className="text-yellow-300">Works</span>
|
||||
How It{" "}
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
|
||||
Works
|
||||
</span>
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
@@ -66,9 +78,10 @@ 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-purple-200 mb-16"
|
||||
className="max-w-3xl mx-auto text-lg md:text-xl text-[#7c7a7c] mb-16"
|
||||
>
|
||||
Winixco connects your hiring, HR and CRM workflows into one powerful operating system — from job posting to payroll & business growth.
|
||||
Winixco connects your hiring, HR and CRM workflows into one powerful
|
||||
operating system — from job posting to payroll & business growth.
|
||||
</motion.p>
|
||||
|
||||
{/* Steps */}
|
||||
@@ -80,13 +93,15 @@ const HowItWorks = () => {
|
||||
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"
|
||||
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-yellow-300">
|
||||
<div className="flex justify-center mb-4 text-[#13afdc]">
|
||||
{step.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
|
||||
<p className="text-sm text-purple-200">{step.desc}</p>
|
||||
<h3 className="text-xl font-bold mb-2 text-[#0d0d0d]">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#7c7a7c]">{step.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
@@ -95,9 +110,9 @@ const HowItWorks = () => {
|
||||
whileInView={{ opacity: 1 }}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="mt-12 text-sm text-purple-200"
|
||||
className="mt-12 text-sm text-[#7c7a7c]"
|
||||
>
|
||||
Complete the loop. Grow endlessly. 💼✨
|
||||
Complete the loop. Grow endlessly.
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
"use client"
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -13,8 +12,6 @@ import {
|
||||
} from "@/services/Constants";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
|
||||
|
||||
const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
const [isHovered, setIsHovered] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
@@ -33,7 +30,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
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`}
|
||||
className="bg-white border border-[#c3dbe0] hover:shadow-xl transition-all duration-500 cursor-pointer group h-full overflow-hidden relative"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<CardContent className="p-8 md:p-10 relative z-10">
|
||||
@@ -45,20 +42,14 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
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`}
|
||||
className="w-20 h-20 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] 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>
|
||||
<Badge className="bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
|
||||
New
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
@@ -75,26 +66,19 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
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`}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#13afdc]/20 to-transparent" />
|
||||
</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))`,
|
||||
}}
|
||||
>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#13afdc] transition-colors">
|
||||
{module.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-3 leading-relaxed">
|
||||
<p className="text-[#0d0d0d] mb-3 leading-relaxed">
|
||||
{module.description}
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm mb-6 leading-relaxed">
|
||||
<p className="text-[#7c7a7c] text-sm mb-6 leading-relaxed">
|
||||
{module.subDescription}
|
||||
</p>
|
||||
|
||||
@@ -107,10 +91,10 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
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"
|
||||
className="flex items-center gap-2 bg-[#c3dbe0]/30 rounded-lg p-3"
|
||||
>
|
||||
<feature.icon className={`w-4 h-4 ${module.accentColor}`} />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
<feature.icon className="w-4 h-4 text-[#13afdc]" />
|
||||
<span className="text-sm font-medium text-[#0d0d0d]">
|
||||
{feature.label}
|
||||
</span>
|
||||
</motion.div>
|
||||
@@ -120,34 +104,28 @@ 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 ${module.color} hover:shadow-xl text-white font-semibold group-hover:scale-105 transition-transform`}
|
||||
className="w-full bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white font-semibold hover:shadow-xl"
|
||||
size="lg"
|
||||
>
|
||||
Learn More
|
||||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</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"
|
||||
>
|
||||
{/* Checkmark */}
|
||||
<div className="absolute top-4 right-4 w-8 h-8 bg-[#13afdc] rounded-full flex items-center justify-center shadow-lg">
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
{/* Decorative Blur */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: isHovered ? 1.5 : 1,
|
||||
opacity: isHovered ? 0.3 : 0.1,
|
||||
opacity: isHovered ? 0.25 : 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`}
|
||||
className="absolute -bottom-10 -right-10 w-40 h-40 bg-[#13afdc] rounded-full blur-3xl"
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
@@ -156,24 +134,13 @@ 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-gray-50 to-white relative overflow-hidden">
|
||||
{/* Background Decorative Elements */}
|
||||
<section className="py-16 md:py-24 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
|
||||
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, 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"
|
||||
className="absolute top-1/4 left-0 w-96 h-96 bg-[#13afdc]/20 rounded-full blur-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -185,19 +152,19 @@ const ModulesSection: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<Badge className="mb-4 px-6 py-2 bg-purple-100 text-purple-700 border-0">
|
||||
<Badge className="mb-4 px-6 py-2 bg-[#13afdc]/10 text-[#13afdc] 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">
|
||||
<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-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
|
||||
Offers
|
||||
</span>{" "}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
<p className="text-lg md:text-xl text-[#7c7a7c] max-w-3xl mx-auto">
|
||||
{home.module.subtitle}
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -209,7 +176,7 @@ const ModulesSection: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -217,19 +184,18 @@ const ModulesSection: React.FC = () => {
|
||||
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">
|
||||
<Card className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] 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 className="text-white/90 mb-8">
|
||||
Get started with all modules and experience seamless integration
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-blue-600 hover:bg-gray-100 font-semibold"
|
||||
className="bg-white text-[#13afdc] hover:bg-gray-100 font-semibold"
|
||||
>
|
||||
Start Free Trial
|
||||
<Sparkles className="ml-2 w-5 h-5" />
|
||||
@@ -237,7 +203,7 @@ const ModulesSection: React.FC = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-white bg-white hover:bg-white/10"
|
||||
className="border-2 border-white text-slate-600 hover:bg-white/10"
|
||||
>
|
||||
Schedule Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
@@ -251,4 +217,4 @@ const ModulesSection: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ModulesSection;
|
||||
export default ModulesSection;
|
||||
@@ -10,53 +10,30 @@ import {
|
||||
Sparkles,
|
||||
Zap,
|
||||
Shield,
|
||||
TrendingUp,
|
||||
Users,
|
||||
ChevronDown,
|
||||
Star,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// Types
|
||||
interface Feature {
|
||||
text: string;
|
||||
highlight?: boolean;
|
||||
}
|
||||
/* ------------------ DATA ------------------ */
|
||||
|
||||
interface ComparisonRow {
|
||||
feature: string;
|
||||
winixco: string;
|
||||
zoho: string;
|
||||
freshteam: string;
|
||||
darwinbox: string;
|
||||
}
|
||||
|
||||
interface BenefitCard {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
// Data
|
||||
const features: Feature[] = [
|
||||
const features = [
|
||||
{ text: "Unlimited Jobs & Candidates", highlight: true },
|
||||
{ text: "FREE HRMS & CRM (No extra cost)", highlight: true },
|
||||
{ text: "AI Resume Parsing", highlight: false },
|
||||
{ text: "AI Resume Formatting & Standardization", highlight: false },
|
||||
{ text: "AI JD Generator", highlight: false },
|
||||
{ text: "AI Based Candidate Scoring & Ranking", highlight: false },
|
||||
{ text: "AI Technical Assessments", highlight: false },
|
||||
{ text: "AI Interview Insights & Notes", highlight: false },
|
||||
{ text: "Geo‑Location Enabled HRMS", highlight: false },
|
||||
{ text: "Live Attendance with Real‑Time Location", highlight: false },
|
||||
{ text: "Recruiter & Team Performance Analytics", highlight: false },
|
||||
{ text: "Client & Vendor CRM (Included)", highlight: false },
|
||||
{ text: "PDPA, ISO 27001 & SOC 2 Ready", highlight: false },
|
||||
{ text: "AI Resume Parsing" },
|
||||
{ text: "AI Resume Formatting & Standardization" },
|
||||
{ text: "AI JD Generator" },
|
||||
{ text: "AI Based Candidate Scoring & Ranking" },
|
||||
{ text: "AI Technical Assessments" },
|
||||
{ text: "AI Interview Insights & Notes" },
|
||||
{ text: "Geo-Location Enabled HRMS" },
|
||||
{ text: "Live Attendance with Real-Time Location" },
|
||||
{ text: "Recruiter & Team Performance Analytics" },
|
||||
{ text: "Client & Vendor CRM (Included)" },
|
||||
{ text: "PDPA, ISO 27001 & SOC 2 Ready" },
|
||||
];
|
||||
|
||||
const comparisonData: ComparisonRow[] = [
|
||||
const comparisonData = [
|
||||
{
|
||||
feature: "AI Resume Parsing",
|
||||
winixco: "✔",
|
||||
@@ -100,7 +77,7 @@ const comparisonData: ComparisonRow[] = [
|
||||
darwinbox: "✖",
|
||||
},
|
||||
{
|
||||
feature: "Geo‑Location HRMS",
|
||||
feature: "Geo-Location HRMS",
|
||||
winixco: "✔",
|
||||
zoho: "✖",
|
||||
freshteam: "✖",
|
||||
@@ -115,415 +92,206 @@ const comparisonData: ComparisonRow[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const benefitCards: BenefitCard[] = [
|
||||
{
|
||||
icon: <Sparkles className="w-6 h-6" />,
|
||||
title: "All-In-One Platform",
|
||||
description:
|
||||
"Get ATS, HRMS, and CRM in one unified platform. No need for multiple subscriptions or integrations.",
|
||||
color: "from-purple-500 to-pink-500",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
title: "AI-Powered Automation",
|
||||
description:
|
||||
"All AI features bundled in — no add-ons, no hidden limits. Automate screening, scoring, and more.",
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
title: "Enterprise Security",
|
||||
description:
|
||||
"PDPA, ISO 27001 & SOC 2 ready. Your candidate data is protected with enterprise-grade security.",
|
||||
color: "from-orange-500 to-red-500",
|
||||
},
|
||||
];
|
||||
/* ------------------ HERO ------------------ */
|
||||
|
||||
// Hero Section
|
||||
const PricingHero: React.FC = () => {
|
||||
return (
|
||||
<section className="py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 relative overflow-hidden">
|
||||
{/* Background Decoration */}
|
||||
<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-0 left-0 w-96 h-96 bg-blue-200/30 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-0 right-0 w-96 h-96 bg-purple-200/30 rounded-full blur-3xl"
|
||||
/>
|
||||
</div>
|
||||
const PricingHero = () => (
|
||||
<section className="py-20 bg-gradient-to-br from-[#c3dbe0] to-white 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">
|
||||
<Star className="w-4 h-4 mr-2 inline fill-white" />
|
||||
SPECIAL LAUNCH OFFER
|
||||
</Badge>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white 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>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 mb-6 leading-tight">
|
||||
Hire smarter. Track smarter.{" "}
|
||||
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
Manage everything
|
||||
</span>{" "}
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-700 max-w-4xl mx-auto">
|
||||
One powerful ATS with{" "}
|
||||
<span className="font-bold text-blue-600">FREE HRMS & CRM</span>, AI
|
||||
automation and real-time geo‑location tracking
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
/* ------------------ PRICING CARD ------------------ */
|
||||
|
||||
// Main Pricing Card
|
||||
const MainPricingCard: React.FC = () => {
|
||||
const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
|
||||
"monthly"
|
||||
);
|
||||
const MainPricingCard = () => {
|
||||
const [billingCycle, setBillingCycle] =
|
||||
useState<"monthly" | "yearly">("monthly");
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Card className="max-w-4xl mx-auto rounded-3xl shadow-2xl border-2 border-blue-100 overflow-hidden relative">
|
||||
{/* Popular Badge */}
|
||||
<div className="absolute top-0 right-0 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 text-sm font-bold rounded-bl-2xl">
|
||||
<Sparkles className="w-4 h-4 inline mr-1" />
|
||||
MOST POPULAR
|
||||
<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]">
|
||||
ALL-IN-ONE PLAN
|
||||
</Badge>
|
||||
|
||||
<h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
|
||||
Winixco ATS
|
||||
</h2>
|
||||
|
||||
{/* Toggle */}
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
<button
|
||||
onClick={() => setBillingCycle("monthly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold ${
|
||||
billingCycle === "monthly"
|
||||
? "bg-[#13afdc] text-white"
|
||||
: "bg-gray-100 text-[#7c7a7c]"
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingCycle("yearly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold ${
|
||||
billingCycle === "yearly"
|
||||
? "bg-[#13afdc] text-white"
|
||||
: "bg-gray-100 text-[#7c7a7c]"
|
||||
}`}
|
||||
>
|
||||
Yearly
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-8 md:p-12">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Badge className="mb-4 px-6 py-2 bg-green-100 text-green-700 border-green-200 text-base">
|
||||
ALL‑IN‑ONE PLAN • HRMS & CRM FREE
|
||||
</Badge>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Winixco ATS – One Plan
|
||||
</h2>
|
||||
|
||||
{/* Billing Toggle */}
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => setBillingCycle("monthly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold transition-all ${
|
||||
billingCycle === "monthly"
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBillingCycle("yearly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold transition-all relative ${
|
||||
billingCycle === "yearly"
|
||||
? "bg-blue-600 text-white shadow-lg"
|
||||
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Yearly
|
||||
<span className="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">
|
||||
Save 17%
|
||||
</span>
|
||||
</button>
|
||||
{/* Price */}
|
||||
{billingCycle === "monthly" ? (
|
||||
<>
|
||||
<div className="text-6xl font-extrabold text-[#0d0d0d]">
|
||||
₹1,499
|
||||
</div>
|
||||
<p className="text-[#7c7a7c]">per user / month</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-6xl font-extrabold text-[#0d0d0d]">
|
||||
₹14,999
|
||||
</div>
|
||||
<p className="text-[#7c7a7c]">per user / year</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Pricing Display */}
|
||||
{billingCycle === "monthly" ? (
|
||||
<div>
|
||||
<div className="text-5xl md:text-6xl font-extrabold text-gray-900 mb-2">
|
||||
₹1,499
|
||||
</div>
|
||||
<p className="text-lg text-gray-600">per user / month</p>
|
||||
<p className="mt-3 text-sm text-blue-600 font-semibold">
|
||||
<Clock className="w-4 h-4 inline mr-1" />
|
||||
Just ₹50/day per recruiter
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="text-5xl md:text-6xl font-extrabold text-gray-900 mb-2">
|
||||
₹14,999
|
||||
</div>
|
||||
<p className="text-lg text-gray-600">per user / year</p>
|
||||
<p className="mt-3 text-lg text-green-600 font-bold">
|
||||
Save ₹3,000 — Get 2 months FREE! 🎉
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full h-16 text-xl font-bold rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-xl mb-4"
|
||||
>
|
||||
<Zap className="w-6 h-6 mr-2" />
|
||||
Start 30‑Day Free Trial
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-sm text-gray-500 mb-8">
|
||||
No credit card required • Cancel anytime • Full access during
|
||||
trial
|
||||
</p>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{features.map((item: Feature, index: number) => (
|
||||
<motion.div
|
||||
key={item.text}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.02 }}
|
||||
className={`flex items-start gap-3 p-3 rounded-lg transition-colors ${
|
||||
item.highlight ? "bg-blue-50" : ""
|
||||
}`}
|
||||
>
|
||||
<Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
|
||||
<span
|
||||
className={`text-sm md:text-base ${
|
||||
item.highlight
|
||||
? "text-blue-700 font-semibold"
|
||||
: "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{item.text}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Benefits Section
|
||||
const BenefitsSection: React.FC = () => {
|
||||
return (
|
||||
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-900"
|
||||
>
|
||||
Why Choose Winixco?
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{benefitCards.map((card: BenefitCard, index: number) => (
|
||||
<motion.div
|
||||
key={card.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||
>
|
||||
<Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
|
||||
<CardContent className="p-8">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-gradient-to-br ${card.color} flex items-center justify-center text-white mb-6`}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{card.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Comparison Table
|
||||
const ComparisonTable: React.FC = () => {
|
||||
return (
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-8 text-gray-900">
|
||||
Compare with Others
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 mb-8">
|
||||
See why Winixco offers the best value for your investment
|
||||
</p>
|
||||
|
||||
<div className="overflow-x-auto rounded-2xl shadow-xl border border-gray-200">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left font-semibold">Feature</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">
|
||||
Winixco
|
||||
</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">
|
||||
Zoho Recruit
|
||||
</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">
|
||||
Freshteam
|
||||
</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">
|
||||
Darwinbox
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row: ComparisonRow, index: number) => (
|
||||
<tr
|
||||
key={row.feature}
|
||||
className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}
|
||||
>
|
||||
<td className="px-6 py-4 font-medium text-gray-900">
|
||||
{row.feature}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span
|
||||
className={`${
|
||||
row.winixco === "✔"
|
||||
? "text-green-600 text-2xl"
|
||||
: row.winixco === "✖"
|
||||
? "text-red-500 text-2xl"
|
||||
: "font-semibold text-blue-600"
|
||||
}`}
|
||||
>
|
||||
{row.winixco}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span
|
||||
className={`${
|
||||
row.zoho === "✔"
|
||||
? "text-green-600 text-2xl"
|
||||
: row.zoho === "✖"
|
||||
? "text-red-500 text-2xl"
|
||||
: "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{row.zoho}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span
|
||||
className={`${
|
||||
row.freshteam === "✔"
|
||||
? "text-green-600 text-2xl"
|
||||
: row.freshteam === "✖"
|
||||
? "text-red-500 text-2xl"
|
||||
: "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{row.freshteam}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span
|
||||
className={`${
|
||||
row.darwinbox === "✔"
|
||||
? "text-green-600 text-2xl"
|
||||
: row.darwinbox === "✖"
|
||||
? "text-red-500 text-2xl"
|
||||
: "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
{row.darwinbox}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// CTA Section
|
||||
const CtaSection: React.FC = () => {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
||||
Need Bulk Pricing or a Demo?
|
||||
</h2>
|
||||
<p className="text-xl mb-10">
|
||||
Talk to our sales team for custom enterprise plans and volume
|
||||
discounts
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white border text-blue-700 hover:bg-gray-100 font-semibold px-10 py-7 text-lg shadow-xl"
|
||||
onClick={()=>router.push("/contact")}
|
||||
>
|
||||
Contact Us
|
||||
{/* 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">
|
||||
<Zap className="w-5 h-5 mr-2" />
|
||||
Start 30-Day Free Trial
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid md:grid-cols-2 gap-4 mt-10 text-left">
|
||||
{features.map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex gap-3 p-3 rounded-lg ${
|
||||
f.highlight ? "bg-[#c3dbe0]" : ""
|
||||
}`}
|
||||
>
|
||||
<Check className="text-[#13afdc]" />
|
||||
<span className="text-[#0d0d0d]">{f.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Main Component
|
||||
/* ------------------ COMPARISON ------------------ */
|
||||
|
||||
const ComparisonTable = () => (
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h2 className="text-4xl font-bold text-[#0d0d0d] mb-8">
|
||||
Compare with Others
|
||||
</h2>
|
||||
|
||||
<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">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left">Feature</th>
|
||||
<th className="px-6 py-4 text-center">Winixco</th>
|
||||
<th className="px-6 py-4 text-center">Zoho</th>
|
||||
<th className="px-6 py-4 text-center">Freshteam</th>
|
||||
<th className="px-6 py-4 text-center">Darwinbox</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}
|
||||
>
|
||||
<td className="px-6 py-4 font-medium text-[#0d0d0d]">
|
||||
{row.feature}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-[#13afdc]">
|
||||
{row.winixco}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-[#7c7a7c]">
|
||||
{row.zoho}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-[#7c7a7c]">
|
||||
{row.freshteam}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center text-[#7c7a7c]">
|
||||
{row.darwinbox}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
/* ------------------ CTA ------------------ */
|
||||
|
||||
const CtaSection = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-4xl mx-auto text-center px-4">
|
||||
<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">
|
||||
Talk to our sales team for custom enterprise plans
|
||||
</p>
|
||||
|
||||
<Button
|
||||
className="bg-[#13afdc] text-white px-10 py-6 text-lg"
|
||||
onClick={() => router.push("/contact")}
|
||||
>
|
||||
Contact Us
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
/* ------------------ MAIN ------------------ */
|
||||
|
||||
export default function PricingSection() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<PricingHero />
|
||||
<MainPricingCard />
|
||||
<BenefitsSection />
|
||||
<ComparisonTable />
|
||||
<CtaSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,16 +20,16 @@ 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-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
|
||||
<span className="inline-block px-4 py-2 bg-[#c3dbe0] text-[#0d0d0d] rounded-full text-sm font-semibold mb-4">
|
||||
TESTIMONIALS
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-[#0d0d0d]">
|
||||
Loved by{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
|
||||
Our Clients
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
<p className="text-xl text-[#7c7a7c] max-w-3xl mx-auto">
|
||||
See what our customers have to say about their experience
|
||||
</p>
|
||||
</AnimatedSection>
|
||||
@@ -42,25 +42,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-purple-50 to-pink-50 rounded-3xl p-12 shadow-xl"
|
||||
className="bg-gradient-to-br from-[#c3dbe0] to-white rounded-3xl p-12 shadow-xl"
|
||||
>
|
||||
<Quote className="w-12 h-12 text-purple-300 mb-6" />
|
||||
<Quote className="w-12 h-12 text-[#13afdc] mb-6" />
|
||||
|
||||
<p className="text-2xl text-gray-800 mb-8 leading-relaxed italic">
|
||||
<p className="text-2xl text-[#0d0d0d] 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-purple-400 to-pink-400 flex items-center justify-center text-3xl">
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] flex items-center justify-center text-3xl">
|
||||
{testimonial.image}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-lg text-gray-800">
|
||||
<h4 className="font-bold text-lg text-[#0d0d0d]">
|
||||
{testimonial.name}
|
||||
</h4>
|
||||
<p className="text-gray-600">{testimonial.role}</p>
|
||||
<p className="text-purple-600 font-semibold">
|
||||
<p className="text-[#7c7a7c]">{testimonial.role}</p>
|
||||
<p className="text-[#13afdc] font-semibold">
|
||||
{testimonial.company}
|
||||
</p>
|
||||
</div>
|
||||
@@ -69,7 +69,7 @@ const Testimonials = () => {
|
||||
{[...Array(testimonial.rating)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="w-5 h-5 fill-yellow-400 text-yellow-400"
|
||||
className="w-5 h-5 fill-[#13afdc] text-[#13afdc]"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -85,8 +85,8 @@ const Testimonials = () => {
|
||||
onClick={() => setCurrentIndex(index)}
|
||||
className={`h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentIndex
|
||||
? "bg-purple-600 w-8"
|
||||
: "bg-gray-300 w-3 hover:bg-gray-400"
|
||||
? "bg-[#13afdc] w-8"
|
||||
: "bg-gray-300 w-3 hover:bg-[#c3dbe0]"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
@@ -96,5 +96,5 @@ const Testimonials = () => {
|
||||
</section>
|
||||
);
|
||||
};
|
||||
export default Testimonials;
|
||||
|
||||
export default Testimonials;
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -47,6 +47,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"baseline-browser-mapping": "^2.9.19",
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.3.8",
|
||||
"typescript": "^5"
|
||||
@@ -2777,6 +2778,16 @@
|
||||
"npm": ">=6.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/baseline-browser-mapping": {
|
||||
"version": "2.9.19",
|
||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
|
||||
"integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"baseline-browser-mapping": "dist/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001741",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"baseline-browser-mapping": "^2.9.19",
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.3.8",
|
||||
"typescript": "^5"
|
||||
|
||||
Reference in New Issue
Block a user