classroomio/apps/classroomio-com/src/lib/Home/MoreFeatures.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { fly } from 'svelte/transition';
  import { folder, globe, team, transcription } from '$lib/emojis';
  import { tools } from '$lib/utils/constants/tools';

  let selected = 0;
  let interval: NodeJS.Timer;

  const moreFeatures = [
    {
      icon: globe,
      title: 'Customizable Landing Page',
      description:
        'A minimalistic landing page template out of the box to share your courses with the world',
      image: '/landing-page-builder.webp'
    },
    {
      icon: team,
      title: 'Team management',
      description:
        'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
      image: '/team-management.png'
    },
    {
      icon: transcription,
      title: 'Auto Video Transcription',
      description:
        'AI automatically transcribes videos, making content searchable for seamless student access.',
      image: '/video-transcription.png'
    },
    {
      icon: folder,
      title: 'Downloadable Lesson PDF',
      description: 'Students can download lessons automatically for offline access.',
      image: '/download-pdf.png'
    }
  ];

  const freeTools = tools.filter((item) => item.showFeature);

  onMount(() => {
    if (window.innerWidth > 768) {
      interval = setInterval(() => {
        selected = moreFeatures[selected + 1] ? selected + 1 : 0;
      }, 3000);
    }
  });
</script>

<!-- More Features -->
<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
  <div class="mx-0 lg:mx-[12%]">
    <div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
      <h2 class="mt-2 text-3xl font-bold font-display tracking-tight lg:text-4xl">
        There is More...
      </h2>
      <p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
        ClassroomIO is packed with useful features while we try to make it easy to use.
      </p>
    </div>

    <div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
      <div
        class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
      >
        {#each moreFeatures as moreFeature, i}
          <button
            class="p-4 rounded-md {i === selected &&
              'selected'} mb-3 text-start min-w-[75vw] lg:min-w-[unset]"
            on:mouseenter={() => {
              selected = i;
              clearInterval(interval);
            }}
          >
            <div class="flex gap-1 items-center">
              <img
                loading="lazy"
                width="32"
                height="32"
                src={moreFeature.icon}
                alt=""
                class="w-8"
              />
              <p class="text-lg font-semibold">
                {moreFeature.title}
              </p>
            </div>
            <p>{moreFeature.description}</p>
          </button>
        {/each}
      </div>

      <!-- Video  -->
      <div class="h-full w-full p-3 lg:w-2/3 lg:p-0">
        {#key selected}
          <img
            width="100%"
            height="100%"
            loading="lazy"
            id="image"
            in:fly={{ y: 100, duration: 1000 }}
            class="w-full flex flex-col items-center"
            src={moreFeatures[selected].image}
            alt={moreFeatures[selected].title}
          />
        {/key}
      </div>
    </div>

    <!-- free tools section -->
    <div>
      <div class="flex justify-evenly gap-y-8 flex-wrap w-full mt-10 mx-auto">
        <div class="text-center">
          <h1 class="text-3xl md:text-5xl font-bold">
            Explore Our <span class="text-[#0233BD]">Free Tools</span>
          </h1>
          <p class="text-sm md:text-base text-[#334155] md:w-[65%] mt-5 md:mt-10 mx-auto">
            Innovative tools to help you aid you example preparation, as well as making learning
            more fun for students and educator looking for engaging resources.
          </p>
        </div>

        {#each freeTools as tool}
          <a
            class="w-full flex flex-col gap-3 max-w-[400px] md:max-w-[300px] mt-5 p-5 border rounded-md bg-white shadow-sm hover:scale-95 transition-all ease-in-out cursor-pointer"
            href="/tools/{tool.slug}"
          >
            <img class="w-[30%] rounded-full border border-[#EAEAEA]" src={tool.src} alt="" />
            <div class="rounded-r-md p-3">
              <h1 class="font-bold text-sm md:text-base">{tool.title}</h1>
              <p class="text-xs text-gray-600 mt-1.5">
                {tool.subText}
              </p>
            </div>
          </a>
        {/each}
      </div>
      <div class="flex justify-center items-center mt-20">
        <a
          class="md:text-base w-full md:max-w-[300px] max-w-[400px] rounded-md bg-blue-700 px-6 py-3 lg:px-6 lg:py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 lg:font-semibold cursor-pointer"
          href="/tools"
          rel="noopener noreferrer nofollow"
        >
          More Tools
        </a>
      </div>
    </div>
  </div>
</section>

<style>
  #morefeatures .selected {
    background-image: linear-gradient(
      45deg,
      rgb(253, 239, 132),
      rgb(247, 198, 169),
      rgb(21, 186, 196)
    );
  }
</style>