docs: Modernize landing page with hero, pillars, and framework cards

docs/content/index.md

@@ -4,65 +4,114 @@
   <div class="hero__inner">
     <div class="hero__copy">
       <img class="hero__logo" src="assets/gunicorn.svg" alt="Gunicorn mascot" />
-      <h1>Production-ready Python web services</h1>
+      <h1>The Python WSGI Server<br>for Production</h1>
-      <p>Gunicorn is a dependable WSGI HTTP server for UNIX that keeps Python applications running fast and resilient in production. Built on a pre-fork worker model and trusted in countless deployments, it pairs clean configuration with flexible worker strategies so you can meet any traffic pattern.</p>
+      <p class="hero__tagline">Fast, reliable, and battle-tested. Gunicorn runs your Python web applications with the stability and performance you need in production.</p>
       <div class="hero__cta">
-        <a class="md-button md-button--primary" href="install/">Install Gunicorn</a>
+        <a class="md-button md-button--primary" href="quickstart/">Get Started</a>
-        <a class="md-button" href="https://github.com/benoitc/gunicorn">View on GitHub</a>
+        <a class="md-button" href="https://github.com/benoitc/gunicorn">GitHub</a>
       </div>
     </div>
     <div class="hero__code">
-      <pre><code class="language-console">$ pip install gunicorn
+      <pre><code class="language-bash">pip install gunicorn
-$ gunicorn example:app --workers 3</code></pre>
+gunicorn myapp:app --workers 4</code></pre>
-      <div class="hero__version">Latest release: <span>{{ release }}</span></div>
+      <div class="hero__version">v{{ release }}</div>
     </div>
   </div>
 </div>
 
-## Quickstart
+<section class="pillars">
+  <div class="pillar">
+    <div class="pillar__icon">🚀</div>
+    <h3>Production-Proven</h3>
+    <p>Trusted by thousands of companies worldwide. The pre-fork worker model handles traffic spikes gracefully.</p>
+  </div>
+  <div class="pillar">
+    <div class="pillar__icon">⚡</div>
+    <h3>Lightweight</h3>
+    <p>Minimal dependencies, simple configuration. Runs efficiently from containers to bare metal servers.</p>
+  </div>
+  <div class="pillar">
+    <div class="pillar__icon">🔌</div>
+    <h3>Compatible</h3>
+    <p>Works with any WSGI framework. Django, Flask, Pyramid—your app just runs. Now with ASGI support.</p>
+  </div>
+</section>
 
-1. Install Gunicorn into your application environment.
+## Works With Your Stack
-2. Point Gunicorn at your WSGI app: `gunicorn myproject.wsgi`.
-3. Tune worker type, concurrency, and hooks using the rich [settings](reference/settings.md).
 
-Need a longer walkthrough? Jump into the [install guide](install.md).
+<div class="frameworks">
+  <div class="framework" title="Django">
+    <span class="framework__name">Django</span>
+  </div>
+  <div class="framework" title="Flask">
+    <span class="framework__name">Flask</span>
+  </div>
+  <div class="framework" title="FastAPI">
+    <span class="framework__name">FastAPI</span>
+  </div>
+  <div class="framework" title="Pyramid">
+    <span class="framework__name">Pyramid</span>
+  </div>
+  <div class="framework" title="Starlette">
+    <span class="framework__name">Starlette</span>
+  </div>
+  <div class="framework" title="Falcon">
+    <span class="framework__name">Falcon</span>
+  </div>
+</div>
 
-## Why teams choose Gunicorn
+## Choose Your Worker
 
 <section class="feature-grid">
   <article class="feature-card">
-    <h3>Works with your framework</h3>
+    <h3>Sync Workers</h3>
-    <p>Django, Flask, FastAPI, Pyramid, you name it&mdash;Gunicorn speaks WSGI so your stack just runs.</p>
+    <p>The default. One request per worker. Simple, predictable, and perfect for most applications.</p>
-    <a href="run/">Running Gunicorn &rarr;</a>
+    <a href="design/#sync-workers">Learn more</a>
   </article>
   <article class="feature-card">
