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

home page colour changed

Browse Source
This commit is contained in:
Sandip Chowdhury
2026-02-17 17:26:29 +05:30
parent f9747bcd68
commit 2493a05d53
14 changed files with 793 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>