-
Notifications
You must be signed in to change notification settings - Fork 0
Home
DCplatforms edited this page Jan 7, 2026
·
3 revisions
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MiGrid - Hero Poster</title>
<style>
@font-face {
font-family: 'SystemUI';
src: local('SF Pro Display'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
}
`* {`
`margin: 0;`
`padding: 0;`
`box-sizing: border-box;`
`}`
`:root {`
`--bg-primary: #080c10;`
`--bg-secondary: #0f1419;`
`--bg-card: #151b23;`
`--accent-green: #00e6b8;`
`--accent-teal: #00d4aa;`
`--accent-blue: #00a8ff;`
`--accent-cyan: #00d9ff;`
`--text-primary: #ffffff;`
`--text-secondary: #b0c0d0; /* Increased contrast */`
`--text-muted: #7a8a9a; /* Increased contrast */`
`--border-subtle: rgba(0, 230, 184, 0.15);`
`}`
`body {`
`background: var(--bg-primary);`
`font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;`
`color: var(--text-primary);`
`-webkit-font-smoothing: antialiased;`
`}`
`.poster {`
`width: 1200px;`
`height: 800px;`
`position: relative;`
`background: var(--bg-primary);`
`overflow: hidden;`
`}`
`/* Gradient mesh background */`
`.bg-mesh {`
`position: absolute;`
`inset: 0;`
`background: `
`radial-gradient(ellipse 100% 100% at 0% 0%, rgba(0, 230, 184, 0.12) 0%, transparent 50%),`
`radial-gradient(ellipse 80% 80% at 100% 100%, rgba(0, 168, 255, 0.08) 0%, transparent 50%),`
`radial-gradient(ellipse 60% 60% at 70% 20%, rgba(0, 217, 255, 0.06) 0%, transparent 40%);`
`}`
`/* Noise texture overlay */`
`.noise-overlay {`
`position: absolute;`
`inset: 0;`
`opacity: 0.03;`
`background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");`
`}`
`/* Subtle grid */`
`.grid-overlay {`
`position: absolute;`
`inset: 0;`
`background-image: `
`linear-gradient(rgba(0, 230, 184, 0.03) 1px, transparent 1px),`
`linear-gradient(90deg, rgba(0, 230, 184, 0.03) 1px, transparent 1px);`
`background-size: 80px 80px;`
`}`
`/* Glow orbs */`
`.glow-orb {`
`position: absolute;`
`border-radius: 50%;`
`filter: blur(80px);`
`}`
`.orb-1 {`
`width: 400px;`
`height: 400px;`
`top: -100px;`
`left: -100px;`
`background: rgba(0, 230, 184, 0.15);`
`}`
`.orb-2 {`
`width: 300px;`
`height: 300px;`
`bottom: -50px;`
`right: 100px;`
`background: rgba(0, 168, 255, 0.1);`
`}`
`.orb-3 {`
`width: 200px;`
`height: 200px;`
`top: 200px;`
`right: 300px;`
`background: rgba(0, 230, 184, 0.08);`
`}`
`/* Main content */`
`.content {`
`position: relative;`
`z-index: 10;`
`height: 100%;`
`padding: 50px 70px;`
`display: flex;`
`flex-direction: column;`
`}`
`/* Header */`
`.header {`
`display: flex;`
`justify-content: space-between;`
`align-items: center;`
`}`
`.logo {`
`display: flex;`
`align-items: center;`
`gap: 14px;`
`}`
`.logo-icon {`
`width: 44px;`
`height: 44px;`
`background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));`
`border-radius: 10px;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`box-shadow: 0 4px 20px rgba(0, 230, 184, 0.3);`
`}`
`.logo-icon svg {`
`width: 24px;`
`height: 24px;`
`}`
`.logo-text {`
`font-size: 26px;`
`font-weight: 600;`
`letter-spacing: 1px;`
`}`
`.logo-text .accent {`
`color: var(--accent-green);`
`}`
`.header-badge {`
`display: flex;`
`align-items: center;`
`gap: 8px;`
`font-size: 11px;`
`letter-spacing: 2px;`
`text-transform: uppercase;`
`color: var(--text-secondary); /* Increased contrast */`
`}`
`.header-badge::before {`
`content: '';`
`width: 6px;`
`height: 6px;`
`background: var(--accent-green);`
`border-radius: 50%;`
`}`
`/* Hero section */`
`.hero {`
`flex: 1;`
`display: flex;`
`align-items: center;`
`gap: 60px;`
`padding: 20px 0;`
`}`
`.hero-content {`
`flex: 1;`
`max-width: 520px;`
`}`
`.headline {`
`font-size: 54px;`
`font-weight: 300;`
`line-height: 1.1;`
`letter-spacing: -2px;`
`margin-bottom: 24px;`
`color: var(--text-primary); /* Ensure high contrast */`
`}`
`.headline strong {`
`font-weight: 600;`
`display: block;`
`background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-cyan) 50%, var(--accent-blue) 100%);`
`-webkit-background-clip: text;`
`-webkit-text-fill-color: transparent;`
`background-clip: text;`
`}`
`.description {`
`font-size: 17px;`
`line-height: 1.65;`
`color: var(--text-secondary); /* Increased contrast */`
`margin-bottom: 36px;`
`max-width: 420px;`
`}`
`/* Trust badges */`
`.trust-badges {`
`display: flex;`
`gap: 16px;`
`}`
`.trust-badge {`
`display: flex;`
`align-items: center;`
`gap: 10px;`
`background: rgba(0, 230, 184, 0.06);`
`border: 1px solid var(--border-subtle);`
`border-radius: 100px;`
`padding: 10px 20px;`
`font-size: 12px;`
`font-weight: 500;`
`letter-spacing: 0.5px;`
`color: var(--text-primary); /* Ensure high contrast */`
`}`
`.trust-badge .icon {`
`width: 18px;`
`height: 18px;`
`background: var(--accent-green);`
`border-radius: 50%;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`}`
`.trust-badge .icon svg {`
`width: 10px;`
`height: 10px;`
`}`
`.trust-badge.secondary {`
`background: rgba(0, 168, 255, 0.06);`
`border-color: rgba(0, 168, 255, 0.2);`
`}`
`.trust-badge.secondary .icon {`
`background: var(--accent-blue);`
`}`
`/* Hero visual */`
`.hero-visual {`
`flex: 0 0 500px;`
`height: 450px;`
`position: relative;`
`}`
`/* Central hub */`
`.central-hub {`
`position: absolute;`
`top: 50%;`
`left: 50%;`
`transform: translate(-50%, -50%);`
`width: 340px;`
`height: 340px;`
`}`
`/* Orbit rings */`
`.orbit {`
`position: absolute;`
`top: 50%;`
`left: 50%;`
`transform: translate(-50%, -50%);`
`border-radius: 50%;`
`}`
`.orbit-inner {`
`width: 160px;`
`height: 160px;`
`border: 1px solid rgba(0, 230, 184, 0.25);`
`}`
`.orbit-middle {`
`width: 260px;`
`height: 260px;`
`border: 1px dashed rgba(0, 230, 184, 0.15);`
`}`
`.orbit-outer {`
`width: 340px;`
`height: 340px;`
`border: 1px solid rgba(0, 230, 184, 0.08);`
`}`
`/* Hub center */`
`.hub-core {`
`position: absolute;`
`top: 50%;`
`left: 50%;`
`transform: translate(-50%, -50%);`
`width: 90px;`
`height: 90px;`
`background: linear-gradient(135deg, rgba(0, 230, 184, 0.2), rgba(0, 168, 255, 0.15));`
`border: 1px solid rgba(0, 230, 184, 0.4);`
`border-radius: 20px;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`box-shadow: `
`0 0 60px rgba(0, 230, 184, 0.2),`
`0 0 100px rgba(0, 230, 184, 0.1),`
`inset 0 0 30px rgba(0, 230, 184, 0.1);`
`}`
`.hub-core svg {`
`width: 36px;`
`height: 36px;`
`color: var(--accent-green);`
`}`
`/* Service nodes */`
`.service-node {`
`position: absolute;`
`display: flex;`
`align-items: center;`
`gap: 8px;`
`background: var(--bg-card);`
`border: 1px solid var(--border-subtle);`
`border-radius: 10px;`
`padding: 10px 16px;`
`font-size: 12px;`
`font-weight: 500;`
`white-space: nowrap;`
`box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);`
`color: var(--text-primary); /* Ensure high contrast */`
`}`
`.service-node .dot {`
`width: 7px;`
`height: 7px;`
`border-radius: 50%;`
`background: var(--accent-green);`
`box-shadow: 0 0 10px var(--accent-green);`
`}`
`.service-node.blue .dot { background: var(--accent-blue); box-shadow: 0 0 10px var(--accent-blue); }`
`.service-node.cyan .dot { background: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }`
`/* Node positions */`
`.node-grid { top: -5px; left: 50%; transform: translateX(-50%); }`
`.node-vpp { top: 60px; right: -10px; }`
`.node-market { top: 160px; right: -40px; }`
`.node-commerce { bottom: 80px; right: 20px; }`
`.node-device { bottom: 10px; left: 40%; }`
`.node-physics { top: 120px; left: -20px; }`
`.node-energy { bottom: 60px; left: -30px; }`
`/* Connection lines */`
`.connection {`
`position: absolute;`
`height: 1px;`
`background: linear-gradient(90deg, transparent, var(--accent-green), transparent);`
`opacity: 0.3;`
`}`
`.conn-1 { top: 45px; left: 170px; width: 60px; transform: rotate(30deg); }`
`.conn-2 { top: 130px; right: 80px; width: 50px; transform: rotate(-20deg); }`
`.conn-3 { bottom: 120px; right: 100px; width: 50px; transform: rotate(25deg); }`
`.conn-4 { bottom: 80px; left: 130px; width: 60px; transform: rotate(-30deg); }`
`/* Footer */`
`.footer {`
`display: flex;`
`justify-content: space-between;`
`align-items: flex-end;`
`padding-top: 24px;`
`border-top: 1px solid rgba(255, 255, 255, 0.06);`
`}`
`.metrics {`
`display: flex;`
`gap: 50px;`
`}`
`.metric {`
`text-align: left;`
`}`
`.metric-value {`
`font-size: 28px;`
`font-weight: 600;`
`color: var(--text-primary);`
`margin-bottom: 4px;`
`}`
`.metric-value .highlight {`
`color: var(--accent-green);`
`}`
`.metric-label {`
`font-size: 10px;`
`letter-spacing: 1.5px;`
`text-transform: uppercase;`
`color: var(--text-muted); /* Increased contrast */`
`}`
`.cta {`
`display: flex;`
`align-items: center;`
`gap: 12px;`
`}`
`.cta-text {`
`font-size: 14px;`
`color: var(--accent-green);`
`font-weight: 500;`
`}`
`.cta-arrow {`
`width: 36px;`
`height: 36px;`
`border: 1px solid var(--accent-green);`
`border-radius: 50%;`
`display: flex;`
`align-items: center;`
`justify-content: center;`
`background: rgba(0, 230, 184, 0.05);`
`}`
`.cta-arrow svg {`
`width: 16px;`
`height: 16px;`
`color: var(--accent-green);`
`}`
`/* Corner decorations */`
`.corner {`
`position: absolute;`
`width: 60px;`
`height: 60px;`
`}`
`.corner-tl {`
`top: 20px;`
`left: 20px;`
`border-left: 1px solid var(--border-subtle);`
`border-top: 1px solid var(--border-subtle);`
`}`
`.corner-br {`
`bottom: 20px;`
`right: 20px;`
`border-right: 1px solid var(--border-subtle);`
`border-bottom: 1px solid var(--border-subtle);`
`}`
</style>
</head>
<body>
<div class="poster">
<div class="bg-mesh"></div>
<div class="noise-overlay"></div>
<div class="grid-overlay"></div>
`<div class="glow-orb orb-1"></div>`
`<div class="glow-orb orb-2"></div>`
`<div class="glow-orb orb-3"></div>`
`<div class="corner corner-tl"></div>`
`<div class="corner corner-br"></div>`
`<div class="content">`
`<header class="header">`
`<div class="logo">`
`<div class="logo-icon">`
`<svg viewBox="0 0 24 24" fill="none" stroke="#080c10" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">`
`<polyline points="20 6 9 17 4 12"></polyline>`
`</svg>`
`</div>`
`<span class="logo-text">Mi<span class="accent">Grid</span></span>`
`</div>`
`<div class="header-badge">Open Source · Apache 2.0</div>`
`</header>`
`<div class="hero">`
`<div class="hero-content">`
`<h1 class="headline">`
`The Operating System for`
`<strong>Sustainable Fleets</strong>`
`</h1>`
`<p class="description">`
`One platform connecting your fleet to the grid. Verify every charge. `
`Unlock VPP revenue. Reward drivers automatically.`
`</p>`
`<div class="trust-badges">`
`<div class="trust-badge">`
`<span class="icon">`
`<svg viewBox="0 0 24 24" fill="none" stroke="#080c10" stroke-width="3" stroke-linecap="round">`
`<polyline points="20 6 9 17 4 12"></polyline>`
`</svg>`
`</span>`
`Physics Verified`
`</div>`
`<div class="trust-badge secondary">`
`<span class="icon">`
`<svg viewBox="0 0 24 24" fill="none" stroke="#080c10" stroke-width="3" stroke-linecap="round">`
`<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>`
`</svg>`
`</span>`
`Trustless Design`
`</div>`
`</div>`
`</div>`
`<div class="hero-visual">`
`<div class="central-hub">`
`<div class="orbit orbit-outer"></div>`
`<div class="orbit orbit-middle"></div>`
`<div class="orbit orbit-inner"></div>`
`<div class="connection conn-1"></div>`
`<div class="connection conn-2"></div>`
`<div class="connection conn-3"></div>`
`<div class="connection conn-4"></div>`
`<div class="hub-core">`
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">`
`<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>`
`</svg>`
`</div>`
`<div class="service-node node-grid">`
`<span class="dot"></span>Grid Signal`
`</div>`
`<div class="service-node blue node-vpp">`
`<span class="dot"></span>VPP Aggregator`
`</div>`
`<div class="service-node cyan node-market">`
`<span class="dot"></span>Market Gateway`
`</div>`
`<div class="service-node node-commerce">`
`<span class="dot"></span>Commerce`
`</div>`
`<div class="service-node blue node-device">`
`<span class="dot"></span>Device Gateway`
`</div>`
`<div class="service-node node-physics">`
`<span class="dot"></span>Physics Engine`
`</div>`
`<div class="service-node cyan node-energy">`
`<span class="dot"></span>Energy Manager`
`</div>`
`</div>`
`</div>`
`</div>`
`<footer class="footer">`
`<div class="metrics">`
`<div class="metric">`
`<div class="metric-value">10</div>`
`<div class="metric-label">Microservices</div>`
`</div>`
`<div class="metric">`
`<div class="metric-value">OpenADR <span class="highlight">3.0</span></div>`
`<div class="metric-label">Grid Standard</div>`
`</div>`
`<div class="metric">`
`<div class="metric-value"><<span class="highlight">15%</span></div>`
`<div class="metric-label">Variance Threshold</div>`
`</div>`
`</div>`
`<div class="cta">`
`<span class="cta-text">Get Started</span>`
`<div class="cta-arrow">`
`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`
`<path d="M5 12h14M12 5l7 7-7 7"/>`
`</svg>`
`</div>`
`</div>`
`</footer>`
`</div>`
</div>
</body>
</html>