feat: update learn section

Author: mychidarko

.vitepress/config.mts

@@ -75,6 +75,10 @@ export default defineConfig({
 
   markdown: {
     lineNumbers: true,
+    theme: {
+      light: 'one-dark-pro',
+      dark: 'one-dark-pro',
+    },
     config(md) {
       md.use(groupIconMdPlugin);
     },

.vitepress/theme/components/Home/Testimonials.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="hidden sm:flex justify-center item-center md:pt-36 md:pb-48 bg-[var(--vp-c-bg-secondary)] !px-2 sm:!px-10">
+  <div
+    class="hidden sm:flex justify-center item-center md:pt-36 md:pb-48 bg-[var(--vp-c-bg-secondary)] !px-2 sm:!px-10">
     <section class="flex flex-col justify-center items-center">
       <div class="text-center mb-16">
         <h1 class="text-3xl md:!text-5xl px-[20%]">Powering thousands of makers, just like you.</h1>
@@ -28,8 +29,8 @@
       <div class="relative z-10 text-center max-w-screen-lg xl:max-w-screen-xl mx-auto pt-20">
         <div class="px-4 sm:px-6 md:px-8">
           <figure class="max-w-3xl">
-            <blockquote class="!border-none !my-7">
-              <p class="text-center !text-3xl !font-semibold sm:!text-4xl !text-[initial] leading-relaxed">
+            <blockquote class="!border-none !my-7 !text-[var(--vp-c-text-1)]">
+              <p class="text-center !text-3xl !font-semibold sm:!text-4xl leading-relaxed">
                 <span class="text-gray-400">“</span>I don’t have time for complexity. Leaf gives me the tools I need,
                 nothing more.<span class="text-gray-400">”</span>
               </p>

.vitepress/theme/components/shared/Paperplane.vue

@@ -1,6 +1,6 @@
 <template>
-  <a href="https://paperplane.leafphp.dev" class="p-4 rounded-2xl bg-[var(--vp-c-bg-alt)] mt-5" id="widget">
-    <img src="https://github.com/user-attachments/assets/8563834f-037f-4d3f-97ea-317f377cf28b" class="rounded-xl"
+  <a href="https://paperplane.leafphp.dev" class="p-4 rounded-3xl bg-[var(--vp-c-bg-alt)] mt-5" id="widget">
+    <img src="https://github.com/user-attachments/assets/8563834f-037f-4d3f-97ea-317f377cf28b" class="rounded-2xl"
       alt="Paperplane" width="457" height="336">
 
     <p class="mt-4 mb-2 text-xs">

.vitepress/theme/components/shared/SidebarLinks.vue

@@ -91,7 +91,7 @@ const links = [
   },
   {
     name: 'Community',
-    href: '/community/',
+    href: 'https://discord.gg/Pkrm9NJPE3',
     color: 'group-hover:shadow-violet-200 dark:group-hover:bg-violet-500',
     icon: `<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
             <path fill-rule="evenodd" clip-rule="evenodd"

.vitepress/theme/components/shared/TutorialNumber.vue

@@ -0,0 +1,10 @@
+<script setup>
+const { number } = defineProps(['number'])
+</script>
+
+<template>
+  <span
+    class="bg-[var(--vp-c-bg-alt)] inline-flex items-center justify-center rounded-full text-gray-700 dark:text-gray-300 text-lg h-10 w-10 mr-1 flex-none font-normal">
+    {{ number }}
+  </span>
+</template>

.vitepress/theme/styles/index.css

@@ -33,6 +33,12 @@
 
   --vp-c-card-bg: #fefefe;
   --vp-c-card-text-2: #333333;
+
+  --shiki-light: #ABB2BF;
+  --vp-code-block-bg: #292d3e;
+  --vp-code-tab-divider: #394d4e;
+  --vp-code-block-divider-color: #394d4e;
+  --vp-code-line-number-color: rgba(235, 235, 245, 0.38);
 }
 
 html.dark {
@@ -51,6 +57,10 @@ html.dark {
 
   --vp-c-card-bg: #0b2a32;
   --vp-c-card-text-2: #bebebe;
+
+  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-tab-divider: #112121;
+  --vp-code-block-divider-color: #112121;
 }
 
 /* .is-typed {
@@ -163,3 +173,11 @@ body {
 .VPNavBarTitle.has-sidebar img {
   @apply !w-8 !h-8;
 }
+
+.vp-code-block-title-bar {
+  @apply text-gray-200 dark:text-gray-400;
+}
+
+.vp-code-group .tabs label {
+  @apply !text-gray-200 dark:text-gray-400;
+}