🎉 feat: feature sheet

Author: SaltyAom

components/midori/e2e-type-safety.vue

@@ -52,9 +52,14 @@ await eden.user.age.patch({
             Move fast and break nothing like tRPC.
         </p>
 
-        <section
-            class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8"
+        <a
+            class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 px-3 py-1.5 rounded-lg mt-4"
+            href="/patterns/end-to-end-type-safety"
         >
+            See how it works
+        </a>
+
+        <section class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8">
             <div class="w-full">
                 <Prism
                     class="!text-base !font-mono rounded-xl"

components/midori/editor.vue

@@ -205,7 +205,7 @@ onMounted(() => {
             </section>
             <div class="w-full mockup-browser h-96 shadow-xl border dark:border-gray-600 bg-white dark:bg-gray-700 max-w-full">
                 <div class="mockup-browser-toolbar">
-                    <form class="input font-medium dark:!bg-gray-600" @submit.prevent="execute">
+                    <form class="input font-medium !bg-gray-100 dark:!bg-gray-600" @submit.prevent="execute">
                         <span class="text-gray-400 dark:text-gray-300">localhost</span>
                         <input
                             class="absolute"

components/midori/index.vue

@@ -96,6 +96,15 @@ onMounted(() => {
             <Plugins />
             <Editor />
             <Community />
+            <figure
+                class="hidden sm:block max-w-6xl w-full mx-auto rounded-2xl overflow-hidden my-12 shadow-xl bg-gray-50 dark:bg-gray-800"
+            >
+                <img
+                    class="w-full object-cover object-center opacity-100"
+                    src="/assets/feature-sheet.webp"
+                    alt="Elysia Feature Sheet"
+                />
+            </figure>
             <QuickStart />
             <BuiltWithLove />
         </article>

components/midori/quickstart.vue

@@ -8,7 +8,7 @@
             Start in minutes
         </h2>
         <h3
-            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-left md:text-center w-full max-w-3xl"
+            class="text-xl md:text-2xl leading-relaxed text-gray-400 text-center w-full max-w-3xl"
         >
             Scaffold your project, and run server in no time
         </h3>