From 38336b67d67ccc920cd74bfa8203281b8eeb6f20 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 22 Sep 2025 00:35:34 +0700 Subject: [PATCH] draft: first version --- docs/components.html | 361 ++++++++++++++++++++++++++ docs/features-grid.html | 425 ++++++++++++++++++++++++++++++ docs/hero-section.html | 288 ++++++++++++++++++++ docs/marketing.md | 313 ++++++++++++++++++++++ docs/pitch.md | 133 ++++++++++ docs/theme.md | 562 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 2082 insertions(+) create mode 100644 docs/components.html create mode 100644 docs/features-grid.html create mode 100644 docs/hero-section.html create mode 100644 docs/marketing.md create mode 100644 docs/pitch.md create mode 100644 docs/theme.md diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 0000000..2dbf476 --- /dev/null +++ b/docs/components.html @@ -0,0 +1,361 @@ + + + + + + Banatie Components Storybook + + + + +
+ + +
+

Banatie Component Library

+

Design system examples and component showcase

+
+ + +
+

Typography

+ +
+
+

Headings

+
+

H1 Hero Title

+

H2 Section Header

+

H3 Subsection

+

H4 Card Title

+
+
+ +
+

Body Text

+
+

Large body text for hero descriptions and important content.

+

Regular body text for general content and descriptions that need good readability.

+

Small text for captions, metadata, and secondary information.

+ Code text example +
+
+
+
+ + +
+

Color Palette

+ +
+
+
+

Primary BG

+
+
+
+

Secondary BG

+
+
+
+

Brand Gradient

+
+
+
+

Brand Blue

+
+
+
+

Brand Purple

+
+
+
+

Success

+
+
+
+ + +
+

Buttons

+ +
+
+

Primary Buttons

+
+ + + +
+
+ +
+

Secondary Buttons

+
+ + + +
+
+ +
+

Ghost Buttons

+
+ + + +
+
+
+
+ + +
+

Form Elements

+ +
+
+

Input Fields

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

Email Signup Form

+
+
+

Join the Beta

+

Get early access to Banatie

+
+
+ + +
+

No spam, unsubscribe anytime

+
+
+
+
+ + +
+

Cards

+ +
+
+
+ + + +
+

10x Faster Integration

+

Deploy production-ready image generation in hours, not weeks with our simple API.

+
+ +
+
+ + + +
+

40% Better Results

+

AI-powered prompt optimization ensures consistent, professional-quality image generation.

+
+ +
+
+ + + +
+

95+ Languages

+

Accept prompts in any language and automatically convert to optimized English.

+
+
+
+ + +
+

Pricing Cards

+ +
+
+

Free

+
+ $0 + /month +
+
    +
  • 100 generations/month
    • +
  • Community support
    • +
  • Basic optimization
    • +
+ +
+ +
+
+ Popular +
+

Professional

+
+ $29 + /month +
+
    +
  • 1,000 generations/month
    • +
  • Email support
    • +
  • Advanced optimization
    • +
  • Priority processing
    • +
+ +
+ +
+

Enterprise

+
+ Custom +
+
    +
  • Unlimited generations
    • +
  • 24/7 support
    • +
  • Custom integrations
    • +
  • SLA guarantees
    • +
+ +
+
+
+ + +
+

Badges & Tags

+ +
+ Beta Access + Available Now + AI Powered + Coming Soon + Featured +
+
+ +
+ + \ No newline at end of file diff --git a/docs/features-grid.html b/docs/features-grid.html new file mode 100644 index 0000000..df5ce42 --- /dev/null +++ b/docs/features-grid.html @@ -0,0 +1,425 @@ + + + + + + Banatie Features Grid + + + + + + +
+
+
+

+ How Banatie Solves Every Pain Point +

+

+ Transform your development workflow with intelligent automation that eliminates complexity without sacrificing power. +

+
+ +
+ +
+
+ + + +
+

⚡ One API Call

+

+ Single endpoint replaces complex setup. Comprehensive SDKs included. Zero authentication headaches. +

+
+
5 minutes
+
Start generating images
+
+
+ + +
+
+ + + +
+

🧠 AI-Powered Prompts

+

+ Automatic optimization for Nano Banana. Any language → perfect English prompts. Consistent professional results. +

+
+
40% better
+
Quality improvement
+
+
+ + +
+
+ + + +
+

🎨 Smart Collaging

+

+ Automated reference image handling. Intelligent composition algorithms. Instant multi-image processing. +

+
+
30 minutes
+
Saved per request
+
+
+
+
+
+ + +
+
+
+

+ Everything You Need for Professional Image Generation +

+

+ A complete toolkit that scales from your first API call to enterprise-grade deployments. +

+
+ +
+ +
+
+
+ + + +
+

Instant Integration

+
+

Single API endpoint, comprehensive SDKs for JavaScript, Python, PHP, Go. Complete documentation.

+
Deploy in one afternoon
+
+ + +
+
+
+ + + +
+

Intelligent Optimization

+
+

AI-enhanced prompt processing with Google best practices built-in. Consistent quality output.

+
40% better results guaranteed
+
+ + +
+
+
+ + + +
+

Universal Language

+
+

95+ languages accepted. Automatic translation & optimization. Global team friendly.

+
Break down language barriers
+
+ + +
+
+
+ + + +
+

