src/lib/components/generate/Banner.svelte

<script lang="ts">
  import Banner from "$lib/assets/banner.webp";
  import Sparkles from "$lib/assets/sparkles.svg";
	import Button from "$lib/components/Button.svelte";
</script>

<div class="w-full rounded-xl relative p-6 xl:p-8 flex flex-col xl:flex-row items-start xl:items-center justify-between gap-4 ring-4 ring-white/20">
  <div
    class="bg-cover bg-center brightness-75 absolute left-0 top-0 h-full w-full rounded-xl"
    style={`
      background-image: url(${Banner});
      background-position: 0% 0%;
    `}
  />
  <div>
    <p class="text-xl xl:text-2xl font-extrabold text-white drop-shadow">
      Share with community!
    </p>
    <p class="text-base font-medium text-white drop-shadow mt-1">
      Once you generate an image, you can share it with the community!
      <span class="hidden xl:block">
        You can also see what others have generated, and like their images.
      </span>
    </p>
  </div>
  <Button href="/gallery">
    See gallery
  </Button>
  <img src={Sparkles} alt="" class="absolute -top-4 -left-2 w-8 object-contain brightness-200 grayscale" />
  <img src={Sparkles} alt="" class="absolute -rotate-180 -right-4 -bottom-2 w-8 object-contain brightness-200 grayscale" />
</div>