Hackathon Promotional Banner (components/HackathonBanner.vue)

A reusable Vue component featuring a styled, animated gradient banner for promoting hackathon events within a web application.

<!--
  Source: https://github.com/zernonia/madewithsupabase | License: MIT | Copyright 2021 zernonia
  Provided via justclaw.it.com; keep this notice with the code.
-->
<template>
  <NuxtLink
    id="hacktober"
    class="
      relative
      overflow-hidden
      mt-4
      p-8
      w-full
      max-w-screen-lg
      md:h-48
      flex flex-col
      md:flex-row
      items-center
      justify-center
      md:justify-between
      bg-gradient-to-tr
      from-emerald-600
      to-emerald-300
      rounded-lg
      group
    "
    to="/hacktoberfest"
  >
    <div
      class="
        absolute
        h-100
        w-72
        -top-52
        -left-60
        group-hover:-left-50
        transition-all
        bg-emerald-800
        opacity-70
        transform
        -rotate-40
     

... (truncated -- full source via MCP)