fixed light mode selection and copy

Author: GregorGabric

components/fern/easy.vue

@@ -11,15 +11,15 @@
                     </h2>
                 </div>
                 <p class="max-w-md leading-normal">
-                    Our goal is to designed an ergonomic, sensible and
-                    productive framework that even beginners can use easily
+                    Our goal is to design an ergonomic, sensible and productive
+                    framework that even beginners can use easily
                 </p>
                 <p class="max-w-md leading-normal">
-                    Design to avoid unnecessary complexity, and type complexity
-                    for you to focus on building
+                    Our framework is designed to minimize unnecessary
+                    complexity, allowing you to focus solely on building.
                 </p>
                 <p class="leading-normal">
-                    A framework that feel
+                    A framework that feels
                     <span
                         class="text-gradient from-violet-500 to-sky-500 font-semibold"
                         >just like JavaScript</span

components/fern/hero.vue

@@ -89,11 +89,11 @@
         <h3
             class="text-xl md:text-2xl text-gray-500 dark:text-gray-400 !leading-normal text-left md:text-center w-full max-w-[40rem]"
         >
-            TypeScript with
+            A TypeScript framework with
             <span
                 class="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400"
                 >End-to-End Type Safety</span
-            >, type integrity, and exceptional developer experience.
+            >, type integrity, and exceptional developer experience.<br />
             Supercharged by Bun.
         </h3>
         <section
@@ -113,7 +113,7 @@
                     bun create elysia app
                 </code>
                 <button
-                	id="hero-copy"
+                    id="hero-copy"
                     class="hidden sm:inline-flex p-3 rounded-2xl active:rounded-full hover:bg-pink-200/25 focus:bg-pink-200/25 active:bg-pink-200/50 hover:dark:bg-pink-500/20 focus:dark:bg-pink-500/20 active:dark:bg-pink-500/20 transition-all"
                     @click="copied = true"
                 >
@@ -169,7 +169,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 import Ray from './ray.vue'
 
@@ -209,8 +209,9 @@ watch(copied, (value) => {
     );
 }
 
-#hero-get-started, #hero-copy {
-	@apply transform hover:scale-110 focus:scale-110;
-	transition: transform .35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+#hero-get-started,
+#hero-copy {
+    @apply transform hover:scale-110 focus:scale-110;
+    transition: transform 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
 }
 </style>

components/fern/sponsor.vue

@@ -8,11 +8,12 @@
         <p
             class="text-lg md:text-xl !leading-[2rem] sm:text-center w-full max-w-2xl mx-auto dark:text-gray-400 dark:font-medium"
         >
-            Elysia is
+            Elysia is a
             <span class="text-gray-700 dark:text-gray-200 font-medium"
-                >not own by an organization</span
+                >community-driven project</span
             >
-            but is driven by the community.
+            <br />
+            Your support fuels its growth and innovation.
             <br />
             Elysia development is only possible thanks to your support
         </p>
@@ -139,7 +140,7 @@ const sponsors: Sponsor[] = data
             }
 
             & > p {
-            	@apply my-0;
+                @apply my-0;
             }
         }
     }

components/fern/test.vue

@@ -58,12 +58,13 @@
                     </h3>
                 </div>
                 <p class="lg:max-w-md leading-normal">
-                    Elysia provide a type-safe layer for interact and test your
-                    server from routes to parameters.
+                    Elysia provides a type-safe layer for interacting with and
+                    testing your server, covering everything from routes to
+                    parameters.
                 </p>
                 <p class="lg:max-w-md leading-normal">
-                    With auto-completion, you can easily write tests for server
-                    without any hassle.
+                    Auto-completion simplifies server testing, making it quick
+                    and effortless.
                 </p>
                 <!-- <slot name="test-script" /> -->
             </header>

components/tailwind.css

@@ -7,14 +7,18 @@
 }
 
 .text-gradient {
-	@apply bg-gradient-to-br inline-block text-transparent bg-clip-text;
+    @apply bg-gradient-to-br inline-block text-transparent bg-clip-text;
 }
 
 .code-showcase > div {
-	@apply w-full;
+    @apply w-full;
 
-	& > .vp-code > code {
-		font-size: 1.175rem !important;
-		line-height: 1.875rem !important;
-	}
+    & > .vp-code > code {
+        font-size: 1.175rem !important;
+        line-height: 1.875rem !important;
+    }
+}
+
+*::selection {
+    @apply text-white bg-purple-400;
 }