chore: more forms
This commit is contained in:
parent
fe301756d7
commit
7c49f6e643
|
|
@ -0,0 +1,652 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Banatie - AI Images for Modern Development</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
padding: 1px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.gradient-border-inner {
|
||||
background: #0a0a0f;
|
||||
border-radius: 11px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.cta-gradient {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(6, 182, 212, 0.2) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.btn-gradient:hover {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
|
||||
}
|
||||
|
||||
.screenshot-placeholder {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
|
||||
}
|
||||
|
||||
.tool-badge {
|
||||
background: rgba(30, 30, 50, 0.8);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.powered-badge {
|
||||
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.unique-feature {
|
||||
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
border: 1px solid rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border: 1px solid rgba(139, 92, 246, 0.2);
|
||||
}
|
||||
|
||||
.api-example {
|
||||
background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
|
||||
border: 1px solid rgba(139, 92, 246, 0.15);
|
||||
}
|
||||
|
||||
.shape-your-future {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||||
border: 1px solid rgba(236, 72, 153, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#0a0a0f] text-white min-h-screen">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-md border-b border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
|
||||
<span class="text-xl font-bold">Banatie</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="#lab" class="text-gray-400 hover:text-white transition-colors text-sm">Lab</a>
|
||||
<a href="#join" class="text-gray-300 hover:text-white transition-colors">Get Access</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- SECTION 1: HERO -->
|
||||
<section class="pt-32 pb-20 px-6">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
|
||||
AI Image Generation<br>
|
||||
<span class="gradient-text">Inside Your Workflow</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline - replaced "No context switching" -->
|
||||
<p class="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 -->
|
||||
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
|
||||
>
|
||||
<button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
|
||||
|
||||
<!-- Badges - Prompt URLs moved to last -->
|
||||
<div class="flex flex-wrap gap-3 justify-center">
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="zap" class="w-4 h-4"></i>
|
||||
API-First
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="globe" class="w-4 h-4"></i>
|
||||
Built-in CDN
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="flask-conical" class="w-4 h-4"></i>
|
||||
Web Lab
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
|
||||
<i data-lucide="at-sign" class="w-4 h-4"></i>
|
||||
Style References
|
||||
</span>
|
||||
<span class="badge px-4 py-2 rounded-full text-sm text-cyan-300 flex items-center gap-2 border-cyan-500/30">
|
||||
<i data-lucide="link" class="w-4 h-4"></i>
|
||||
Prompt URLs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 2: API EXAMPLE - Practical code right after Hero -->
|
||||
<section class="py-16 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="api-example rounded-2xl p-8">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="terminal" class="w-5 h-5 text-purple-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold">One request. Production-ready URL.</h2>
|
||||
<p class="text-gray-400 text-sm">Simple REST API that handles everything</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Example - Request -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
|
||||
<div class="text-gray-500 mb-2"># Generate an image</div>
|
||||
<span class="text-cyan-400">curl</span> <span class="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span><br>
|
||||
<span class="text-gray-300 ml-4">-H</span> <span class="text-green-400">"Authorization: Bearer $API_KEY"</span> <span class="text-gray-300">\</span><br>
|
||||
<span class="text-gray-300 ml-4">-d</span> <span class="text-green-400">'{"prompt": "modern office interior, natural light"}'</span>
|
||||
</div>
|
||||
|
||||
<!-- Code Example - Response -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||||
<div class="text-gray-500 mb-2"># Response</div>
|
||||
<span class="text-gray-300">{</span><br>
|
||||
<span class="text-purple-400 ml-4">"url"</span><span class="text-gray-300">:</span> <span class="text-green-400">"https://cdn.banatie.app/img/a7x2k9.png"</span><span class="text-gray-300">,</span><br>
|
||||
<span class="text-purple-400 ml-4">"enhanced_prompt"</span><span class="text-gray-300">:</span> <span class="text-green-400">"A photorealistic modern office..."</span><span class="text-gray-300">,</span><br>
|
||||
<span class="text-purple-400 ml-4">"generation_time"</span><span class="text-gray-300">:</span> <span class="text-yellow-400">12.4</span><br>
|
||||
<span class="text-gray-300">}</span>
|
||||
</div>
|
||||
|
||||
<p class="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>
|
||||
|
||||
<!-- SECTION 3: PROBLEM → SOLUTION -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Why developers choose Banatie
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
Stop fighting your image workflow. Start building.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="refresh-cw" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Placeholder hell</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">"I'll add images later" never happens</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Generate real images as you build
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="arrow-left-right" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Context switching</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Leave IDE, generate elsewhere, come back</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Stay in your workflow. API, SDK, MCP
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="package" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Asset management</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Download, optimize, upload, get URL</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Production CDN URLs instantly
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="layers" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-red-400">Style drift</h3>
|
||||
<p class="text-gray-500 text-sm mb-4">Every image looks different</p>
|
||||
<p class="text-gray-300 text-sm">
|
||||
<i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
|
||||
Reference images keep style consistent
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 4: PROMPT URLs HIGHLIGHT - Moved after Problem/Solution -->
|
||||
<section class="py-16 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="unique-feature rounded-2xl p-8">
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="sparkles" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">Unique</span>
|
||||
<h2 class="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
|
||||
<p class="text-gray-400">Put a prompt in your <code class="text-cyan-300">img src</code> and get a real image. No API calls. No JavaScript. Just HTML.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Example -->
|
||||
<div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
|
||||
<span class="text-gray-500"><!-- Write this --></span><br>
|
||||
<span class="text-purple-400"><img</span> <span class="text-cyan-300">src</span>=<span class="text-green-400">"https://cdn.banatie.app/gen?p=modern office interior"</span> <span class="text-purple-400">/></span><br><br>
|
||||
<span class="text-gray-500"><!-- Get this: production-ready image, cached, CDN-delivered --></span>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 text-sm mt-4">Perfect for static sites, prototypes, and AI coding agents that generate HTML.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 5: HOW IT WORKS -->
|
||||
<section class="py-20 px-6 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Your prompt. Your control. Production-ready.
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
We handle the complexity so you can focus on building.
|
||||
</p>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Pipeline visualization -->
|
||||
<div class="grid md:grid-cols-4 gap-4 mb-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">1</div>
|
||||
<p class="text-sm font-medium mb-1">Your Prompt</p>
|
||||
<p class="text-xs text-gray-500">"a cat on windowsill"</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">2</div>
|
||||
<p class="text-sm font-medium mb-1">Smart Enhancement</p>
|
||||
<p class="text-xs text-gray-500">Style + details added</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">3</div>
|
||||
<p class="text-sm font-medium mb-1">AI Generation</p>
|
||||
<p class="text-xs text-gray-500">Gemini creates image</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="text-center p-4">
|
||||
<div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">4</div>
|
||||
<p class="text-sm font-medium mb-1">CDN Delivery</p>
|
||||
<p class="text-xs text-gray-500">Instant global URL</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- What you control box -->
|
||||
<div class="card-gradient rounded-xl p-6 mt-8">
|
||||
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
|
||||
<i data-lucide="settings-2" class="w-5 h-5 text-purple-400"></i>
|
||||
What you control
|
||||
</h3>
|
||||
<div class="grid md:grid-cols-3 gap-4 text-sm">
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Style templates</strong> — photorealistic, illustration, minimalist, and more</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Reference images</strong> — @aliases maintain visual consistency</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
|
||||
<span class="text-gray-300"><strong class="text-white">Output specs</strong> — aspect ratio, dimensions, format</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transparency note -->
|
||||
<p class="text-center text-gray-500 text-sm mt-6">
|
||||
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
|
||||
Enhanced prompts are visible in API response. You always see what was generated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 6: KEY FEATURES -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
||||
Built for real development workflows
|
||||
</h2>
|
||||
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
||||
Everything you need to integrate AI images into your projects.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Feature 1: Reference Images -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="at-sign" class="w-6 h-6 text-pink-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Reference Images</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2: Flows -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="git-branch" class="w-6 h-6 text-purple-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Flows</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Chain generations, iterate on results, build image sequences with @last and @first references.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3: Style Templates -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="palette" class="w-6 h-6 text-yellow-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">7 Style Templates</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4: Instant CDN -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="globe" class="w-6 h-6 text-green-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Instant CDN Delivery</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5: Output Control -->
|
||||
<div class="card-gradient rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="sliders-horizontal" class="w-6 h-6 text-blue-400"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Output Control</h3>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 6: Prompt URLs -->
|
||||
<div class="unique-feature rounded-xl p-6">
|
||||
<div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
|
||||
<i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="font-semibold text-lg">Prompt URLs</h3>
|
||||
<span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">Unique</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 7: INTEGRATIONS - Added Lab -->
|
||||
<section id="lab" class="py-20 px-6 bg-gradient-to-b from-transparent via-cyan-900/5 to-transparent">
|
||||
<div class="max-w-6xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Works with your tools
|
||||
</h2>
|
||||
<p class="text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
Use what fits your workflow. All methods, same capabilities.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-8">
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="server" class="w-5 h-5 text-cyan-400"></i>
|
||||
<span>REST API</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="code" class="w-5 h-5 text-blue-400"></i>
|
||||
<span>TypeScript SDK</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="cpu" class="w-5 h-5 text-purple-400"></i>
|
||||
<span>MCP Server</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="terminal" class="w-5 h-5 text-green-400"></i>
|
||||
<span>CLI</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
|
||||
<i data-lucide="flask-conical" class="w-5 h-5 text-orange-400"></i>
|
||||
<span>Banatie Lab</span>
|
||||
</div>
|
||||
<div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2 border-cyan-500/30">
|
||||
<i data-lucide="link-2" class="w-5 h-5 text-cyan-400"></i>
|
||||
<span>Prompt URLs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lab description -->
|
||||
<div class="max-w-2xl mx-auto mt-8 p-4 bg-white/5 rounded-lg">
|
||||
<p class="text-sm text-gray-400">
|
||||
<strong class="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 class="text-gray-500 text-sm mt-6">
|
||||
Perfect for Claude Code, Cursor, and any AI-powered workflow.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 8: POWERED BY - Focus on Gemini capabilities -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="powered-badge rounded-2xl p-8">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<i data-lucide="zap" class="w-8 h-8 text-yellow-400"></i>
|
||||
<h2 class="text-2xl font-bold">Powered by Google Gemini</h2>
|
||||
</div>
|
||||
|
||||
<!-- Model names -->
|
||||
<p class="text-center text-gray-400 mb-6">
|
||||
Currently using <span class="text-white font-medium">Gemini 2.5 Flash Image</span> <span class="text-gray-500">(Nano Banana)</span> — Google's fastest natively multimodal image model.
|
||||
</p>
|
||||
|
||||
<!-- Gemini capabilities -->
|
||||
<div class="grid md:grid-cols-2 gap-4 max-w-2xl mx-auto">
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Native multimodal</strong>
|
||||
<p class="text-gray-400">Text and image understanding in one model</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">High-fidelity text rendering</strong>
|
||||
<p class="text-gray-400">Legible text in images for logos and diagrams</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Conversational editing</strong>
|
||||
<p class="text-gray-400">Refine images through natural language</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 text-sm">
|
||||
<i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
|
||||
<div>
|
||||
<strong class="text-white">Optimized for speed</strong>
|
||||
<p class="text-gray-400">Fast generation without quality compromise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Future models hint -->
|
||||
<p class="text-center text-gray-500 text-sm mt-6">
|
||||
More models coming — including Gemini 3 Pro Image (Nano Banana Pro) for advanced use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 9: SHAPE THE FUTURE - Replaced "What's next" -->
|
||||
<section class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="shape-your-future rounded-2xl p-8 text-center">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<i data-lucide="rocket" class="w-8 h-8 text-pink-400"></i>
|
||||
<h2 class="text-2xl font-bold">Shape the future of Banatie</h2>
|
||||
</div>
|
||||
<p class="text-gray-400 mb-6 max-w-xl mx-auto">
|
||||
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 class="flex flex-wrap justify-center gap-4 text-sm">
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="message-circle" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Direct feedback channel</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="vote" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Feature voting</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-300">
|
||||
<i data-lucide="users" class="w-4 h-4 text-pink-400"></i>
|
||||
<span>Early adopter community</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 10: FINAL CTA -->
|
||||
<section id="join" class="py-20 px-6">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="cta-gradient rounded-2xl p-12 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">
|
||||
Be first to try it
|
||||
</h2>
|
||||
<p class="text-gray-300 mb-8 max-w-xl mx-auto">
|
||||
Join developers waiting for early access. We'll notify you when your spot is ready.
|
||||
</p>
|
||||
|
||||
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
|
||||
>
|
||||
<button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 11: FOOTER -->
|
||||
<footer class="py-12 px-6 border-t border-white/5">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
|
||||
<span class="text-xl font-bold">Banatie</span>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="flex flex-wrap justify-center gap-6 text-gray-400">
|
||||
<a href="#" class="hover:text-white transition-colors">Documentation</a>
|
||||
<a href="#" class="hover:text-white transition-colors">API Reference</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Lab</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Pricing</a>
|
||||
<a href="#" class="hover:text-white transition-colors">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
|
||||
<p class="mb-2">Built for builders who create.</p>
|
||||
<p>© 2025 Banatie. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Initialize Lucide Icons -->
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -25,6 +25,10 @@ import {
|
|||
ImageOff,
|
||||
Trash2,
|
||||
Sparkles,
|
||||
Wand2,
|
||||
Palette,
|
||||
Image,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
|
||||
export const GenerateFormPlaceholder = () => {
|
||||
|
|
@ -223,6 +227,153 @@ export const GenerateFormPlaceholder = () => {
|
|||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Additional Form Sections for Scroll Testing */}
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Wand2 className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-semibold text-white">Style Refinement</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Color Palette</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>Vibrant</option>
|
||||
<option>Muted</option>
|
||||
<option>Monochrome</option>
|
||||
<option>Pastel</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Lighting</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>Natural</option>
|
||||
<option>Studio</option>
|
||||
<option>Dramatic</option>
|
||||
<option>Soft</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Mood</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>Neutral</option>
|
||||
<option>Happy</option>
|
||||
<option>Mysterious</option>
|
||||
<option>Energetic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Detail Level</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>High</option>
|
||||
<option>Medium</option>
|
||||
<option>Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Palette className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-semibold text-white">Color Controls</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Primary Color</label>
|
||||
<input type="text" placeholder="#8B5CF6" className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Secondary Color</label>
|
||||
<input type="text" placeholder="#06B6D4" className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Background Hint</label>
|
||||
<input type="text" placeholder="e.g., gradient, solid, transparent" className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Image className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-semibold text-white">Reference Images</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="aspect-square bg-slate-800 border border-slate-700 border-dashed rounded-lg flex items-center justify-center">
|
||||
<span className="text-xs text-gray-500">Drop image</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500">Upload up to 4 reference images to guide the generation</p>
|
||||
</section>
|
||||
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Layers className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-semibold text-white">Advanced Parameters</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Guidance Scale</label>
|
||||
<input type="number" defaultValue={7.5} step={0.5} min={1} max={20} className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Steps</label>
|
||||
<input type="number" defaultValue={30} step={5} min={10} max={100} className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Seed</label>
|
||||
<input type="number" placeholder="Random" className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Negative Prompt</label>
|
||||
<textarea rows={2} placeholder="Elements to avoid in the generation..." className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 resize-none" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Settings className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-semibold text-white">Output Settings</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Output Format</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>PNG</option>
|
||||
<option>JPEG</option>
|
||||
<option>WebP</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Quality</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>Maximum (100%)</option>
|
||||
<option>High (90%)</option>
|
||||
<option>Medium (80%)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Number of Images</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-1.5">Auto-save to</label>
|
||||
<select className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white">
|
||||
<option>Default folder</option>
|
||||
<option>Favorites</option>
|
||||
<option>Don't save</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
*/
|
||||
|
||||
import { useState, type ElementType } from 'react';
|
||||
import { Activity, Calendar, Palette, ChevronRight, RotateCcw } from 'lucide-react';
|
||||
import { Activity, Calendar, Palette, ChevronRight, RotateCcw, Layers, Sliders, Tag, Folder, Star, Clock } from 'lucide-react';
|
||||
import { FilterPlaceholder } from '@/components/lab/FilterPlaceholder';
|
||||
|
||||
type FilterGroupProps = {
|
||||
|
|
@ -61,6 +61,75 @@ const filterGroups: FilterGroupProps[] = [
|
|||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'model',
|
||||
label: 'Model',
|
||||
icon: Layers,
|
||||
options: [
|
||||
{ id: 'gemini-2', label: 'Gemini 2.0', count: 45 },
|
||||
{ id: 'gemini-1.5', label: 'Gemini 1.5', count: 62 },
|
||||
{ id: 'imagen-3', label: 'Imagen 3', count: 20 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'quality',
|
||||
label: 'Quality',
|
||||
icon: Sliders,
|
||||
options: [
|
||||
{ id: 'high', label: 'High (1024px)', count: 34 },
|
||||
{ id: 'medium', label: 'Medium (768px)', count: 56 },
|
||||
{ id: 'low', label: 'Low (512px)', count: 37 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'tags',
|
||||
label: 'Tags',
|
||||
icon: Tag,
|
||||
options: [
|
||||
{ id: 'portrait', label: 'Portrait', count: 23 },
|
||||
{ id: 'landscape', label: 'Landscape', count: 31 },
|
||||
{ id: 'product', label: 'Product', count: 18 },
|
||||
{ id: 'abstract', label: 'Abstract', count: 12 },
|
||||
{ id: 'architecture', label: 'Architecture', count: 9 },
|
||||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'folder',
|
||||
label: 'Folder',
|
||||
icon: Folder,
|
||||
options: [
|
||||
{ id: 'default', label: 'Default', count: 89 },
|
||||
{ id: 'favorites', label: 'Favorites', count: 15 },
|
||||
{ id: 'archive', label: 'Archive', count: 23 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
{
|
||||
id: 'rating',
|
||||
label: 'Rating',
|
||||
icon: Star,
|
||||
options: [
|
||||
{ id: '5star', label: '5 Stars', count: 12 },
|
||||
{ id: '4star', label: '4 Stars', count: 28 },
|
||||
{ id: '3star', label: '3 Stars', count: 45 },
|
||||
{ id: 'unrated', label: 'Unrated', count: 42 },
|
||||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
label: 'Generation Time',
|
||||
icon: Clock,
|
||||
options: [
|
||||
{ id: 'fast', label: '< 5 seconds', count: 67 },
|
||||
{ id: 'medium', label: '5-15 seconds', count: 43 },
|
||||
{ id: 'slow', label: '> 15 seconds', count: 17 },
|
||||
],
|
||||
multiSelect: false,
|
||||
},
|
||||
];
|
||||
|
||||
export const LabSidebar = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue