DRAFT: Front page overhaul to support an onboarding guide

assets/css/styles.css

@@ -47,7 +47,7 @@
   :root {
     --primary-bg: rgb(30, 30, 30);
     --secondary-bg: rgb(30, 30, 30);
-    --highlight-bg: rgba(255, 255, 255, 0.05);
+    --highlight-bg: rgba(255, 255, 255, 0.15);
     --text-primary-color: rgb(205, 205, 205);
     --text-primary-color-dim: rgba(225, 225, 225, 0.80);
     --text-secondary-color: rgb(225, 225, 225);
@@ -61,7 +61,7 @@
 html[data-theme="dark"] {
   --primary-bg: rgb(30, 30, 30);
   --secondary-bg: rgb(30, 30, 30);
-  --highlight-bg: rgba(255, 255, 255, 0.05);
+  --highlight-bg: rgba(255, 255, 255, 0.15);
   --text-primary-color: rgb(205, 205, 205);
   --text-primary-color-dim: rgba(225, 225, 225, 0.80);
   --text-secondary-color: rgb(225, 225, 225);
@@ -403,6 +403,89 @@ body>footer>div {
     text-transform: uppercase;
 }
 
+/* Home page styles */
+.home-hero {
+  max-width: 512px;
+  /* margin-top: 3rem; */
+  margin: 3rem auto 0 auto;
+}
+
+.home-hero h2 a {
+  text-decoration: none;
+}
+
+.home-hero h2 a:visited {
+  color: inherit;
+}
+
+.home-section {
+  margin-top: 3rem;
+}
+
+.home-section:first-child {
+  margin-top: 0;
+}
+
+.home-all-posts {
+  display: block;
+  margin-top: auto;
+  padding-top: 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  text-align: right;
+}
+
+.home-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 600px) {
+  .home-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.home-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+  border: 1px solid var(--text-primary-color-dim);
+  border-left: 0.5rem solid var(--text-primary-color);
+  text-decoration: none;
+  color: var(--text-primary-color);
+  transition: background-color 0.15s ease;
+  cursor: pointer;
+}
+
+.home-card:visited {
+  color: var(--text-primary-color);
+}
+
+.home-card:hover {
+  background-color: var(--highlight-bg);
+  text-decoration: none;
+}
+
+.home-card:hover p {
+  color: var(--text-primary-color);
+}
+
+.home-card h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.home-card p {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--text-primary-color-dim);
+}
+
 /* Theme switcher styles */
 .theme-switcher {
   position: absolute;

index.html

@@ -3,24 +3,64 @@
 title: ADBC Driver Foundry
 ---
 
-<div class="wrapper wrapper-narrow">
+<section class="home-section">
+  <div class="home-cards">
+    {% assign latest = site.posts.first %}
+    <a href="{{ latest.url }}" class="home-card">
+      <h3>Latest From The Blog</h3>
+      <p>
+        {{ latest.title }}
+        <span class="text-muted">({{ latest.date | date: "%b %d, %Y" }})</span>
+      </p>
+      <span class="home-all-posts">See latest post &rarr;</span>
+    </a>
+    <a href="https://docs.adbc-drivers.org/using-drivers/" class="home-card">
+      <h3>Using Drivers</h3>
+      <p>Install your first ADBC driver and run your first query in minutes.</p>
+      <span class="home-all-posts">Get started &rarr;</span>
+    </a>
+    <a href="https://docs.adbc-drivers.org/drivers/" class="home-card">
+      <h3>Available Drivers</h3>
+      <p>
+        Browse the catalog of ADBC drivers for databases, data warehouses, and
+        more.
+      </p>
+      <span class="home-all-posts">Browse drivers &rarr;</span>
+    </a>
+    <a href="https://docs.adbc-drivers.org/building-drivers/" class="home-card">
+      <h3>Contribute Your Driver</h3>
+      <p>
+        Learn how to build and contribute your own ADBC driver to the ecosystem.
+      </p>
+      <span class="home-all-posts">Learn more &rarr;</span>
+    </a>
+  </div>
+</section>
+
+<div class="home-hero">
+  <h2>What is <a href="https://adbc-drivers.org">adbc-drivers.org</a>?</h2>
   <p class="text-muted">
     <code>SELECT * FROM adbc_drivers;</code>
   </p>
   <p>
-    ADBC is the modern data connectivity standard built to accelerate and simplify data access for analytics
-    applications. And it’s at an inflection point.
+    ADBC is the modern data connectivity standard built to accelerate and
+    simplify data access for analytics applications. And it's at an inflection
+    point.
   </p>
   <p>
-    More projects and organizations are embracing ADBC and looking for drivers to connect to an ever-expanding
-    landscape of data systems. But there’s still much work to be done—both technical and social—to shape ADBC’s
-    next era.
+    More projects and organizations are embracing ADBC and looking for drivers
+    to connect to an ever-expanding landscape of data systems. But there's still
+    much work to be done—both technical and social—to shape ADBC's next era.
   </p>
   <p>
-    That’s why we’re launching a new initiative: the ADBC Driver Foundry. If you’re interested, please
-    <a href="/2025/10/29/announcing-adbc-driver-foundry.html">read our launch announcement</a> to learn more.
+    That's why we're launching a new initiative: the ADBC Driver Foundry. If
+    you're interested, please
+    <a href="/2025/10/29/announcing-adbc-driver-foundry.html"
+      >read our launch announcement</a
+    >
+    to learn more.
   </p>
   <p class="text-muted">
-    <em>Where we’re going, we don’t need rows.</em>
+    <em>Where we're going, we don't need rows.</em>
   </p>
 </div>