docs: update intro lightmode styles

docs/components/home/Acknowledgement.vue

@@ -3,7 +3,7 @@ import Heart from '~icons/mdi/heart'
 </script>
 
 <template>
-  <div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
+  <div id="acknowledgement" class="w-full dark:(bg-black text-white) border-y-1 border-white">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">
       <div>
         <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500" /> Acknowledgement</h1>

docs/components/home/Banner.vue

@@ -8,9 +8,9 @@ const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@
 </script>
 
 <template>
-  <div class="w-full bg-black text-white border-b-1 border-white">
+  <div class="w-full dark:(bg-black text-white border-white) border-black border-b-1">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">
-      <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x divide-white">
+      <div class="grid md:grid-cols-3 gap-3 text-center <md:divide-y md:divide-x dark:divide-white divide-black">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
           <div class="text-gray-400 font-semibold text-lg">Stargazers</div>
           <div class="font-bold text-3xl flex gap-2 items-center justify-center"><Star /> {{ githubData.stargazers_count }}</div>

docs/components/home/flows/Intro.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
@@ -20,7 +20,7 @@ const initialEdges = [
     source: 'intro',
     target: 'examples',
     animated: true,
-    style: { strokeWidth: 2, stroke: '#ef467e' },
+    style: { strokeWidth: 4, stroke: '#ef467e' },
   },
   {
     id: 'eintro-documentation',
@@ -29,7 +29,7 @@ const initialEdges = [
     source: 'intro',
     target: 'documentation',
     animated: true,
-    style: { strokeWidth: 2, stroke: '#f97316' },
+    style: { strokeWidth: 4, stroke: '#f97316' },
   },
   {
     id: 'eintro-acknowledgement',
@@ -38,7 +38,7 @@ const initialEdges = [
     source: 'intro',
     target: 'acknowledgement',
     animated: true,
-    style: { strokeWidth: 2, stroke: '#0ea5e9' },
+    style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
 const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
@@ -140,7 +140,7 @@ const setNodes = () => {
           source: 'intro',
           target: 'examples',
           animated: true,
-          style: { strokeWidth: 2, stroke: '#ef467e' },
+          style: { strokeWidth: 4, stroke: '#ef467e' },
         },
         {
           id: 'eexamples-documentation',
@@ -148,7 +148,7 @@ const setNodes = () => {
           source: 'examples',
           target: 'documentation',
           animated: true,
-          style: { strokeWidth: 2, stroke: '#f97316' },
+          style: { strokeWidth: 4, stroke: '#f97316' },
         },
         {
           id: 'edocumentation-acknowledgement',
@@ -156,7 +156,7 @@ const setNodes = () => {
           source: 'documentation',
           target: 'acknowledgement',
           animated: true,
-          style: { strokeWidth: 2, stroke: '#0ea5e9' },
+          style: { strokeWidth: 4, stroke: '#0ea5e9' },
         },
       ]
     })
@@ -206,6 +206,8 @@ const scrollTo = () => {
 
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
+    <Background variant="lines" :size="0.7" :gap="100" />
+
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
         <div class="box max-w-[500px]">