chore: fix demo style

.vitepress/config.ts

@@ -1,6 +1,7 @@
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+import vite from '../vite.config'
 
 const CURRENT_VERSION = '0.47.1'
 

.vitepress/theme/components/Demo.vue

@@ -15,6 +15,9 @@ import SlideContainer from '@slidev/client/internals/SlideContainer.vue'
 import '@slidev/client/styles/layouts-base.css'
 import '@slidev/theme-default/styles/layouts.css'
 
+import DemoEditor from './DemoEditor.vue'
+import DemoSlide from './DemoSlide.vue'
+
 const page = ref(0)
 const paused = ref(false)
 const code = ref('')

.vitepress/theme/components/LandingPage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="xl:grid xl:grid-cols-[3fr_4fr] gap-4" min-h-80vh px8 xl:px20 py5 max-w-100vw xl:max-w-450 mxa>
+    <div flex="~ col items-center justify-center" min-h-150>
+      <h1 hidden>
+        Slidev
+      </h1>
+      <img src="/logo-title.png" alt="Slidev" w-80 xl:w-100 xl:mt--35>
+      <h2 text-3xl mt--5 op80 text-center>
+        Presentation Slides for Developers
+      </h2>
+      <div flex="~ gap-3 justify-center" p4 mt-5>
+        <a href="/guide/" class="bg-$vp-c-brand-3 text-white px5 py3 text-xl font-bold rounded-xl hover:bg-$vp-c-brand-1">Get Started</a>
+        <a href="/guide/why" class="bg-$vp-c-gray-1 text-white px5 py3 text-xl font-bold rounded-2xl hover:bg-$vp-c-brand-1">Why</a>
+      </div>
+    </div>
+    <div flex>
+      <div w-180 ma>
+        <ClientOnly>
+          <Demo />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>

.vitepress/theme/components/Tweet.vue → .vitepress/theme/components/TheTweet.vue

@@ -3,7 +3,7 @@ A simple wrapper for embedded Tweet
 
 Usage:
 
-<Tweet id="20" />
+<TheTweet id="20" />
 -->
 
 <script setup lang="ts">