chore: update

app.vue

@@ -66,15 +66,15 @@ onMounted(() => {
     <NuxtLoadingIndicator />
 
     <AppBanner
-      id="nuxt-cert-date"
-      to="https://certificates.dev/nuxt?utm_source=nuxt&utm_medium=website&utm_campaign=affiliate&friend=NUXT"
+      id="nuxt-ui-pro"
+      to="https://ui.nuxt.com/pro?utm_source=nuxt&utm_medium=website&utm_campaign=banner"
     >
       <div class="flex items-center gap-1">
         <UIcon
-          name="i-ph-circle-wavy-check-duotone"
+          name="i-ph-layout-duotone"
           class="w-5 h-5 flex-shrink-0 pointer-events-none hidden sm:inline-block"
         />
-        <span><span class="hidden lg:inline">Official</span> Nuxt certification (mid-level) is out!</span>
+        <span>Create beautiful & responsive Nuxt apps with Nuxt UI Pro</span>
         <UButton
           label="Learn more"
           color="white"

content/5.video-courses.yml

@@ -5,6 +5,12 @@ description: 'Watch video courses from the community to learn Vue 3 and Nuxt 3.'
 navigation.icon: i-ph-graduation-cap
 align: center
 courses:
+  - name: 'Mastering Nuxt'
+    slug: 'mastering-nuxt'
+    description: 'The complete guide to developing and deploying fast, production-ready Nuxt 3 apps.'
+    url: 'https://masteringnuxt.com/nuxt3'
+    badge: Premium
+    sponsor: true
   - name: 'Nuxt 3 Fundamentals'
     slug: 'vc-nuxt-3-fundamentals'
     description: 'Learn Nuxt 3 fundamentals with VueSchool.'
@@ -30,11 +36,6 @@ courses:
     screenshotOptions:
       delay: 1
       removeElements: ['tp-yt-iron-overlay-backdrop', 'tp-yt-paper-dialog']
-  - name: 'Mastering Nuxt'
-    slug: 'mastering-nuxt'
-    description: 'The complete guide to developing and deploying fast, production-ready Nuxt 3 apps.'
-    url: 'https://masteringnuxt.com/nuxt3'
-    badge: Premium
   - name: 'Real World Nuxt 3'
     slug: 'vm-real-world-nuxt'
     description: 'This is a hands-on course for learning how to build web apps using Nuxt.'

pages/video-courses.vue

@@ -31,17 +31,23 @@ defineOgImageComponent('Docs')
             <NuxtImg
               :src="`/assets/video-courses/${course.slug}.png`"
               :alt="course.name"
-              width="58"
-              height="32"
+              :width="course.sponsor ? 96 : 58"
+              :height="course.sponsor ? 64 : 32"
               format="webp"
               :modifiers="{ pos: 'top' }"
               :loading="index > 3 ? 'lazy' : undefined"
               class="rounded border dark:border-gray-800 object-cover mr-2 hidden lg:block"
             />
-            <h3 class="text-base font-medium text-gray-700 dark:text-gray-200 flex-grow lg:flex-grow-0">
+            <h3
+              class="font-medium text-gray-700 dark:text-gray-200 flex-grow lg:flex-grow-0"
+              :class="course.sponsor ? 'text-xl' : 'text-base'"
+            >
               {{ course.name }}
             </h3>
-            <p class="text-sm dark:text-gray-400 text-gray-500 hidden lg:block flex-grow">
+            <p
+              class="dark:text-gray-400 text-gray-500 hidden lg:block flex-grow"
+              :class="course.sponsor ? 'text-base' : 'text-sm'"
+            >
               {{ course.description }}
             </p>
             <UBadge
@@ -60,6 +66,17 @@ defineOgImageComponent('Docs')
               class="rounded-full"
             />
             <UButton
+              v-if="course.sponsor"
+              :to="course.url"
+              target="_blank"
+              trailing-icon="i-ph-arrow-right"
+              size="2xs"
+              color="green"
+            >
+              Discover course
+            </UButton>
+            <UButton
+              v-else
               :to="course.url"
               target="_blank"
               trailing-icon="i-ph-arrow-right"