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
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>
|
||||
Reference in New Issue
Block a user