Initial commit (secrets removed)

app/components/VueSchoolBanner.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bg-blue-950 backdrop-blur-md hover:cursor-pointer" v-show="open">
+    <div
+      class="plausible-event-name=VueSchoolBanner+click flex h-16 shrink-0 items-center justify-between px-4 text-white"
+      @click="navigate"
+    >
+      <div></div>
+      <div class="hidden lg:block">
+        <img src="/img/vueschool/vueschool.svg" alt="VueSchool Logo" class="h-6" />
+      </div>
+      <div
+        class="hidden bg-gradient-to-r from-amber-400 to-pink-500 bg-clip-text text-lg font-semibold tracking-wide text-transparent sm:inline-block"
+      >
+        New Vue Masterclass
+      </div>
+      <div class="hidden lg:flex lg:gap-x-2">
+        <img src="/img/vueschool/vue-with-hat.svg" alt="VueJS Logo" class="h-6" />
+        <img src="/img/vueschool/pinia.svg" alt="Pinia Logo" class="h-6" />
+        <img src="/img/vueschool/vite.svg" alt="Vite Logo" class="h-6" />
+        <img src="/img/vueschool/vitest.svg" alt="Vitest Logo" class="h-6" />
+      </div>
+      <div class="text-center leading-5">
+        <span
+          class="inline-block bg-gradient-to-r from-emerald-300 to-sky-300 bg-clip-text font-semibold tracking-wide text-transparent"
+        >
+          Vue.js Masterclass 2024 Edition
+        </span>
+        <span class="ml-2 hidden font-semibold sm:inline">LAUNCHED</span>
+        <br />
+        <span class="text-sm text-gray-300 sm:text-base">
+          Code a real world app using the latest Vue.js tech
+        </span>
+      </div>
+      <UButton
+        class="plausible-event-name=VueSchoolBanner+click hidden px-4 font-bold md:inline-flex rounded-full"
+        label="Buy Now"
+        icon="i-tabler-caret-right-filled"
+        variant="solid"
+        trailing
+        @click="navigate"
+      />
+      <UIcon
+        name="i-ph-x"
+        class="size-8 p-2 hover:opacity-80"
+        @click.stop="open = false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const open = ref(true)
+const affiliateId = "UILIBPIC"
+const fullUrl = computed(
+  () => `https://vueschool.io/the-vuejs-3-master-class?friend=${affiliateId}`
+)
+
+const navigate = () => {
+  window.open(fullUrl.value, "_blank")
+}
+</script>