51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
export default function HowItWorks() {
|
|
const steps = [
|
|
{
|
|
number: "01",
|
|
title: "Konsultacja",
|
|
description: "Poznamy Twoje potrzeby, procesy i cele biznesowe.",
|
|
},
|
|
{
|
|
number: "02",
|
|
title: "Implementacja",
|
|
description: "Zbudujemy dedykowane agenty AI skrojone na Twoją firmę.",
|
|
},
|
|
{
|
|
number: "03",
|
|
title: "Automatyzacja",
|
|
description: "Twoja firma działa szybciej i efektywniej — automatycznie.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 px-4 bg-gray-900">
|
|
<div className="max-w-6xl mx-auto">
|
|
<ScrollReveal>
|
|
<div className="text-center mb-14">
|
|
<h2 className="text-4xl font-bold text-white mb-4">Jak to działa</h2>
|
|
<p className="text-gray-400 text-lg">Trzy kroki do automatyzacji Twojego biznesu</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{steps.map((step, i) => (
|
|
<ScrollReveal key={step.title} delay={i * 200}>
|
|
<div className="relative flex flex-col items-center text-center cursor-pointer group">
|
|
{i < steps.length - 1 && (
|
|
<div className="hidden md:block absolute top-10 left-1/2 w-full h-0.5 bg-gradient-to-r from-cyan-500/50 to-transparent" />
|
|
)}
|
|
<div className="relative z-10 w-20 h-20 rounded-full bg-gray-800 border-2 border-cyan-500 shadow-lg shadow-cyan-500/20 group-hover:shadow-xl group-hover:shadow-cyan-500/40 group-hover:scale-110 flex items-center justify-center mb-6 transition-all duration-300">
|
|
<span className="text-cyan-400 font-bold text-xl">{step.number}</span>
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white group-hover:text-cyan-400 mb-2 transition-colors duration-300">{step.title}</h3>
|
|
<p className="text-gray-300 leading-relaxed max-w-xs">{step.description}</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|