feat: add api banner

remove unused `hero` template

See: FE-149

Author: enzo-bitfly

handlers/index.go

@@ -21,7 +21,6 @@ func Index(w http.ResponseWriter, r *http.Request) {
 		"index/depositProgress.html",
 		"index/depositChart.html",
 		"index/genesis.html",
-		"index/hero.html",
 		"index/networkStats.html",
 		"index/postGenesis.html",
 		"index/preGenesis.html",
@@ -32,6 +31,7 @@ func Index(w http.ResponseWriter, r *http.Request) {
 		"svg/bricks.html",
 		"svg/professor.html",
 		"svg/timeline.html",
+		"components/apiBanner.html",
 		"components/rocket.html",
 		"slotViz.html",
 	)

static/img/keyvisual.webp

@@ -0,0 +1,138 @@
+{{ define "apiBanner" }}
+  <section class="api-banner position-relative w-100 d-flex flex-nowrap flex-column align-items-center my-3">
+    <div class="api-banner__bg-image position-absolute w-100 h-100"></div>
+
+    <div class="api-banner__text-container d-flex flex-column flex-sm-row align-items-md-center">
+      <div class="api-banner__text">
+        <h1>Power Your ETH Validator Insights with Beaconcha.in APIs</h1>
+        <p>Unlock real-time data on validators and network health. Beaconcha.in APIs are designed for everyone, from staking providers, developers and risk managers to blockchain researchers.</p>
+      </div>
+      <ul class="api-banner__feature-list fa-ul position-relative d-flex flex-column m-0 py-4 pr-2">
+        <li>
+          <span class="fa-li"><i class="fas fa-check"></i></span>
+          <span class="font-weight-bold">Monitor your validators' performance:</span> clear, reliable data you can trust to maximize your staking rewards and manage your risks.
+        </li>
+        <li>
+          <span class="fa-li"><i class="fas fa-check"></i></span>
+          <span class="font-weight-bold">Access consensus layer data instantly:</span> real-time updates, a consistent format, and zero setup—so you can focus on growing your business.
+        </li>
+        <li>
+          <span class="fa-li"><i class="fas fa-check"></i></span>
+          <span class="font-weight-bold">Analyze validator rewards and queues:</span> Fine-tune your staking strategy with real-time insights.
+        </li>
+      </ul>
+    </div>
+
+    <div class="api-banner__buttons d-flex flex-column w-100 align-items-center flex-sm-row">
+      <a class="btn btn-primary w-100 text-white" href="/user/settings#api"> Get API Key<i style="transform: rotate(45deg);" class="fas fa-arrow-up ml-2"></i> </a>
+      <a href="https://beaconcha.in/api/v1/docs"> View API Docs<i style="transform: rotate(45deg);" class="fas fa-arrow-up ml-2"></i> </a>
+    </div>
+  </section>
+{{ end }}
+
+
+<a class="my-1" href="https://shop.beaconcha.in"><i class="fas fa-shopping-cart mr-2"></i>Swag Shop</a>
+
+{{ define "css" }}
+  <style>
+    .api-banner {
+      padding: 1rem 0;
+      gap: 1.5rem;
+    }
+
+    .api-banner__text-container {
+      text-wrap: pretty;
+      gap: 0.5rem;
+    }
+
+    .api-banner__buttons {
+      gap: 1rem;
+    }
+
+    .api-banner__feature-list {
+      gap: 0.5rem;
+      padding-left: 3rem;
+      height: fit-content;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        background-color: var(--bg-color);
+        opacity: 0.9;
+        border: 1px solid var(--card-border-color);
+        border-radius: 0.5rem;
+      }
+    }
+
+    [data-theme="dark"] .api-banner__feature-list {
+      &::before {
+        opacity: 0.8;
+      }
+    }
+
+    .api-banner__bg-image {
+      inset: 0;
+      z-index: -1;
+      opacity: 0.3;
+      background: linear-gradient(to top, var(--bg-color) 0%, transparent 15%), url("img/keyvisual.webp") bottom center / cover no-repeat;
+    }
+
+    [data-theme="dark"] .api-banner__bg-image {
+      opacity: 0.25;
+    }
+
+    @media (min-width: 640px) {
+      .api-banner {
+        padding: 5rem 1rem;
+      }
+
+      .api-banner__text-container {
+        width: 100%;
+        gap: 1.5rem;
+      }
+
+      .api-banner__buttons a {
+        width: auto !important;
+      }
+    }
+
+    @media (min-width: 820px) {
+      .api-banner {
+        padding: 6rem 2rem;
+      }
+
+      [data-theme="dark"] .api-banner__bg-image {
+        opacity: 0.3;
+      }
+
+      .api-banner__text,
+      .api-banner__feature-list {
+        width: 50%;
+        justify-content: center;
+      }
+
+      .api-banner__bg-image {
+        opacity: 0.7;
+      }
+    }
+
+    @media (min-width: 1140px) {
+      .api-banner {
+        padding: 6rem;
+      }
+
+      .api-banner__text-container {
+        gap: 4rem;
+      }
+
+      .api-banner__bg-image {
+        background-position: top 35% right;
+      }
+    }
+  </style>
+{{ end }}