Add getting started docs

packages/docs/src/components/HomepageFeatures/index.tsx

@@ -1,71 +0,0 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Heading from '@theme/Heading';
-import styles from './styles.module.css';
-
-type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: ReactNode;
-};
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({title, Svg, description}: FeatureItem) {
-  return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures(): ReactNode {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

packages/docs/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

packages/docs/src/css/custom.css

@@ -1,30 +1,37 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #0b6f74;
+  --ifm-color-primary-dark: #096469;
+  --ifm-color-primary-darker: #085e63;
+  --ifm-color-primary-darkest: #074d51;
+  --ifm-color-primary-light: #0d7a7f;
+  --ifm-color-primary-lighter: #0e8085;
+  --ifm-color-primary-lightest: #109096;
+  --ifm-background-color: #fffaf1;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-font-family-base:
+    "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+  --docusaurus-highlighted-code-line-bg: rgba(11, 111, 116, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+.button--primary {
+  --ifm-button-background-color: #0b6f74;
+  --ifm-button-border-color: #0b6f74;
+}
+
+.button--secondary {
+  --ifm-button-background-color: #f4a636;
+  --ifm-button-border-color: #f4a636;
+  --ifm-button-color: #1f2526;
+}
+
+[data-theme="dark"] {
+  --ifm-color-primary: #7ad6d4;
+  --ifm-color-primary-dark: #5cccca;
+  --ifm-color-primary-darker: #4cc6c4;
+  --ifm-color-primary-darkest: #34aaa8;
+  --ifm-color-primary-light: #98e0de;
+  --ifm-color-primary-lighter: #a8e6e4;
+  --ifm-color-primary-lightest: #d5f4f3;
+  --ifm-background-color: #111c1f;
+  --docusaurus-highlighted-code-line-bg: rgba(122, 214, 212, 0.18);
 }

packages/docs/src/pages/index.module.css

@@ -1,23 +1,80 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.page {
+  min-height: calc(100vh - var(--ifm-navbar-height));
+  background:
+    radial-gradient(circle at top left, rgba(11, 111, 116, 0.22), transparent 32rem),
+    radial-gradient(circle at 85% 20%, rgba(244, 166, 54, 0.18), transparent 28rem),
+    linear-gradient(135deg, #f8f4ea 0%, #eef8f7 48%, #fffaf1 100%);
+}
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+.hero {
+  padding: 8rem 1rem 5rem;
+}
+
+.eyebrow {
+  color: #0b6f74;
+  font-size: 0.85rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  margin-bottom: 1.25rem;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  color: #132c2f;
+  font-size: clamp(3rem, 9vw, 6.75rem);
+  letter-spacing: -0.08em;
+  line-height: 0.9;
+  margin: 0;
+  max-width: 880px;
+}
+
+.lede {
+  color: #385256;
+  font-size: clamp(1.15rem, 2vw, 1.45rem);
+  line-height: 1.65;
+  margin: 2rem 0 0;
+  max-width: 720px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.5rem;
+}
+
+.cards {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 0 1rem 6rem;
+}
+
+.cards article {
+  background: rgba(255, 255, 255, 0.74);
+  border: 1px solid rgba(19, 44, 47, 0.12);
+  border-radius: 1.5rem;
+  box-shadow: 0 24px 80px rgba(19, 44, 47, 0.08);
+  padding: 1.5rem;
+}
+
+.cards h2 {
+  color: #132c2f;
+  font-size: 1.2rem;
+  margin-bottom: 0.75rem;
+}
+
+.cards p {
+  color: #486267;
+  margin: 0;
 }
 
 @media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+  .hero {
+    padding-top: 5rem;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
   }
 }
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

packages/docs/src/pages/index.tsx

@@ -1,44 +1,62 @@
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
-import Layout from '@theme/Layout';
-import clsx from 'clsx';
-import type {ReactNode} from 'react';
+import Link from "@docusaurus/Link"
+import Layout from "@theme/Layout"
+import clsx from "clsx"
+import type { ReactNode } from "react"
 
-import styles from './index.module.css';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import styles from "./index.module.css"
 
 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
+      title="effect-fc"
+      description="Write React function components with Effect"
+    >
+      <main className={styles.page}>
+        <section className={clsx("container", styles.hero)}>
+          <p className={styles.eyebrow}>Effect for React function components</p>
+          <h1>Write components as Effect programs.</h1>
+          <p className={styles.lede}>
+            effect-fc gives React 19 components access to Effect services,
+            scopes, subscriptions, and async workflows without giving up normal
+            React boundaries.
+          </p>
+          <div className={styles.actions}>
+            <Link className="button button--primary button--lg" to="/docs/getting-started">
+              Get Started
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              to="https://github.com/Thiladev/effect-fc"
+            >
+              GitHub
+            </Link>
+          </div>
+        </section>
+
+        <section className={clsx("container", styles.cards)}>
+          <article>
+            <h2>Generator components</h2>
+            <p>
+              Use <code>Component.make</code> to yield Effects and return JSX
+              from the same component body.
+            </p>
+          </article>
+          <article>
+            <h2>Runtime at the edge</h2>
+            <p>
+              Provide your app layer once with <code>ReactRuntime.Provider</code>
+              and convert Effect-FC components at React boundaries.
+            </p>
+          </article>
+          <article>
+            <h2>Scoped lifecycles</h2>
+            <p>
+              Tie subscriptions and resources to component scopes so finalizers
+              run when React unmounts.
+            </p>
+          </article>
+        </section>
       </main>
     </Layout>
-  );
+  )
 }

packages/docs/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.