Port all documents to MDX

pages/index.tsx

@@ -0,0 +1,58 @@
+import {
+  Button,
+  Card,
+  CardGrid,
+  GuiderLayout,
+  Hero,
+} from '@neato/guider/client';
+
+export default function LandingPage() {
+  return (
+    <GuiderLayout meta={{ layout: 'page' }} >
+      <Hero>
+        <Hero.Title>movie-web</Hero.Title>
+        <Hero.Subtitle>
+        A simple and no-BS app for watching movies and TV shows. Totally free and open source, forever.
+        </Hero.Subtitle>
+        <Hero.Actions>
+          <Button to="/self-hosting/hosting-intro">Get Started</Button>
+          <Button to="https://github.com/movie-web/movie-web" type="secondary">
+            Open on GitHub →
+          </Button>
+        </Hero.Actions>
+      </Hero>
+      <CardGrid>
+        <Card icon="mdi:server-network" title="Easy to host">
+          Can be easily hosted on any static website host.
+        </Card>
+        <Card icon="material-symbols:hangout-video-off" title="No Ads">
+          movie-web will never show ads, enjoy watching without interruptions.
+        </Card>
+        <Card icon="ic:baseline-ondemand-video" title="Custom Player">
+          Enjoy a fully custom video player including streaming integration, subtitle customization and easy TV season navigation.
+        </Card>
+        <Card icon="mdi:content-save" title="Saves your progress">
+          Will remember your progress in movies and TV shows, so you can easily continue where you left off.
+        </Card>
+        <Card icon="mdi:bookmark" title="Bookmarking">
+          Allows you to bookmark your favorite movies and TV shows, so you can easily find them again.
+        </Card>
+        <Card icon="mdi:cloud-refresh" title="Syncing across devices">
+          Enjoy uninterrupted streaming as your progress, proxies, and bookmarks sync effortlessly across all your devices.
+        </Card>
+        <Card icon="mdi:power-plug-outline" title="Modular by design">
+          Mix and match different parts of the movie-web service, [host your backend](4.backend/1.deploy.md) or use ours, it'll work either way.
+        </Card>
+        <Card icon="mdi:flag" title="Multiple Languages">
+          Supports over 25 languages, including English, German, French, Spanish, Italian, Czech, Hindi, Arabic, Hebrew and more.
+        </Card>
+        <Card icon="mdi:brush-variant" title="Customizable">
+          Supports various themes, subtitle colors and subtitle sizes so you can make it look however you want.
+        </Card>
+        <Card icon="mdi:cellphone" title="Progressive Web App Support">
+          Supports PWA, so you can install it on your phone and use it just like a native app.
+        </Card>
+      </CardGrid>
+    </GuiderLayout>
+  );
+}