220 lines
10 KiB
TypeScript
220 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, FormEvent } from 'react';
|
|
|
|
export default function Home() {
|
|
const [email, setEmail] = useState('');
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
const [message, setMessage] = useState('');
|
|
|
|
const handleSubmit = async (e: FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus('loading');
|
|
|
|
// TODO: Replace with actual API endpoint
|
|
setTimeout(() => {
|
|
setStatus('success');
|
|
setMessage("You're on the list! Check your email for beta access details.");
|
|
setEmail('');
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="relative z-10 max-w-7xl mx-auto px-6 pt-20 pb-16 md:pt-32 md:pb-24">
|
|
<div className="text-center max-w-4xl mx-auto">
|
|
<div className="inline-block mb-4 px-4 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-300 text-sm font-medium">
|
|
Now in Closed Beta
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 flex flex-col items-center gap-4">
|
|
<span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent whitespace-nowrap">
|
|
Your AI Image Generation API
|
|
</span>
|
|
<span className="bg-gradient-to-r from-purple-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent animate-gradient whitespace-nowrap">
|
|
Ready in 60 seconds
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-gray-400 mb-8 leading-relaxed">
|
|
Developer-first API for AI-powered image generation.
|
|
<br className="hidden md:block" />
|
|
Transform text and reference images into production-ready visuals.
|
|
</p>
|
|
|
|
{/* Email Capture Form */}
|
|
<div id="waitlist" className="max-w-md mx-auto mb-12">
|
|
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="your@email.com"
|
|
required
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="flex-1 px-6 py-4 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent backdrop-blur-sm disabled:opacity-50"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-500/25"
|
|
>
|
|
{status === 'loading'
|
|
? 'Joining...'
|
|
: status === 'success'
|
|
? 'Joined!'
|
|
: 'Join Beta'}
|
|
</button>
|
|
</form>
|
|
{status === 'success' && (
|
|
<p className="mt-3 text-sm text-green-400 animate-fade-in">{message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Feature Pills */}
|
|
<div className="flex flex-wrap justify-center gap-3 text-sm text-gray-400">
|
|
<span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
|
|
⚡ RESTful API
|
|
</span>
|
|
<span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
|
|
🎨 Reference Images
|
|
</span>
|
|
<span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
|
|
🧠 Auto Prompt Enhancement
|
|
</span>
|
|
<span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
|
|
🔐 Enterprise Security
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Code Example Section */}
|
|
<section className="relative z-10 max-w-7xl mx-auto px-6 py-16">
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="flex gap-1.5">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/50"></div>
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
|
|
<div className="w-3 h-3 rounded-full bg-green-500/50"></div>
|
|
</div>
|
|
<span className="text-sm text-gray-500 ml-2">Quick Start</span>
|
|
</div>
|
|
<pre className="text-sm md:text-base text-gray-300 overflow-x-auto">
|
|
<code>{`curl -X POST https://api.banatie.com/generate \\
|
|
-H "X-API-Key: YOUR_KEY" \\
|
|
-F "prompt=futuristic city at sunset" \\
|
|
-F "filename=city"
|
|
|
|
# ✅ Response in ~3 seconds
|
|
{
|
|
"success": true,
|
|
"url": "https://cdn.banatie.com/city.png"
|
|
}`}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Grid */}
|
|
<section className="relative z-10 max-w-7xl mx-auto px-6 py-16 md:py-24">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
|
|
Built for Developers, Powered by AI
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{/* Feature 1 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
🚀
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Instant Integration</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Clean REST API that works with any stack. From hobbyist to enterprise, start
|
|
generating images in minutes.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 2 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
🎯
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Reference-Guided Generation</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Upload up to 3 reference images alongside your prompt. Perfect for brand consistency
|
|
and style matching.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 3 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
✨
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Smart Prompt Enhancement</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
AI-powered prompt optimization with language detection. Get better results
|
|
automatically.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 4 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
🔐
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Enterprise-Ready Security</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
API key management, rate limiting, multi-tenant architecture. Built for production
|
|
from day one.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 5 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
⚡
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Dual AI Models</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Powered by Google Gemini 2.5 Flash and Imagen 4.0. Automatic fallback ensures
|
|
reliability.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature 6 */}
|
|
<div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
|
|
<div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
|
|
📦
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-3">Organized Cloud Storage</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
Automatic file organization by org/project/category. CDN-ready URLs for instant
|
|
delivery.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative z-10 max-w-4xl mx-auto px-6 py-16 md:py-24">
|
|
<div className="text-center p-12 rounded-3xl bg-gradient-to-br from-purple-600/20 via-cyan-600/20 to-purple-600/20 border border-purple-500/30 backdrop-blur-sm">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Join the Beta Program</h2>
|
|
<p className="text-xl text-gray-300 mb-8">
|
|
Get early access, shape the product, and lock in founder pricing.
|
|
</p>
|
|
<a
|
|
href="#waitlist"
|
|
className="inline-block px-8 py-4 rounded-xl bg-white text-purple-950 font-semibold hover:bg-gray-100 transition-colors shadow-lg"
|
|
>
|
|
Request Beta Access
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|