Reference Collaging

+
+

Multi-image automation with smart composition algorithms. Style consistency maintained.

+
Save 30 minutes per request
+
+ + +
+
+
+ + + +
+

Usage Analytics

+
+

Generation success metrics, cost optimization insights, and performance monitoring dashboard.

+
Optimize your workflow
+
+ + +
+
+
+ + + +
+

Enterprise Ready

+
+

SLA guarantees available, white-label options, and custom integrations for enterprise needs.

+
Scale with confidence
+
+
+
+
+ + +
+
+
+

+ Simple API, Powerful Results +

+

+ See how easy it is to generate professional images with just a few lines of code. +

+
+ +
+ +
+
+
+
+
+
+
+
+ main.js +
+
+
import { Banatie } from '@banatie/sdk';
+
+
const banatie = new Banatie('your-api-key');
+
+
const result = await banatie.generate({
+
prompt: "A futuristic robot in a neon city",
+
style: "cyberpunk",
+
references: ["ref1.jpg", "ref2.jpg"]
+
});
+
+
console.log(result.imageUrl);
+
+
+
+ + +
+
+
+ + + +
+
+

Automatic Prompt Optimization

+

Your simple prompt gets enhanced with Google's best practices automatically.

+
+
+ +
+
+ + + +
+
+

Smart Reference Handling

+

Multiple reference images get intelligently combined into the perfect composition.

+
+
+ +
+
+ + + +
+
+

Production Ready

+

Error handling, retries, and monitoring built-in for enterprise reliability.

+
+
+
+
+
+
+ + +
+
+
+

+ Join the AI Image Generation Revolution +

+

+ Developers and businesses worldwide are already transforming their workflows with Banatie. +

+
+ +
+ +
+
$60.8B
+
AI Image Market by 2030
+
38.2% annual growth rate
+
+ + +
+
500+
+
Developers on Waitlist
+
Growing daily
+
+ + +
+
89%
+
Willing to Pay Premium
+
For simplified AI generation
+
+
+ + +
+
+
+
+ JS +
+
+
Jake Stevens
+
Lead Developer, TechCorp
+
+
+

+ "I spent 2 weeks trying to get consistent results from Nano Banana. Banatie had me generating professional images in 30 minutes." +

+
+ +
+
+
+ ML +
+
+
Maria Lopez
+
CTO, StartupXYZ
+
+
+

+ "We needed reliable image generation that could scale with our user base. Banatie's infrastructure handles our 10,000+ daily requests flawlessly." +

+
+ +
+
+
+ RC +
+
+
Robert Chen
+
Creative Director, Agency
+
+
+

+ "Brand consistency across AI-generated assets was impossible before Banatie's style templates and optimization." +

+
+
+
+
+ + + \ No newline at end of file diff --git a/docs/hero-section.html b/docs/hero-section.html new file mode 100644 index 0000000..891897d --- /dev/null +++ b/docs/hero-section.html @@ -0,0 +1,288 @@ + + + + + + Banatie Hero Section + + + + + + + + + +
+
+
+ + +
+ + 🚀 Now in Beta - Limited Access Available + +
+ + +

+ Stop Fighting
+ Google's Nano Banana API.
+ Start Building. +

+ + +

+ Transform complex image generation into a single API call.
+ Get professional results in minutes, not weeks. +

+ + +
+
+
+ ⚡ 10x Faster Integration +
+
+
+ 🎯 40% Better Results +
+
+
+ 🌍 95+ Languages +
+
+ + +
+
+ + +
+

+ 500+ developers already on the waitlist • No spam, unsubscribe anytime +

+
+ + +
+ + +
+ +
+ + +
+
+
$60.8B
+
AI Image Market by 2030
+
+
+
78%
+
Developers Struggle with Nano Banana
+
+
+
First
+
Nano Banana Optimization Service
+
+
+
+ + +
+
+ Learn More + + + +
+
+
+ + +
+
+
+

TRUSTED BY DEVELOPERS AT

+
+
+ +
Vercel
+
Stripe
+
Linear
+
Notion
+
Discord
+
+
+
+ + +
+
+

Why Nano Banana Is Harder Than It Should Be

+

+ Despite being Google's most powerful image AI, Nano Banana's complexity blocks most developers from using it effectively. +

+ +
+
+
+ + + +
+

Complex Setup

+

Google Cloud authentication maze, multi-parameter API structure, 40+ hour learning curve

+
+ +
+
+ + + +
+

Prompt Engineering

+

Inconsistent results from poor prompts, language barriers, hours of trial and error

+
+ +
+
+ + + +
+

Reference Management

+

Manual image preparation required, no built-in collaging tools, 15-30 minutes per generation

+
+
+ +
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/marketing.md b/docs/marketing.md new file mode 100644 index 0000000..0e90ac0 --- /dev/null +++ b/docs/marketing.md @@ -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 \ No newline at end of file diff --git a/docs/pitch.md b/docs/pitch.md new file mode 100644 index 0000000..bc0eb73 --- /dev/null +++ b/docs/pitch.md @@ -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.* \ No newline at end of file diff --git a/docs/theme.md b/docs/theme.md new file mode 100644 index 0000000..f725f9a --- /dev/null +++ b/docs/theme.md @@ -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 \ No newline at end of file