-    <h3>Flexible workers</h3>
+    <h3>Async Workers</h3>
-    <p>Sync, async, gevent, eventlet&mdash;choose the concurrency model that fits.</p>
+    <p>Gevent or Eventlet for thousands of concurrent connections. Ideal for I/O-bound workloads.</p>
-    <a href="reference/settings/#worker_class">Worker classes &rarr;</a>
+    <a href="design/#async-workers">Learn more</a>
   </article>
   <article class="feature-card">
-    <h3>Battle-tested hooks</h3>
+    <h3>Thread Workers</h3>
-    <p>Lifecycle hooks let you instrument, reload, and extend Gunicorn to match your deployment requirements.</p>
+    <p>Multiple threads per worker. Balance between concurrency and simplicity.</p>
-    <a href="custom/">Server hooks &rarr;</a>
+    <a href="reference/settings/#threads">Learn more</a>
   </article>
   <article class="feature-card">
-    <h3>Containers to bare metal</h3>
+    <h3>ASGI Workers <span class="badge badge--new">Beta</span></h3>
-    <p>Deploy with systemd, Kubernetes, Heroku, or Docker&mdash;the configuration stays predictable everywhere.</p>
+    <p>Native asyncio support for FastAPI, Starlette, and other async frameworks.</p>
-    <a href="deploy/">Deployment patterns &rarr;</a>
+    <a href="asgi/">Learn more</a>
   </article>
 </section>
 
-## Documentation map
+## Quick Links
 
-- [Install](install.md): Set up Gunicorn in a clean environment.
+<div class="quick-links">
-- [Run](run.md): CLI usage and integration with frameworks.
+  <a href="quickstart/" class="quick-link">
-- [Configure](configure.md): Combine CLI flags and config files effectively.
+    <strong>Quickstart</strong>
-- [Settings reference](reference/settings.md): Generated from the Gunicorn source of truth.
+    <span>Get running in 5 minutes</span>
-- [Signals](signals.md): Manage worker lifecycle in production.
+  </a>
-- [Instrumentation](instrumentation.md): Monitor metrics and logs.
+  <a href="deploy/" class="quick-link">
+    <strong>Deployment</strong>
+    <span>Nginx, systemd, Docker</span>
+  </a>
+  <a href="reference/settings/" class="quick-link">
+    <strong>Settings</strong>
+    <span>100+ configuration options</span>
+  </a>
+  <a href="faq/" class="quick-link">
+    <strong>FAQ</strong>
+    <span>Common questions answered</span>
+  </a>
+</div>
 
-## Community & support
+## Community
 
-- Report bugs or request features on [GitHub Issues](https://github.com/benoitc/gunicorn/issues).
+<div class="community-links">
-- Discuss strategies with maintainers in `#gunicorn` on [Libera Chat](https://libera.chat/).
+
-- Contributions are welcome&mdash;see the [contributing guide](community.md#contributing) and say hi to the maintainers.
+- **[GitHub Issues](https://github.com/benoitc/gunicorn/issues)** — Report bugs and request features
+- **[#gunicorn on Libera Chat](https://web.libera.chat/#gunicorn)** — Chat with the community
+- **[Contributing](community/#contributing)** — Help improve Gunicorn
+
+</div>

docs/content/styles/overrides.css

@@ -21,6 +21,7 @@
   height: 1.8rem;
 }
 
+/* Hero Section */
 .md-typeset .hero {
   margin: 2rem 0 3rem;
   padding: 3.5rem;
@@ -52,11 +53,17 @@
 
 .md-typeset .hero__copy h1 {
   margin: 0 0 1rem;
-  font-size: 2.6rem;
+  font-size: 2.4rem;
   font-weight: 700;
   line-height: 1.2;
 }
 
+.md-typeset .hero__tagline {
+  font-size: 1.1rem;
+  opacity: 0.95;
+  margin-bottom: 0;
+}
+
 .md-typeset .hero__cta {
   margin-top: 1.75rem;
   display: flex;
@@ -66,7 +73,7 @@
 
 .md-typeset .hero__code {
   flex: 1 1 260px;
-  max-width: 420px;
+  max-width: 380px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 1.5rem;
@@ -92,8 +99,85 @@
 .md-typeset .hero__version {
   font-weight: 600;
   letter-spacing: 0.01em;
+  font-size: 0.9rem;
+  opacity: 0.9;
 }
 
+.md-typeset .hero__logo {
+  height: 64px;
+  margin-bottom: 1.25rem;
+}
+
+[data-md-color-scheme="slate"] .md-typeset .hero__logo {
+  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
+}
+
+/* Pillars Section */
+.md-typeset .pillars {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin: 3rem 0;
+}
+
+.md-typeset .pillar {
+  text-align: center;
+  padding: 1.5rem;
+}
+
+.md-typeset .pillar__icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.md-typeset .pillar h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  color: var(--gunicorn-green-dark);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .pillar h3 {
+  color: var(--gunicorn-green-light);
+}
+
+.md-typeset .pillar p {
+  margin: 0;
+  font-size: 0.95rem;
+  opacity: 0.85;
+}
+
+/* Frameworks Section */
+.md-typeset .frameworks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin: 2rem 0 3rem;
+}
+
+.md-typeset .framework {
+  background: var(--gunicorn-cream);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--gunicorn-green-dark);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+[data-md-color-scheme="slate"] .md-typeset .framework {
+  background: rgba(45, 48, 45, 0.9);
+  border-color: rgba(255, 255, 255, 0.08);
+  color: #e8f5ea;
+}
+
+.md-typeset .framework:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Feature Grid */
 .md-typeset .feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -118,12 +202,20 @@
 
 .md-typeset .feature-card h3 {
   margin-top: 0;
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   color: var(--gunicorn-green-dark);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 [data-md-color-scheme="slate"] .md-typeset .feature-card h3 {
-  color: var(--gunicorn-cream);
+  color: #e8f5ea;
+}
+
+.md-typeset .feature-card p {
+  font-size: 0.95rem;
+  opacity: 0.85;
 }
 
 .md-typeset .feature-card a {
@@ -139,26 +231,94 @@
   box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
 }
 
-.md-typeset .feature-card:hover a::after {
+/* Badge */
-  content: '\\2192';
+.md-typeset .badge {
-  opacity: 1;
+  display: inline-block;
-  transform: translateX(4px);
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  vertical-align: middle;
 }
 
-.md-typeset .feature-card a::after {
+.md-typeset .badge--new {
-  content: '\\2192';
+  background: var(--gunicorn-green);
-  opacity: 0;
+  color: #fff;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-  transform: translateX(0);
 }
 
+/* Quick Links */
+.md-typeset .quick-links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.md-typeset .quick-link {
+  display: block;
+  padding: 1.25rem;
+  background: var(--gunicorn-cream);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  text-decoration: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+[data-md-color-scheme="slate"] .md-typeset .quick-link {
+  background: rgba(45, 48, 45, 0.9);
+  border-color: rgba(255, 255, 255, 0.05);
+}
+
+.md-typeset .quick-link:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.md-typeset .quick-link strong {
+  display: block;
+  font-size: 1.1rem;
+  color: var(--gunicorn-green-dark);
+  margin-bottom: 0.25rem;
+}
+
+[data-md-color-scheme="slate"] .md-typeset .quick-link strong {
+  color: var(--gunicorn-green-light);
+}
+
+.md-typeset .quick-link span {
+  font-size: 0.9rem;
+  opacity: 0.75;
+}
+
+/* Community Links */
+.md-typeset .community-links {
+  margin: 1.5rem 0;
+}
+
+.md-typeset .community-links ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.md-typeset .community-links li {
+  margin-bottom: 0.75rem;
+}
+
+/* Footer */
+.md-footer-meta__inner {
+  flex-wrap: wrap;
+}
+
+/* Responsive */
 @media (max-width: 960px) {
   .md-typeset .hero {
     padding: 2.25rem;
   }
 
   .md-typeset .hero__copy h1 {
-    font-size: 2.2rem;
+    font-size: 2rem;
   }
 }
 
@@ -176,17 +336,8 @@
   .md-typeset .hero__code {
     width: 100%;
   }
-}
 
-.md-footer-meta__inner {
+  .md-typeset .pillars {
-  flex-wrap: wrap;
+    grid-template-columns: 1fr;
-}
+  }
-
-.md-typeset .hero__logo {
-  height: 64px;
-  margin-bottom: 1.25rem;
-}
-
-[data-md-color-scheme="slate"] .md-typeset .hero__logo {
-  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
 }