feat: surface blog posts higher on landing page (one approach — thoughts?)

src/app/globals.css

@@ -306,7 +306,7 @@ a {
 
 /* ── Hero ── */
 .hero {
-  padding: 6rem 0 5rem;
+  padding: 3.5rem 0 2.5rem;
   position: relative;
   overflow: hidden;
 }
@@ -341,7 +341,7 @@ a {
 }
 
 .hero-logo img {
-  width: clamp(200px, 30vw, 420px);
+  width: clamp(160px, 22vw, 280px);
   height: auto;
 }
 
@@ -385,7 +385,7 @@ a {
   color: var(--text-secondary);
   max-width: 560px;
   line-height: 1.7;
-  margin-bottom: 2.5rem;
+  margin-bottom: 0;
 }
 
 /* ── Install command ── */
@@ -842,33 +842,6 @@ a {
   text-decoration: underline;
 }
 
-/* ── Stats / Feature strip ── */
-.feature-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1px;
-  background: var(--border);
-  margin: 3rem 0;
-}
-
-.feature-item {
-  background: var(--bg-card);
-  padding: 2rem;
-}
-
-.feature-number {
-  font-family: var(--font-mono);
-  font-size: 2rem;
-  font-weight: 600;
-  color: var(--accent-blue);
-  display: block;
-  margin-bottom: 0.25rem;
-}
-
-.feature-label {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-}
 
 /* ── How it works ── */
 .how-it-works-body {
@@ -1409,14 +1382,47 @@ a {
   100% { background-position: -200% 0; }
 }
 
+/* ── Stats + Install row ── */
+.stats-install-row {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+  align-items: stretch;
+}
+
+.install-tile {
+  background: var(--bg-card);
+  border: 1px solid var(--border-accent);
+  padding: 1.5rem 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem;
+  flex: 0 0 auto;
+}
+
+.install-tile .install-cmd-row {
+  margin-bottom: 0;
+}
+
+.install-tile-label {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .container { padding: 0 1rem; }
   .header-inner { padding: 0 1rem; }
-  .hero { padding: 4rem 0 3rem; }
+  .hero { padding: 2.5rem 0 2rem; }
   .hero-inner { flex-direction: column; }
   .hero-logo { order: -1; }
-  .hero-logo img { width: clamp(140px, 50vw, 220px); }
+  .hero-logo img { width: clamp(120px, 35vw, 180px); }
+  .stats-install-row { flex-direction: column; }
   .blog-grid { grid-template-columns: 1fr; }
   .section-header { flex-direction: column; gap: 0.5rem; }
   .footer-inner { flex-direction: column; }

src/app/page.tsx

@@ -33,10 +33,6 @@ export default function HomePage() {
                 the LLM call itself. Silent failures, untestable outputs.
                 Mellea lets you test and reason about every LLM call using type-annotated outputs, verifiable requirements, and automatic retries.
               </p>
-
-              <InstallCommand />
-
-              <GitHubStats />
             </div>
 
             <div className="hero-logo">
@@ -51,22 +47,25 @@ export default function HomePage() {
             </div>
           </div>
 
-          <div className="feature-strip">
-            <div className="feature-item">
-              <span className="feature-number">Unit</span>
-              <span className="feature-label">testable</span>
-            </div>
-            <div className="feature-item">
-              <span className="feature-number">100%</span>
-              <span className="feature-label">Open source</span>
-            </div>
-            <div className="feature-item">
-              <span className="feature-number">Typed</span>
-              <span className="feature-label">constrained output</span>
+        </div>
+      </section>
+
+      {/* ── Recent Blogs ── */}
+      <section className="section" style={{ paddingTop: '1rem', paddingBottom: '2rem' }}>
+        <div className="container">
+          <div className="blog-grid">
+            {recent.map((blog) => (
+              <BlogCard key={blog.slug} blog={blog} />
+            ))}
+          </div>
+
+          <div className="stats-install-row">
+            <div style={{ flex: 1 }}>
+              <GitHubStats />
             </div>
-            <div className="feature-item">
-              <span className="feature-number">Any</span>
-              <span className="feature-label">LLM provider</span>
+            <div className="install-tile">
+              <p className="install-tile-label">Install</p>
+              <InstallCommand />
             </div>
           </div>
         </div>
@@ -179,27 +178,6 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── Recent Blogs ── */}
-      <section className="section">
-        <div className="container">
-          <div className="section-header">
-            <div>
-              <p className="section-label">Latest Posts</p>
-              <h2 className="section-title">From the blog</h2>
-            </div>
-            <Link href="/blogs" className="section-link">
-              All posts →
-            </Link>
-          </div>
-
-          <div className="blog-grid">
-            {recent.map((blog) => (
-              <BlogCard key={blog.slug} blog={blog} />
-            ))}
-          </div>
-        </div>
-      </section>
-
       {/* ── Vision / closing CTA ── */}
       <section className="section vision-section" aria-label="Vision">
         <div className="container">

src/components/InstallCommand.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import { siteConfig } from '@/config/site';
 
 const CMD = 'uv pip install mellea';
 
@@ -42,8 +40,6 @@ export default function InstallCommand() {
           )}
         </button>
       </div>
-      <Link href={siteConfig.docsUrl} target="_blank" rel="noopener noreferrer" className="btn-primary">Get Started →</Link>
-      <Link href="/blogs" className="btn-secondary">Read the blog</Link>
     </div>
   );
 }

