af/components/TopBanner.vue

<template>
    <div :class="`top_banner print:hidden page ${pageClasses.join(' ')}`">
        <div class="container mx-auto max-w-screen-xl z-10">
            <a href="/">
                <ClientOnly>
                    <span class="sr-only">Home page</span>
                    <div class="cubetti_bg" />
                    <Cubetti />
                </ClientOnly>
            </a>
            <div v-if="!isIndexPage">
                <div class="headline sm:ml-52 ml-24 pt-2 sm:pt-4"><h1 class="sm:text-4xl text-3xl text-white"><slot name="headline">Default Headline from TopBanner</slot></h1></div>
                <div class="subheadline sm:ml-56 ml-28"><h2 class="sm:text-2xl text-xl text-white"><slot name="tagline">Default tagline from TopBanner</slot></h2></div>
            </div>
            <div v-if="isIndexPage" class="ml-2">
                <div class="headline sm:-ml-48 -ml-36 pt-3 sm:pt-4 text-center"><h1 class="sm:text-3xl text-2xl text-white">Hello</h1></div>
                <div class="subheadline ml-14 -mt-8 text-center"><h2 class="sm:text-5xl text-4xl text-white">I'm Andrea</h2></div>
            </div>
        </div>
    </div>
</template>

<style lang="pcss">
html.no-webp {
    body {
        &.research .top_banner {
            background-image: url("/images/banner_research-2x.jpg");
        }
        &.writing .top_banner {
            background-image: url("/images/banner_writing-2x.jpg");
        }
        .top_banner {
            background-image: url("/images/banner.jpg");
        }
    }
}
body {
    &.research .top_banner {
        background-image: url("/images/banner_research-2x.webp");
    }
    &.writing .top_banner {
        background-image: url("/images/banner_writing-2x.webp");
        background-position: 0 100%;
    }
}
.top_banner {
    background-image: url("/images/banner.webp");
    background-position: center;
    background-size: cover;
    height: 80px;

    @media screen(sm) {
        height: 100px;
    }

    .container {
        position: relative;
    
        .headline, .subheadline {
            text-shadow: 0px 0px 4px theme(colors.sky.900);
        }

        .cubetti_bg {
            position: absolute;
            background: white;
            height: calc(150px * 0.58);
            width: calc(140px * 0.55);
            top: 8px;
            left: 8px;
            border-radius: 6px;

            &:before {
                content: "";
                background: linear-gradient(0deg, theme(colors.sky.900), transparent);
                opacity: 0.25;
                position: absolute;
                height: 100%;
                width: 100%;
                z-index: -1;
                filter: blur(10px);
            }

            @media screen(sm) {
                position: absolute;
                background: white;
                height: 150px;
                width: 140px;
                top: -10px;
                left: 45px;
                border-radius: 12px;

                &:before {
                    content: "";
                    background: linear-gradient(0deg, theme(colors.sky.900), transparent);
                    opacity: 0.25;
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    z-index: -1;
                    filter: blur(10px);
                }
            }
        }
    }
}

</style>

<script lang="ts" setup>
const pageClasses = useState<string[]>('pageClasses').value || [];

const route = useRoute();
const error = useError();
const isIndexPage = computed(() => route.name === 'index' && error.value === undefined);
</script>