feat(mellow-vue): add call out to install extension

templates/mellow-vue/assets/js/pages/index.vue

@@ -20,59 +20,60 @@ defineOptions({
   <section class="px-4 py-12 md:mx-auto md:w-10/12 md:px-8 md:py-16">
     <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
       <a
-        href="https://sailscasts.com"
+        href="https://marketplace.visualstudio.com/items?itemName=Sails.sails-vscode"
         target="_blank"
         rel="noopener noreferrer"
         class="group block rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
       >
-        <h3 class="mb-2 text-xl font-semibold text-brand">Sailscasts</h3>
+        <h3 class="mb-2 text-xl font-semibold text-brand">
+          Official VS Code extension
+        </h3>
         <p class="mb-4 text-gray-600">
-          Learn Sails.js and The Boring JavaScript Stack through video tutorials
-          and courses.
+          Install the official Sails VS Code extension to supercharge your
+          development experience.
         </p>
         <button
           class="mt-2 rounded-lg border border-brand px-4 py-2 text-brand transition-colors duration-300 group-hover:bg-brand group-hover:text-white"
         >
-          Start Learning
+          Install Extension
         </button>
       </a>
 
       <a
-        href="https://sailscasts.com/chat"
+        href="https://sailsjs.com/documentation"
         target="_blank"
         rel="noopener noreferrer"
         class="group block rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
       >
         <h3 class="mb-2 text-xl font-semibold text-brand">
-          Sailscasts Discord
+          The Boring JavaScript Stack Docs
         </h3>
         <p class="mb-4 text-gray-600">
-          Join the community to discuss Sails.js and get help. Connect with
-          fellow developers and stay updated.
+          Official documentation for The Boring JavaScript Stack.
         </p>
         <button
           class="mt-2 rounded-lg border border-brand px-4 py-2 text-brand transition-colors duration-300 group-hover:bg-brand group-hover:text-white"
         >
-          Join Community
+          Read Docs
         </button>
       </a>
-
       <a
-        href="https://sailsjs.com/documentation"
+        href="https://sailscasts.com/chat"
         target="_blank"
         rel="noopener noreferrer"
         class="group block rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
       >
         <h3 class="mb-2 text-xl font-semibold text-brand">
-          The Boring JavaScript Stack Docs
+          Sailscasts Discord
         </h3>
         <p class="mb-4 text-gray-600">
-          Official documentation for The Boring JavaScript Stack.
+          Join the community to discuss Sails.js and get help. Connect with
+          fellow developers and stay updated.
         </p>
         <button
           class="mt-2 rounded-lg border border-brand px-4 py-2 text-brand transition-colors duration-300 group-hover:bg-brand group-hover:text-white"
         >
-          Read Docs
+          Join Community
         </button>
       </a>
 
@@ -94,6 +95,23 @@ defineOptions({
           Star Project
         </button>
       </a>
+      <a
+        href="https://sailscasts.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group block rounded-lg bg-gradient-to-b from-brand-50/10 to-white p-6 shadow-md transition-all duration-300 hover:shadow-lg"
+      >
+        <h3 class="mb-2 text-xl font-semibold text-brand">Sailscasts</h3>
+        <p class="mb-4 text-gray-600">
+          Learn Sails.js and The Boring JavaScript Stack through video tutorials
+          and courses.
+        </p>
+        <button
+          class="mt-2 rounded-lg border border-brand px-4 py-2 text-brand transition-colors duration-300 group-hover:bg-brand group-hover:text-white"
+        >
+          Start Learning
+        </button>
+      </a>
     </div>
   </section>
   <section