src/hooks/useGitHubStats.ts

@@ -35,7 +35,7 @@ export function useGitHubStats() {
     const base = `https://api.github.com/repos/${repo}`;
 
     Promise.all([
-      fetch(base).then((r) => r.json()),
+      fetch(base).then((r) => { if (!r.ok) throw new Error(r.statusText); return r.json(); }),
       fetch(`${base}/releases/latest`).then((r) => (r.ok ? r.json() : null)),
       fetch(`${base}/contributors?per_page=1&anon=true`).then((r) => {
         // Contributors count lives in the Link header's last page number

tests/e2e/home.spec.ts

@@ -60,29 +60,16 @@ test('install command is visible with copy button', async ({ page }) => {
   await expect(page.getByLabel('Copy install command')).toBeVisible();
 });
 
-test('hero has Get Started CTA', async ({ page }) => {
+test('header has Get Started CTA', async ({ page }) => {
   await page.goto('/');
-  const hero = page.getByRole('region', { name: /Hero/i });
-  await expect(hero.getByRole('link', { name: /Get Started/ })).toBeVisible();
+  await expect(page.getByRole('banner').getByRole('link', { name: /Get Started/ })).toBeVisible();
 });
 
 test('GitHub stats section renders', async ({ page }) => {
   await page.goto('/');
-  // Stats are rendered inside the hero — verify the key labels are visible
-  const hero = page.getByRole('region', { name: /Hero/i });
-  await expect(hero.getByText('Stars')).toBeVisible();
-  await expect(hero.getByText('Forks')).toBeVisible();
-});
-
-// ── Feature Strip ──
-
-test('feature strip shows key attributes', async ({ page }) => {
-  await page.goto('/');
-  const hero = page.getByRole('region', { name: /Hero/i });
-  // Use text unique to the feature strip (not shared with eyebrow or body copy)
-  await expect(hero.getByText('100%')).toBeVisible();
-  await expect(hero.getByText(/constrained output/i)).toBeVisible();
-  await expect(hero.getByText(/LLM provider/i)).toBeVisible();
+  // Stats are rendered below the blog cards, not inside the hero
+  await expect(page.getByText('Stars')).toBeVisible();
+  await expect(page.getByText('Forks')).toBeVisible();
 });
 
 // ── How It Works Section ──
@@ -143,10 +130,9 @@ test('active tab shows description and learn more link', async ({ page }) => {
 
 // ── Recent Blog Posts ──
 
-test('recent blog posts section has heading and cards', async ({ page }) => {
+test('recent blog posts section has cards', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByText('From the blog')).toBeVisible();
-  // Scope to main and exclude the /blogs/ index link to count actual post cards
+  // Section heading removed — verify blog cards are present on the home page
   const cards = page.getByRole('main').locator('a[href^="/blogs/"]:not([href="/blogs/"])');
   const count = await cards.count();
   expect(count).toBeGreaterThanOrEqual(1);