EZSCALE/website
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove old Vuexy wrapper components (AppTextField, AppSelect, AppTextarea, FlashMessages, NotificationBell)

Browse Source 
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
2026-03-14 17:10:23 -04:00
parent dd1a5d7ffc
commit 40c1ecc6fe
90 changed files with 20113 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
.superpowers/brainstorm/752312-1773515533/hero-visuals.html Normal file
View 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>