Remove old Vuexy wrapper components (AppTextField, AppSelect, AppTextarea, FlashMessages, NotificationBell)
All pages now use native Vuetify components directly. Flash messages are handled by the ToastStack component via Pinia store. Notifications use NotificationPanel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Dev
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1773518893795}
|
||||
18
.superpowers/brainstorm/752312-1773515533/.server.log
Normal file
18
.superpowers/brainstorm/752312-1773515533/.server.log
Normal file
@@ -0,0 +1,18 @@
|
||||
{"type":"server-started","port":61433,"host":"0.0.0.0","url_host":"0.0.0.0","url":"http://0.0.0.0:61433","screen_dir":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/typography-comparison.html"}
|
||||
{"source":"user-event","type":"click","text":"D\n \n Plus Jakarta Sans\n Modern & friendly — Stripe, Figma feel\n Cloud Infrastructure\n Deploy VPS in seconds. Scale without limits.\n High-performance NVMe SSD storage, dedicated vCPUs, and 10Gbps network connectivity. Built for developers who demand reliability.\n \n $4.99\n /month\n \n \n $ ssh root@vps-01.ezscale.cloud","choice":"plus-jakarta","id":null,"timestamp":1773516090128}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/marketing-nav-comparison.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/waiting.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/hero-styles.html"}
|
||||
{"source":"user-event","type":"click","text":"C Illustration-Driven DigitalOcean, Vultr style\n \n \n EZSCALE\n ProductsPricingDocs\n \n \n \n Cloud InfrastructureBuilt for Performance\n Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.\n \n Get Started Free\n View Pricing →\n \n \n \n \n \n \n \n \n \n \n \n Server illustration area","choice":"illustration","id":null,"timestamp":1773516421073}
|
||||
{"source":"user-event","type":"click","text":"B Dark + Subtle Grid Pattern Vercel, Linear style\n \n \n \n \n \n \n EZSCALE\n ProductsPricingDocs\n \n \n Cloud InfrastructureBuilt for Performance\n Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.\n \n Get Started Free\n View Pricing →\n \n \n 99.99%Uptime SLA\n 15+Global Locations\n <1msAvg Latency","choice":"dark-pattern","id":null,"timestamp":1773516422860}
|
||||
{"source":"user-event","type":"click","text":"B Dark + Subtle Grid Pattern Vercel, Linear style\n \n \n \n \n \n \n EZSCALE\n ProductsPricingDocs\n \n \n Cloud InfrastructureBuilt for Performance\n Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.\n \n Get Started Free\n View Pricing →\n \n \n 99.99%Uptime SLA\n 15+Global Locations\n <1msAvg Latency","choice":"dark-pattern","id":null,"timestamp":1773516423941}
|
||||
{"source":"user-event","type":"click","text":"C Illustration-Driven DigitalOcean, Vultr style\n \n \n EZSCALE\n ProductsPricingDocs\n \n \n \n Cloud InfrastructureBuilt for Performance\n Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.\n \n Get Started Free\n View Pricing →\n \n \n \n \n \n \n \n \n \n \n \n Server illustration area","choice":"illustration","id":null,"timestamp":1773516424653}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/waiting-2.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/hero-visuals.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/waiting-3.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/pricing-cards.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/waiting-4.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/color-palettes.html"}
|
||||
{"type":"screen-added","file":"/opt/projects/ezscale_site/.superpowers/brainstorm/752312-1773515533/waiting-5.html"}
|
||||
{"type":"server-stopped","reason":"idle timeout"}
|
||||
1
.superpowers/brainstorm/752312-1773515533/.server.pid
Normal file
1
.superpowers/brainstorm/752312-1773515533/.server.pid
Normal file
@@ -0,0 +1 @@
|
||||
752320
|
||||
153
.superpowers/brainstorm/752312-1773515533/color-palettes.html
Normal file
153
.superpowers/brainstorm/752312-1773515533/color-palettes.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
|
||||
.palette-row { display: flex; gap: 4px; margin: 12px 0 8px; }
|
||||
.swatch { flex: 1; height: 48px; border-radius: 6px; display: flex; align-items: flex-end; padding: 4px 6px; }
|
||||
.swatch span { font-size: 9px; font-family: 'JetBrains Mono'; opacity: 0.8; }
|
||||
.palette-demo { margin-top: 16px; padding: 20px; border-radius: 10px; }
|
||||
.demo-btn { display: inline-block; padding: 8px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; margin-right: 8px; }
|
||||
.demo-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
|
||||
.demo-stat { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
|
||||
.semantic-row { display: flex; gap: 12px; margin-top: 12px; }
|
||||
.semantic-swatch { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
|
||||
</style>
|
||||
|
||||
<h2>Color Palette Comparison</h2>
|
||||
<p class="subtitle">Each palette shown with full shade range, UI samples, and semantic colors. Click to select.</p>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:32px;margin-top:24px;">
|
||||
|
||||
<!-- A: Deep Navy Blue -->
|
||||
<div class="card" data-choice="navy" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<div><span class="label">A</span> <strong>Deep Navy Blue</strong></div>
|
||||
<span style="font-size:12px;opacity:0.4;">Authoritative, enterprise</span>
|
||||
</div>
|
||||
<div class="palette-row">
|
||||
<div class="swatch" style="background:#0c1929;"><span style="color:#fff;">#0c1929</span></div>
|
||||
<div class="swatch" style="background:#142640;"><span style="color:#fff;">#142640</span></div>
|
||||
<div class="swatch" style="background:#1e3a5f;"><span style="color:#fff;">#1e3a5f</span></div>
|
||||
<div class="swatch" style="background:#1d4ed8;"><span style="color:#fff;">#1d4ed8</span></div>
|
||||
<div class="swatch" style="background:#2563eb;"><span style="color:#fff;">#2563eb</span></div>
|
||||
<div class="swatch" style="background:#3b82f6;"><span style="color:#fff;">#3b82f6</span></div>
|
||||
<div class="swatch" style="background:#60a5fa;"><span style="color:#000;">#60a5fa</span></div>
|
||||
<div class="swatch" style="background:#93c5fd;"><span style="color:#000;">#93c5fd</span></div>
|
||||
</div>
|
||||
<div class="palette-demo" style="background:#0c1929;border:1px solid rgba(30,58,95,0.4);">
|
||||
<div style="display:flex;gap:20px;align-items:center;margin-bottom:16px;">
|
||||
<span class="demo-btn" style="background:#1d4ed8;color:white;">Deploy Server</span>
|
||||
<span class="demo-btn" style="background:transparent;color:#60a5fa;border:1px solid rgba(29,78,216,0.4);">View Plans</span>
|
||||
<span class="demo-chip" style="background:rgba(29,78,216,0.2);color:#60a5fa;">Active</span>
|
||||
<span class="demo-stat" style="color:#2563eb;">99.99%</span>
|
||||
</div>
|
||||
<div class="semantic-row">
|
||||
<div><div class="semantic-swatch" style="background:#1d4ed8;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Primary</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#16a34a;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Success</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#dc2626;">!</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Error</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#d97706;">⚠</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Warning</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#64748b;">i</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Secondary</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B: Vibrant Electric Blue -->
|
||||
<div class="card" data-choice="electric" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<div><span class="label">B</span> <strong>Vibrant Electric Blue</strong></div>
|
||||
<span style="font-size:12px;opacity:0.4;">Modern, energetic</span>
|
||||
</div>
|
||||
<div class="palette-row">
|
||||
<div class="swatch" style="background:#0a0f1a;"><span style="color:#fff;">#0a0f1a</span></div>
|
||||
<div class="swatch" style="background:#111827;"><span style="color:#fff;">#111827</span></div>
|
||||
<div class="swatch" style="background:#1e293b;"><span style="color:#fff;">#1e293b</span></div>
|
||||
<div class="swatch" style="background:#2563eb;"><span style="color:#fff;">#2563eb</span></div>
|
||||
<div class="swatch" style="background:#3b82f6;"><span style="color:#fff;">#3b82f6</span></div>
|
||||
<div class="swatch" style="background:#60a5fa;"><span style="color:#000;">#60a5fa</span></div>
|
||||
<div class="swatch" style="background:#93c5fd;"><span style="color:#000;">#93c5fd</span></div>
|
||||
<div class="swatch" style="background:#dbeafe;"><span style="color:#000;">#dbeafe</span></div>
|
||||
</div>
|
||||
<div class="palette-demo" style="background:#0a0f1a;border:1px solid rgba(59,130,246,0.15);">
|
||||
<div style="display:flex;gap:20px;align-items:center;margin-bottom:16px;">
|
||||
<span class="demo-btn" style="background:#3b82f6;color:white;">Deploy Server</span>
|
||||
<span class="demo-btn" style="background:transparent;color:#60a5fa;border:1px solid rgba(59,130,246,0.3);">View Plans</span>
|
||||
<span class="demo-chip" style="background:rgba(59,130,246,0.15);color:#60a5fa;">Active</span>
|
||||
<span class="demo-stat" style="color:#3b82f6;">99.99%</span>
|
||||
</div>
|
||||
<div class="semantic-row">
|
||||
<div><div class="semantic-swatch" style="background:#3b82f6;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Primary</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#22c55e;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Success</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#ef4444;">!</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Error</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#f59e0b;">⚠</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Warning</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#6b7280;">i</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Secondary</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C: Teal / Cyan Blue -->
|
||||
<div class="card" data-choice="teal" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<div><span class="label">C</span> <strong>Teal / Cyan Blue</strong></div>
|
||||
<span style="font-size:12px;opacity:0.4;">Distinctive, cool</span>
|
||||
</div>
|
||||
<div class="palette-row">
|
||||
<div class="swatch" style="background:#0a1419;"><span style="color:#fff;">#0a1419</span></div>
|
||||
<div class="swatch" style="background:#0f1f2a;"><span style="color:#fff;">#0f1f2a</span></div>
|
||||
<div class="swatch" style="background:#164e63;"><span style="color:#fff;">#164e63</span></div>
|
||||
<div class="swatch" style="background:#0891b2;"><span style="color:#fff;">#0891b2</span></div>
|
||||
<div class="swatch" style="background:#06b6d4;"><span style="color:#fff;">#06b6d4</span></div>
|
||||
<div class="swatch" style="background:#22d3ee;"><span style="color:#000;">#22d3ee</span></div>
|
||||
<div class="swatch" style="background:#67e8f9;"><span style="color:#000;">#67e8f9</span></div>
|
||||
<div class="swatch" style="background:#cffafe;"><span style="color:#000;">#cffafe</span></div>
|
||||
</div>
|
||||
<div class="palette-demo" style="background:#0a1419;border:1px solid rgba(8,145,178,0.2);">
|
||||
<div style="display:flex;gap:20px;align-items:center;margin-bottom:16px;">
|
||||
<span class="demo-btn" style="background:#0891b2;color:white;">Deploy Server</span>
|
||||
<span class="demo-btn" style="background:transparent;color:#22d3ee;border:1px solid rgba(8,145,178,0.3);">View Plans</span>
|
||||
<span class="demo-chip" style="background:rgba(8,145,178,0.15);color:#22d3ee;">Active</span>
|
||||
<span class="demo-stat" style="color:#06b6d4;">99.99%</span>
|
||||
</div>
|
||||
<div class="semantic-row">
|
||||
<div><div class="semantic-swatch" style="background:#0891b2;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Primary</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#22c55e;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Success</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#ef4444;">!</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Error</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#f59e0b;">⚠</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Warning</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#6b7280;">i</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Secondary</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- D: Royal / Indigo Blue -->
|
||||
<div class="card" data-choice="indigo" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<div><span class="label">D</span> <strong>Royal Indigo Blue</strong></div>
|
||||
<span style="font-size:12px;opacity:0.4;">Premium, distinctive — between purple and blue</span>
|
||||
</div>
|
||||
<div class="palette-row">
|
||||
<div class="swatch" style="background:#0c0a1a;"><span style="color:#fff;">#0c0a1a</span></div>
|
||||
<div class="swatch" style="background:#151030;"><span style="color:#fff;">#151030</span></div>
|
||||
<div class="swatch" style="background:#312e81;"><span style="color:#fff;">#312e81</span></div>
|
||||
<div class="swatch" style="background:#4f46e5;"><span style="color:#fff;">#4f46e5</span></div>
|
||||
<div class="swatch" style="background:#6366f1;"><span style="color:#fff;">#6366f1</span></div>
|
||||
<div class="swatch" style="background:#818cf8;"><span style="color:#000;">#818cf8</span></div>
|
||||
<div class="swatch" style="background:#a5b4fc;"><span style="color:#000;">#a5b4fc</span></div>
|
||||
<div class="swatch" style="background:#e0e7ff;"><span style="color:#000;">#e0e7ff</span></div>
|
||||
</div>
|
||||
<div class="palette-demo" style="background:#0c0a1a;border:1px solid rgba(79,70,229,0.2);">
|
||||
<div style="display:flex;gap:20px;align-items:center;margin-bottom:16px;">
|
||||
<span class="demo-btn" style="background:#4f46e5;color:white;">Deploy Server</span>
|
||||
<span class="demo-btn" style="background:transparent;color:#818cf8;border:1px solid rgba(79,70,229,0.3);">View Plans</span>
|
||||
<span class="demo-chip" style="background:rgba(79,70,229,0.15);color:#818cf8;">Active</span>
|
||||
<span class="demo-stat" style="color:#6366f1;">99.99%</span>
|
||||
</div>
|
||||
<div class="semantic-row">
|
||||
<div><div class="semantic-swatch" style="background:#4f46e5;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Primary</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#22c55e;">✓</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Success</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#ef4444;">!</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Error</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#f59e0b;">⚠</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Warning</div></div>
|
||||
<div><div class="semantic-swatch" style="background:#6b7280;">i</div><div style="font-size:10px;opacity:0.4;margin-top:2px;">Secondary</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
134
.superpowers/brainstorm/752312-1773515533/hero-styles.html
Normal file
134
.superpowers/brainstorm/752312-1773515533/hero-styles.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
.hero-demo { border-radius: 12px; overflow: hidden; min-height: 280px; position: relative; }
|
||||
.hero-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; position: relative; z-index: 2; }
|
||||
.hero-nav-logo { font-weight: 800; font-size: 18px; color: #60a5fa; }
|
||||
.hero-nav-links { display: flex; gap: 24px; font-size: 14px; opacity: 0.5; }
|
||||
.hero-body { padding: 24px 32px 40px; position: relative; z-index: 2; }
|
||||
.hero-body h3 { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; }
|
||||
.hero-body p { font-size: 16px; opacity: 0.6; max-width: 500px; line-height: 1.6; margin-bottom: 20px; }
|
||||
.hero-cta { display: flex; gap: 12px; }
|
||||
.hero-cta .primary { background: #3b82f6; color: white; padding: 12px 28px; border-radius: 10px; font-weight: 600; font-size: 14px; }
|
||||
.hero-cta .secondary { background: rgba(255,255,255,0.08); color: white; padding: 12px 28px; border-radius: 10px; font-weight: 500; font-size: 14px; border: 1px solid rgba(255,255,255,0.12); }
|
||||
.stat-row { display: flex; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.stat-item { font-size: 12px; opacity: 0.4; }
|
||||
.stat-item strong { display: block; font-size: 20px; font-weight: 700; opacity: 1; color: #60a5fa; margin-bottom: 2px; }
|
||||
</style>
|
||||
|
||||
<h2>Marketing Hero Style</h2>
|
||||
<p class="subtitle">Click the hero style that best represents EZSCALE's brand</p>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:32px;margin-top:24px;">
|
||||
|
||||
<!-- Option A: Gradient Backgrounds -->
|
||||
<div class="card" data-choice="gradient" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">A</span> <strong>Gradient Backgrounds</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Cloudflare, OVHcloud style</span></div>
|
||||
<div class="hero-demo" style="background:linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #1e40af 70%, #3b82f6 100%);">
|
||||
<div class="hero-nav">
|
||||
<span class="hero-nav-logo">EZSCALE</span>
|
||||
<div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<h3>Cloud Infrastructure<br>Built for Performance</h3>
|
||||
<p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
|
||||
<div class="hero-cta">
|
||||
<span class="primary">Get Started Free</span>
|
||||
<span class="secondary">View Pricing →</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
|
||||
<div class="stat-item"><strong>15+</strong>Global Locations</div>
|
||||
<div class="stat-item"><strong><1ms</strong>Avg Latency</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B: Dark with Subtle Patterns -->
|
||||
<div class="card" data-choice="dark-pattern" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">B</span> <strong>Dark + Subtle Grid Pattern</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Vercel, Linear style</span></div>
|
||||
<div class="hero-demo" style="background:#0a0a0f;position:relative;">
|
||||
<!-- Grid pattern overlay -->
|
||||
<div style="position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);background-size:48px 48px;"></div>
|
||||
<!-- Radial glow -->
|
||||
<div style="position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(59,130,246,0.12) 0%,transparent 70%);"></div>
|
||||
<div class="hero-nav" style="position:relative;z-index:2;">
|
||||
<span class="hero-nav-logo">EZSCALE</span>
|
||||
<div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
|
||||
</div>
|
||||
<div class="hero-body" style="position:relative;z-index:2;">
|
||||
<h3>Cloud Infrastructure<br>Built for Performance</h3>
|
||||
<p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
|
||||
<div class="hero-cta">
|
||||
<span class="primary">Get Started Free</span>
|
||||
<span class="secondary">View Pricing →</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
|
||||
<div class="stat-item"><strong>15+</strong>Global Locations</div>
|
||||
<div class="stat-item"><strong><1ms</strong>Avg Latency</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option C: Illustration-Driven -->
|
||||
<div class="card" data-choice="illustration" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">C</span> <strong>Illustration-Driven</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean, Vultr style</span></div>
|
||||
<div class="hero-demo" style="background:linear-gradient(180deg, #0c1222 0%, #111827 100%);">
|
||||
<div class="hero-nav">
|
||||
<span class="hero-nav-logo">EZSCALE</span>
|
||||
<div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
|
||||
</div>
|
||||
<div style="display:flex;padding:0 32px 40px;">
|
||||
<div class="hero-body" style="flex:1;padding:24px 0;">
|
||||
<h3>Cloud Infrastructure<br>Built for Performance</h3>
|
||||
<p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
|
||||
<div class="hero-cta">
|
||||
<span class="primary">Get Started Free</span>
|
||||
<span class="secondary">View Pricing →</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Illustration placeholder -->
|
||||
<div style="flex:0 0 280px;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="width:220px;height:180px;border-radius:16px;background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05));border:1px solid rgba(59,130,246,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
|
||||
<div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
|
||||
<div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
|
||||
</div>
|
||||
<div style="width:140px;height:3px;background:rgba(59,130,246,0.2);border-radius:4px;"></div>
|
||||
<div style="font-size:11px;opacity:0.3;">Server illustration area</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option D: Minimal / Strong Typography -->
|
||||
<div class="card" data-choice="minimal-typo" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">D</span> <strong>Minimal + Strong Typography</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Hetzner style — confident, no-nonsense</span></div>
|
||||
<div class="hero-demo" style="background:#0b0e14;">
|
||||
<div class="hero-nav">
|
||||
<span class="hero-nav-logo">EZSCALE</span>
|
||||
<div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
|
||||
</div>
|
||||
<div class="hero-body" style="text-align:center;max-width:none;display:flex;flex-direction:column;align-items:center;">
|
||||
<h3 style="font-size:44px;max-width:600px;letter-spacing:-1px;">Cloud Infrastructure<br>Built for Performance</h3>
|
||||
<p style="text-align:center;max-width:480px;">Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
|
||||
<div class="hero-cta" style="justify-content:center;">
|
||||
<span class="primary">Get Started Free</span>
|
||||
<span class="secondary">View Pricing →</span>
|
||||
</div>
|
||||
<div class="stat-row" style="justify-content:center;border-top:none;padding-top:8px;">
|
||||
<div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
|
||||
<div class="stat-item"><strong>15+</strong>Global Locations</div>
|
||||
<div class="stat-item"><strong><1ms</strong>Avg Latency</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
233
.superpowers/brainstorm/752312-1773515533/hero-visuals.html
Normal file
233
.superpowers/brainstorm/752312-1773515533/hero-visuals.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
|
||||
.hero-wrap { border-radius: 12px; overflow: hidden; position: relative; background: #0a0a0f; }
|
||||
.hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px); background-size: 40px 40px; }
|
||||
.hero-glow { position: absolute; top: -80px; right: 10%; width: 500px; height: 400px; background: radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%); }
|
||||
.hero-content { position: relative; z-index: 2; display: flex; padding: 40px 32px; gap: 40px; align-items: center; }
|
||||
.hero-text { flex: 1; }
|
||||
.hero-text h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
|
||||
.hero-text p { font-size: 14px; opacity: 0.5; line-height: 1.6; }
|
||||
.hero-visual { flex: 0 0 320px; display: flex; align-items: center; justify-content: center; min-height: 240px; }
|
||||
|
||||
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.1; } 100% { transform: scale(1); opacity: 0.3; } }
|
||||
@keyframes data-flow { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
|
||||
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||||
@keyframes dash { to { stroke-dashoffset: -20; } }
|
||||
</style>
|
||||
|
||||
<h2>Hero Visual Elements</h2>
|
||||
<p class="subtitle">Each shown on the dark grid background you selected. Click your preference.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 32px; margin-top: 24px;">
|
||||
|
||||
<!-- A: CSS/SVG Geometric Art -->
|
||||
<div class="card" data-choice="css-geometric" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">A</span> <strong>CSS/SVG Geometric Art</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">No external assets needed</span></div>
|
||||
<div class="hero-wrap">
|
||||
<div class="hero-grid-bg"></div>
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h3>Cloud VPS Hosting</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<!-- CSS Server Rack -->
|
||||
<div style="position:relative;">
|
||||
<!-- Central node -->
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:rgba(59,130,246,0.1);border:2px solid rgba(59,130,246,0.3);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;">
|
||||
<div style="width:40px;height:40px;border-radius:50%;background:rgba(59,130,246,0.2);border:1px solid rgba(59,130,246,0.4);display:flex;align-items:center;justify-content:center;">
|
||||
<div style="font-size:18px;">⚡</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Orbiting nodes -->
|
||||
<div style="position:absolute;top:-50px;left:50%;transform:translateX(-50%);">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out infinite;">
|
||||
<div style="font-size:11px;font-weight:600;color:#60a5fa;">VPS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;top:20px;right:-80px;">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 0.5s infinite;">
|
||||
<div style="font-size:11px;font-weight:600;color:#4ade80;">DB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;top:20px;left:-80px;">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 1s infinite;">
|
||||
<div style="font-size:11px;font-weight:600;color:#fbbf24;">CDN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);">
|
||||
<div style="width:44px;height:44px;border-radius:10px;background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 1.5s infinite;">
|
||||
<div style="font-size:11px;font-weight:600;color:#a855f7;">API</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Connection lines via SVG -->
|
||||
<svg style="position:absolute;top:-50px;left:-80px;width:240px;height:180px;pointer-events:none;z-index:1;" viewBox="0 0 240 180">
|
||||
<line x1="120" y1="30" x2="120" y2="70" stroke="rgba(59,130,246,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
|
||||
<line x1="180" y1="90" x2="160" y2="90" stroke="rgba(34,197,94,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
|
||||
<line x1="60" y1="90" x2="80" y2="90" stroke="rgba(251,191,36,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
|
||||
<line x1="120" y1="110" x2="120" y2="150" stroke="rgba(168,85,247,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B: 3D Render / Static Images -->
|
||||
<div class="card" data-choice="3d-render" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">B</span> <strong>3D Renders / Static Images</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Needs asset creation or purchase</span></div>
|
||||
<div class="hero-wrap">
|
||||
<div class="hero-grid-bg"></div>
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h3>Cloud VPS Hosting</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<!-- Simulated 3D isometric server -->
|
||||
<div style="position:relative;transform:perspective(500px) rotateY(-8deg) rotateX(5deg);">
|
||||
<div style="width:200px;background:linear-gradient(180deg, #1a2744 0%, #0f1a2e 100%);border-radius:12px;border:1px solid rgba(59,130,246,0.15);padding:16px;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(59,130,246,0.05);">
|
||||
<!-- Server unit 1 -->
|
||||
<div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="display:flex;gap:3px;">
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
|
||||
</div>
|
||||
<div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:75%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
|
||||
<span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-01</span>
|
||||
</div>
|
||||
<!-- Server unit 2 -->
|
||||
<div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="display:flex;gap:3px;">
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#fbbf24;"></div>
|
||||
</div>
|
||||
<div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:45%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
|
||||
<span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-02</span>
|
||||
</div>
|
||||
<!-- Server unit 3 -->
|
||||
<div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;display:flex;align-items:center;gap:8px;">
|
||||
<div style="display:flex;gap:3px;">
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
|
||||
</div>
|
||||
<div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:90%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
|
||||
<span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-03</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Shadow/glow under -->
|
||||
<div style="position:absolute;bottom:-12px;left:10%;width:80%;height:20px;background:radial-gradient(ellipse,rgba(59,130,246,0.15),transparent);filter:blur(8px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C: Animated SVG Diagrams -->
|
||||
<div class="card" data-choice="animated-svg" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">C</span> <strong>Animated SVG Diagrams</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Eye-catching, more complex</span></div>
|
||||
<div class="hero-wrap">
|
||||
<div class="hero-grid-bg"></div>
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h3>Cloud VPS Hosting</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<svg width="280" height="200" viewBox="0 0 280 200">
|
||||
<!-- Network nodes -->
|
||||
<circle cx="140" cy="100" r="24" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.4)" stroke-width="1.5"/>
|
||||
<text x="140" y="104" text-anchor="middle" fill="#60a5fa" font-size="10" font-weight="600" font-family="Plus Jakarta Sans">CORE</text>
|
||||
|
||||
<!-- Outer nodes -->
|
||||
<circle cx="60" cy="40" r="18" fill="rgba(59,130,246,0.08)" stroke="rgba(59,130,246,0.2)" stroke-width="1"/>
|
||||
<text x="60" y="44" text-anchor="middle" fill="#60a5fa" font-size="8" font-family="Plus Jakarta Sans">US-E</text>
|
||||
|
||||
<circle cx="220" cy="40" r="18" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.2)" stroke-width="1"/>
|
||||
<text x="220" y="44" text-anchor="middle" fill="#4ade80" font-size="8" font-family="Plus Jakarta Sans">EU-W</text>
|
||||
|
||||
<circle cx="40" cy="140" r="18" fill="rgba(251,191,36,0.08)" stroke="rgba(251,191,36,0.2)" stroke-width="1"/>
|
||||
<text x="40" y="144" text-anchor="middle" fill="#fbbf24" font-size="8" font-family="Plus Jakarta Sans">AP-SE</text>
|
||||
|
||||
<circle cx="240" cy="140" r="18" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.2)" stroke-width="1"/>
|
||||
<text x="240" y="144" text-anchor="middle" fill="#a855f7" font-size="8" font-family="Plus Jakarta Sans">US-W</text>
|
||||
|
||||
<!-- Animated connection lines -->
|
||||
<line x1="78" y1="52" x2="118" y2="84" stroke="rgba(59,130,246,0.2)" stroke-width="1" stroke-dasharray="4 3">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="202" y1="52" x2="162" y2="84" stroke="rgba(34,197,94,0.2)" stroke-width="1" stroke-dasharray="4 3">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="56" y1="124" x2="122" y2="108" stroke="rgba(251,191,36,0.2)" stroke-width="1" stroke-dasharray="4 3">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="224" y1="124" x2="158" y2="108" stroke="rgba(168,85,247,0.2)" stroke-width="1" stroke-dasharray="4 3">
|
||||
<animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
|
||||
<!-- Pulse rings on center -->
|
||||
<circle cx="140" cy="100" r="32" fill="none" stroke="rgba(59,130,246,0.15)" stroke-width="1">
|
||||
<animate attributeName="r" values="32;48;32" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0;0.3" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="140" cy="100" r="40" fill="none" stroke="rgba(59,130,246,0.1)" stroke-width="1">
|
||||
<animate attributeName="r" values="40;60;40" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0;0.2" dur="3s" begin="0.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- Data packets flowing -->
|
||||
<circle r="2" fill="#60a5fa">
|
||||
<animateMotion dur="2s" repeatCount="indefinite" path="M78,52 L118,84"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#4ade80">
|
||||
<animateMotion dur="2.2s" repeatCount="indefinite" path="M202,52 L162,84"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#fbbf24">
|
||||
<animateMotion dur="2.4s" repeatCount="indefinite" path="M56,124 L122,108"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#a855f7">
|
||||
<animateMotion dur="1.8s" repeatCount="indefinite" path="M224,124 L158,108"/>
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- D: Minimal Abstract Shapes -->
|
||||
<div class="card" data-choice="minimal-abstract" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">D</span> <strong>Minimal Abstract Shapes</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Low effort, clean accent</span></div>
|
||||
<div class="hero-wrap">
|
||||
<div class="hero-grid-bg"></div>
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h3>Cloud VPS Hosting</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div style="position:relative;width:200px;height:200px;">
|
||||
<!-- Abstract circles -->
|
||||
<div style="position:absolute;top:20px;right:20px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(59,130,246,0.12);"></div>
|
||||
<div style="position:absolute;top:40px;right:40px;width:80px;height:80px;border-radius:50%;border:1px solid rgba(59,130,246,0.08);"></div>
|
||||
<div style="position:absolute;top:55px;right:55px;width:50px;height:50px;border-radius:50%;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);"></div>
|
||||
<!-- Floating dots -->
|
||||
<div style="position:absolute;top:10px;left:30px;width:6px;height:6px;border-radius:50%;background:rgba(59,130,246,0.3);animation:float 4s ease-in-out infinite;"></div>
|
||||
<div style="position:absolute;bottom:30px;right:10px;width:4px;height:4px;border-radius:50%;background:rgba(59,130,246,0.2);animation:float 3s ease-in-out 0.5s infinite;"></div>
|
||||
<div style="position:absolute;top:80px;left:10px;width:8px;height:8px;border-radius:50%;background:rgba(59,130,246,0.15);animation:float 5s ease-in-out 1s infinite;"></div>
|
||||
<!-- Subtle lines -->
|
||||
<div style="position:absolute;top:35px;left:50px;width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.15),transparent);"></div>
|
||||
<div style="position:absolute;bottom:50px;left:20px;width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.1),transparent);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,129 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
.nav-demo { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 8px; }
|
||||
.nav-content { padding: 32px; min-height: 200px; }
|
||||
.nav-content h4 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
|
||||
.nav-content p { font-size: 14px; opacity: 0.5; }
|
||||
.feature-pills { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
|
||||
.feature-pill { background: rgba(59,130,246,0.1); color: #60a5fa; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
|
||||
</style>
|
||||
|
||||
<h2>Marketing Site Navigation</h2>
|
||||
<p class="subtitle">Click the navigation style that fits EZSCALE best</p>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:32px;margin-top:24px;">
|
||||
|
||||
<!-- Option A: Horizontal Top Navbar -->
|
||||
<div class="card" data-choice="horizontal" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">A — Horizontal Top Navbar</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean, Vultr, Hetzner style</span></div>
|
||||
<div class="nav-demo">
|
||||
<!-- Navbar -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.08);">
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<span style="font-weight:800;font-size:18px;color:#60a5fa;">EZSCALE</span>
|
||||
<div style="display:flex;gap:24px;font-size:14px;">
|
||||
<span style="opacity:0.9;font-weight:500;">Products</span>
|
||||
<span style="opacity:0.5;">Pricing</span>
|
||||
<span style="opacity:0.5;">Docs</span>
|
||||
<span style="opacity:0.5;">About</span>
|
||||
<span style="opacity:0.5;">Contact</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;">
|
||||
<span style="font-size:14px;opacity:0.6;">Log In</span>
|
||||
<span style="background:#3b82f6;color:white;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;">Get Started</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page content -->
|
||||
<div class="nav-content" style="background:linear-gradient(180deg, rgba(59,130,246,0.05) 0%, transparent 100%);">
|
||||
<h4>Cloud VPS Hosting</h4>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
<div class="feature-pills">
|
||||
<span class="feature-pill">NVMe SSD</span>
|
||||
<span class="feature-pill">10Gbps Network</span>
|
||||
<span class="feature-pill">99.99% Uptime</span>
|
||||
<span class="feature-pill">Root Access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option B: Vertical Sidebar -->
|
||||
<div class="card" data-choice="sidebar" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">B — Vertical Sidebar</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Current EZSCALE style — app-like feel</span></div>
|
||||
<div class="nav-demo">
|
||||
<div style="display:flex;">
|
||||
<!-- Sidebar -->
|
||||
<div style="width:220px;min-height:260px;background:rgba(255,255,255,0.03);border-right:1px solid rgba(255,255,255,0.08);padding:20px 16px;">
|
||||
<span style="font-weight:800;font-size:16px;color:#60a5fa;display:block;margin-bottom:24px;">EZSCALE</span>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;font-size:13px;">
|
||||
<div style="padding:10px 12px;border-radius:8px;background:linear-gradient(90deg,#3b82f6,rgba(59,130,246,0.7));color:white;font-weight:500;">Products</div>
|
||||
<div style="padding:10px 12px;opacity:0.5;">Pricing</div>
|
||||
<div style="padding:10px 12px;opacity:0.5;">Documentation</div>
|
||||
<div style="padding:10px 12px;opacity:0.5;">About</div>
|
||||
<div style="padding:10px 12px;opacity:0.5;">Contact</div>
|
||||
<div style="margin-top:16px;padding:10px 12px;opacity:0.4;font-size:12px;border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;">Log In</div>
|
||||
<div style="padding:8px 12px;background:#3b82f6;color:white;border-radius:8px;text-align:center;font-weight:600;font-size:13px;margin-top:4px;">Get Started</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page content -->
|
||||
<div class="nav-content" style="flex:1;">
|
||||
<h4>Cloud VPS Hosting</h4>
|
||||
<p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
<div class="feature-pills">
|
||||
<span class="feature-pill">NVMe SSD</span>
|
||||
<span class="feature-pill">10Gbps Network</span>
|
||||
<span class="feature-pill">99.99% Uptime</span>
|
||||
<span class="feature-pill">Root Access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Option C: Transparent / Minimal Header -->
|
||||
<div class="card" data-choice="transparent" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">C — Transparent / Minimal Header</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Vercel, Cloudflare style — goes solid on scroll</span></div>
|
||||
<div class="nav-demo">
|
||||
<!-- Transparent navbar overlaying hero -->
|
||||
<div style="position:relative;">
|
||||
<div style="background:linear-gradient(180deg, #0c1425 0%, #162036 100%);min-height:260px;padding-top:0;">
|
||||
<!-- Navbar floating on top -->
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 32px;">
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<span style="font-weight:800;font-size:18px;color:#60a5fa;">EZSCALE</span>
|
||||
<div style="display:flex;gap:24px;font-size:14px;">
|
||||
<span style="opacity:0.8;font-weight:500;">Products</span>
|
||||
<span style="opacity:0.4;">Pricing</span>
|
||||
<span style="opacity:0.4;">Docs</span>
|
||||
<span style="opacity:0.4;">About</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;">
|
||||
<span style="font-size:14px;opacity:0.5;">Log In</span>
|
||||
<span style="background:rgba(59,130,246,0.15);color:#60a5fa;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid rgba(59,130,246,0.3);">Get Started</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hero content -->
|
||||
<div style="padding:32px 32px 40px;">
|
||||
<h4 style="font-size:28px;margin-bottom:8px;">Cloud VPS Hosting</h4>
|
||||
<p style="opacity:0.5;max-width:500px;">Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
|
||||
<div class="feature-pills" style="margin-top:20px;">
|
||||
<span class="feature-pill">NVMe SSD</span>
|
||||
<span class="feature-pill">10Gbps Network</span>
|
||||
<span class="feature-pill">99.99% Uptime</span>
|
||||
<span class="feature-pill">Root Access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scroll indicator -->
|
||||
<div style="text-align:center;padding:8px;font-size:11px;opacity:0.3;background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.05);">
|
||||
↑ Navbar becomes solid with blur backdrop on scroll ↑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
143
.superpowers/brainstorm/752312-1773515533/mobile-nav.html
Normal file
143
.superpowers/brainstorm/752312-1773515533/mobile-nav.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
|
||||
.phone-frame {
|
||||
width: 320px;
|
||||
height: 580px;
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #0a0a0f;
|
||||
}
|
||||
.phone-notch {
|
||||
width: 120px;
|
||||
height: 24px;
|
||||
background: #000;
|
||||
border-radius: 0 0 16px 16px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.phone-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: rgba(10,10,15,0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.phone-logo { font-weight: 800; font-size: 15px; color: #60a5fa; }
|
||||
.hamburger { width: 22px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
|
||||
.hamburger span { display: block; height: 2px; background: rgba(255,255,255,0.7); border-radius: 2px; }
|
||||
.phone-content { padding: 20px 16px; }
|
||||
.phone-content h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 8px; }
|
||||
.phone-content p { font-size: 13px; opacity: 0.5; line-height: 1.5; }
|
||||
.nav-item { padding: 14px 16px; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.nav-item-active { color: #60a5fa; }
|
||||
.nav-cta { margin: 16px; padding: 12px; background: #1d4ed8; border-radius: 999px; text-align: center; font-weight: 600; font-size: 14px; color: white; }
|
||||
</style>
|
||||
|
||||
<h2>Mobile Navigation Styles</h2>
|
||||
<p class="subtitle">Each shown in a phone frame mockup. Click to select your preference.</p>
|
||||
|
||||
<div style="display:flex;gap:32px;justify-content:center;margin-top:32px;flex-wrap:wrap;">
|
||||
|
||||
<!-- A: Hamburger Slide-in -->
|
||||
<div class="card" data-choice="slide-in" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
||||
<div style="margin-bottom:12px;"><span class="label">A</span> <strong>Slide-in Panel</strong></div>
|
||||
<div class="phone-frame" style="margin:0 auto;">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="phone-header">
|
||||
<span class="phone-logo">EZSCALE</span>
|
||||
<div class="hamburger"><span></span><span></span><span></span></div>
|
||||
</div>
|
||||
<!-- Slide-in panel from right -->
|
||||
<div style="position:absolute;top:0;right:0;width:75%;height:100%;background:rgba(12,14,20,0.98);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,0.08);z-index:5;padding-top:70px;">
|
||||
<div class="nav-item nav-item-active">Home</div>
|
||||
<div class="nav-item">VPS Hosting</div>
|
||||
<div class="nav-item">Dedicated Servers</div>
|
||||
<div class="nav-item">Web Hosting</div>
|
||||
<div class="nav-item">Game Servers</div>
|
||||
<div class="nav-item">Pricing</div>
|
||||
<div class="nav-item">About</div>
|
||||
<div class="nav-item">Contact</div>
|
||||
<div class="nav-cta">Get Started</div>
|
||||
<div style="padding:16px;text-align:center;font-size:13px;opacity:0.4;">Log In</div>
|
||||
</div>
|
||||
<!-- Overlay -->
|
||||
<div style="position:absolute;top:0;left:0;width:25%;height:100%;background:rgba(0,0,0,0.5);z-index:4;"></div>
|
||||
<div class="phone-content" style="opacity:0.3;">
|
||||
<h3>Cloud Infrastructure</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:12px;opacity:0.4;margin-top:12px;">Standard pattern — slides from right</p>
|
||||
</div>
|
||||
|
||||
<!-- B: Bottom Sheet -->
|
||||
<div class="card" data-choice="bottom-sheet" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
||||
<div style="margin-bottom:12px;"><span class="label">B</span> <strong>Bottom Sheet</strong></div>
|
||||
<div class="phone-frame" style="margin:0 auto;">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="phone-header">
|
||||
<span class="phone-logo">EZSCALE</span>
|
||||
<div class="hamburger"><span></span><span></span><span></span></div>
|
||||
</div>
|
||||
<div class="phone-content" style="opacity:0.3;">
|
||||
<h3>Cloud Infrastructure</h3>
|
||||
<p>Deploy high-performance virtual servers in seconds.</p>
|
||||
</div>
|
||||
<!-- Overlay -->
|
||||
<div style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:4;"></div>
|
||||
<!-- Bottom sheet -->
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;background:rgba(15,17,25,0.98);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);border-radius:20px 20px 0 0;z-index:5;padding:8px 0 20px;">
|
||||
<!-- Handle -->
|
||||
<div style="width:40px;height:4px;background:rgba(255,255,255,0.2);border-radius:4px;margin:8px auto 16px;"></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 12px;">
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(29,78,216,0.1);text-align:center;font-size:13px;font-weight:500;color:#60a5fa;">Home</div>
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">VPS</div>
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Dedicated</div>
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Web</div>
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Gaming</div>
|
||||
<div style="padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);text-align:center;font-size:13px;opacity:0.7;">Pricing</div>
|
||||
</div>
|
||||
<div style="padding:8px 12px 0;">
|
||||
<div class="nav-cta" style="margin:12px 0 0;">Get Started</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:12px;opacity:0.4;margin-top:12px;">App-like — slides up from bottom</p>
|
||||
</div>
|
||||
|
||||
<!-- C: Full-screen Overlay -->
|
||||
<div class="card" data-choice="fullscreen" onclick="toggleSelect(this)" style="padding:24px;cursor:pointer;text-align:center;">
|
||||
<div style="margin-bottom:12px;"><span class="label">C</span> <strong>Full-screen Overlay</strong></div>
|
||||
<div class="phone-frame" style="margin:0 auto;">
|
||||
<div class="phone-notch"></div>
|
||||
<!-- Full screen nav -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(180deg, #0c1929 0%, #0a0f1a 100%);z-index:5;display:flex;flex-direction:column;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:36px 16px 12px;">
|
||||
<span class="phone-logo">EZSCALE</span>
|
||||
<div style="font-size:20px;opacity:0.6;cursor:pointer;">✕</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 24px;">
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;color:#60a5fa;">Home</div>
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">VPS Hosting</div>
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Dedicated</div>
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Web Hosting</div>
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Game Servers</div>
|
||||
<div style="font-size:28px;font-weight:700;padding:12px 0;opacity:0.6;">Pricing</div>
|
||||
</div>
|
||||
<div style="padding:20px 24px 32px;">
|
||||
<div class="nav-cta" style="margin:0;">Get Started</div>
|
||||
<div style="text-align:center;padding:12px;font-size:14px;opacity:0.4;">Log In</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:12px;opacity:0.4;margin-top:12px;">Bold — takes over entire screen</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
174
.superpowers/brainstorm/752312-1773515533/pricing-cards.html
Normal file
174
.superpowers/brainstorm/752312-1773515533/pricing-cards.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }
|
||||
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.plan-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||||
.plan-price { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
|
||||
.plan-period { font-size: 13px; opacity: 0.4; font-weight: 400; }
|
||||
.plan-desc { font-size: 13px; opacity: 0.5; margin: 8px 0 16px; line-height: 1.5; }
|
||||
.plan-features { list-style: none; padding: 0; margin: 0 0 20px; }
|
||||
.plan-features li { font-size: 13px; padding: 6px 0; display: flex; align-items: center; gap: 8px; opacity: 0.7; }
|
||||
.plan-features li::before { content: '✓'; color: #3b82f6; font-weight: 700; font-size: 12px; }
|
||||
.plan-btn { display: block; width: 100%; padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 14px; border: none; cursor: pointer; }
|
||||
.plan-btn-primary { background: #3b82f6; color: white; }
|
||||
.plan-btn-outline { background: transparent; color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }
|
||||
.badge-popular { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
|
||||
</style>
|
||||
|
||||
<h2>Pricing Card Styles</h2>
|
||||
<p class="subtitle">Click the card style that fits EZSCALE best</p>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:40px;margin-top:24px;">
|
||||
|
||||
<!-- Style A: Bordered with Hover -->
|
||||
<div class="card" data-choice="bordered" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">A</span> <strong>Bordered Cards + Hover Lift</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Hetzner / Vultr style</span></div>
|
||||
<div style="padding:20px;background:#0a0a0f;">
|
||||
<div class="plan-grid">
|
||||
<!-- Starter -->
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px;transition:all 0.2s;">
|
||||
<div class="plan-name">Starter</div>
|
||||
<div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Perfect for small projects and development environments.</div>
|
||||
<ul class="plan-features">
|
||||
<li>1 vCPU Core</li>
|
||||
<li>2 GB RAM</li>
|
||||
<li>40 GB NVMe SSD</li>
|
||||
<li>2 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline">Get Started</button>
|
||||
</div>
|
||||
<!-- Pro (featured) -->
|
||||
<div style="border:2px solid rgba(59,130,246,0.5);border-radius:12px;padding:24px;position:relative;box-shadow:0 0 30px rgba(59,130,246,0.1);">
|
||||
<span class="badge-popular" style="background:rgba(59,130,246,0.15);color:#60a5fa;">Most Popular</span>
|
||||
<div class="plan-name">Professional</div>
|
||||
<div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Ideal for growing applications and production workloads.</div>
|
||||
<ul class="plan-features">
|
||||
<li>4 vCPU Cores</li>
|
||||
<li>8 GB RAM</li>
|
||||
<li>160 GB NVMe SSD</li>
|
||||
<li>5 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-primary">Get Started</button>
|
||||
</div>
|
||||
<!-- Enterprise -->
|
||||
<div style="border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:24px;">
|
||||
<div class="plan-name">Enterprise</div>
|
||||
<div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
|
||||
<ul class="plan-features">
|
||||
<li>8 vCPU Cores</li>
|
||||
<li>32 GB RAM</li>
|
||||
<li>400 GB NVMe SSD</li>
|
||||
<li>10 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Style B: Glass Morphism -->
|
||||
<div class="card" data-choice="glass" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">B</span> <strong>Glass Morphism Cards</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Modern, premium feel</span></div>
|
||||
<div style="padding:20px;background:#0a0a0f;position:relative;overflow:hidden;">
|
||||
<!-- Background blobs -->
|
||||
<div style="position:absolute;top:-40px;left:20%;width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,0.12),transparent 70%);"></div>
|
||||
<div style="position:absolute;bottom:-40px;right:20%;width:200px;height:200px;background:radial-gradient(circle,rgba(168,85,247,0.08),transparent 70%);"></div>
|
||||
<div class="plan-grid" style="position:relative;z-index:1;">
|
||||
<!-- Starter -->
|
||||
<div style="background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;">
|
||||
<div class="plan-name">Starter</div>
|
||||
<div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Perfect for small projects and development environments.</div>
|
||||
<ul class="plan-features">
|
||||
<li>1 vCPU Core</li>
|
||||
<li>2 GB RAM</li>
|
||||
<li>40 GB NVMe SSD</li>
|
||||
<li>2 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline" style="border-radius:12px;">Get Started</button>
|
||||
</div>
|
||||
<!-- Pro (featured) -->
|
||||
<div style="background:rgba(59,130,246,0.06);backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,0.15);border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(59,130,246,0.08);">
|
||||
<span class="badge-popular" style="background:rgba(59,130,246,0.2);color:#60a5fa;backdrop-filter:blur(10px);">Most Popular</span>
|
||||
<div class="plan-name">Professional</div>
|
||||
<div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Ideal for growing applications and production workloads.</div>
|
||||
<ul class="plan-features">
|
||||
<li>4 vCPU Cores</li>
|
||||
<li>8 GB RAM</li>
|
||||
<li>160 GB NVMe SSD</li>
|
||||
<li>5 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-primary" style="border-radius:12px;">Get Started</button>
|
||||
</div>
|
||||
<!-- Enterprise -->
|
||||
<div style="background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;">
|
||||
<div class="plan-name">Enterprise</div>
|
||||
<div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
|
||||
<ul class="plan-features">
|
||||
<li>8 vCPU Cores</li>
|
||||
<li>32 GB RAM</li>
|
||||
<li>400 GB NVMe SSD</li>
|
||||
<li>10 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline" style="border-radius:12px;">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Style C: Flat with Color Accents -->
|
||||
<div class="card" data-choice="flat-accent" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
|
||||
<div style="padding:12px 16px;"><span class="label">C</span> <strong>Flat Cards + Color Accent Bar</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean style — data-focused</span></div>
|
||||
<div style="padding:20px;background:#0a0a0f;">
|
||||
<div class="plan-grid">
|
||||
<!-- Starter -->
|
||||
<div style="background:rgba(255,255,255,0.03);border-radius:12px;padding:24px;border-top:3px solid rgba(255,255,255,0.15);">
|
||||
<div class="plan-name">Starter</div>
|
||||
<div class="plan-price">$4.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Perfect for small projects and development environments.</div>
|
||||
<ul class="plan-features">
|
||||
<li>1 vCPU Core</li>
|
||||
<li>2 GB RAM</li>
|
||||
<li>40 GB NVMe SSD</li>
|
||||
<li>2 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline">Get Started</button>
|
||||
</div>
|
||||
<!-- Pro (featured) -->
|
||||
<div style="background:rgba(59,130,246,0.04);border-radius:12px;padding:24px;border-top:3px solid #3b82f6;">
|
||||
<span class="badge-popular" style="background:rgba(59,130,246,0.15);color:#60a5fa;">Most Popular</span>
|
||||
<div class="plan-name">Professional</div>
|
||||
<div class="plan-price">$12.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">Ideal for growing applications and production workloads.</div>
|
||||
<ul class="plan-features">
|
||||
<li>4 vCPU Cores</li>
|
||||
<li>8 GB RAM</li>
|
||||
<li>160 GB NVMe SSD</li>
|
||||
<li>5 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-primary">Get Started</button>
|
||||
</div>
|
||||
<!-- Enterprise -->
|
||||
<div style="background:rgba(255,255,255,0.03);border-radius:12px;padding:24px;border-top:3px solid rgba(255,255,255,0.15);">
|
||||
<div class="plan-name">Enterprise</div>
|
||||
<div class="plan-price">$44.99 <span class="plan-period">/mo</span></div>
|
||||
<div class="plan-desc">For high-traffic applications demanding maximum performance.</div>
|
||||
<ul class="plan-features">
|
||||
<li>8 vCPU Cores</li>
|
||||
<li>32 GB RAM</li>
|
||||
<li>400 GB NVMe SSD</li>
|
||||
<li>10 TB Bandwidth</li>
|
||||
</ul>
|
||||
<button class="plan-btn plan-btn-outline">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,82 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<h2>Typography Direction</h2>
|
||||
<p class="subtitle">Click the option that feels right for EZSCALE's technical, powerful identity</p>
|
||||
|
||||
<div class="cards" style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;">
|
||||
|
||||
<div class="card" data-choice="inter" onclick="toggleSelect(this)" style="padding:32px;cursor:pointer;">
|
||||
<div style="margin-bottom:8px;"><span class="label">A</span></div>
|
||||
<div style="font-family:'Inter',sans-serif;">
|
||||
<h3 style="font-family:'Inter',sans-serif;font-size:28px;font-weight:700;margin-bottom:4px;">Inter</h3>
|
||||
<p style="font-size:13px;opacity:0.5;margin-bottom:16px;">The industry standard — Vercel, Linear, GitHub</p>
|
||||
<p style="font-size:32px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;">Cloud Infrastructure</p>
|
||||
<p style="font-size:18px;font-weight:500;margin-bottom:8px;">Deploy VPS in seconds. Scale without limits.</p>
|
||||
<p style="font-size:14px;opacity:0.7;line-height:1.6;margin-bottom:16px;">High-performance NVMe SSD storage, dedicated vCPUs, and 10Gbps network connectivity. Built for developers who demand reliability.</p>
|
||||
<div style="display:flex;gap:16px;align-items:baseline;margin-bottom:12px;">
|
||||
<span style="font-size:36px;font-weight:700;">$4.99</span>
|
||||
<span style="font-size:14px;opacity:0.5;">/month</span>
|
||||
</div>
|
||||
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,0.05);padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="opacity:0.5;">$</span> ssh root@vps-01.ezscale.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="space-grotesk" onclick="toggleSelect(this)" style="padding:32px;cursor:pointer;">
|
||||
<div style="margin-bottom:8px;"><span class="label">B</span></div>
|
||||
<div style="font-family:'Space Grotesk',sans-serif;">
|
||||
<h3 style="font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;margin-bottom:4px;">Space Grotesk</h3>
|
||||
<p style="font-size:13px;opacity:0.5;margin-bottom:16px;">Geometric & distinctive — technical but warm</p>
|
||||
<p style="font-size:32px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;">Cloud Infrastructure</p>
|
||||
<p style="font-size:18px;font-weight:500;margin-bottom:8px;">Deploy VPS in seconds. Scale without limits.</p>
|
||||
<p style="font-size:14px;opacity:0.7;line-height:1.6;margin-bottom:16px;">High-performance NVMe SSD storage, dedicated vCPUs, and 10Gbps network connectivity. Built for developers who demand reliability.</p>
|
||||
<div style="display:flex;gap:16px;align-items:baseline;margin-bottom:12px;">
|
||||
<span style="font-size:36px;font-weight:700;">$4.99</span>
|
||||
<span style="font-size:14px;opacity:0.5;">/month</span>
|
||||
</div>
|
||||
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,0.05);padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="opacity:0.5;">$</span> ssh root@vps-01.ezscale.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="dm-sans" onclick="toggleSelect(this)" style="padding:32px;cursor:pointer;">
|
||||
<div style="margin-bottom:8px;"><span class="label">C</span></div>
|
||||
<div style="font-family:'DM Sans',sans-serif;">
|
||||
<h3 style="font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;margin-bottom:4px;">DM Sans</h3>
|
||||
<p style="font-size:13px;opacity:0.5;margin-bottom:16px;">Clean geometric — DigitalOcean, Notion vibes</p>
|
||||
<p style="font-size:32px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;">Cloud Infrastructure</p>
|
||||
<p style="font-size:18px;font-weight:500;margin-bottom:8px;">Deploy VPS in seconds. Scale without limits.</p>
|
||||
<p style="font-size:14px;opacity:0.7;line-height:1.6;margin-bottom:16px;">High-performance NVMe SSD storage, dedicated vCPUs, and 10Gbps network connectivity. Built for developers who demand reliability.</p>
|
||||
<div style="display:flex;gap:16px;align-items:baseline;margin-bottom:12px;">
|
||||
<span style="font-size:36px;font-weight:700;">$4.99</span>
|
||||
<span style="font-size:14px;opacity:0.5;">/month</span>
|
||||
</div>
|
||||
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,0.05);padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="opacity:0.5;">$</span> ssh root@vps-01.ezscale.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="plus-jakarta" onclick="toggleSelect(this)" style="padding:32px;cursor:pointer;">
|
||||
<div style="margin-bottom:8px;"><span class="label">D</span></div>
|
||||
<div style="font-family:'Plus Jakarta Sans',sans-serif;">
|
||||
<h3 style="font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:700;margin-bottom:4px;">Plus Jakarta Sans</h3>
|
||||
<p style="font-size:13px;opacity:0.5;margin-bottom:16px;">Modern & friendly — Stripe, Figma feel</p>
|
||||
<p style="font-size:32px;font-weight:700;letter-spacing:-0.5px;margin-bottom:8px;">Cloud Infrastructure</p>
|
||||
<p style="font-size:18px;font-weight:500;margin-bottom:8px;">Deploy VPS in seconds. Scale without limits.</p>
|
||||
<p style="font-size:14px;opacity:0.7;line-height:1.6;margin-bottom:16px;">High-performance NVMe SSD storage, dedicated vCPUs, and 10Gbps network connectivity. Built for developers who demand reliability.</p>
|
||||
<div style="display:flex;gap:16px;align-items:baseline;margin-bottom:12px;">
|
||||
<span style="font-size:36px;font-weight:700;">$4.99</span>
|
||||
<span style="font-size:14px;opacity:0.5;">/month</span>
|
||||
</div>
|
||||
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,0.05);padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="opacity:0.5;">$</span> ssh root@vps-01.ezscale.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p style="margin-top:24px;opacity:0.5;font-size:13px;">All options pair with JetBrains Mono for code/terminal snippets. Click to select your preference.</p>
|
||||
3
.superpowers/brainstorm/752312-1773515533/waiting-2.html
Normal file
3
.superpowers/brainstorm/752312-1773515533/waiting-2.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
3
.superpowers/brainstorm/752312-1773515533/waiting-3.html
Normal file
3
.superpowers/brainstorm/752312-1773515533/waiting-3.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
3
.superpowers/brainstorm/752312-1773515533/waiting-4.html
Normal file
3
.superpowers/brainstorm/752312-1773515533/waiting-4.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
3
.superpowers/brainstorm/752312-1773515533/waiting-5.html
Normal file
3
.superpowers/brainstorm/752312-1773515533/waiting-5.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
3
.superpowers/brainstorm/752312-1773515533/waiting.html
Normal file
3
.superpowers/brainstorm/752312-1773515533/waiting.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user