From 19527856fb3db913b3ad2ecc3a3ee9d336ca4917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 24 Feb 2026 01:54:17 +0100
Subject: [PATCH] Add doc intro

---
 packages/docs/docs/intro.md | 100 +++++++++++++++++++++++++++---------
 1 file changed, 75 insertions(+), 25 deletions(-)

diff --git a/packages/docs/docs/intro.md b/packages/docs/docs/intro.md
index 88f9571..5f5bcfd 100644
--- a/packages/docs/docs/intro.md
+++ b/packages/docs/docs/intro.md
@@ -2,46 +2,96 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+# Effect FC
 
-Let's discover **Docusaurus in less than 5 minutes**.
+Welcome to **Effect FC** – a powerful integration of [Effect-TS](https://effect.website/) with React 19.2+ that enables you to write function components using Effect generators.
+
+## What is Effect FC?
+
+Effect FC allows you to harness the full power of Effect-TS within your React components. Instead of writing traditional React hooks, you can use Effect generators to compose complex, type-safe component logic with built-in error handling, resource management, and dependency injection.
+
+### Key Features
+
+- **Effect-TS Integration**: Write components using Effect generators for powerful, composable effects
+- **Type Safety**: Full TypeScript support with Effect's comprehensive type system
+- **Resource Management**: Automatic cleanup and finalization of resources
+- **Dependency Injection**: Built-in support for providing dependencies to components
+- **React 19.2+ Compatible**: Leverages the latest React features
+
+## Quick Example
+
+Here's what writing an Effect FC component looks like:
+
+```typescript
+export class Todos extends Component.make("Todos")(function*() {
+    const state = yield* TodosState
+    const [todos] = yield* useSubscribables(state.ref)
+
+    yield* useOnMount(() => Effect.andThen(
+        Console.log("Todos mounted"),
+        Effect.addFinalizer(() => Console.log("Todos unmounted")),
+    ))
+
+    const TodoFC = yield* Todo
+
+    return (
+        <Container>
+            <Heading align="center">Todos</Heading>
+
+            <Flex direction="column" align="stretch" gap="2" mt="2">
+                <TodoFC _tag="new" />
+
+                {Chunk.map(todos, todo =>
+                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
+                )}
+            </Flex>
+        </Container>
+    )
+}) {}
+```
 
 ## Getting Started
 
-Get started by **creating a new site**.
+### Prerequisites
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+Before using Effect FC, make sure you have:
 
-### What you'll need
+- **Node.js** version 20.0 or above
+- **React** 19.2 or higher
+- **Effect** 3.19 or higher
 
-- [Node.js](https://nodejs.org/en/download/) version 20.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+### Installation
 
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
+Install Effect FC and its peer dependencies:
 
 ```bash
-npm init docusaurus@latest my-website classic
+npm install effect-fc effect react
 ```
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
+Or with your preferred package manager:
 
 ```bash
-cd my-website
-npm run start
+yarn add effect-fc effect react
+bun add effect-fc effect react
+pnpm add effect-fc effect react
 ```
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+### Next Steps
 
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+- Explore the [Tutorial Basics](./tutorial-basics/create-a-document.md) to learn the fundamentals
+- Check out the [Example Project](https://github.com/your-repo/packages/example) for a complete working application
+- Read the [API Documentation](./api/) for detailed reference
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+## Important Notes
+
+:::info Early Development
+This library is in early development. While it is mostly feature-complete and usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are welcome!
+:::
+
+:::warning Known Issues
+- React Refresh doesn't work for Effect FC components yet. Page reload is required to view changes. Regular React components are unaffected.
+:::
+
+## Community & Support
+
+Have questions or want to contribute? We'd love to hear from you! Check out the project repository and feel free to open issues or discussions.