mirror of
https://github.com/mmahdium/portfolio.git
synced 2025-12-20 09:23:54 +01:00
62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<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>
|