nitrostack 1.0.65 → 1.0.67

package/src/studio/branding.md

@@ -0,0 +1,807 @@
+# Nitrocloud Frontend Branding Guide
+
+## Overview
+This document defines the visual identity, design system, and UI/UX philosophy of the Nitrocloud frontend application. Use this guide to maintain consistency across all new features, pages, and components.
+
+---
+
+## 🎨 Color Palette
+
+### Brand Colors
+
+#### Primary Brand Color
+```css
+/* Nitrocloud Blue */
+--nitrocloud-primary: hsl(217, 91%, 60%)      /* #3B9FFF - Main brand blue */
+--nitrocloud-primary-dark: hsl(217, 91%, 50%) /* #1A8CFF - Darker variant */
+```
+
+**Usage**: Logo, primary CTAs, key UI elements, focus states
+
+#### Brand Gradient
+```css
+/* Signature Nitrocloud Gradient */
+--nitrocloud-gradient-start: hsl(217, 91%, 60%)  /* Blue */
+--nitrocloud-gradient-end: hsl(221, 83%, 53%)    /* Deep Blue-Purple */
+
+/* CSS Utility Classes */
+.nitrocloud-gradient {
+  background: linear-gradient(135deg, 
+    hsl(var(--nitrocloud-gradient-start)), 
+    hsl(var(--nitrocloud-gradient-end))
+  );
+}
+
+.nitrocloud-text-gradient {
+  background: linear-gradient(135deg, 
+    hsl(var(--nitrocloud-gradient-start)), 
+    hsl(var(--nitrocloud-gradient-end))
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+```
+
+**Usage**: 
+- Hero sections
+- Premium buttons and CTAs
+- Feature highlights
+- Brand moments
+
+### Semantic Colors
+
+#### Light Mode
+```css
+--background: hsl(0, 0%, 100%)                 /* #FFFFFF */
+--foreground: hsl(222.2, 84%, 4.9%)            /* #020617 - Near black */
+--primary: hsl(221.2, 83.2%, 53.3%)            /* #3B82F6 - Primary blue */
+--primary-foreground: hsl(210, 40%, 98%)       /* #F8FAFC */
+--secondary: hsl(210, 40%, 96.1%)              /* #F1F5F9 */
+--muted: hsl(210, 40%, 96.1%)                  /* #F1F5F9 */
+--muted-foreground: hsl(215.4, 16.3%, 46.9%)   /* #64748B */
+--border: hsl(214.3, 31.8%, 91.4%)             /* #E2E8F0 */
+--destructive: hsl(0, 84.2%, 60.2%)            /* #EF4444 */
+```
+
+#### Dark Mode
+```css
+--background: hsl(222.2, 84%, 4.9%)            /* #020617 - Deep dark blue */
+--foreground: hsl(210, 40%, 98%)               /* #F8FAFC */
+--primary: hsl(217, 91%, 60%)                  /* #3B9FFF - Brighter in dark */
+--primary-foreground: hsl(222.2, 47.4%, 11.2%) /* #0F172A */
+--secondary: hsl(217.2, 32.6%, 17.5%)          /* #1E293B */
+--muted: hsl(217.2, 32.6%, 17.5%)              /* #1E293B */
+--muted-foreground: hsl(215, 20.2%, 65.1%)     /* #94A3B8 */
+--border: hsl(217.2, 32.6%, 17.5%)             /* #1E293B */
+--destructive: hsl(0, 62.8%, 30.6%)            /* #991B1B */
+```
+
+### Feature-Specific Color Palettes
+
+#### Plan Tiers
+```typescript
+const planColors = {
+  FREE: {
+    gradient: 'from-blue-500/20 via-cyan-500/20 to-blue-500/20',
+    border: 'border-blue-500/30',
+    badge: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+    icon: 'text-blue-500'
+  },
+  PRO: {
+    gradient: 'from-purple-500/20 via-pink-500/20 to-purple-500/20',
+    border: 'border-purple-500/30',
+    badge: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
+    icon: 'text-purple-500'
+  },
+  ENTERPRISE: {
+    gradient: 'from-amber-500/20 via-orange-500/20 to-amber-500/20',
+    border: 'border-amber-500/30',
+    badge: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    icon: 'text-amber-500'
+  }
+};
+```
+
+#### Feature Highlights
+```css
+/* Used in carousel and feature cards */
+Emerald (Free Forever): from-emerald-50 via-teal-100 to-cyan-200
+Blue-Indigo-Purple (Deploy Fast): from-blue-50 via-indigo-100 to-purple-200
+Cyan-Blue-Indigo (Security): from-cyan-50 via-blue-100 to-indigo-200
+Sky-Blue-Cyan (Auto-scaling): from-sky-50 via-blue-100 to-cyan-200
+```
+
+---
+
+## 🔤 Typography
+
+### Font Family
+```typescript
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+```
+
+**Primary Font**: [Inter](https://fonts.google.com/specimen/Inter) - A modern, highly legible sans-serif font optimized for UI
+
+### Type Scale
+
+#### Headings
+```css
+/* Hero Headings */
+.text-7xl   /* 72px / 4.5rem - Landing page hero */
+.text-6xl   /* 60px / 3.75rem - Large hero */
+.text-5xl   /* 48px / 3rem - Page hero */
+
+/* Section Headings */
+.text-4xl   /* 36px / 2.25rem - Major sections */
+.text-3xl   /* 30px / 1.875rem - Section headers */
+.text-2xl   /* 24px / 1.5rem - Subsection headers */
+.text-xl    /* 20px / 1.25rem - Card titles */
+.text-lg    /* 18px / 1.125rem - Small headers */
+
+/* Body Text */
+.text-base  /* 16px / 1rem - Default body */
+.text-sm    /* 14px / 0.875rem - Secondary text */
+.text-xs    /* 12px / 0.75rem - Captions, labels */
+```
+
+#### Font Weights
+```css
+font-bold       /* 700 - Headings, emphasis */
+font-semibold   /* 600 - Subheadings, card titles */
+font-medium     /* 500 - Buttons, labels */
+font-normal     /* 400 - Body text */
+```
+
+#### Line Heights & Spacing
+```css
+tracking-tight  /* -0.025em - Large headings */
+tracking-normal /* 0em - Default */
+leading-tight   /* 1.25 - Headings */
+leading-normal  /* 1.5 - Body text */
+leading-relaxed /* 1.625 - Long-form content */
+```
+
+---
+
+## 📐 Spacing & Layout
+
+### Base Spacing Unit
+The design system uses Tailwind's spacing scale (4px base unit):
+
+```css
+/* Common Spacing */
+space-y-2  /* 8px - Tight spacing */
+space-y-4  /* 16px - Default component spacing */
+space-y-6  /* 24px - Section spacing */
+space-y-8  /* 32px - Large section spacing */
+space-y-12 /* 48px - Major section breaks */
+space-y-16 /* 64px - Page section spacing */
+```
+
+### Container Widths
+```css
+max-w-xs    /* 320px - Tight containers */
+max-w-sm    /* 384px - Small forms */
+max-w-md    /* 448px - Auth pages */
+max-w-lg    /* 512px - Modal dialogs */
+max-w-xl    /* 576px - Forms */
+max-w-2xl   /* 672px - Content width */
+max-w-4xl   /* 896px - Large content */
+max-w-6xl   /* 1152px - Page max width */
+max-w-7xl   /* 1280px - Full layout */
+
+/* Global Container */
+container   /* Centered, responsive container with padding */
+```
+
+### Border Radius
+```css
+--radius: 0.75rem; /* 12px - Global default */
+
+rounded-sm  /* 4px - Small elements */
+rounded-md  /* 8px - Buttons, inputs */
+rounded-lg  /* 12px - Cards, dialogs (default) */
+rounded-xl  /* 16px - Large cards */
+rounded-2xl /* 24px - Hero sections */
+rounded-full /* Badges, avatars */
+```
+
+---
+
+## 🎯 Component Patterns
+
+### Buttons
+
+#### Variants
+```typescript
+// Primary (Brand)
+<Button className="nitrocloud-gradient border-0">
+  Deploy Now
+</Button>
+
+// Default (Primary Color)
+<Button variant="default">
+  Continue
+</Button>
+
+// Outline
+<Button variant="outline">
+  Cancel
+</Button>
+
+// Ghost (Minimal)
+<Button variant="ghost">
+  Learn More
+</Button>
+
+// Destructive
+<Button variant="destructive">
+  Delete Project
+</Button>
+
+// Link
+<Button variant="link">
+  View Details
+</Button>
+```
+
+#### Sizes
+```typescript
+<Button size="sm">Small</Button>      /* 32px height */
+<Button size="default">Default</Button> /* 40px height */
+<Button size="lg">Large</Button>       /* 44px height */
+<Button size="icon">Icon</Button>      /* 40x40px square */
+```
+
+#### Loading State
+```typescript
+<Button disabled={isLoading}>
+  {isLoading ? (
+    <>
+      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      Processing...
+    </>
+  ) : (
+    'Submit'
+  )}
+</Button>
+```
+
+### Cards
+
+#### Standard Card
+```typescript
+<Card className="border-0 shadow-2xl">
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    Content
+  </CardContent>
+  <CardFooter>
+    Footer actions
+  </CardFooter>
+</Card>
+```
+
+#### Gradient Accent Card
+```typescript
+<Card className="border-2 bg-gradient-to-br from-purple-500/20 via-pink-500/20 to-purple-500/20 border-purple-500/30">
+  {/* Plan tier card, feature highlight */}
+</Card>
+```
+
+#### Glass Card
+```typescript
+<Card className="bg-background/60 backdrop-blur-sm border-border/50">
+  {/* Floating cards, overlays */}
+</Card>
+```
+
+### Badges
+
+#### Status Badges
+```typescript
+// Active/Success
+<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20">
+  Active
+</Badge>
+
+// Warning
+<Badge className="bg-amber-500/10 text-amber-600 border-amber-500/20">
+  Pending
+</Badge>
+
+// Error
+<Badge className="bg-red-500/10 text-red-600 border-red-500/20">
+  Failed
+</Badge>
+
+// Info
+<Badge className="bg-blue-500/10 text-blue-600 border-blue-500/20">
+  Info
+</Badge>
+```
+
+### Icons
+
+**Icon Library**: [Lucide React](https://lucide.dev/)
+
+#### Size Guidelines
+```typescript
+<Icon className="h-4 w-4" />  /* Small - Inline text, buttons */
+<Icon className="h-5 w-5" />  /* Default - Most UI elements */
+<Icon className="h-6 w-6" />  /* Medium - Card headers */
+<Icon className="h-8 w-8" />  /* Large - Feature icons */
+<Icon className="h-12 w-12" /> /* XL - Hero sections */
+```
+
+#### Common Icons
+```typescript
+// Navigation & Actions
+import { Menu, X, ChevronRight, ArrowRight, ExternalLink } from 'lucide-react';
+
+// Status
+import { CheckCircle2, XCircle, AlertCircle, Info, Loader2 } from 'lucide-react';
+
+// Features
+import { Rocket, Zap, Shield, Cloud, Code, Database } from 'lucide-react';
+
+// Social
+import { Github, Twitter, Mail } from 'lucide-react';
+
+// UI
+import { Plus, Trash2, Edit, Eye, EyeOff, Search, Filter } from 'lucide-react';
+```
+
+---
+
+## 🏗️ Layout Structure
+
+### Page Architecture
+
+#### Full Page Layout
+```typescript
+<div className="min-h-screen bg-background">
+  {/* Header/Navigation */}
+  <header className="border-b">
+    {/* Navigation content */}
+  </header>
+  
+  {/* Main Content */}
+  <main className="container mx-auto px-4 py-8">
+    {/* Page content */}
+  </main>
+  
+  {/* Footer (optional) */}
+  <footer className="border-t mt-auto">
+    {/* Footer content */}
+  </footer>
+</div>
+```
+
+#### Auth Pages Layout
+```typescript
+<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+  <div className="w-full max-w-6xl flex flex-col lg:flex-row gap-8">
+    {/* Feature Carousel (Left) */}
+    <div className="flex-1">
+      <FeatureCarousel />
+    </div>
+    
+    {/* Auth Form (Right) */}
+    <div className="w-full lg:w-[480px]">
+      <Card className="border-0 shadow-2xl">
+        {/* Form content */}
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+#### Dashboard Layout
+```typescript
+<div className="min-h-screen bg-background">
+  <DashboardHeader />
+  
+  <div className="container mx-auto px-4 py-8">
+    {/* Page Header */}
+    <div className="flex items-center justify-between mb-8">
+      <div>
+        <h1 className="text-3xl font-bold">Page Title</h1>
+        <p className="text-muted-foreground">Description</p>
+      </div>
+      <Button className="nitrocloud-gradient">
+        Primary Action
+      </Button>
+    </div>
+    
+    {/* Content Grid */}
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Sidebar or filters */}
+      {/* Main content */}
+    </div>
+  </div>
+</div>
+```
+
+### Responsive Breakpoints
+```typescript
+/* Tailwind Breakpoints */
+sm: '640px'   /* Small tablets */
+md: '768px'   /* Tablets */
+lg: '1024px'  /* Desktops */
+xl: '1280px'  /* Large desktops */
+2xl: '1536px' /* Extra large screens */
+```
+
+---
+
+## ✨ Visual Effects & Animations
+
+### Gradients
+
+#### Background Gradients
+```css
+/* Hero Sections */
+bg-gradient-to-br from-primary/5 via-background to-primary/5
+
+/* Decorative Backgrounds */
+bg-gradient-to-br from-slate-50 to-slate-100
+dark:from-slate-900 dark:to-slate-800
+```
+
+#### Text Gradients
+```typescript
+<h1 className="bg-gradient-to-r from-primary via-primary/80 to-primary/60 bg-clip-text text-transparent">
+  Gradient Heading
+</h1>
+```
+
+### Shadows
+```css
+shadow-sm    /* Subtle elevation */
+shadow-md    /* Default cards */
+shadow-lg    /* Prominent cards */
+shadow-xl    /* Floating elements */
+shadow-2xl   /* Hero cards, modals */
+```
+
+### Animations
+
+#### Fade In
+```css
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+```
+
+#### Spin (Loading)
+```typescript
+<Loader2 className="h-4 w-4 animate-spin" />
+```
+
+#### Transitions
+```css
+/* Default Button/Card Hover */
+transition-colors /* Color changes */
+transition-opacity /* Fade effects */
+transition-all /* Multi-property */
+
+/* Duration */
+duration-150 /* 150ms - Fast interactions */
+duration-300 /* 300ms - Standard */
+duration-500 /* 500ms - Smooth effects */
+```
+
+### Hover States
+```css
+/* Buttons */
+hover:opacity-80
+hover:bg-primary/90
+
+/* Cards */
+hover:shadow-lg
+hover:border-primary/50
+
+/* Links */
+hover:underline
+hover:text-primary
+```
+
+---
+
+## 🎨 Design Philosophy
+
+### Core Principles
+
+#### 1. **Clarity First**
+- Clean, uncluttered interfaces
+- Clear visual hierarchy
+- Obvious call-to-actions
+- Minimal cognitive load
+
+#### 2. **Modern & Professional**
+- Contemporary design language
+- Subtle gradients and shadows
+- Refined spacing and typography
+- Professional color palette
+
+#### 3. **Accessible by Default**
+- WCAG 2.1 AA compliance
+- Sufficient color contrast
+- Keyboard navigation support
+- Screen reader friendly
+
+#### 4. **Responsive & Adaptive**
+- Mobile-first approach
+- Fluid layouts
+- Touch-friendly interactions
+- Progressive enhancement
+
+#### 5. **Performance Conscious**
+- Optimized images (WebP, AVIF)
+- Lazy loading
+- Minimal animations
+- Fast page loads
+
+### Visual Style
+
+#### **Glass morphism** (Subtle)
+```css
+bg-background/60 backdrop-blur-sm border-border/50
+```
+
+#### **Neumorphism** (Minimal)
+Used sparingly for depth, primarily through shadows
+
+#### **Flat Design 2.0**
+Primary style - flat with subtle depth cues
+
+### Whitespace Usage
+- **Generous spacing** between sections (48-64px)
+- **Comfortable padding** in containers (16-32px)
+- **Breathing room** around text and UI elements
+- **Visual separation** through space, not just lines
+
+---
+
+## 🎭 Brand Voice & Tone
+
+### Visual Tone
+- **Professional** yet approachable
+- **Modern** and cutting-edge
+- **Confident** without arrogance
+- **Clean** and sophisticated
+
+### Key Brand Attributes
+1. **Fast** - Emphasize speed and efficiency
+2. **Reliable** - Convey stability and trust
+3. **Powerful** - Showcase capabilities
+4. **Simple** - Maintain ease of use
+
+---
+
+## 📱 Component Usage Guidelines
+
+### When to Use Gradients
+
+✅ **DO Use:**
+- Primary CTAs (Deploy, Upgrade, etc.)
+- Hero sections and landing pages
+- Brand moments and highlights
+- Premium features
+
+❌ **DON'T Use:**
+- Regular text content
+- Every button
+- Dense data tables
+- Form inputs
+
+### When to Use Shadows
+
+✅ **DO Use:**
+- Cards and containers
+- Modals and dialogs
+- Floating action buttons
+- Dropdown menus
+
+❌ **DON'T Use:**
+- Body text
+- List items
+- Table rows
+- Inline elements
+
+### Color Accessibility
+
+#### Contrast Ratios
+- **Normal text** (16px+): 4.5:1 minimum
+- **Large text** (24px+): 3:1 minimum
+- **UI elements**: 3:1 minimum
+
+#### Testing
+```typescript
+// Primary on background (Light)
+hsl(221.2, 83.2%, 53.3%) on hsl(0, 0%, 100%) = 4.98:1 ✅
+
+// Muted text on background (Light)
+hsl(215.4, 16.3%, 46.9%) on hsl(0, 0%, 100%) = 4.63:1 ✅
+```
+
+---
+
+## 🧩 Reusable Patterns
+
+### Loading States
+```typescript
+{isLoading ? (
+  <div className="flex items-center justify-center py-8">
+    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+  </div>
+) : (
+  <Content />
+)}
+```
+
+### Empty States
+```typescript
+<div className="text-center py-12">
+  <Icon className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+  <h3 className="text-lg font-semibold mb-2">No items found</h3>
+  <p className="text-muted-foreground mb-4">
+    Get started by creating your first item.
+  </p>
+  <Button className="nitrocloud-gradient">
+    Create Item
+  </Button>
+</div>
+```
+
+### Error States
+```typescript
+<div className="rounded-md bg-destructive/10 border border-destructive/20 p-4">
+  <div className="flex items-start gap-3">
+    <AlertCircle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
+    <div>
+      <h4 className="font-semibold text-destructive mb-1">Error Title</h4>
+      <p className="text-sm text-destructive/90">Error message details</p>
+    </div>
+  </div>
+</div>
+```
+
+### Success States
+```typescript
+<div className="rounded-md bg-emerald-500/10 border border-emerald-500/20 p-4">
+  <div className="flex items-center gap-2">
+    <CheckCircle2 className="h-5 w-5 text-emerald-600" />
+    <p className="text-sm text-emerald-600 dark:text-emerald-400">
+      Success message
+    </p>
+  </div>
+</div>
+```
+
+---
+
+## 🔧 Utility Classes Reference
+
+### Custom Utilities (globals.css)
+
+```css
+/* Brand Gradient */
+.nitrocloud-gradient
+.nitrocloud-text-gradient
+
+/* Scrollbars */
+.custom-scrollbar
+
+/* Mobile Fixes */
+.h-screen (iOS fix included)
+```
+
+### Common Class Combinations
+
+```css
+/* Card Container */
+.border-0 .shadow-2xl .rounded-lg
+
+/* Page Section */
+.container .mx-auto .px-4 .py-8
+
+/* Flex Center */
+.flex .items-center .justify-center
+
+/* Text Muted */
+.text-sm .text-muted-foreground
+
+/* Interactive Element */
+.transition-colors .hover:opacity-80 .cursor-pointer
+
+/* Glass Effect */
+.bg-background/60 .backdrop-blur-sm .border-border/50
+```
+
+---
+
+## 📖 Best Practices
+
+### DO's
+✅ Use semantic color variables (--primary, --foreground, etc.)
+✅ Maintain consistent spacing with Tailwind scale
+✅ Apply `.nitrocloud-gradient` for premium CTAs
+✅ Use Lucide icons for consistency
+✅ Follow mobile-first responsive design
+✅ Include loading and empty states
+✅ Test in both light and dark modes
+✅ Use Inter font throughout
+✅ Apply proper heading hierarchy (h1 → h2 → h3)
+
+### DON'Ts
+❌ Don't use arbitrary color values (use CSS variables)
+❌ Don't mix different icon libraries
+❌ Don't override font family
+❌ Don't use inline styles (use Tailwind classes)
+❌ Don't create inconsistent spacing
+❌ Don't forget dark mode variants
+❌ Don't use too many different shadows
+❌ Don't overuse animations
+
+---
+
+## 🚀 Quick Start Checklist
+
+When creating a new page or component:
+
+- [ ] Use Inter font (inherited from layout)
+- [ ] Support both light and dark modes
+- [ ] Apply proper semantic colors (--primary, --foreground, etc.)
+- [ ] Use `.nitrocloud-gradient` for primary CTAs
+- [ ] Include responsive breakpoints (mobile-first)
+- [ ] Add loading, error, and empty states
+- [ ] Use Lucide icons (h-5 w-5 for default)
+- [ ] Apply proper spacing (space-y-4, space-y-6, etc.)
+- [ ] Use Card components for containers
+- [ ] Test keyboard navigation
+- [ ] Verify color contrast (4.5:1 minimum)
+- [ ] Add hover states for interactive elements
+
+---
+
+## 📚 Component Library
+
+**UI Framework**: Custom components built on [Radix UI](https://www.radix-ui.com/) + [Tailwind CSS](https://tailwindcss.com/)
+
+**Component Location**: `/components/ui/`
+
+**Available Components**:
+- Button, Card, Badge, Input, Label
+- Select, Tabs, Dialog, Alert Dialog
+- Dropdown Menu, Progress, Separator, Switch
+
+---
+
+## 🎯 Success Metrics
+
+A well-branded component should:
+1. **Feel familiar** - Consistent with existing design
+2. **Look professional** - Polished and modern
+3. **Be accessible** - WCAG compliant
+4. **Work everywhere** - Responsive and cross-browser
+5. **Load fast** - Optimized performance
+
+---
+
+**Last Updated**: 2025-11-16  
+**Version**: 1.0  
+**Maintained by**: Nitrocloud Design Team  
+**Questions?**: Refer to existing components in `/components/` and `/app/` directories