refactor: split by components
This commit is contained in:
parent
988c7946b9
commit
c8d6214322
|
|
@ -1,55 +0,0 @@
|
||||||
interface AnimatedGradientBorderProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const gradientStyle: React.CSSProperties = {
|
|
||||||
background: `conic-gradient(
|
|
||||||
from 0deg,
|
|
||||||
rgba(99, 102, 241, 0.3),
|
|
||||||
rgba(139, 92, 246, 0.8),
|
|
||||||
rgba(236, 72, 153, 0.6),
|
|
||||||
rgba(34, 211, 238, 0.8),
|
|
||||||
rgba(99, 102, 241, 0.3)
|
|
||||||
)`,
|
|
||||||
filter: 'blur(40px)',
|
|
||||||
};
|
|
||||||
|
|
||||||
const glowStyle: React.CSSProperties = {
|
|
||||||
background: `conic-gradient(
|
|
||||||
from 0deg,
|
|
||||||
rgba(99, 102, 241, 0.1),
|
|
||||||
rgba(139, 92, 246, 0.4),
|
|
||||||
rgba(236, 72, 153, 0.3),
|
|
||||||
rgba(34, 211, 238, 0.4),
|
|
||||||
rgba(99, 102, 241, 0.1)
|
|
||||||
)`,
|
|
||||||
filter: 'blur(15px)',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AnimatedGradientBorder = ({
|
|
||||||
children,
|
|
||||||
className = '',
|
|
||||||
}: AnimatedGradientBorderProps) => {
|
|
||||||
return (
|
|
||||||
<div className={`relative p-10 rounded-xl isolate ${className}`}>
|
|
||||||
<div
|
|
||||||
className="absolute -inset-16 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
maskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
|
|
||||||
WebkitMaskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="absolute inset-[-52%] opacity-60 -z-10 animate-[gradient-rotate_4s_linear_infinite]"
|
|
||||||
style={glowStyle}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="absolute inset-[-50%] z-0 animate-[gradient-rotate_4s_linear_infinite]"
|
|
||||||
style={gradientStyle}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="relative z-10 bg-[#0a0612] rounded-[10px]">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Terminal } from 'lucide-react';
|
||||||
|
|
||||||
|
export function ApiExampleSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-16 px-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<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-2xl p-8">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
|
||||||
|
<Terminal className="w-5 h-5 text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
|
||||||
|
<p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
|
||||||
|
<div className="text-gray-500 mb-2"># Generate an image</div>
|
||||||
|
<span className="text-cyan-400">curl</span>{' '}
|
||||||
|
<span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-gray-300 ml-4">-H</span>{' '}
|
||||||
|
<span className="text-green-400">"Authorization: Bearer $API_KEY"</span>{' '}
|
||||||
|
<span className="text-gray-300">\</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-gray-300 ml-4">-d</span>{' '}
|
||||||
|
<span className="text-green-400">
|
||||||
|
'{`{"prompt": "modern office interior, natural light"}`}'
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||||||
|
<div className="text-gray-500 mb-2"># Response</div>
|
||||||
|
<span className="text-gray-300">{'{'}</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-purple-400 ml-4">"url"</span>
|
||||||
|
<span className="text-gray-300">:</span>{' '}
|
||||||
|
<span className="text-green-400">
|
||||||
|
"https://cdn.banatie.app/img/a7x2k9.png"
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-300">,</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-purple-400 ml-4">"enhanced_prompt"</span>
|
||||||
|
<span className="text-gray-300">:</span>{' '}
|
||||||
|
<span className="text-green-400">"A photorealistic modern office..."</span>
|
||||||
|
<span className="text-gray-300">,</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-purple-400 ml-4">"generation_time"</span>
|
||||||
|
<span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-gray-300">{'}'}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-500 text-sm mt-4 text-center">
|
||||||
|
CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
const blobs = [
|
||||||
|
{
|
||||||
|
className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]',
|
||||||
|
gradient: 'rgba(139, 92, 246, 0.3)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
className: 'w-[500px] h-[500px] top-[800px] left-[-150px]',
|
||||||
|
gradient: 'rgba(99, 102, 241, 0.25)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]',
|
||||||
|
gradient: 'rgba(236, 72, 153, 0.2)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]',
|
||||||
|
gradient: 'rgba(34, 211, 238, 0.15)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]',
|
||||||
|
gradient: 'rgba(139, 92, 246, 0.25)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]',
|
||||||
|
gradient: 'rgba(99, 102, 241, 0.2)',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function BackgroundBlobs() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{blobs.map((blob, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
|
||||||
|
style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
|
||||||
|
export function FinalCtaSection() {
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
setTimeout(() => {
|
||||||
|
const input = document.querySelector('input[type="email"]') as HTMLInputElement;
|
||||||
|
input?.focus();
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="join"
|
||||||
|
className="relative py-24 px-6 overflow-hidden"
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-50 pointer-events-none"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-3xl mx-auto text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
|
||||||
|
Ready to build?
|
||||||
|
</h2>
|
||||||
|
<p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
|
||||||
|
Join developers waiting for early access. We'll notify you when your spot is ready.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={scrollToTop}
|
||||||
|
className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
|
||||||
|
>
|
||||||
|
Get Early Access
|
||||||
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="text-cyan-200/50 text-sm mt-8">
|
||||||
|
No credit card required • Free to start • Cancel anytime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Zap, Check, Crown, Type, Brain, Target, Image, Award } from 'lucide-react';
|
||||||
|
|
||||||
|
const flashFeatures = [
|
||||||
|
{ text: 'Sub-3 second', detail: 'generation time' },
|
||||||
|
{ text: 'Multi-turn editing', detail: '— refine through conversation' },
|
||||||
|
{ text: 'Up to 3 reference images', detail: 'for consistency' },
|
||||||
|
{ text: '1024px', detail: 'resolution output' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const proFeatures = [
|
||||||
|
{ text: 'Up to 4K', detail: 'resolution output' },
|
||||||
|
{ text: '14 reference images', detail: 'for brand consistency' },
|
||||||
|
{ text: 'Studio controls', detail: '— lighting, focus, color grading' },
|
||||||
|
{ text: 'Thinking mode', detail: '— advanced reasoning for complex prompts' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const capabilities = [
|
||||||
|
{
|
||||||
|
icon: Type,
|
||||||
|
title: 'Perfect Text Rendering',
|
||||||
|
description:
|
||||||
|
'Legible text in images — logos, diagrams, posters. What other models still struggle with.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Brain,
|
||||||
|
title: 'Native Multimodal',
|
||||||
|
description:
|
||||||
|
'Understands text AND images in one model. Not a text model + image model bolted together.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Target,
|
||||||
|
title: 'Precise Prompt Following',
|
||||||
|
description:
|
||||||
|
'What you ask is what you get. No artistic "interpretation" that ignores your instructions.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Image,
|
||||||
|
title: 'Professional Realism',
|
||||||
|
description:
|
||||||
|
'Photorealistic output that replaces stock photos. Not fantasy art — real, usable images.',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function GeminiSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 px-6">
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
<div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
|
||||||
|
<div className="text-center mb-10">
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-4">
|
||||||
|
<Zap className="w-8 h-8 text-yellow-400" />
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||||
|
We chose Gemini because it's the only model family that combines native
|
||||||
|
multimodal understanding with production-grade image generation. Two models, optimized
|
||||||
|
for different needs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 mb-10">
|
||||||
|
<div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
||||||
|
<Zap className="w-5 h-5 text-cyan-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
|
||||||
|
<p className="text-cyan-400 text-sm">Nano Banana</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-sm mb-4">
|
||||||
|
Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
|
||||||
|
generation.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
{flashFeatures.map((feature, i) => (
|
||||||
|
<li key={i} className="flex items-start gap-2">
|
||||||
|
<Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
<strong className="text-white">{feature.text}</strong> {feature.detail}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
|
||||||
|
<Crown className="w-5 h-5 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
|
||||||
|
<p className="text-yellow-400 text-sm">Nano Banana Pro</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-sm mb-4">
|
||||||
|
Maximum quality and creative control. For production assets and professional
|
||||||
|
workflows.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
{proFeatures.map((feature, i) => (
|
||||||
|
<li key={i} className="flex items-start gap-2">
|
||||||
|
<Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<span className="text-gray-300">
|
||||||
|
<strong className="text-white">{feature.text}</strong> {feature.detail}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-yellow-500/20 pt-8">
|
||||||
|
<h4 className="text-center font-semibold mb-6 text-gray-300">
|
||||||
|
Why Gemini outperforms competitors
|
||||||
|
</h4>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{capabilities.map((cap, i) => (
|
||||||
|
<div key={i} className="text-center p-4">
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
|
||||||
|
<cap.icon className="w-6 h-6 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<h5 className="font-medium text-sm mb-1">{cap.title}</h5>
|
||||||
|
<p className="text-gray-500 text-xs">{cap.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-gray-500 text-sm mt-8">
|
||||||
|
<Award className="w-4 h-4 inline mr-1 text-yellow-400" />
|
||||||
|
Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
|
||||||
|
(August 2025)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
export function HeroGlow() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] pointer-events-none"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
'radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
|
||||||
|
import GlowEffect from './GlowEffect';
|
||||||
|
|
||||||
|
export const styles = `
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
animation: gradient-shift 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-shift {
|
||||||
|
0% { background-position: 100% 50%; }
|
||||||
|
50% { background-position: 0% 50%; }
|
||||||
|
100% { background-position: 100% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.beta-dot {
|
||||||
|
animation: beta-dot-delay 20s linear forwards, beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beta-dot-delay {
|
||||||
|
0%, 99% { background-color: rgb(107, 114, 128); }
|
||||||
|
100% { background-color: rgb(74, 222, 128); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beta-dot-pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const badges = [
|
||||||
|
{ icon: Zap, text: 'API-First', variant: 'default' },
|
||||||
|
{ icon: Globe, text: 'Built-in CDN', variant: 'default' },
|
||||||
|
{ icon: FlaskConical, text: 'Web Lab', variant: 'default' },
|
||||||
|
{ icon: AtSign, text: 'Style References', variant: 'default' },
|
||||||
|
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function HeroSection() {
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('Email submitted:', email);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative pt-40 pb-20 px-6">
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-8">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
||||||
|
In Active Development
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
|
||||||
|
AI Image Generation
|
||||||
|
<br />
|
||||||
|
<span className="gradient-text">Inside Your Workflow</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
|
||||||
|
Generate images via API, SDK, CLI, Lab, or live URLs.
|
||||||
|
<br />
|
||||||
|
Production-ready CDN delivery in seconds.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<GlowEffect>
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
|
||||||
|
style={{ background: 'rgba(10, 6, 18, 0.95)' }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="your@email.com"
|
||||||
|
className="flex-1 px-4 py-3 bg-transparent border-none rounded-md text-white outline-none placeholder:text-white/40 focus:bg-white/[0.03]"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Get Early Access
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</GlowEffect>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
|
||||||
|
|
||||||
|
<div className="flex flex-nowrap gap-5 justify-center">
|
||||||
|
{badges.map((badge, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className={`px-6 py-2.5 rounded-full text-sm flex items-center gap-2.5 whitespace-nowrap ${
|
||||||
|
badge.variant === 'cyan'
|
||||||
|
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
||||||
|
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<badge.icon
|
||||||
|
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
||||||
|
/>
|
||||||
|
{badge.text}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Server, Code, Cpu, Terminal, FlaskConical, Link2 } from 'lucide-react';
|
||||||
|
|
||||||
|
const tools = [
|
||||||
|
{ icon: Server, text: 'REST API', color: 'text-cyan-400' },
|
||||||
|
{ icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' },
|
||||||
|
{ icon: Cpu, text: 'MCP Server', color: 'text-purple-400' },
|
||||||
|
{ icon: Terminal, text: 'CLI', color: 'text-green-400' },
|
||||||
|
{ icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' },
|
||||||
|
{ icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function IntegrationsSection() {
|
||||||
|
return (
|
||||||
|
<section className="py-20 px-6">
|
||||||
|
<div className="max-w-6xl mx-auto text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
|
||||||
|
<p className="text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||||
|
Use what fits your workflow. All methods, same capabilities.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
||||||
|
{tools.map((tool, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
|
||||||
|
tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<tool.icon className={`w-5 h-5 ${tool.color}`} />
|
||||||
|
<span>{tool.text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
<strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
|
||||||
|
API. Generate images, build flows, browse your gallery, and explore all capabilities
|
||||||
|
with ready-to-use code snippets.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-500 text-sm mt-6">
|
||||||
|
Perfect for Claude Code, Cursor, and any AI-powered workflow.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { AtSign, GitBranch, Palette, Globe, SlidersHorizontal, Link } from 'lucide-react';
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: AtSign,
|
||||||
|
iconColor: 'text-pink-400',
|
||||||
|
title: 'Reference Images',
|
||||||
|
description:
|
||||||
|
'Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.',
|
||||||
|
isUnique: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: GitBranch,
|
||||||
|
iconColor: 'text-purple-400',
|
||||||
|
title: 'Flows',
|
||||||
|
description:
|
||||||
|
'Chain generations, iterate on results, build image sequences with @last and @first references.',
|
||||||
|
isUnique: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Palette,
|
||||||
|
iconColor: 'text-yellow-400',
|
||||||
|
title: '7 Style Templates',
|
||||||
|
description:
|
||||||
|
'Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.',
|
||||||
|
isUnique: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
iconColor: 'text-green-400',
|
||||||
|
title: 'Instant CDN Delivery',
|
||||||
|
description:
|
||||||
|
'Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.',
|
||||||
|
isUnique: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: SlidersHorizontal,
|
||||||
|
iconColor: 'text-blue-400',
|
||||||
|
title: 'Output Control',
|
||||||
|
description:
|
||||||
|
'Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.',
|
||||||
|
isUnique: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Link,
|
||||||
|
iconColor: 'text-cyan-400',
|
||||||
|
title: 'Prompt URLs',
|
||||||
|
description:
|
||||||
|
'Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.',
|
||||||
|
isUnique: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function KeyFeaturesSection() {
|
||||||
|
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">
|
||||||
|
Built for real development workflows
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||||
|
Everything you need to integrate AI images into your projects.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{features.map((feature, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`rounded-xl p-6 ${
|
||||||
|
feature.isUnique
|
||||||
|
? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
|
||||||
|
: 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<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 mb-4">
|
||||||
|
<feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<h3 className="font-semibold text-lg">{feature.title}</h3>
|
||||||
|
{feature.isUnique && (
|
||||||
|
<span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
|
||||||
|
Unique
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-400 text-sm">{feature.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { RefreshCw, ArrowLeftRight, Package, Layers, Check } from 'lucide-react';
|
||||||
|
|
||||||
|
const problems = [
|
||||||
|
{
|
||||||
|
icon: RefreshCw,
|
||||||
|
title: 'Placeholder hell',
|
||||||
|
problem: '"I\'ll add images later" never happens',
|
||||||
|
solution: 'Generate real images as you build',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ArrowLeftRight,
|
||||||
|
title: 'Context switching',
|
||||||
|
problem: 'Leave IDE, generate elsewhere, come back',
|
||||||
|
solution: 'Stay in your workflow. API, SDK, MCP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Package,
|
||||||
|
title: 'Asset management',
|
||||||
|
problem: 'Download, optimize, upload, get URL',
|
||||||
|
solution: 'Production CDN URLs instantly',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Layers,
|
||||||
|
title: 'Style drift',
|
||||||
|
problem: 'Every image looks different',
|
||||||
|
solution: 'Reference images keep style consistent',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function ProblemSolutionSection() {
|
||||||
|
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">
|
||||||
|
Why developers choose Banatie
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||||
|
Stop fighting your image workflow. Start building.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{problems.map((item, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
|
||||||
|
>
|
||||||
|
<div className="flex-1 flex flex-col">
|
||||||
|
<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 mb-4">
|
||||||
|
<item.icon className="w-6 h-6 text-red-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-4">{item.problem}</p>
|
||||||
|
<div className="mt-auto flex items-start gap-1 text-sm">
|
||||||
|
<Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
|
||||||
|
<span className="text-white">{item.solution}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { MessageCircle, Vote, Users } from 'lucide-react';
|
||||||
|
|
||||||
|
const ZIGZAG_POINTS = [
|
||||||
|
40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
|
||||||
|
10, 0, 15, 0, 20, 0, 40, 10, 0,
|
||||||
|
];
|
||||||
|
|
||||||
|
function generateZigzagClipPath(yValues: number[]): string {
|
||||||
|
const lastIndex = yValues.length - 1;
|
||||||
|
const getX = (i: number) => `${(i / lastIndex) * 100}%`;
|
||||||
|
|
||||||
|
const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
|
||||||
|
const bottomEdge = [...yValues]
|
||||||
|
.map((y, i) => [getX(i), y] as const)
|
||||||
|
.reverse()
|
||||||
|
.map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
|
||||||
|
.join(', ');
|
||||||
|
|
||||||
|
return `polygon(${topEdge}, ${bottomEdge})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const styles = `
|
||||||
|
.shape-future {
|
||||||
|
clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
|
||||||
|
}
|
||||||
|
|
||||||
|
.metal-texture {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metal-texture::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||||
|
opacity: 0.5;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shape-future-title {
|
||||||
|
font-family: 'Caveat', cursive;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{ icon: MessageCircle, text: 'Direct feedback channel' },
|
||||||
|
{ icon: Vote, text: 'Feature voting' },
|
||||||
|
{ icon: Users, text: 'Early adopter community' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function ShapeTheFutureSection() {
|
||||||
|
return (
|
||||||
|
<div className="relative my-[60px]">
|
||||||
|
<section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
|
||||||
|
<section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
|
||||||
|
<div className="absolute h-[200px] w-full blur-sm">
|
||||||
|
<section className="shape-future bg-black absolute w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
|
||||||
|
</div>
|
||||||
|
<div className="absolute h-[200px] bottom-[-50px] w-full blur-sm">
|
||||||
|
<section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
|
||||||
|
</div>
|
||||||
|
<section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
|
||||||
|
<div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
|
||||||
|
<h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
|
||||||
|
Shape the future of Banatie
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
|
||||||
|
We're building this for developers like you. Early adopters get direct influence on
|
||||||
|
our roadmap — suggest features, vote on priorities, and help us build exactly what you
|
||||||
|
need.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
|
||||||
|
{features.map((feature, i) => (
|
||||||
|
<span key={i} className="flex items-center gap-2">
|
||||||
|
<feature.icon className="w-4 h-4" />
|
||||||
|
{feature.text}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export { BackgroundBlobs } from './BackgroundBlobs';
|
||||||
|
export { HeroGlow } from './HeroGlow';
|
||||||
|
export { HeroSection, styles as heroStyles } from './HeroSection';
|
||||||
|
export { ApiExampleSection } from './ApiExampleSection';
|
||||||
|
export { ProblemSolutionSection } from './ProblemSolutionSection';
|
||||||
|
export { PromptUrlsSection } from './PromptUrlsSection';
|
||||||
|
export { HowItWorksSection } from './HowItWorksSection';
|
||||||
|
export { KeyFeaturesSection } from './KeyFeaturesSection';
|
||||||
|
export { IntegrationsSection } from './IntegrationsSection';
|
||||||
|
export { ShapeTheFutureSection, styles as shapeFutureStyles } from './ShapeTheFutureSection';
|
||||||
|
export { GeminiSection } from './GeminiSection';
|
||||||
|
export { FinalCtaSection } from './FinalCtaSection';
|
||||||
|
|
@ -1,939 +1,30 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { AnimatedGradientBorder } from './_components/AnimatedGradientBorder';
|
|
||||||
import {
|
import {
|
||||||
Zap,
|
BackgroundBlobs,
|
||||||
Globe,
|
HeroGlow,
|
||||||
FlaskConical,
|
HeroSection,
|
||||||
AtSign,
|
heroStyles,
|
||||||
Link,
|
ApiExampleSection,
|
||||||
Terminal,
|
ProblemSolutionSection,
|
||||||
RefreshCw,
|
PromptUrlsSection,
|
||||||
ArrowLeftRight,
|
HowItWorksSection,
|
||||||
Package,
|
KeyFeaturesSection,
|
||||||
Layers,
|
IntegrationsSection,
|
||||||
Check,
|
ShapeTheFutureSection,
|
||||||
Sparkles,
|
shapeFutureStyles,
|
||||||
Settings2,
|
GeminiSection,
|
||||||
Info,
|
FinalCtaSection,
|
||||||
GitBranch,
|
} from './_components';
|
||||||
Palette,
|
|
||||||
SlidersHorizontal,
|
|
||||||
Link2,
|
|
||||||
Server,
|
|
||||||
Code,
|
|
||||||
Cpu,
|
|
||||||
MessageCircle,
|
|
||||||
Vote,
|
|
||||||
Users,
|
|
||||||
Crown,
|
|
||||||
Type,
|
|
||||||
Brain,
|
|
||||||
Target,
|
|
||||||
Image,
|
|
||||||
Award,
|
|
||||||
ArrowRight,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import GlowEffect from './_components/GlowEffect';
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// UTILS
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
const ZIGZAG_POINTS = [
|
|
||||||
40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
|
|
||||||
10, 0, 15, 0, 20, 0, 40, 10, 0,
|
|
||||||
];
|
|
||||||
|
|
||||||
function generateZigzagClipPath(yValues: number[]): string {
|
|
||||||
const lastIndex = yValues.length - 1;
|
|
||||||
const getX = (i: number) => `${(i / lastIndex) * 100}%`;
|
|
||||||
|
|
||||||
const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
|
|
||||||
const bottomEdge = [...yValues]
|
|
||||||
.map((y, i) => [getX(i), y] as const)
|
|
||||||
.reverse()
|
|
||||||
.map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
|
|
||||||
.join(', ');
|
|
||||||
|
|
||||||
return `polygon(${topEdge}, ${bottomEdge})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// STYLES (CSS-in-JS for custom styles not available in Tailwind)
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
const customStyles = `
|
const customStyles = `
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
|
||||||
|
|
||||||
.gradient-text {
|
${heroStyles}
|
||||||
background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
animation: gradient-shift 6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient-shift {
|
${shapeFutureStyles}
|
||||||
0% { background-position: 100% 50%; }
|
|
||||||
50% { background-position: 0% 50%; }
|
|
||||||
100% { background-position: 100% 50%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.beta-dot {
|
|
||||||
animation: beta-dot-delay 20s linear forwards, beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes beta-dot-delay {
|
|
||||||
0%, 99% { background-color: rgb(107, 114, 128); }
|
|
||||||
100% { background-color: rgb(74, 222, 128); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes beta-dot-pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.5; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape-future {
|
|
||||||
clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
|
|
||||||
}
|
|
||||||
|
|
||||||
.metal-texture {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metal-texture::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
||||||
opacity: 0.3;
|
|
||||||
mix-blend-mode: overlay;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape-future-title {
|
|
||||||
font-family: 'Caveat', cursive;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// BACKGROUND COMPONENTS
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function BackgroundBlobs() {
|
|
||||||
const blobs = [
|
|
||||||
{
|
|
||||||
className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]',
|
|
||||||
gradient: 'rgba(139, 92, 246, 0.3)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
className: 'w-[500px] h-[500px] top-[800px] left-[-150px]',
|
|
||||||
gradient: 'rgba(99, 102, 241, 0.25)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]',
|
|
||||||
gradient: 'rgba(236, 72, 153, 0.2)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]',
|
|
||||||
gradient: 'rgba(34, 211, 238, 0.15)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]',
|
|
||||||
gradient: 'rgba(139, 92, 246, 0.25)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]',
|
|
||||||
gradient: 'rgba(99, 102, 241, 0.2)',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{blobs.map((blob, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
|
|
||||||
style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function HeroGlow() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] pointer-events-none"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
'radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// HERO SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function HeroSection() {
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
// TODO: Handle form submission
|
|
||||||
console.log('Email submitted:', email);
|
|
||||||
};
|
|
||||||
|
|
||||||
const badges = [
|
|
||||||
{ icon: Zap, text: 'API-First', variant: 'default' },
|
|
||||||
{ icon: Globe, text: 'Built-in CDN', variant: 'default' },
|
|
||||||
{ icon: FlaskConical, text: 'Web Lab', variant: 'default' },
|
|
||||||
{ icon: AtSign, text: 'Style References', variant: 'default' },
|
|
||||||
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="relative pt-40 pb-20 px-6">
|
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
|
||||||
{/* Status Badge */}
|
|
||||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-8">
|
|
||||||
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
|
||||||
In Active Development
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Headline */}
|
|
||||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
|
|
||||||
AI Image Generation
|
|
||||||
<br />
|
|
||||||
<span className="gradient-text">Inside Your Workflow</span>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* Subheadline */}
|
|
||||||
<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
|
|
||||||
Generate images via API, SDK, CLI, Lab, or live URLs.
|
|
||||||
<br />
|
|
||||||
Production-ready CDN delivery in seconds.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Email Form */}
|
|
||||||
<GlowEffect>
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
|
|
||||||
style={{ background: 'rgba(10, 6, 18, 0.95)' }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
placeholder="your@email.com"
|
|
||||||
className="flex-1 px-4 py-3 bg-transparent border-none rounded-md text-white outline-none placeholder:text-white/40 focus:bg-white/[0.03]"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
|
|
||||||
>
|
|
||||||
Get Early Access
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</GlowEffect>
|
|
||||||
|
|
||||||
<p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
|
|
||||||
|
|
||||||
{/* Badges */}
|
|
||||||
<div className="flex flex-nowrap gap-5 justify-center">
|
|
||||||
{badges.map((badge, i) => (
|
|
||||||
<span
|
|
||||||
key={i}
|
|
||||||
className={`px-6 py-2.5 rounded-full text-sm flex items-center gap-2.5 whitespace-nowrap ${
|
|
||||||
badge.variant === 'cyan'
|
|
||||||
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
|
||||||
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<badge.icon
|
|
||||||
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
|
||||||
/>
|
|
||||||
{badge.text}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// API EXAMPLE SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function ApiExampleSection() {
|
|
||||||
return (
|
|
||||||
<section className="py-16 px-6">
|
|
||||||
<div className="max-w-4xl mx-auto">
|
|
||||||
<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-2xl p-8">
|
|
||||||
<div className="flex items-center gap-3 mb-6">
|
|
||||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
|
|
||||||
<Terminal className="w-5 h-5 text-indigo-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
|
|
||||||
<p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
|
|
||||||
<div className="text-gray-500 mb-2"># Generate an image</div>
|
|
||||||
<span className="text-cyan-400">curl</span>{' '}
|
|
||||||
<span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-gray-300 ml-4">-H</span>{' '}
|
|
||||||
<span className="text-green-400">"Authorization: Bearer $API_KEY"</span>{' '}
|
|
||||||
<span className="text-gray-300">\</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-gray-300 ml-4">-d</span>{' '}
|
|
||||||
<span className="text-green-400">
|
|
||||||
'{`{"prompt": "modern office interior, natural light"}`}'
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
|
||||||
<div className="text-gray-500 mb-2"># Response</div>
|
|
||||||
<span className="text-gray-300">{'{'}</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-purple-400 ml-4">"url"</span>
|
|
||||||
<span className="text-gray-300">:</span>{' '}
|
|
||||||
<span className="text-green-400">
|
|
||||||
"https://cdn.banatie.app/img/a7x2k9.png"
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-300">,</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-purple-400 ml-4">"enhanced_prompt"</span>
|
|
||||||
<span className="text-gray-300">:</span>{' '}
|
|
||||||
<span className="text-green-400">"A photorealistic modern office..."</span>
|
|
||||||
<span className="text-gray-300">,</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-purple-400 ml-4">"generation_time"</span>
|
|
||||||
<span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
|
|
||||||
<br />
|
|
||||||
<span className="text-gray-300">{'}'}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-gray-500 text-sm mt-4 text-center">
|
|
||||||
CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// PROBLEM/SOLUTION SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function ProblemSolutionSection() {
|
|
||||||
const problems = [
|
|
||||||
{
|
|
||||||
icon: RefreshCw,
|
|
||||||
title: 'Placeholder hell',
|
|
||||||
problem: '"I\'ll add images later" never happens',
|
|
||||||
solution: 'Generate real images as you build',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: ArrowLeftRight,
|
|
||||||
title: 'Context switching',
|
|
||||||
problem: 'Leave IDE, generate elsewhere, come back',
|
|
||||||
solution: 'Stay in your workflow. API, SDK, MCP',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Package,
|
|
||||||
title: 'Asset management',
|
|
||||||
problem: 'Download, optimize, upload, get URL',
|
|
||||||
solution: 'Production CDN URLs instantly',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Layers,
|
|
||||||
title: 'Style drift',
|
|
||||||
problem: 'Every image looks different',
|
|
||||||
solution: 'Reference images keep style consistent',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
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">
|
|
||||||
Why developers choose Banatie
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
|
||||||
Stop fighting your image workflow. Start building.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
{problems.map((item, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
|
|
||||||
>
|
|
||||||
<div className="flex-1 flex flex-col">
|
|
||||||
<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 mb-4">
|
|
||||||
<item.icon className="w-6 h-6 text-red-400" />
|
|
||||||
</div>
|
|
||||||
<h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
|
|
||||||
<p className="text-gray-500 text-sm mb-4">{item.problem}</p>
|
|
||||||
<div className="mt-auto flex items-start gap-1 text-sm">
|
|
||||||
<Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
|
|
||||||
<span className="text-white">{item.solution}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// PROMPT URLs SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// HOW IT WORKS SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function HowItWorksSection() {
|
|
||||||
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' },
|
|
||||||
];
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// KEY FEATURES SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function KeyFeaturesSection() {
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
icon: AtSign,
|
|
||||||
iconColor: 'text-pink-400',
|
|
||||||
title: 'Reference Images',
|
|
||||||
description:
|
|
||||||
'Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.',
|
|
||||||
isUnique: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: GitBranch,
|
|
||||||
iconColor: 'text-purple-400',
|
|
||||||
title: 'Flows',
|
|
||||||
description:
|
|
||||||
'Chain generations, iterate on results, build image sequences with @last and @first references.',
|
|
||||||
isUnique: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Palette,
|
|
||||||
iconColor: 'text-yellow-400',
|
|
||||||
title: '7 Style Templates',
|
|
||||||
description:
|
|
||||||
'Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.',
|
|
||||||
isUnique: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Globe,
|
|
||||||
iconColor: 'text-green-400',
|
|
||||||
title: 'Instant CDN Delivery',
|
|
||||||
description:
|
|
||||||
'Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.',
|
|
||||||
isUnique: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: SlidersHorizontal,
|
|
||||||
iconColor: 'text-blue-400',
|
|
||||||
title: 'Output Control',
|
|
||||||
description:
|
|
||||||
'Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.',
|
|
||||||
isUnique: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Link,
|
|
||||||
iconColor: 'text-cyan-400',
|
|
||||||
title: 'Prompt URLs',
|
|
||||||
description:
|
|
||||||
'Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.',
|
|
||||||
isUnique: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
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">
|
|
||||||
Built for real development workflows
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
|
||||||
Everything you need to integrate AI images into your projects.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{features.map((feature, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={`rounded-xl p-6 ${
|
|
||||||
feature.isUnique
|
|
||||||
? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
|
|
||||||
: 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<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 mb-4">
|
|
||||||
<feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<h3 className="font-semibold text-lg">{feature.title}</h3>
|
|
||||||
{feature.isUnique && (
|
|
||||||
<span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
|
|
||||||
Unique
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-400 text-sm">{feature.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// INTEGRATIONS SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function IntegrationsSection() {
|
|
||||||
const tools = [
|
|
||||||
{ icon: Server, text: 'REST API', color: 'text-cyan-400' },
|
|
||||||
{ icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' },
|
|
||||||
{ icon: Cpu, text: 'MCP Server', color: 'text-purple-400' },
|
|
||||||
{ icon: Terminal, text: 'CLI', color: 'text-green-400' },
|
|
||||||
{ icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' },
|
|
||||||
{ icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-20 px-6">
|
|
||||||
<div className="max-w-6xl mx-auto text-center">
|
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
|
|
||||||
<p className="text-gray-400 mb-12 max-w-2xl mx-auto">
|
|
||||||
Use what fits your workflow. All methods, same capabilities.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
|
||||||
{tools.map((tool, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
|
|
||||||
tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<tool.icon className={`w-5 h-5 ${tool.color}`} />
|
|
||||||
<span>{tool.text}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
<strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
|
|
||||||
API. Generate images, build flows, browse your gallery, and explore all capabilities
|
|
||||||
with ready-to-use code snippets.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-gray-500 text-sm mt-6">
|
|
||||||
Perfect for Claude Code, Cursor, and any AI-powered workflow.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// SHAPE THE FUTURE SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function ShapeTheFutureSection() {
|
|
||||||
const features = [
|
|
||||||
{ icon: MessageCircle, text: 'Direct feedback channel' },
|
|
||||||
{ icon: Vote, text: 'Feature voting' },
|
|
||||||
{ icon: Users, text: 'Early adopter community' },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative my-[60px]">
|
|
||||||
<section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
|
|
||||||
<section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
|
|
||||||
<div className='absolute h-[200px] w-full blur-sm'>
|
|
||||||
<section className="shape-future bg-black absolute w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
|
|
||||||
</div>
|
|
||||||
<div className='absolute h-[200px] bottom-[-50px] w-full blur-sm'>
|
|
||||||
<section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
|
|
||||||
</div>
|
|
||||||
<section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
|
|
||||||
<div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
|
|
||||||
<h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
|
|
||||||
Shape the future of Banatie
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
|
|
||||||
We're building this for developers like you. Early adopters get direct influence on
|
|
||||||
our roadmap — suggest features, vote on priorities, and help us build exactly what you
|
|
||||||
need.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
|
|
||||||
{features.map((feature, i) => (
|
|
||||||
<span key={i} className="flex items-center gap-2">
|
|
||||||
<feature.icon className="w-4 h-4" />
|
|
||||||
{feature.text}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// GEMINI SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function GeminiSection() {
|
|
||||||
const flashFeatures = [
|
|
||||||
{ text: 'Sub-3 second', detail: 'generation time' },
|
|
||||||
{ text: 'Multi-turn editing', detail: '— refine through conversation' },
|
|
||||||
{ text: 'Up to 3 reference images', detail: 'for consistency' },
|
|
||||||
{ text: '1024px', detail: 'resolution output' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const proFeatures = [
|
|
||||||
{ text: 'Up to 4K', detail: 'resolution output' },
|
|
||||||
{ text: '14 reference images', detail: 'for brand consistency' },
|
|
||||||
{ text: 'Studio controls', detail: '— lighting, focus, color grading' },
|
|
||||||
{ text: 'Thinking mode', detail: '— advanced reasoning for complex prompts' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const capabilities = [
|
|
||||||
{
|
|
||||||
icon: Type,
|
|
||||||
title: 'Perfect Text Rendering',
|
|
||||||
description:
|
|
||||||
'Legible text in images — logos, diagrams, posters. What other models still struggle with.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Brain,
|
|
||||||
title: 'Native Multimodal',
|
|
||||||
description:
|
|
||||||
'Understands text AND images in one model. Not a text model + image model bolted together.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Target,
|
|
||||||
title: 'Precise Prompt Following',
|
|
||||||
description:
|
|
||||||
'What you ask is what you get. No artistic "interpretation" that ignores your instructions.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Image,
|
|
||||||
title: 'Professional Realism',
|
|
||||||
description:
|
|
||||||
'Photorealistic output that replaces stock photos. Not fantasy art — real, usable images.',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-20 px-6">
|
|
||||||
<div className="max-w-5xl mx-auto">
|
|
||||||
<div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center mb-10">
|
|
||||||
<div className="flex items-center justify-center gap-3 mb-4">
|
|
||||||
<Zap className="w-8 h-8 text-yellow-400" />
|
|
||||||
<h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
|
||||||
We chose Gemini because it's the only model family that combines native
|
|
||||||
multimodal understanding with production-grade image generation. Two models, optimized
|
|
||||||
for different needs.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Two Model Cards */}
|
|
||||||
<div className="grid md:grid-cols-2 gap-6 mb-10">
|
|
||||||
{/* Flash Model */}
|
|
||||||
<div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
|
|
||||||
<Zap className="w-5 h-5 text-cyan-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
|
|
||||||
<p className="text-cyan-400 text-sm">Nano Banana</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">
|
|
||||||
Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
|
|
||||||
generation.
|
|
||||||
</p>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
{flashFeatures.map((feature, i) => (
|
|
||||||
<li key={i} className="flex items-start gap-2">
|
|
||||||
<Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
|
|
||||||
<span className="text-gray-300">
|
|
||||||
<strong className="text-white">{feature.text}</strong> {feature.detail}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pro Model */}
|
|
||||||
<div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
|
|
||||||
<Crown className="w-5 h-5 text-yellow-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
|
|
||||||
<p className="text-yellow-400 text-sm">Nano Banana Pro</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">
|
|
||||||
Maximum quality and creative control. For production assets and professional
|
|
||||||
workflows.
|
|
||||||
</p>
|
|
||||||
<ul className="space-y-2 text-sm">
|
|
||||||
{proFeatures.map((feature, i) => (
|
|
||||||
<li key={i} className="flex items-start gap-2">
|
|
||||||
<Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
|
||||||
<span className="text-gray-300">
|
|
||||||
<strong className="text-white">{feature.text}</strong> {feature.detail}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Shared Capabilities */}
|
|
||||||
<div className="border-t border-yellow-500/20 pt-8">
|
|
||||||
<h4 className="text-center font-semibold mb-6 text-gray-300">
|
|
||||||
Why Gemini outperforms competitors
|
|
||||||
</h4>
|
|
||||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{capabilities.map((cap, i) => (
|
|
||||||
<div key={i} className="text-center p-4">
|
|
||||||
<div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
|
|
||||||
<cap.icon className="w-6 h-6 text-yellow-400" />
|
|
||||||
</div>
|
|
||||||
<h5 className="font-medium text-sm mb-1">{cap.title}</h5>
|
|
||||||
<p className="text-gray-500 text-xs">{cap.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* #1 Ranking Note */}
|
|
||||||
<p className="text-center text-gray-500 text-sm mt-8">
|
|
||||||
<Award className="w-4 h-4 inline mr-1 text-yellow-400" />
|
|
||||||
Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
|
|
||||||
(August 2025)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// FINAL CTA SECTION
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
function FinalCtaSection() {
|
|
||||||
const scrollToTop = () => {
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
// Focus on email input after scroll
|
|
||||||
setTimeout(() => {
|
|
||||||
const input = document.querySelector('input[type="email"]') as HTMLInputElement;
|
|
||||||
input?.focus();
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section
|
|
||||||
id="join"
|
|
||||||
className="relative py-24 px-6 overflow-hidden"
|
|
||||||
style={{
|
|
||||||
background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Top accent line */}
|
|
||||||
<div
|
|
||||||
className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Subtle cyan glow accents */}
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 opacity-50 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
backgroundImage:
|
|
||||||
'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="relative z-10 max-w-3xl mx-auto text-center">
|
|
||||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
|
|
||||||
Ready to build?
|
|
||||||
</h2>
|
|
||||||
<p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
|
|
||||||
Join developers waiting for early access. We'll notify you when your spot is ready.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={scrollToTop}
|
|
||||||
className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
|
|
||||||
>
|
|
||||||
Get Early Access
|
|
||||||
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p className="text-cyan-200/50 text-sm mt-8">
|
|
||||||
No credit card required • Free to start • Cancel anytime
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// MAIN HOME COMPONENT
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue