www/src/components/Features.astro

---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import { Image } from 'astro:assets'

import browserSidebar from '../assets/browser-sidebar.webm'
import browserWorkspaces from '../assets/browser-workspaces.webm'
import browserCompactMode from '../assets/browser-compactmode.webm'
import browserGlance from '../assets/browser-glance.webm'
import browserSplitViews from '../assets/browser-splitview.webm'

import { motion } from 'motion/react'
import { getTitleAnimation, getZoomInAnimation } from '../animations'
---

<section
  id="features"
  class="relative flex w-full flex-col px-4 py-36 lg:px-12 xl:px-24"
>
  <div class="flex w-full flex-col items-center gap-24 xl:gap-48">
    <div class="w-full flex flex-col px-2 md:px-12 lg:px-24 xl:text-center">
      <motion.span client:load {...getTitleAnimation(0.2)}>
        <Description class="text-6xl font-bold"
          >How does zen <br
          class="lg:hidden"
        />keep <u class="font-extrabold">you</u><br
            class="hidden lg:block"
          /> always <span class="font-extrabold text-coral">organized</span
          >?</Description
        >
      </motion.span>
      <Description class="mt-4 text-lg font-normal">
        Zen is designed to help you focus on what matters most. Here are some<br
          class="hidden lg:block"
        /> of the features that help you stay focused.
      </Description>
    </div>

    <div class="long-feature">
      <div class="lg:p-24">
        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
          Workspaces
        </Description>
        <p class="desc mt-2 text-xl font-normal">
          With Zen, you can create multiple workspaces to keep your tabs
          organized.
        </p>
      </div>
      <video
        src={browserWorkspaces}
        autoplay
        loop
        muted
        playsinline
        preload="none"
        class="rounded-xl border-4 border-white object-cover shadow"
      ></video>
    </div>
    <div class="long-feature xl:!flex-row-reverse">
      <div class="lg:p-24">
        <Description class="feature-title text-5xl md:text-6xl font-bold">
          Compact Mode
        </Description>
        <p class="desc mt-2 text-xl font-normal">
          Zen's compact mode allows you to focus on your work without any
          distractions.
        </p>
      </div>
      <video
        src={browserCompactMode}
        autoplay
        loop
        muted
        playsinline
        preload="none"
        class="rounded-xl border-4 border-white object-cover shadow"
      ></video>
    </div>
    <div class="long-feature">
      <div class="lg:p-24">
        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
          Zen Glance
        </Description>
        <p class="desc mt-2 text-xl font-normal">
          Zen's glance feature allows you to view links without <i>actually</i>
          opening them.
        </p>
      </div>
      <video
        src={browserGlance}
        autoplay
        loop
        muted
        playsinline
        preload="none"
        class="rounded-xl border-4 border-white object-cover shadow"
      ></video>
    </div>
    <div class="long-feature xl:!flex-row-reverse">
      <div class="lg:p-24">
        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap whitespace-nowrap">
          Split Views
        </Description>
        <p class="desc mt-2 text-xl font-normal">
          Zen's split view feature allows you to view multiple tabs at once.
        </p>
      </div>
      <video
        src={browserSplitViews}
        autoplay
        loop
        muted
        playsinline
        preload="none"
        class="rounded-xl border-4 border-white object-cover shadow"
      ></video>
    </div>
    <div class="long-feature">
      <div class="lg:p-24">
        <Description class="feature-title text-5xl md:text-6xl font-bold">
          Sidebar
        </Description>
        <p class="desc mt-2 text-xl font-normal">
          Zen's sidebar feature allows you to view all your tabs in one place.
        </p>
      </div>
      <video
        src={browserSidebar}
        autoplay
        loop
        muted
        playsinline
        preload="none"
        class="rounded-xl border-4 border-white object-cover shadow"
      ></video>
    </div>
  </div>
</section>
<script>
  function changeFeature(index: number) {
    document
      .querySelectorAll('#feature-list .feature')
      .forEach((feature: any, i) => {
        if (i === index) {
          feature.setAttribute('active', '')
        } else {
          feature.removeAttribute('active')
        }
      })
    document
      .querySelectorAll('#feature-list-image > *')
      .forEach((img: any, i) => {
        img.style.opacity = i === index ? 1 : 0
        img.classList.toggle('absolute', i !== index)
        img.classList.toggle('hidden', i !== index)
      })
  }

  document
    .querySelectorAll('#feature-list .feature')
    .forEach((feature: any, i) => {
      feature.addEventListener('click', () => {
        changeFeature(i)
      })
    })
  changeFeature(0)
</script>
<style>

  .long-feature {
    @apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:px-0 2xl:px-24 xl:flex-row xl:gap-32;
  
    & > div:first-child {
      @apply xl:min-w-[40%];
    }

    & video {
      @apply xl:h-[32rem] xl:h-96 2xl:h-[32rem];
    }
  }
</style>