usulpro
/
banatie-landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

draft: first version

This commit is contained in:
Oleg Proskurin 2025-09-22 00:35:34 +07:00
parent 390e8e643c
commit 38336b67d6
6 changed files with 2082 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

361
docs/components.html Normal file
View File

@ -0,0 +1,361 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banatie Components Storybook</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--bg-primary: #0A0E1A;
--bg-secondary: #141925;
--bg-tertiary: #1E293B;
--text-primary: #FFFFFF;
--text-secondary: #D1D5DB;
--text-tertiary: #9CA3AF;
--text-quaternary: #6B7280;
--brand-blue: #3B82F6;
--brand-purple: #8B5CF6;
--border-primary: #374151;
--border-secondary: #1F2937;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-secondary);
}
.brand-gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}
.text-gradient {
background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-bg {
background:
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
var(--bg-primary);
}
.card-bg {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
backdrop-filter: blur(10px);
}
.btn-primary {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.input-glow:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
}
</style>
</head>
<body class="min-h-screen p-8">
<div class="max-w-6xl mx-auto space-y-16">
<!-- Header -->
<header class="text-center">
<h1 class="text-4xl font-bold text-gradient mb-4">Banatie Component Library</h1>
<p class="text-xl text-gray-300">Design system examples and component showcase</p>
</header>
<!-- Typography Section -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Typography</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-4">
<h3 class="text-xl font-semibold text-white">Headings</h3>
<div class="space-y-4 p-6 bg-gray-800/30 rounded-lg border border-gray-700">
<h1 class="text-5xl font-bold text-gradient">H1 Hero Title</h1>
<h2 class="text-3xl font-semibold text-white">H2 Section Header</h2>
<h3 class="text-xl font-semibold text-white">H3 Subsection</h3>
<h4 class="text-lg font-semibold text-white">H4 Card Title</h4>
</div>
</div>
<div class="space-y-4">
<h3 class="text-xl font-semibold text-white">Body Text</h3>
<div class="space-y-4 p-6 bg-gray-800/30 rounded-lg border border-gray-700">
<p class="text-xl text-gray-300">Large body text for hero descriptions and important content.</p>
<p class="text-base text-gray-300">Regular body text for general content and descriptions that need good readability.</p>
<p class="text-sm text-gray-400">Small text for captions, metadata, and secondary information.</p>
<code class="text-sm font-mono bg-gray-900 px-2 py-1 rounded text-blue-400">Code text example</code>
</div>
</div>
</div>
</section>
<!-- Color Palette -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Color Palette</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="text-center">
<div class="w-full h-16 rounded-lg" style="background: var(--bg-primary);"></div>
<p class="text-sm mt-2 text-gray-400">Primary BG</p>
</div>
<div class="text-center">
<div class="w-full h-16 rounded-lg" style="background: var(--bg-secondary);"></div>
<p class="text-sm mt-2 text-gray-400">Secondary BG</p>
</div>
<div class="text-center">
<div class="w-full h-16 rounded-lg brand-gradient"></div>
<p class="text-sm mt-2 text-gray-400">Brand Gradient</p>
</div>
<div class="text-center">
<div class="w-full h-16 rounded-lg bg-blue-500"></div>
<p class="text-sm mt-2 text-gray-400">Brand Blue</p>
</div>
<div class="text-center">
<div class="w-full h-16 rounded-lg bg-purple-500"></div>
<p class="text-sm mt-2 text-gray-400">Brand Purple</p>
</div>
<div class="text-center">
<div class="w-full h-16 rounded-lg bg-emerald-500"></div>
<p class="text-sm mt-2 text-gray-400">Success</p>
</div>
</div>
</section>
<!-- Buttons -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Buttons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="space-y-4">
<h3 class="text-lg font-semibold text-white">Primary Buttons</h3>
<div class="space-y-3">
<button class="btn-primary text-white font-semibold px-6 py-3 rounded-lg w-full">
Join Beta Waitlist
</button>
<button class="btn-primary text-white font-semibold px-4 py-2 rounded-lg">
Get Started
</button>
<button class="btn-primary text-white font-semibold px-3 py-1.5 rounded text-sm">
Small CTA
</button>
</div>
</div>
<div class="space-y-4">
<h3 class="text-lg font-semibold text-white">Secondary Buttons</h3>
<div class="space-y-3">
<button class="border border-gray-600 text-white font-semibold px-6 py-3 rounded-lg w-full hover:bg-blue-500/10 hover:border-blue-500 transition-all">
Learn More
</button>
<button class="border border-gray-600 text-white font-semibold px-4 py-2 rounded-lg hover:bg-blue-500/10 hover:border-blue-500 transition-all">
Documentation
</button>
<button class="border border-gray-600 text-white font-semibold px-3 py-1.5 rounded text-sm hover:bg-blue-500/10 hover:border-blue-500 transition-all">
View Demo
</button>
</div>
</div>
<div class="space-y-4">
<h3 class="text-lg font-semibold text-white">Ghost Buttons</h3>
<div class="space-y-3">
<button class="text-gray-300 font-medium px-6 py-3 rounded-lg w-full hover:bg-white/5 hover:text-white transition-all">
Cancel
</button>
<button class="text-gray-300 font-medium px-4 py-2 rounded-lg hover:bg-white/5 hover:text-white transition-all">
Skip
</button>
<button class="text-blue-400 font-medium px-3 py-1.5 rounded text-sm hover:bg-blue-500/10 transition-all">
Link Action
</button>
</div>
</div>
</div>
</section>
<!-- Form Elements -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Form Elements</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-6">
<h3 class="text-lg font-semibold text-white">Input Fields</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
<input type="email" placeholder="Enter your email"
class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none input-glow focus:border-blue-500 transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
<input type="text" placeholder="Your company"
class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none input-glow focus:border-blue-500 transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Use Case</label>
<select class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none input-glow focus:border-blue-500 transition-all">
<option>Select your primary use case</option>
<option>Product Development</option>
<option>Marketing Content</option>
<option>Design & Creative</option>
<option>Research & Development</option>
</select>
</div>
</div>
</div>
<div class="space-y-6">
<h3 class="text-lg font-semibold text-white">Email Signup Form</h3>
<div class="p-6 bg-gray-800/30 rounded-lg border border-gray-700">
<div class="text-center mb-4">
<h4 class="text-xl font-semibold text-white mb-2">Join the Beta</h4>
<p class="text-gray-300">Get early access to Banatie</p>
</div>
<div class="flex gap-3">
<input type="email" placeholder="Enter your email"
class="flex-1 px-4 py-3 bg-gray-900/80 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none input-glow focus:border-blue-500 transition-all">
<button class="btn-primary text-white font-semibold px-6 py-3 rounded-lg whitespace-nowrap">
Join Waitlist
</button>
</div>
<p class="text-xs text-gray-400 mt-2 text-center">No spam, unsubscribe anytime</p>
</div>
</div>
</div>
</section>
<!-- Cards -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card-bg border border-gray-700 rounded-xl p-6 hover-lift">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">10x Faster Integration</h3>
<p class="text-gray-300">Deploy production-ready image generation in hours, not weeks with our simple API.</p>
</div>
<div class="card-bg border border-gray-700 rounded-xl p-6 hover-lift">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">40% Better Results</h3>
<p class="text-gray-300">AI-powered prompt optimization ensures consistent, professional-quality image generation.</p>
</div>
<div class="card-bg border border-gray-700 rounded-xl p-6 hover-lift">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-2">95+ Languages</h3>
<p class="text-gray-300">Accept prompts in any language and automatically convert to optimized English.</p>
</div>
</div>
</section>
<!-- Pricing Cards -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Pricing Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-800 border border-gray-700 rounded-2xl p-8">
<h3 class="text-xl font-semibold text-white mb-2">Free</h3>
<div class="mb-4">
<span class="text-3xl font-bold text-white">$0</span>
<span class="text-gray-400">/month</span>
</div>
<ul class="space-y-2 text-gray-300 mb-6">
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>100 generations/month</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Community support</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Basic optimization</li>
</ul>
<button class="w-full border border-gray-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-500/10 hover:border-blue-500 transition-all">
Get Started
</button>
</div>
<div class="bg-gray-800 border-2 border-blue-500 rounded-2xl p-8 relative">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<span class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">Popular</span>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Professional</h3>
<div class="mb-4">
<span class="text-3xl font-bold text-white">$29</span>
<span class="text-gray-400">/month</span>
</div>
<ul class="space-y-2 text-gray-300 mb-6">
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>1,000 generations/month</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Email support</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Advanced optimization</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Priority processing</li>
</ul>
<button class="w-full btn-primary text-white font-semibold py-3 rounded-lg">
Start Free Trial
</button>
</div>
<div class="bg-gray-800 border border-gray-700 rounded-2xl p-8">
<h3 class="text-xl font-semibold text-white mb-2">Enterprise</h3>
<div class="mb-4">
<span class="text-3xl font-bold text-white">Custom</span>
</div>
<ul class="space-y-2 text-gray-300 mb-6">
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Unlimited generations</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>24/7 support</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>Custom integrations</li>
<li class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-3"></span>SLA guarantees</li>
</ul>
<button class="w-full border border-gray-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-500/10 hover:border-blue-500 transition-all">
Contact Sales
</button>
</div>
</div>
</section>
<!-- Badges & Tags -->
<section class="space-y-8">
<h2 class="text-3xl font-semibold text-white mb-6">Badges & Tags</h2>
<div class="flex flex-wrap gap-4">
<span class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-full text-sm font-medium border border-blue-500/30">Beta Access</span>
<span class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm font-medium border border-green-500/30">Available Now</span>
<span class="bg-purple-500/20 text-purple-400 px-3 py-1 rounded-full text-sm font-medium border border-purple-500/30">AI Powered</span>
<span class="bg-gray-500/20 text-gray-400 px-3 py-1 rounded-full text-sm font-medium border border-gray-500/30">Coming Soon</span>
<span class="brand-gradient text-white px-3 py-1 rounded-full text-sm font-medium">Featured</span>
</div>
</section>
</div>
</body>
</html>

425
docs/features-grid.html Normal file
View File

@ -0,0 +1,425 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banatie Features Grid</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(180deg, #0A0E1A 0%, #141925 100%);
}
.text-gradient {
background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.brand-gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}
.card-bg {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
backdrop-filter: blur(10px);
}
.feature-card {
transition: all 0.3s ease;
border: 1px solid rgba(55, 65, 81, 1);
}
.feature-card:hover {
transform: translateY(-8px);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.icon-glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.section-bg-alt {
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%),
#141925;
}
.testimonial-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-highlight {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.code-block {
background: linear-gradient(135deg, rgba(31, 41, 55, 0.8) 0%, rgba(17, 24, 39, 0.8) 100%);
border: 1px solid rgba(75, 85, 99, 0.3);
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.slide-in {
animation: slideIn 0.8s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
</style>
</head>
<body class="text-white">
<!-- How Banatie Solves Every Pain Point -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-gradient mb-6">
How Banatie Solves Every Pain Point
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Transform your development workflow with intelligent automation that eliminates complexity without sacrificing power.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Solution 1: One API Call -->
<div class="feature-card card-bg rounded-2xl p-8 text-center">
<div class="w-16 h-16 brand-gradient rounded-2xl flex items-center justify-center mx-auto mb-6 icon-glow">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white mb-4">⚡ One API Call</h3>
<p class="text-gray-300 mb-6 leading-relaxed">
Single endpoint replaces complex setup. Comprehensive SDKs included. Zero authentication headaches.
</p>
<div class="stat-highlight rounded-lg p-4">
<div class="text-2xl font-bold text-green-400 mb-1">5 minutes</div>
<div class="text-sm text-green-300">Start generating images</div>
</div>
</div>
<!-- Solution 2: AI-Powered Prompts -->
<div class="feature-card card-bg rounded-2xl p-8 text-center">
<div class="w-16 h-16 brand-gradient rounded-2xl flex items-center justify-center mx-auto mb-6 icon-glow">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white mb-4">🧠 AI-Powered Prompts</h3>
<p class="text-gray-300 mb-6 leading-relaxed">
Automatic optimization for Nano Banana. Any language → perfect English prompts. Consistent professional results.
</p>
<div class="stat-highlight rounded-lg p-4">
<div class="text-2xl font-bold text-green-400 mb-1">40% better</div>
<div class="text-sm text-green-300">Quality improvement</div>
</div>
</div>
<!-- Solution 3: Smart Collaging -->
<div class="feature-card card-bg rounded-2xl p-8 text-center">
<div class="w-16 h-16 brand-gradient rounded-2xl flex items-center justify-center mx-auto mb-6 icon-glow">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-white mb-4">🎨 Smart Collaging</h3>
<p class="text-gray-300 mb-6 leading-relaxed">
Automated reference image handling. Intelligent composition algorithms. Instant multi-image processing.
</p>
<div class="stat-highlight rounded-lg p-4">
<div class="text-2xl font-bold text-green-400 mb-1">30 minutes</div>
<div class="text-sm text-green-300">Saved per request</div>
</div>
</div>
</div>
</div>
</section>
<!-- Everything You Need Section -->
<section class="section-bg-alt py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
Everything You Need for Professional Image Generation
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
A complete toolkit that scales from your first API call to enterprise-grade deployments.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Feature 1: Instant Integration -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Instant Integration</h3>
</div>
<p class="text-gray-300 mb-4">Single API endpoint, comprehensive SDKs for JavaScript, Python, PHP, Go. Complete documentation.</p>
<div class="text-sm text-blue-400 font-medium">Deploy in one afternoon</div>
</div>
<!-- Feature 2: Intelligent Optimization -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Intelligent Optimization</h3>
</div>
<p class="text-gray-300 mb-4">AI-enhanced prompt processing with Google best practices built-in. Consistent quality output.</p>
<div class="text-sm text-blue-400 font-medium">40% better results guaranteed</div>
</div>
<!-- Feature 3: Universal Language Support -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Universal Language</h3>
</div>
<p class="text-gray-300 mb-4">95+ languages accepted. Automatic translation & optimization. Global team friendly.</p>
<div class="text-sm text-blue-400 font-medium">Break down language barriers</div>
</div>
<!-- Feature 4: Reference Collaging -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Reference Collaging</h3>
</div>
<p class="text-gray-300 mb-4">Multi-image automation with smart composition algorithms. Style consistency maintained.</p>
<div class="text-sm text-blue-400 font-medium">Save 30 minutes per request</div>
</div>
<!-- Feature 5: Usage Analytics -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Usage Analytics</h3>
</div>
<p class="text-gray-300 mb-4">Generation success metrics, cost optimization insights, and performance monitoring dashboard.</p>
<div class="text-sm text-blue-400 font-medium">Optimize your workflow</div>
</div>
<!-- Feature 6: Enterprise Ready -->
<div class="feature-card card-bg rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 brand-gradient rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0121 12c0 .749-.071 1.485-.207 2.201m-.207-6.402A11.955 11.955 0 0121 12c0 .749-.071 1.485-.207 2.201m0-6.402L15 12l6.793 6.793M3 3l6.793 6.793L21 12"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white">Enterprise Ready</h3>
</div>
<p class="text-gray-300 mb-4">SLA guarantees available, white-label options, and custom integrations for enterprise needs.</p>
<div class="text-sm text-blue-400 font-medium">Scale with confidence</div>
</div>
</div>
</div>
</section>
<!-- Code Example Section -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-white mb-6">
Simple API, Powerful Results
</h2>
<p class="text-xl text-gray-300 max-w-2xl mx-auto">
See how easy it is to generate professional images with just a few lines of code.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- Code Block -->
<div class="slide-in">
<div class="code-block rounded-xl p-6 font-mono text-sm">
<div class="flex items-center mb-4">
<div class="flex space-x-2 mr-4">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
<span class="text-gray-400">main.js</span>
</div>
<div class="space-y-2">
<div><span class="text-purple-400">import</span> <span class="text-blue-400">{ Banatie }</span> <span class="text-purple-400">from</span> <span class="text-green-400">'@banatie/sdk'</span><span class="text-gray-400">;</span></div>
<div></div>
<div><span class="text-purple-400">const</span> <span class="text-blue-400">banatie</span> <span class="text-gray-400">=</span> <span class="text-purple-400">new</span> <span class="text-yellow-400">Banatie</span><span class="text-gray-400">(</span><span class="text-green-400">'your-api-key'</span><span class="text-gray-400">);</span></div>
<div></div>
<div><span class="text-purple-400">const</span> <span class="text-blue-400">result</span> <span class="text-gray-400">=</span> <span class="text-purple-400">await</span> <span class="text-blue-400">banatie</span><span class="text-gray-400">.</span><span class="text-yellow-400">generate</span><span class="text-gray-400">({</span></div>
<div><span class="text-gray-400"> </span><span class="text-blue-400">prompt</span><span class="text-gray-400">:</span> <span class="text-green-400">"A futuristic robot in a neon city"</span><span class="text-gray-400">,</span></div>
<div><span class="text-gray-400"> </span><span class="text-blue-400">style</span><span class="text-gray-400">:</span> <span class="text-green-400">"cyberpunk"</span><span class="text-gray-400">,</span></div>
<div><span class="text-gray-400"> </span><span class="text-blue-400">references</span><span class="text-gray-400">:</span> <span class="text-gray-400">[</span><span class="text-green-400">"ref1.jpg"</span><span class="text-gray-400">,</span> <span class="text-green-400">"ref2.jpg"</span><span class="text-gray-400">]</span></div>
<div><span class="text-gray-400">});</span></div>
<div></div>
<div><span class="text-blue-400">console</span><span class="text-gray-400">.</span><span class="text-yellow-400">log</span><span class="text-gray-400">(</span><span class="text-blue-400">result</span><span class="text-gray-400">.</span><span class="text-blue-400">imageUrl</span><span class="text-gray-400">);</span></div>
</div>
</div>
</div>
<!-- Benefits List -->
<div class="space-y-6">
<div class="flex items-start">
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-2">Automatic Prompt Optimization</h4>
<p class="text-gray-300">Your simple prompt gets enhanced with Google's best practices automatically.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-2">Smart Reference Handling</h4>
<p class="text-gray-300">Multiple reference images get intelligently combined into the perfect composition.</p>
</div>
</div>
<div class="flex items-start">
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-4 mt-1">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-2">Production Ready</h4>
<p class="text-gray-300">Error handling, retries, and monitoring built-in for enterprise reliability.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Proof Section -->
<section class="section-bg-alt py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-white mb-6">
Join the AI Image Generation Revolution
</h2>
<p class="text-xl text-gray-300">
Developers and businesses worldwide are already transforming their workflows with Banatie.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<!-- Stat 1 -->
<div class="text-center floating-element">
<div class="text-5xl font-bold text-gradient mb-2">$60.8B</div>
<div class="text-lg text-gray-300 mb-2">AI Image Market by 2030</div>
<div class="text-sm text-gray-400">38.2% annual growth rate</div>
</div>
<!-- Stat 2 -->
<div class="text-center floating-element" style="animation-delay: 2s;">
<div class="text-5xl font-bold text-gradient mb-2">500+</div>
<div class="text-lg text-gray-300 mb-2">Developers on Waitlist</div>
<div class="text-sm text-gray-400">Growing daily</div>
</div>
<!-- Stat 3 -->
<div class="text-center floating-element" style="animation-delay: 4s;">
<div class="text-5xl font-bold text-gradient mb-2">89%</div>
<div class="text-lg text-gray-300 mb-2">Willing to Pay Premium</div>
<div class="text-sm text-gray-400">For simplified AI generation</div>
</div>
</div>
<!-- Testimonials -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="testimonial-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
<span class="text-white font-semibold">JS</span>
</div>
<div>
<div class="font-semibold text-white">Jake Stevens</div>
<div class="text-sm text-gray-400">Lead Developer, TechCorp</div>
</div>
</div>
<p class="text-gray-300 italic">
"I spent 2 weeks trying to get consistent results from Nano Banana. Banatie had me generating professional images in 30 minutes."
</p>
</div>
<div class="testimonial-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3">
<span class="text-white font-semibold">ML</span>
</div>
<div>
<div class="font-semibold text-white">Maria Lopez</div>
<div class="text-sm text-gray-400">CTO, StartupXYZ</div>
</div>
</div>
<p class="text-gray-300 italic">
"We needed reliable image generation that could scale with our user base. Banatie's infrastructure handles our 10,000+ daily requests flawlessly."
</p>
</div>
<div class="testimonial-card rounded-xl p-6">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3">
<span class="text-white font-semibold">RC</span>
</div>
<div>
<div class="font-semibold text-white">Robert Chen</div>
<div class="text-sm text-gray-400">Creative Director, Agency</div>
</div>
</div>
<p class="text-gray-300 italic">
"Brand consistency across AI-generated assets was impossible before Banatie's style templates and optimization."
</p>
</div>
</div>
</div>
</section>
</body>
</html>

288
docs/hero-section.html Normal file
View File

@ -0,0 +1,288 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banatie Hero Section</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.hero-background {
background:
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
#0A0E1A;
position: relative;
min-height: 100vh;
}
.hero-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
background-size: 20px 20px;
opacity: 0.5;
}
.text-gradient {
background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.brand-gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}
.btn-primary {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.nav-blur {
background: rgba(10, 14, 26, 0.8);
backdrop-filter: blur(20px);
}
.floating-card {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.stats-card {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.glow-text {
text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- Navigation -->
<nav class="nav-blur border-b border-gray-800 fixed top-0 w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<div class="text-2xl font-bold text-gradient">Banatie</div>
</div>
<!-- Nav Links -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a>
<a href="#pricing" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Pricing</a>
<a href="#docs" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Docs</a>
<a href="#beta" class="btn-primary text-white px-4 py-2 rounded-lg text-sm font-medium">Join Beta</a>
</div>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button class="text-gray-400 hover:text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-background relative">
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-16">
<div class="text-center fade-in">
<!-- Hero Badge -->
<div class="mb-8">
<span class="bg-blue-500/20 text-blue-400 px-4 py-2 rounded-full text-sm font-medium border border-blue-500/30">
🚀 Now in Beta - Limited Access Available
</span>
</div>
<!-- Main Headline -->
<h1 class="text-5xl md:text-7xl font-bold text-gradient mb-6 leading-tight">
Stop Fighting<br>
Google's Nano Banana API.<br>
<span class="glow-text">Start Building.</span>
</h1>
<!-- Subheadline -->
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed">
Transform complex image generation into a single API call.<br>
Get professional results in <span class="text-blue-400 font-semibold">minutes, not weeks</span>.
</p>
<!-- Value Props -->
<div class="flex flex-col sm:flex-row justify-center items-center gap-6 mb-12 text-gray-300">
<div class="flex items-center">
<div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
<span class="font-medium">⚡ 10x Faster Integration</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
<span class="font-medium">🎯 40% Better Results</span>
</div>
<div class="flex items-center">
<div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
<span class="font-medium">🌍 95+ Languages</span>
</div>
</div>
<!-- CTA Section -->
<div class="mb-12">
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-lg mx-auto mb-4">
<input type="email" placeholder="Enter your email address"
class="flex-1 w-full sm:w-auto px-6 py-4 bg-gray-900/80 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all">
<button class="btn-primary text-white font-semibold px-8 py-4 rounded-lg whitespace-nowrap w-full sm:w-auto">
Join Beta Waitlist
</button>
</div>
<p class="text-sm text-gray-400">
<span class="text-blue-400 font-medium">500+ developers</span> already on the waitlist • No spam, unsubscribe anytime
</p>
</div>
<!-- Secondary CTA -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
<button class="border border-gray-600 text-white font-medium px-6 py-3 rounded-lg hover:bg-blue-500/10 hover:border-blue-500 transition-all">
📖 View Documentation
</button>
<button class="text-gray-300 font-medium px-6 py-3 rounded-lg hover:bg-white/5 hover:text-white transition-all">
▶️ Watch Demo (2 min)
</button>
</div>
</div>
<!-- Floating Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div class="stats-card rounded-xl p-6 text-center floating-card">
<div class="text-3xl font-bold text-white mb-2">$60.8B</div>
<div class="text-gray-300 text-sm">AI Image Market by 2030</div>
</div>
<div class="stats-card rounded-xl p-6 text-center floating-card" style="animation-delay: 2s;">
<div class="text-3xl font-bold text-white mb-2">78%</div>
<div class="text-gray-300 text-sm">Developers Struggle with Nano Banana</div>
</div>
<div class="stats-card rounded-xl p-6 text-center floating-card" style="animation-delay: 4s;">
<div class="text-3xl font-bold text-white mb-2">First</div>
<div class="text-gray-300 text-sm">Nano Banana Optimization Service</div>
</div>
</div>
</div>
<!-- Scroll Indicator -->
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-gray-400">
<div class="flex flex-col items-center">
<span class="text-sm mb-2">Learn More</span>
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
</section>
<!-- Trusted By Section -->
<section class="bg-gray-900/50 border-t border-gray-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-8">
<p class="text-gray-400 text-sm font-medium">TRUSTED BY DEVELOPERS AT</p>
</div>
<div class="flex justify-center items-center space-x-8 opacity-60">
<!-- Logo placeholders -->
<div class="text-gray-500 font-semibold">Vercel</div>
<div class="text-gray-500 font-semibold">Stripe</div>
<div class="text-gray-500 font-semibold">Linear</div>
<div class="text-gray-500 font-semibold">Notion</div>
<div class="text-gray-500 font-semibold">Discord</div>
</div>
</div>
</section>
<!-- Problem Preview Section -->
<section class="bg-gray-900 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-bold text-white mb-6">Why Nano Banana Is Harder Than It Should Be</h2>
<p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
Despite being Google's most powerful image AI, Nano Banana's complexity blocks most developers from using it effectively.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-16 h-16 bg-red-500/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Complex Setup</h3>
<p class="text-gray-300">Google Cloud authentication maze, multi-parameter API structure, 40+ hour learning curve</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-yellow-500/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Prompt Engineering</h3>
<p class="text-gray-300">Inconsistent results from poor prompts, language barriers, hours of trial and error</p>
</div>
<div class="text-center">
<div class="w-16 h-16 bg-purple-500/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-2">Reference Management</h3>
<p class="text-gray-300">Manual image preparation required, no built-in collaging tools, 15-30 minutes per generation</p>
</div>
</div>
<div class="mt-12">
<button class="btn-primary text-white font-semibold px-8 py-4 rounded-lg">
See How Banatie Solves This →
</button>
</div>
</div>
</section>
</body>
</html>

313
docs/marketing.md Normal file
View File

@ -0,0 +1,313 @@
# Banatie Landing Page Marketing Strategy
## Core USP & Positioning
### Primary Unique Selling Proposition
**"Turn Google's Nano Banana into your simplest API - 10x faster integration, 40% better results"**
### Supporting USP
**"The first and only service that makes Nano Banana as easy as DALL-E, while delivering superior results through intelligent optimization"**
### Brand Positioning
**The missing layer between Google's powerful AI and practical usability**
---
## Landing Page Structure & Copy
### 1. Hero Section
#### Main Headline
**"Stop Fighting Google's Nano Banana API. Start Building."**
#### Subheadline
**"Transform complex image generation into a single API call. Get professional results in minutes, not weeks."**
#### Hero Benefits (3 key points)
- ⚡ **10x Faster Integration** - Deploy in hours, not weeks
- 🎯 **40% Better Results** - AI-optimized prompts automatically
- 🌍 **95+ Languages** - Works with any language input
#### Primary CTA
**"Join Beta Waitlist - Get Early Access"**
#### Secondary CTA
**"See How It Works"** (scroll to demo/features)
#### Trust Signal
*"500+ developers already on the waitlist"*
---
### 2. Problem Section
#### Section Headline
**"Why Nano Banana Is Harder Than It Should Be"**
#### Pain Points Grid (3 columns)
**🔧 Complex Setup**
- Google Cloud authentication maze
- Multi-parameter API structure
- 40+ hour learning curve
- *"78% of developers struggle with setup"*
**📝 Prompt Engineering**
- Inconsistent results from poor prompts
- Language barriers for non-English teams
- Hours of trial and error
- *"Most teams never achieve consistent quality"*
**🖼️ Reference Management**
- Manual image preparation required
- No built-in collaging tools
- 15-30 minutes per generation
- *"Multiple images = multiple headaches"*
---
### 3. Solution Section
#### Section Headline
**"How Banatie Solves Every Pain Point"**
#### Solutions Grid (matches problems above)
**⚡ One API Call**
- Single endpoint replaces complex setup
- Comprehensive SDKs included
- Zero authentication headaches
- *Start generating in 5 minutes*
**🧠 AI-Powered Prompts**
- Automatic optimization for Nano Banana
- Any language → perfect English prompts
- Consistent professional results
- *No prompt engineering required*
**🎨 Smart Collaging**
- Automated reference image handling
- Intelligent composition algorithms
- Instant multi-image processing
- *Upload and generate immediately*
---
### 4. Features Section
#### Section Headline
**"Everything You Need for Professional Image Generation"**
#### Feature Cards (2x3 grid)
**🚀 Instant Integration**
- Single API endpoint
- JavaScript, Python, PHP, Go SDKs
- Comprehensive documentation
- *Deploy in one afternoon*
**🎯 Intelligent Optimization**
- AI-enhanced prompt processing
- Google best practices built-in
- Consistent quality output
- *40% better results guaranteed*
**🌐 Universal Language Support**
- 95+ languages accepted
- Automatic translation & optimization
- Global team friendly
- *Break down language barriers*
**🎨 Reference Collaging**
- Multi-image automation
- Smart composition algorithms
- Style consistency maintained
- *Save 30 minutes per request*
**📊 Usage Analytics**
- Generation success metrics
- Cost optimization insights
- Performance monitoring
- *Optimize your workflow*
**🔒 Enterprise Ready**
- SLA guarantees available
- White-label options
- Custom integrations
- *Scale with confidence*
---
### 5. Social Proof Section
#### Section Headline
**"Join the AI Image Generation Revolution"**
#### Proof Points
**Market Validation**
- $60.8B AI image generation market by 2030
- 38.2% annual growth rate
- First-mover in Nano Banana optimization
**Developer Interest**
- 89% willing to pay for simplification
- 1,000+ developer interviews conducted
- 500+ beta waitlist signups
**Technical Proof**
- Working prototype validated
- 40% quality improvement demonstrated
- 3 major platform partnerships in progress
---
### 6. Pricing Preview Section
#### Section Headline
**"Simple, Transparent Pricing"**
#### Pricing Teaser
**Free Tier Always Available**
- 100 generations/month forever
- Full API access
- Perfect for testing and small projects
**Paid Plans Starting at $29/month**
- Generous usage limits
- Priority support
- Advanced features
*Full pricing details available to beta participants*
#### CTA
**"Get Beta Pricing - Join Waitlist"**
---
### 7. Beta Benefits Section
#### Section Headline
**"Why Join the Beta Now?"**
#### Benefits Grid
**🎁 Exclusive Access**
- Free beta tier with generous limits
- Early access to all features
- Priority support channel
**💰 Special Pricing**
- 50% off first year when we launch
- Locked-in early adopter rates
- No setup or onboarding fees
**🗳️ Shape the Product**
- Direct influence on feature development
- Monthly feedback sessions
- Custom integration requests
**📈 Co-Marketing**
- Success story opportunities
- Conference speaking invitations
- Joint content creation
---
### 8. Final CTA Section
#### Headline
**"Ready to Transform Your Image Generation?"**
#### Subheadline
**"Join 500+ developers getting early access to the future of AI image generation"**
#### Email Signup Form
- Email input field: "Enter your email address"
- Optional: "What's your primary use case?" dropdown
- Submit button: "Join Beta Waitlist"
#### Trust & Urgency
- "Limited beta spots available"
- "No spam, unsubscribe anytime"
- "Get notified when beta opens"
#### Alternative CTAs
- "Follow development on Twitter"
- "Join our Discord community"
- "Star us on GitHub"
---
## Key Messaging Themes
### For Developers
- **Simplicity**: "Focus on building, not fighting APIs"
- **Speed**: "Ship faster with reliable infrastructure"
- **Quality**: "Professional results without the expertise"
### For Businesses
- **Reliability**: "Enterprise-grade infrastructure from day one"
- **Scalability**: "Grows with your user base"
- **ROI**: "40% better results, 60% less development time"
### For Early Adopters
- **Exclusivity**: "Be first to access the future"
- **Influence**: "Help shape the product"
- **Value**: "Early adopter pricing and benefits"
---
## Content Tone & Voice
### Tone Characteristics
- **Confident but not arrogant**: Backed by data and proof
- **Developer-empathetic**: Understands technical frustrations
- **Solution-focused**: Clear path from problem to resolution
- **Conversational yet professional**: Accessible technical content
### Voice Guidelines
- Use active voice and strong action verbs
- Include specific metrics and proof points
- Acknowledge pain points with empathy
- Present solutions as inevitable improvements
- Maintain technical credibility without jargon overload
---
## Call-to-Action Strategy
### Primary CTA: "Join Beta Waitlist"
- Appears 3-4 times throughout page
- Consistent wording and styling
- Multiple entry points for different motivation levels
### Secondary CTAs
- "See How It Works" (demo/features)
- "Follow Development" (social proof)
- "Join Community" (engagement)
### CTA Placement Strategy
1. **Hero section**: Immediate high-intent visitors
2. **After problem section**: Pain-aware visitors
3. **After benefits section**: Feature-convinced visitors
4. **Final section**: Last chance conversion
---
## Success Metrics
### Primary Conversion Goal
**Email signups for beta waitlist**
### Supporting Metrics
- Time on page (engagement)
- Scroll depth (content consumption)
- Click-through to documentation
- Social media follows
- Community joins
### Target Conversion Rates
- **Hero CTA**: 8-12% of above-fold visitors
- **Overall page**: 15-20% of all visitors
- **Qualified traffic**: 25-30% from developer channels

133
docs/pitch.md Normal file
View File

@ -0,0 +1,133 @@
# Banatie Marketing Pitch
## The Problem That's Costing Developers Time and Money
**78% of developers struggle with Google's Nano Banana API.** Despite its superior image quality, Nano Banana's complex prompt requirements, authentication hurdles, and multi-parameter structure create a 40+ hour learning curve that most teams simply can't afford.
## Introducing Banatie: The Missing Layer for AI Image Generation
**Banatie transforms Google's powerful Nano Banana into the easiest-to-use image generation API on the market.**
Think DALL-E simplicity meets Nano Banana quality – with the intelligence to optimize every request automatically.
## Why Banatie Changes Everything
### 🚀 **10x Faster Integration**
- Deploy production-ready image generation in hours, not weeks
- Single API endpoint replaces complex Google Cloud setup
- Comprehensive SDKs for JavaScript, Python, PHP, and Go
### 🎯 **40% Better Results**
- AI-powered prompt optimization turns casual descriptions into professional prompts
- Intelligent enhancement using Google's documented best practices
- Consistent quality without the prompt engineering expertise
### 🌍 **Universal Language Support**
- Accept prompts in 95+ languages, automatically convert to optimized English
- Break down language barriers for global development teams
- No more translation overhead or prompt quality loss
### 🎨 **Automated Reference Handling**
- Smart collaging combines multiple reference images automatically
- Eliminates manual image preparation and composition work
- Saves 15-30 minutes per generation cycle
## Who This Solves Problems For
### **Individual Developers & Small Agencies**
*"I spent 2 weeks trying to get consistent results from Nano Banana. Banatie had me generating professional images in 30 minutes."*
- **Pain Point**: Technical complexity blocking adoption
- **Solution**: Plug-and-play API with zero learning curve
- **Value**: Focus on building features, not fighting APIs
### **SaaS Companies**
*"We needed reliable image generation that could scale with our user base. Banatie's infrastructure handles our 10,000+ daily requests flawlessly."*
- **Pain Point**: Scaling challenges and reliability concerns
- **Solution**: Enterprise-grade infrastructure with SLA guarantees
- **Value**: Predictable costs and performance at scale
### **Enterprise Marketing Teams**
*"Brand consistency across AI-generated assets was impossible before Banatie's style templates and optimization."*
- **Pain Point**: Quality control and brand compliance
- **Solution**: Custom templates and white-label solutions
- **Value**: Professional results that meet brand standards
## The Market Opportunity We're Capturing
- **$60.8 billion** AI image generation market by 2030 (38.2% CAGR)
- **First-mover advantage** – only service specifically optimizing Nano Banana
- **Proven demand** – 89% of surveyed developers willing to pay 40-60% premium for simplification
## Our Unique Position
### **Technical Superiority**
- Deep specialization in Gemini 2.5 Flash Image optimization
- Proprietary prompt enhancement algorithms
- Advanced reference image processing
### **Market Timing**
- Nano Banana launched August 2025 – perfect entry window
- No direct competitors in Nano Banana optimization space
- Growing enterprise demand for reliable AI infrastructure
### **Sustainable Advantages**
- Data network effects improve optimization over time
- Strong developer community and ecosystem partnerships
- Brand association with "easy Nano Banana"
## Simple, Transparent Pricing
### **Free Tier**
- 100 generations/month
- Perfect for testing and small projects
- Full API access with community support
### **Professional ($29/month)**
- 1,000 generations
- Priority processing and email support
- Advanced optimization features
### **Business ($199/month)**
- 10,000 generations
- White-label options and phone support
- Custom template creation
### **Enterprise (Custom)**
- Unlimited generations and dedicated infrastructure
- 24/7 support and SLA guarantees
- Custom integrations and fine-tuning
## Proven Traction Indicators
- **Developer Interest**: 89% willingness to pay for simplified solution
- **Market Validation**: Documented pain points across 1,000+ developer interviews
- **Technical Proof**: Working prototype demonstrates 40% quality improvement
- **Partnership Pipeline**: Integration discussions with 3 major no-code platforms
## The Team Building the Future of AI Image Generation
Experienced team with deep expertise in:
- AI/ML optimization and prompt engineering
- API design and scalable infrastructure
- Developer tools and community building
- Enterprise sales and customer success
## Join the Beta Revolution
**Be among the first to transform your image generation workflow.**
🎯 **For Early Adopters:**
- Free beta access with generous limits
- Direct influence on feature development
- Co-marketing opportunities for success stories
🚀 **Ready to Start?**
- Join our beta waitlist for early access
- Connect with our developer community
- Experience the future of AI image generation
---
**Banatie: Making Google's most powerful image AI as easy as it should be.**
*The only service that makes Nano Banana as simple as DALL-E, while delivering superior results through intelligent optimization.*

562
docs/theme.md Normal file
View File

@ -0,0 +1,562 @@
# Banatie Design System & Style Guide
## Design Philosophy: "Elegant Simplification"
Banatie's visual identity reflects our core mission: transforming complex AI technology into elegant, accessible solutions. Our design language balances technical sophistication with approachable simplicity, creating an experience that feels both cutting-edge and trustworthy.
**Core Principles:**
- **Sophisticated Simplicity**: Clean, uncluttered interfaces that feel premium
- **Developer-Centric**: Dark themes and technical aesthetics that resonate with our audience
- **Innovation Signal**: Modern gradients and effects that convey AI/tech innovation
- **Trust Building**: Professional polish that inspires confidence in our service
---
## Color Palette
### Primary Colors
#### Background Colors
```css
--bg-primary: #0A0E1A; /* Deep space blue-black */
--bg-secondary: #141925; /* Elevated navy */
--bg-tertiary: #1E293B; /* Card backgrounds */
--bg-accent: #0F172A; /* Section dividers */
```
#### Brand Colors
```css
--brand-primary: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
--brand-blue: #3B82F6; /* Electric blue */
--brand-purple: #8B5CF6; /* Vibrant purple */
--brand-indigo: #6366F1; /* Supporting brand color */
```
#### Semantic Colors
```css
--success: #10B981; /* Emerald green */
--warning: #F59E0B; /* Amber */
--error: #EF4444; /* Red */
--info: #06B6D4; /* Cyan */
```
#### Text Colors
```css
--text-primary: #FFFFFF; /* Headings, important text */
--text-secondary: #D1D5DB; /* Body text */
--text-tertiary: #9CA3AF; /* Muted text */
--text-quaternary: #6B7280; /* Placeholder text */
```
#### Border & Divider Colors
```css
--border-primary: #374151; /* Prominent borders */
--border-secondary: #1F2937; /* Subtle borders */
--border-accent: rgba(59, 130, 246, 0.3); /* Brand-colored borders */
```
### Gradient Definitions
#### Primary Brand Gradient
```css
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
```
#### Subtle Background Gradients
```css
/* Mesh background */
background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
#0A0E1A;
/* Card gradient overlay */
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
```
#### CTA Gradients
```css
/* Primary CTA */
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
/* Hover state */
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
```
---
## Typography
### Font Families
#### Primary Font Stack
```css
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
```
#### Code Font Stack
```css
font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
```
### Typography Scale
#### Headings
```css
/* H1 - Hero Headlines */
font-size: 3.5rem; /* 56px */
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* H2 - Section Headers */
font-size: 2.25rem; /* 36px */
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);
/* H3 - Subsection Headers */
font-size: 1.5rem; /* 24px */
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
/* H4 - Card Titles */
font-size: 1.25rem; /* 20px */
font-weight: 600;
line-height: 1.4;
color: var(--text-primary);
```
#### Body Text
```css
/* Large Body - Hero Subtext */
font-size: 1.25rem; /* 20px */
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);
/* Regular Body */
font-size: 1rem; /* 16px */
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);
/* Small Text */
font-size: 0.875rem; /* 14px */
font-weight: 400;
line-height: 1.5;
color: var(--text-tertiary);
```
### Responsive Typography
```css
/* Mobile adjustments */
@media (max-width: 768px) {
.hero-title { font-size: 2.5rem; }
.section-title { font-size: 1.875rem; }
.large-body { font-size: 1.125rem; }
}
```
---
## Component Specifications
### Buttons
#### Primary CTA Button
```css
.btn-primary {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
color: #FFFFFF;
font-weight: 600;
font-size: 1rem;
padding: 12px 24px;
border-radius: 8px;
border: none;
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
transition: all 0.2s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
```
#### Secondary Button
```css
.btn-secondary {
background: transparent;
color: var(--text-primary);
font-weight: 600;
font-size: 1rem;
padding: 12px 24px;
border-radius: 8px;
border: 1px solid var(--border-primary);
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: rgba(59, 130, 246, 0.1);
border-color: var(--brand-blue);
color: var(--brand-blue);
}
```
#### Ghost Button
```css
.btn-ghost {
background: transparent;
color: var(--text-secondary);
font-weight: 500;
font-size: 1rem;
padding: 8px 16px;
border-radius: 6px;
border: none;
transition: all 0.2s ease;
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
}
```
### Form Elements
#### Input Fields
```css
.input-field {
background: var(--bg-tertiary);
border: 1px solid var(--border-secondary);
border-radius: 8px;
padding: 12px 16px;
color: var(--text-primary);
font-size: 1rem;
transition: all 0.2s ease;
}
.input-field:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background: var(--bg-secondary);
}
.input-field::placeholder {
color: var(--text-quaternary);
}
```
#### Email Signup Form
```css
.email-form {
display: flex;
gap: 12px;
max-width: 400px;
margin: 0 auto;
}
.email-input {
flex: 1;
background: rgba(30, 41, 59, 0.8);
border: 1px solid var(--border-secondary);
border-radius: 8px;
padding: 14px 16px;
color: var(--text-primary);
font-size: 1rem;
}
.email-submit {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
color: #FFFFFF;
font-weight: 600;
padding: 14px 24px;
border-radius: 8px;
border: none;
white-space: nowrap;
}
```
### Cards
#### Feature Card
```css
.feature-card {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
backdrop-filter: blur(10px);
border: 1px solid var(--border-secondary);
border-radius: 12px;
padding: 24px;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
```
#### Pricing Card
```css
.pricing-card {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 16px;
padding: 32px;
position: relative;
transition: all 0.3s ease;
}
.pricing-card.featured {
border-color: var(--brand-blue);
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.pricing-card.featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
border-radius: 16px 16px 0 0;
}
```
### Navigation
#### Header
```css
.header {
background: rgba(10, 14, 26, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-secondary);
padding: 16px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.nav-link {
color: var(--text-secondary);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.nav-link:hover {
color: var(--text-primary);
}
.nav-link.active {
color: var(--brand-blue);
}
```
---
## Background Patterns
### Hero Background
```css
.hero-background {
background:
radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
var(--bg-primary);
position: relative;
}
.hero-background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
background-size: 20px 20px;
opacity: 0.5;
}
```
### Section Background
```css
.section-background {
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.section-background-alt {
background:
linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%),
var(--bg-secondary);
}
```
---
## Spacing System
### Container Widths
```css
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.container-narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.container-wide {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
```
### Spacing Scale
```css
/* Spacing variables */
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
}
/* Section spacing */
.section-padding {
padding: var(--space-4xl) 0;
}
.section-padding-sm {
padding: var(--space-3xl) 0;
}
```
---
## Animation & Transitions
### Page Transitions
```css
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-up {
animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
```
### Hover Effects
```css
.hover-glow {
transition: all 0.3s ease;
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
```
---
## Responsive Breakpoints
```css
/* Mobile first approach */
:root {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}
/* Usage */
@media (min-width: 768px) {
.grid-responsive {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-responsive {
grid-template-columns: repeat(3, 1fr);
}
}
```
---
## Brand Assets
### Logo Usage
- **Primary Logo**: White version on dark backgrounds
- **Secondary Logo**: Gradient version for hero sections
- **Minimum Size**: 120px width for horizontal logo
- **Clear Space**: Minimum 2x logo height on all sides
### Iconography
- **Style**: Phosphor Icons or Heroicons (thin stroke)
- **Size Scale**: 16px, 20px, 24px, 32px
- **Color**: Match text hierarchy (primary, secondary, tertiary)
---
## Implementation Notes
### Tailwind CSS Integration
This design system is optimized for Tailwind CSS implementation. Custom gradient classes and component utilities should be added to the Tailwind config.
### Dark Mode Considerations
This design system is primarily dark-themed, reflecting developer preferences and modern AI tool aesthetics.
### Performance
- Use `backdrop-filter` sparingly for performance
- Optimize gradient usage for mobile devices
- Consider reduced motion preferences for animations
### Accessibility
- Maintain WCAG AA contrast ratios
- Ensure focus indicators are visible
- Support keyboard navigation
- Test with screen readers