feat: set homepage
This commit is contained in:
parent
b5e25eacf1
commit
c66a82d736
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 126 KiB After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
|
|
@ -1,49 +0,0 @@
|
|||
'use client';
|
||||
|
||||
import {
|
||||
BackgroundBlobs,
|
||||
HeroGlow,
|
||||
HeroSection,
|
||||
heroStyles,
|
||||
ApiExampleSection,
|
||||
ProblemSolutionSection,
|
||||
PromptUrlsSection,
|
||||
HowItWorksSection,
|
||||
KeyFeaturesSection,
|
||||
IntegrationsSection,
|
||||
ShapeTheFutureSection,
|
||||
shapeFutureStyles,
|
||||
GeminiSection,
|
||||
FinalCtaSection,
|
||||
} from './_components';
|
||||
|
||||
const customStyles = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
|
||||
|
||||
${heroStyles}
|
||||
|
||||
${shapeFutureStyles}
|
||||
`;
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: customStyles }} />
|
||||
<div className="relative">
|
||||
<BackgroundBlobs />
|
||||
<HeroGlow />
|
||||
|
||||
<HeroSection />
|
||||
<ApiExampleSection />
|
||||
<ProblemSolutionSection />
|
||||
<PromptUrlsSection />
|
||||
<HowItWorksSection />
|
||||
<KeyFeaturesSection />
|
||||
<IntegrationsSection />
|
||||
<ShapeTheFutureSection />
|
||||
<GeminiSection />
|
||||
<FinalCtaSection />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,219 +1,49 @@
|
|||
'use client';
|
||||
|
||||
import { useState, FormEvent } from 'react';
|
||||
import {
|
||||
BackgroundBlobs,
|
||||
HeroGlow,
|
||||
HeroSection,
|
||||
heroStyles,
|
||||
ApiExampleSection,
|
||||
ProblemSolutionSection,
|
||||
PromptUrlsSection,
|
||||
HowItWorksSection,
|
||||
KeyFeaturesSection,
|
||||
IntegrationsSection,
|
||||
ShapeTheFutureSection,
|
||||
shapeFutureStyles,
|
||||
GeminiSection,
|
||||
FinalCtaSection,
|
||||
} from './_components';
|
||||
|
||||
const customStyles = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
|
||||
|
||||
${heroStyles}
|
||||
|
||||
${shapeFutureStyles}
|
||||
`;
|
||||
|
||||
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>
|
||||
<style dangerouslySetInnerHTML={{ __html: customStyles }} />
|
||||
<div className="relative">
|
||||
<BackgroundBlobs />
|
||||
<HeroGlow />
|
||||
|
||||
<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>
|
||||
<HeroSection />
|
||||
<ApiExampleSection />
|
||||
<ProblemSolutionSection />
|
||||
<PromptUrlsSection />
|
||||
<HowItWorksSection />
|
||||
<KeyFeaturesSection />
|
||||
<IntegrationsSection />
|
||||
<ShapeTheFutureSection />
|
||||
<GeminiSection />
|
||||
<FinalCtaSection />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue