updates for docs index page (#1258)

Author: sawka

docs/docs/index.mdx

@@ -12,36 +12,68 @@ import { Card, CardGroup } from "@site/src/components/card.tsx";
 
 Wave is an [open-source](https://github.com/wavetermdev/waveterm) terminal that adds the ability to launch graphical widgets, controlled and integrated directly with the CLI. We support MacOS, Linux, and Windows ([Downloads](https://waveterm.dev/download)).
 
+Wave isn't just another terminal emulator; it's a rethink on how terminals are built. For too long there has been a disconnect between the CLI and the web. If you want fast, keyboard-accessible, easy-to-write applications, you use the CLI, but if you want graphical interfaces, native widgets, copy/paste, scrolling, variable font sizes, then you'd have to turn to the web. Wave's goal is to bridge that gap.
+
+![Wave Screenshot](/img/wave-screenshot.webp)
+
+<CardGroup>
+  <Card
+    href="./customization"
+    icon="fa-file-magnifying-glass"
+    title="Customization"
+    description="Set up tabs and terminals to match your workflow needs."
+  />
+  <Card
+    href="./keybindings"
+    icon="fa-file-magnifying-glass"
+    title="Key Bindings"
+    description="Boost efficiency with keyboard shortcuts for faster navigation."
+  />
+  <Card
+    href="./layout"
+    icon="fa-file-magnifying-glass"
+    title="Layout"
+    description="Organize your workspace using our layout system."
+  />
+  <Card
+    href="./connections"
+    icon="fa-file-magnifying-glass"
+    title="Remote Connections"
+    description="Quickly SSH or connect to remote machines in one step."
+  />
+  <Card
+    href="./widgets"
+    icon="fa-file-magnifying-glass"
+    title="Widgets"
+    description="Explore built-in tools to extend your terminal’s functionality."
+  />
+  <Card
+    href="./wsh-command"
+    icon="fa-file-magnifying-glass"
+    title="wsh Command"
+    description="Control Wave and launch widgets directly from the command line."
+  />
+</CardGroup>
+
+<div style={{ marginBottom: 30 }} />
+
 :::info
 
-**These docs are incomplete**, but we're working on them. If you have a question, please feel free to ask us in [Discord](https://discord.gg/XfvZ334gwU). If you'd like to file a bug/enchancement, please
-use [Github Issues](https://github.com/wavetermdev/waveterm/issues). These docs are also open-source and we do accept PRs for docs [here](https://github.com/wavetermdev/waveterm/blob/main/docs). You can click the "Edit this page" link at the bottom of the page to get taken directly to the editor page for that document in GitHub.
+If you have a question, please feel free to ask us in [Discord](https://discord.gg/XfvZ334gwU). If you'd like to file a bug/enchancement, please use [Github Issues](https://github.com/wavetermdev/waveterm/issues). These docs are also open-source and we do accept PRs for docs [here](https://github.com/wavetermdev/waveterm/blob/main/docs). You can click the "Edit this page" link at the bottom of the page to get taken directly to the editor page for that document in GitHub.
 
 :::
 
-References:
+<div class="reference-links">
+
+Other References:
 
-- [Widgets](./widgets)
 - [Configuration](./config)
-- [Key Bindings](./keybindings)
-- [wsh command](./wsh)
-- [Connections](./connections)
-- [Tab Layout System](./layout)
 - [Custom Widgets](./customwidgets)
 - [Telemetry](./telemetry)
 - [FAQ](./faq)
+- [Release Notes](./releasenotes)
 
-<!--
-## Features
-
-<CardGroup>
-	<Card href="features/preview" icon="fa-file-magnifying-glass" title="File Previews" description="Preview widgets let you view markdown, images, video, CSVs, and more inline." />
-	<Card href="features/remotes" icon="fa-server" title="Reliable Remote Connections" description="Automatic reconnection, remote file previews, and more." />
-	<Card href="features/ai" icon="fa-sparkles" title="Integrated AI" description="Inline AI Chat Windows hooked up to any LLM (local or remote)." />
-	<Card href="features/browser" icon="fa-globe" title="Inline Web Browser" description="Access online content without switching context." />
-	<Card href="features/charts" icon="fa-chart-simple" title="Data Visualization" description="Create graphs of system stats or custom data piped directly from CLI programs." />
-</CardGroup>
--->
+</div>
 
 ## Links
 

docs/src/components/card.css

@@ -5,18 +5,24 @@
     gap: 1rem;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 450px) {
     .card-group {
         grid-template-columns: 1fr;
     }
 }
 
-@media (996px < width <= 1170px) {
+@media (min-width: 451px) and (max-width: 995px) {
     .card-group {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
+@media (min-width: 996px) {
+    .card-group {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
 .card {
     display: grid;
     grid-template-columns: 1.5rem 1rem 1fr;

docs/src/css/custom.css

@@ -32,6 +32,12 @@ body .markdown h2 {
     --ifm-h2-font-size: 1.75rem;
 }
 
+@media (min-width: 996px) {
+    .reference-links {
+        display: none;
+    }
+}
+
 /* Adds extra margin between last navbar item and the dark mode toggle. */
 .navbar__items--right .navbar__item:last-of-type {
     margin-right: 4px;