288 lines
14 KiB
HTML
288 lines
14 KiB
HTML
<!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> |