-
Notifications
You must be signed in to change notification settings - Fork 0
Home
DCplatforms edited this page Jan 7, 2026
·
3 revisions
<title>MiGrid - Hero Poster</title>
<style>
@font-face {
font-family: 'SystemUI';
src: local('SF Pro Display'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
}
</style>
* {
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);
}
<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>