feathers/docs/components/HomeHero.vue

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import CTAButton from './CTAButton.vue'
import { useData } from 'vitepress'

const { isDark } = useData()

const toggleHomeClass = () => document.getElementById('app')?.classList.toggle('home-page')

onMounted(toggleHomeClass)
onBeforeUnmount(toggleHomeClass)
</script>

<template>
  <div class="home-hero">
    <div class="illustration">
      <div class="feathers-home-hero relative">
        <div class="relative aspect-15/9 overflow-hidden">
          <img
            id="hero-day-bg"
            class="hero-bg-light w-screen transition-opacity duration-1000 pointer-events-none"
            src="/img/illustration/hero-day-bg.svg"
            alt="A sunny daytime background looking over FeathersJS Valley."
            width="1504"
            height="902"
          />
          <img
            id="hero-night-bg"
            class="hero-bg-dark w-screen absolute inset-0 transition-opacity duration-1000 pointer-events-none"
            src="/img/illustration/hero-night-bg.svg"
            alt="A chill nighttime background overlooking FeathersJS Valley"
            width="1504"
            height="902"
          />
          <img
            id="hero-day-sun-solo"
            class="hero-bg-dark w-screen absolute inset-0 transition-all duration-1000 pointer-events-none"
            src="/img/illustration/hero-day-sun-solo.svg"
            alt="The FeathersJS Birds enjoying a cool night in the valley of Feathers where a lovely treehouse sits next to the river running between the mountains."
            width="1583"
            height="1580"
          />
          <img
            id="hero-night-moon-solo"
            class="hero-bg-dark w-screen absolute inset-0 transition-all duration-1000 pointer-events-none"
            :class="[isDark ? '-top-[69%] opacity-100' : 'top-[300%] opacity-0']"
            src="/img/illustration/hero-night-moon-solo.svg"
            alt="The FeathersJS Birds enjoying a cool night in the valley of Feathers where a lovely treehouse sits next to the river running between the mountains."
            width="1583"
            height="1580"
          />
          <img
            id="hero-day-foreground"
            class="w-screen absolute inset-0 transition-opacity duration-1000 pointer-events-none"
            src="/img/illustration/hero-day-foreground.svg"
            alt="The FeathersJS Birds enjoying a cool night in the valley of Feathers where a lovely treehouse sits next to the river running between the mountains."
            width="1504"
            height="902"
          />
          <img
            class="hero-bg-dark w-screen absolute inset-0 transition-opacity duration-1000 pointer-events-none"
            src="/img/illustration/hero-night-foreground.svg"
            alt="The FeathersJS Birds enjoying a cool night in the valley of Feathers where a lovely treehouse sits next to the river running between the mountains."
            width="1504"
            height="902"
          />
          <div class="absolute inset-0 flex flex-col pt-13.5vw md:pt-14.5vw">
            <div
              class="transition-all duration-400 text-center text-lg xl:text-6xl leading-tight font-bold"
              sm="text-2xl"
              md="text-3xl"
              lg="text-5xl"
              xl="text-6xl"
            >
              The API and Real-time <br />
              Application Framework
            </div>
            <div class="mx-auto mt-4 lg:mt-12 hidden md:block">
              <CTAButton primary>Get Started</CTAButton>
            </div>
          </div>
        </div>
      </div>

      <div class="illustration-roundb text-center text-neutral-content pt-4 font-bold">
        <p class="text-xs md:text-base lg:text-lg xl:text-2xl">
          For TypeScript and JavaScript in Node.js, React Native and the browser
        </p>
        <div class="scale-80">
          <CTAButton href="/guides/basics/starting.html" primary class="mt-3 mb-6 md:mb-10"
            >Quick Start</CTAButton
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="postcss">
@media (min-width: 768px) {
  .home-hero {
    margin-top: -56px;
    margin-bottom: 40px;
  }
}
@media (min-width: 960px) {
  .home-hero {
    margin-top: -144px;
    margin-bottom: 40px;
  }
}

#hero-day-sun-solo,
.dark #hero-night-moon-solo {
  @apply -top-[69%] opacity-100;
}
.dark #hero-day-sun-solo,
#hero-night-moon-solo {
  @apply top-[300%] opacity-0;
}

.hero-bg-dark {
  opacity: 0;
}
.dark .hero-bg-dark {
  opacity: 1;
}

.illustration {
  /* height: 69vw; */
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.illustration-roundb::before {
  background: var(--neutral);
  border-radius: 50%;
  bottom: 0;
  content: '';
  height: 300px;
  position: absolute;
  width: 150%;
  margin-left: -75%;
  z-index: -1;
}
</style>