66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import { Settings2, Check, Info } from 'lucide-react';
|
|
|
|
const steps = [
|
|
{ number: 1, title: 'Your Prompt', subtitle: '"a cat on windowsill"' },
|
|
{ number: 2, title: 'Smart Enhancement', subtitle: 'Style + details added' },
|
|
{ number: 3, title: 'AI Generation', subtitle: 'Gemini creates image' },
|
|
{ number: 4, title: 'CDN Delivery', subtitle: 'Instant global URL' },
|
|
];
|
|
|
|
const controls = [
|
|
{ text: 'Style templates', detail: '— photorealistic, illustration, minimalist, and more' },
|
|
{ text: 'Reference images', detail: '— @aliases maintain visual consistency' },
|
|
{ text: 'Output specs', detail: '— aspect ratio, dimensions, format' },
|
|
];
|
|
|
|
export function HowItWorksSection() {
|
|
return (
|
|
<section className="py-20 px-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
|
|
Your prompt. Your control. Production-ready.
|
|
</h2>
|
|
<p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
|
We handle the complexity so you can focus on building.
|
|
</p>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="grid md:grid-cols-4 gap-4 mb-8">
|
|
{steps.map((step) => (
|
|
<div key={step.number} className="text-center p-4">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 shadow-[0_2px_10px_rgba(99,102,241,0.4)] flex items-center justify-center mx-auto mb-3 text-sm font-bold">
|
|
{step.number}
|
|
</div>
|
|
<p className="text-sm font-medium mb-1">{step.title}</p>
|
|
<p className="text-xs text-gray-500">{step.subtitle}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-xl p-6 mt-8">
|
|
<h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
<Settings2 className="w-5 h-5 text-indigo-400" />
|
|
What you control
|
|
</h3>
|
|
<div className="grid md:grid-cols-3 gap-4 text-sm">
|
|
{controls.map((control, i) => (
|
|
<div key={i} className="flex items-start gap-2">
|
|
<Check className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-300">
|
|
<strong className="text-white">{control.text}</strong> {control.detail}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-center text-gray-500 text-sm mt-6">
|
|
<Info className="w-4 h-4 inline mr-1" />
|
|
Enhanced prompts are visible in API response. You always see what was generated.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|