:memo: Update readme.

1 files changed, 107 insertions, 12 deletions

diff --git a/README.md b/README.md
index a91dcfb..e94e73f 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,73 @@
-# Lustre
+<h1 align="center">Lustre</h1>
 
-[![Package Version](https://img.shields.io/hexpm/v/lustre)](https://hex.pm/packages/lustre)
+<div align="center">
+  ✨ <strong>Make your frontend shine</strong> ✨
+</div>
 
-An Elm-inspired framework for building web apps in Gleam!
+<div align="center">
+  A framework for building Web apps in Gleam!
+</div>
+
+<br />
+
+<div align="center">
+  <a href="https://hex.pm/packages/lustre">
+    <img src="https://img.shields.io/hexpm/v/lustre"
+      alt="Available on Hex" />
+  </a>
+</div>
+
+<div align="center">
+  <h3>
+    <a href="https://lustre.build">
+      Website
+    </a>
+    <span> | </span>
+    <a href="https://github.com/lustre-labs/lustre/docs/guide/01-quickstart.md">
+      Quickstart
+    </a>
+    <span> | </span>
+    <a href="https://hexdocs.pm/lustre">
+      Reference
+    </a>
+    <span> | </span>
+    <a href="https://discord.gg/Fm8Pwmy">
+      Discord
+    </a>
+  </h3>
+</div>
+
+<div align="center">
+  <sub>Built with ❤︎ by
+  <a href="https://twitter.com/hayleighdotdev">Hayleigh Thompson</a> and
+  <a href="https://github.com/lustre-labs/lustre/graphs/contributors">
+    contributors
+  </a>
+</div>
+
+---
+
+## Table of contents
+
+- [Features](#features)
+- [Example](#example)
+- [Philosophy](#philosophy)
+- [Installation](#installation)
+- [Where next](#where-next)
+- [Support](#support)
+
+## Features
+
+- A declarative, functional API for constructing HTML. No templates, no macros
+  just Gleam.
+
+- An Erlang and Elm-inspired architecture for managing state.
+
+- Managed side effects for predictable, testable code.
+
+- Universal components. Write once, run anywhere. Elm meets Phoenix LiveView.
+
+## Example
 
 ```gleam
 import gleam/int
@@ -13,7 +78,7 @@ import lustre/event.{on_click}
 
 pub fn main() {
   let app = lustre.simple(init, update, view)
-  let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil)
+  let assert Ok(_) = lustre.start(app, "#app", Nil)
 
   Nil
 }
@@ -45,18 +110,48 @@ fn view(model) {
 }
 ```
 
-## Documentation
-
-You can find the official documentation over at [lustre.build](https://lustre.build). Note
-that if you're viewing the documentation published on [Hexdocs](https://hexdocs.pm/lustre/index.html),
-you may find that things are missing! Because of the way Gleam's documentation is
-generated, packages and functions that target _only_ JavaScript don't get documented.
+## Philosophy
 
 ## Installation
 
-Lustre is available on [Hex](https://hex.pm/packages/lustre). You can install
-it like any other Hex package:
+Lustre is published on [Hex](https://hex.pm/packages/lustre)! You can add it to
+your Gleam projects from the command line:
 
 ```sh
 $ gleam add lustre
 ```
+
+If you're using a different build tool, like Rebar3 or Mix, you can add Lustre
+to your `rebar.config` or `mix.exs` file respectively.
+
+```erlang
+{deps, [
+  {lustre, "4.0.0"}
+]}
+```
+
+```elixir
+defp deps do
+  [
+    {:lustre, "~> 4.0"}
+  ]
+end
+```
+
+## Where next
+
+To get up to speed with Lustre, check out the [quickstart guide](./guide/01-quickstart).
+If you prefer to see some code, the [examples](https://github.com/lustre-labs/lustre/tree/main/examples)
+directory contains a handful of small applications that demonstrate different
+aspects of the framework.
+
+You can also read through the documentation and API reference on
+[HexDocs](https://hexdocs.pm/lustre).
+
+## Support
+
+Lustre is mostly built by just me, [Hayleigh](https://github.com/hayleigh-dot-dev),
+around two jobs. If you'd like to support my work, you can [sponsor me on GitHub](https://github.com/sponsors/hayleigh-dot-dev).
+
+Contributions are also very welcome! If you've spotted a bug, or would like to
+suggest a feature, please open an issue or a pull request.