librodrome/app/components/home/GrateWizardTeaser.vue

<template>
  <section class="section-padding">
    <div class="container-content">
      <UiScrollReveal>
        <div class="gw-card relative overflow-hidden">
          <!-- Shadok blob -->
          <svg class="shadok-blob" viewBox="0 0 200 180" fill="none" aria-hidden="true">
            <path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" fill="currentColor" opacity="0.12"/>
            <path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
            <circle cx="100" cy="80" r="8" fill="currentColor" opacity="0.08"/>
            <circle cx="120" cy="110" r="6" fill="currentColor" opacity="0.06"/>
            <circle cx="80" cy="105" r="5" fill="currentColor" opacity="0.07"/>
            <circle cx="95" cy="72" r="3" fill="currentColor" opacity="0.3"/>
            <circle cx="108" cy="70" r="3" fill="currentColor" opacity="0.3"/>
            <circle cx="96" cy="71" r="1.2" fill="currentColor" opacity="0.5"/>
            <circle cx="109" cy="69" r="1.2" fill="currentColor" opacity="0.5"/>
          </svg>
          <div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8 relative z-1">
            <!-- Icon -->
            <div class="gw-icon-wrapper">
              <div class="i-lucide-sparkles h-8 w-8 text-amber-400" />
            </div>

            <!-- Content -->
            <div class="flex-1">
              <span class="inline-block mb-2 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
                {{ content?.grateWizardTeaser.kicker }}
              </span>
              <h3 class="heading-h3 font-display font-bold text-white">
                {{ content?.grateWizardTeaser.title }}
              </h3>
              <p class="mt-2 text-sm text-white/60 md:text-base leading-relaxed">
                {{ content?.grateWizardTeaser.description }}
              </p>
            </div>

            <!-- CTAs -->
            <div class="shrink-0 flex flex-col gap-2">
              <UiBaseButton :href="url" target="_blank" @click="launch">
                <div class="i-lucide-external-link mr-2 h-4 w-4" />
                {{ content?.grateWizardTeaser.cta.launch }}
              </UiBaseButton>
              <UiBaseButton variant="ghost" :to="content?.grateWizardTeaser.cta.more.to">
                {{ content?.grateWizardTeaser.cta.more.label }}
                <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
              </UiBaseButton>
            </div>
          </div>
        </div>
      </UiScrollReveal>
    </div>
  </section>
</template>

<script setup lang="ts">
const { url, launch } = useGrateWizard()
const { data: content } = await usePageContent('home')
</script>

<style scoped>
.gw-card {
  border: 1px solid hsl(40 80% 50% / 0.2);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, hsl(40 80% 50% / 0.05), hsl(40 80% 50% / 0.02));
  box-shadow: 0 0 40px hsl(40 80% 50% / 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gw-card:hover {
  border-color: hsl(40 80% 50% / 0.35);
  box-shadow: 0 0 60px hsl(40 80% 50% / 0.1);
}

.heading-h3 {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
}

.gw-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: hsl(40 80% 50% / 0.1);
  border: 1px solid hsl(40 80% 50% / 0.15);
  flex-shrink: 0;
}

.shadok-blob {
  position: absolute;
  right: -2%;
  top: -20%;
  width: clamp(100px, 15vw, 180px);
  opacity: 0.15;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-drift 12s ease-in-out infinite;
}

@keyframes shadok-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@media (max-width: 768px) {
  .shadok-blob { display: none; }
}
</style>