40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
export function ThreeSteps() {
|
|
const steps = [
|
|
{
|
|
image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe73e6c78251cc7c6de1e_Join.png",
|
|
title: "Join",
|
|
description: "It's super simple to join! Just one approval to join the best marketing solution team around.",
|
|
},
|
|
{
|
|
image:
|
|
"https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/644b84254bdda05bc535bb94_Advertise%20(1)-2.png",
|
|
title: "Advertise",
|
|
description: "Share why you use Planpost AI with your audience or customers.",
|
|
},
|
|
{
|
|
image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe76acb809e0f993e160d_Earn.png",
|
|
title: "Earn",
|
|
description: "Earn lifetime recurring commission, including renewals.",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section className="py-16 px-6 bg-white">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="flex flex-col items-center text-center">
|
|
<div className="w-32 h-32 mb-6 flex items-center justify-center rounded-full p-1 bg-gradient-to-br from-[#7a60fa] to-[#6e55f7]">
|
|
<div className="w-full h-full rounded-full flex items-center justify-center bg-black p-4">
|
|
<img src={step.image || "/placeholder.svg"} alt={step.title} className="w-20 h-20 object-contain" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-3 text-gray-900">{step.title}</h3>
|
|
<p className="text-gray-600 leading-relaxed max-w-xs">{step.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|