UI changes and color theme changed
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,38 +18,22 @@ 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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
transition-transform
|
||||
"
|
||||
>
|
||||
<div className="text-white">
|
||||
<div className="text-white text-3xl text-center">
|
||||
{feature.icon}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,7 +49,7 @@ const Header = () => {
|
||||
<motion.div key={item.name} whileHover={{ scale: 1.05 }}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-700 hover:text-[#1FC8DB] font-medium"
|
||||
className="text-gray-700 hover:text-[#2563eb] font-medium"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -62,11 +62,7 @@ const Header = () => {
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
className="text-white font-medium"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
className="text-white font-medium bg-[#2563eb]"
|
||||
>
|
||||
Start Free Trial
|
||||
</Button>
|
||||
@@ -104,11 +100,8 @@ const Header = () => {
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
className="w-full text-white"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, #1FC8DB 0%, #7FD8E7 100%)",
|
||||
}}
|
||||
className="w-full text-white bg-[#2563eb]"
|
||||
|
||||
>
|
||||
Start Free Trial
|
||||
</Button>
|
||||
|
||||
77
app/(public)/_homeComponents/HeroSection.tsx
Normal file
77
app/(public)/_homeComponents/HeroSection.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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]">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -5,14 +5,7 @@ import { motion } from "framer-motion";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Check,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Shield,
|
||||
Star,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { Check, Sparkles, Zap, Shield, Star, Clock } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
/* ------------------ DATA ------------------ */
|
||||
@@ -95,26 +88,19 @@ const comparisonData = [
|
||||
/* ------------------ HERO ------------------ */
|
||||
|
||||
const PricingHero = () => (
|
||||
<section className="py-20 bg-gradient-to-br from-[#c3dbe0] to-white relative overflow-hidden">
|
||||
<section className="py-20 bg-[#2563eb] relative overflow-hidden">
|
||||
<div className="max-w-6xl mx-auto px-4 text-center">
|
||||
<Badge className="mb-6 px-6 py-3 bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white border-0 text-base">
|
||||
<Badge className="mb-6 px-6 py-3 bg-white text-[#2563eb] font-bold border-0 text-base">
|
||||
<Star className="w-4 h-4 mr-2 inline fill-white" />
|
||||
SPECIAL LAUNCH OFFER
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-[#0d0d0d] mb-6">
|
||||
Hire smarter. Track smarter.{" "}
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] bg-clip-text text-transparent">
|
||||
Manage everything
|
||||
</span>{" "}
|
||||
from one platform.
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6">
|
||||
Hire smarter. Track smarter, Manage everything from one platform.
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-[#7c7a7c] max-w-4xl mx-auto">
|
||||
One powerful ATS with{" "}
|
||||
<span className="font-bold text-[#13afdc]">
|
||||
FREE HRMS & CRM
|
||||
</span>
|
||||
<p className="text-xl md:text-2xl text-white max-w-4xl mx-auto">
|
||||
One powerful ATS with FREE HRMS & CRM{" "}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -123,15 +109,16 @@ const PricingHero = () => (
|
||||
/* ------------------ PRICING CARD ------------------ */
|
||||
|
||||
const MainPricingCard = () => {
|
||||
const [billingCycle, setBillingCycle] =
|
||||
useState<"monthly" | "yearly">("monthly");
|
||||
const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
|
||||
"monthly",
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<Card className="rounded-3xl shadow-xl border border-[#c3dbe0] overflow-hidden">
|
||||
<CardContent className="p-10 text-center">
|
||||
<Badge className="mb-4 px-6 py-2 bg-[#c3dbe0] text-[#0d0d0d]">
|
||||
<Badge className="mb-4 px-6 py-2 bg-blue-50 text-[#2563eb] font-extrabold">
|
||||
ALL-IN-ONE PLAN
|
||||
</Badge>
|
||||
|
||||
@@ -145,7 +132,7 @@ const MainPricingCard = () => {
|
||||
onClick={() => setBillingCycle("monthly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold ${
|
||||
billingCycle === "monthly"
|
||||
? "bg-[#13afdc] text-white"
|
||||
? "bg-[#2563eb] text-white"
|
||||
: "bg-gray-100 text-[#7c7a7c]"
|
||||
}`}
|
||||
>
|
||||
@@ -155,7 +142,7 @@ const MainPricingCard = () => {
|
||||
onClick={() => setBillingCycle("yearly")}
|
||||
className={`px-6 py-2 rounded-lg font-semibold ${
|
||||
billingCycle === "yearly"
|
||||
? "bg-[#13afdc] text-white"
|
||||
? "bg-[#2563eb] text-white"
|
||||
: "bg-gray-100 text-[#7c7a7c]"
|
||||
}`}
|
||||
>
|
||||
@@ -181,7 +168,7 @@ const MainPricingCard = () => {
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
<Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
|
||||
<Button className="mt-8 w-full h-14 text-lg font-bold rounded-xl bg-[#2563eb] text-white">
|
||||
<Zap className="w-5 h-5 mr-2" />
|
||||
Start 30-Day Free Trial
|
||||
</Button>
|
||||
@@ -192,10 +179,10 @@ const MainPricingCard = () => {
|
||||
<div
|
||||
key={i}
|
||||
className={`flex gap-3 p-3 rounded-lg ${
|
||||
f.highlight ? "bg-[#c3dbe0]" : ""
|
||||
f.highlight ? "bg-blue-100" : ""
|
||||
}`}
|
||||
>
|
||||
<Check className="text-[#13afdc]" />
|
||||
<Check className="text-[#2563eb]" />
|
||||
<span className="text-[#0d0d0d]">{f.text}</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -218,7 +205,7 @@ const ComparisonTable = () => (
|
||||
|
||||
<div className="overflow-x-auto rounded-2xl shadow border border-[#c3dbe0]">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gradient-to-r from-[#13afdc] to-[#0d0d0d] text-white">
|
||||
<thead className="bg-[#2563eb] text-white">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left">Feature</th>
|
||||
<th className="px-6 py-4 text-center">Winixco</th>
|
||||
@@ -229,10 +216,7 @@ const ComparisonTable = () => (
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}
|
||||
>
|
||||
<tr key={i} className={i % 2 ? "bg-[#f7fbfc]" : "bg-white"}>
|
||||
<td className="px-6 py-4 font-medium text-[#0d0d0d]">
|
||||
{row.feature}
|
||||
</td>
|
||||
@@ -268,12 +252,12 @@ const CtaSection = () => {
|
||||
<h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
|
||||
Need Bulk Pricing or a Demo?
|
||||
</h2>
|
||||
<p className="text-xl text-[#7c7a7c] mb-8">
|
||||
<p className="text-xl text-black mb-8">
|
||||
Talk to our sales team for custom enterprise plans
|
||||
</p>
|
||||
|
||||
<Button
|
||||
className="bg-[#13afdc] text-white px-10 py-6 text-lg"
|
||||
className="bg-[#2563eb] text-white px-10 py-6 text-lg"
|
||||
onClick={() => router.push("/contact")}
|
||||
>
|
||||
Contact Us
|
||||
|
||||
48
app/(public)/_homeComponents/StatsSection.tsx
Normal file
48
app/(public)/_homeComponents/StatsSection.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const stats = [
|
||||
{
|
||||
value: "60-80%",
|
||||
label: "Faster Hiring Process",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Happy Customers",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
label: "Countries Supported",
|
||||
},
|
||||
{
|
||||
value: "100+",
|
||||
label: "Integrations Available",
|
||||
},
|
||||
];
|
||||
|
||||
export default function StatsSection() {
|
||||
return (
|
||||
<section className="bg-[#dbe7f4] py-20">
|
||||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-10 text-center">
|
||||
{stats.map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h2 className="text-5xl font-bold text-[#2563eb]">
|
||||
{stat.value}
|
||||
</h2>
|
||||
|
||||
<p className="mt-3 text-gray-700 text-lg">
|
||||
{stat.label}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
76
app/(public)/_homeComponents/TestiMonialSection.tsx
Normal file
76
app/(public)/_homeComponents/TestiMonialSection.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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]"
|
||||
}`}
|
||||
/>
|
||||
|
||||
@@ -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 that’s transforming the future of CRM.
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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">
|
||||
Let’s 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
We’re 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>
|
||||
We’re 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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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({
|
||||
|
||||
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 411 KiB |
@@ -168,47 +168,53 @@ export const home: HomeContent = {
|
||||
|
||||
features: [
|
||||
{
|
||||
icon: <Sparkles className="w-6 h-6" />,
|
||||
title: "AI-Powered Screening",
|
||||
//icon: <Sparkles className="w-6 h-6" />,
|
||||
icon: "🤖",
|
||||
title: "AI Resume Screening",
|
||||
description:
|
||||
"Advanced AI algorithms automatically screen and rank candidates based on job requirements, saving hours of manual work.",
|
||||
"Automatically parse and rank resumes using advanced AI. Reduce screening time by 80% and find top candidates instantly.",
|
||||
color: "from-purple-500 to-pink-500",
|
||||
},
|
||||
{
|
||||
icon: <Users className="w-6 h-6" />,
|
||||
title: "Collaborative Hiring",
|
||||
//icon: <Users className="w-6 h-6" />,
|
||||
icon: "🎯",
|
||||
title: "Smart Candidate Matching",
|
||||
description:
|
||||
"Enable seamless collaboration between hiring managers, recruiters, and team members with real-time feedback.",
|
||||
"ML-powered matching algorithm identifies the best-fit candidates based on skills, experience, and cultural fit.",
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
title: "Automated Workflows",
|
||||
//icon: <BarChart3 className="w-6 h-6" />,
|
||||
icon: "📅",
|
||||
title: "Interview Scheduling",
|
||||
description:
|
||||
"Set up custom workflows to automate repetitive tasks like interview scheduling, email notifications, and status updates.",
|
||||
color: "from-orange-500 to-red-500",
|
||||
},
|
||||
{
|
||||
icon: <BarChart3 className="w-6 h-6" />,
|
||||
title: "Advanced Analytics",
|
||||
description:
|
||||
"Get deep insights into your hiring funnel with comprehensive reports and real-time dashboards.",
|
||||
"Automated scheduling with calendar sync, reminders, and video interview integration. No back-and-forth emails.",
|
||||
color: "from-green-500 to-emerald-500",
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-6 h-6" />,
|
||||
title: "Time-to-Hire Reduction",
|
||||
//icon: <Clock className="w-6 h-6" />,
|
||||
icon: "🤝",
|
||||
title: "Recruitment CRM",
|
||||
description:
|
||||
"Reduce your hiring timeline by 60% with streamlined processes and intelligent automation.",
|
||||
"Build and nurture your talent community. Stay connected with passive candidates for future opportunities.",
|
||||
color: "from-indigo-500 to-purple-500",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
title: "Enterprise Security",
|
||||
//icon: <Shield className="w-6 h-6" />,
|
||||
icon: "👥",
|
||||
title: "HRMS & Employee Management",
|
||||
description:
|
||||
"SOC2 and ISO27001 certified platform ensuring your candidate data is always protected.",
|
||||
"Seamless transition from recruitment to onboarding. Manage employee data, documents, and lifecycle in one place.",
|
||||
color: "from-teal-500 to-blue-500",
|
||||
},
|
||||
{
|
||||
//icon: <Zap className="w-6 h-6" />,
|
||||
icon: "📊",
|
||||
title: "Advanced Analytics",
|
||||
description:
|
||||
"Real-time insights into hiring metrics, time-to-hire, cost-per-hire, and team productivity dashboards.",
|
||||
color: "from-orange-500 to-red-500",
|
||||
},
|
||||
],
|
||||
|
||||
about: {
|
||||
@@ -314,7 +320,7 @@ export const home: HomeContent = {
|
||||
|
||||
module : {
|
||||
badge: "OUR SOLUTIONS",
|
||||
title: "Modules We",
|
||||
title: "Modules We Offers",
|
||||
subtitle:
|
||||
"Powerful tools designed to streamline your recruitment and HR operations",
|
||||
modules: [
|
||||
|
||||
Reference in New Issue
Block a user