51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Sparkles } from 'lucide-react';
|
|
|
|
export function PromptUrlsSection() {
|
|
return (
|
|
<section className="py-16 px-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30 rounded-2xl p-8">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center flex-shrink-0">
|
|
<Sparkles className="w-6 h-6 text-cyan-400" />
|
|
</div>
|
|
<div>
|
|
<span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">
|
|
Unique
|
|
</span>
|
|
<h2 className="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
|
|
<p className="text-gray-400">
|
|
Put a prompt in your{' '}
|
|
<code className="text-cyan-300 bg-black/30 px-1 rounded">img src</code> and get a
|
|
real image. No API calls. No JavaScript. Just HTML.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
|
<span className="text-gray-500"><!-- Write this --></span>
|
|
<br />
|
|
<span className="text-purple-400"><img</span>{' '}
|
|
<span className="text-cyan-300">src</span>=
|
|
<span className="text-green-400">
|
|
"https://cdn.banatie.app/gen?p=modern office interior"
|
|
</span>{' '}
|
|
<span className="text-purple-400">/></span>
|
|
<br />
|
|
<br />
|
|
<span className="text-gray-500">
|
|
<!-- Get this: production-ready image, cached, CDN-delivered -->
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-gray-500 text-sm mt-4">
|
|
Perfect for static sites, prototypes, and AI coding agents that generate HTML.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|