361 lines
20 KiB
HTML
361 lines
20 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 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> |