Skip to content

Home

Jump to bottom
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">&lt;<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>

Clone this wiki locally