import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import TextHighlight from "react-scroll-text-highlighter";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col p-24 max-w-2xl mx-auto gap-4">
      <div className="h-[30vh]"></div>
      <h1 className="text-4xl font-bold mb-16">
        Try this cool animated component!
      </h1>
      <p className="mb-16">Just scroll down ↓</p>
      <p className="text-lg">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla odio
        felis, varius eu dui eget, venenatis laoreet arcu. Integer egestas
        rutrum urna, eget sodales orci fringilla at. Phasellus tristique
        condimentum tincidunt. In in orci sed libero hendrerit luctus vel non
        quam. Vestibulum vel urna ac massa pellentesque feugiat vitae id nisi.
        Fusce in magna eget nulla malesuada condimentum rhoncus nec massa. Nunc
        dignissim libero id quam venenatis tristique commodo non massa.{" "}
        <TextHighlight textColor="white" highlightColor="purple">
          Important text
        </TextHighlight>{" "}
        Sed augue leo, luctus sed libero sed, auctor porta augue. Aenean semper
        in eros eget gravida. Donec ullamcorper ipsum et maximus euismod.
        Pellentesque sit amet nisi risus. Curabitur efficitur, ligula sit amet
        convallis posuere, neque urna tincidunt erat, sit amet pulvinar neque
        leo nec ipsum. In auctor est vel erat volutpat efficitur.
      </p>
      <p className="text-lg">
        Ut tristique, lorem eu auctor condimentum, odio lectus commodo arcu, sit
        amet efficitur mi neque vitae lacus. In luctus, felis et imperdiet
        aliquam, libero nisi placerat erat, a pharetra neque eros quis lorem.
        Quisque dignissim in dui ac finibus. Cras est purus, volutpat sit amet
        feugiat ut, iaculis ut justo. Nullam sagittis orci in leo consequat,
        quis mattis purus rhoncus. Nullam at dolor commodo, sagittis lorem eu,
        consectetur lorem.{" "}
        <TextHighlight textColor="black" highlightColor="white">
          This is important
        </TextHighlight>{" "}
        habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Proin facilisis dui purus, vel imperdiet tellus eleifend in.
        Fusce et est aliquam, viverra neque at, blandit dui. Donec leo ante,
        feugiat in tellus nec, venenatis viverra purus. Nullam nec leo ac mi
        imperdiet accumsan sed non enim.
      </p>
      <p className="text-lg">
        Phasellus eros leo, porttitor eu tempus eget, consequat nec eros. Ut
        lacinia arcu eget justo scelerisque elementum. You can also config{" "}
        <TextHighlight
          textColor="black"
          highlightColor="yellow"
          start="bottom 60%"
          end="top 10%"
        >
          gsap start and end
        </TextHighlight>{" "}
        to delay the animation. Nulla facilisi. Nam lobortis pellentesque massa,
        consectetur fermentum metus maximus eget. Integer sodales dui eget felis
        tristique porta. Nulla facilisi. Proin elementum, nibh vitae varius
        sodales, turpis ligula tincidunt velit, id faucibus urna diam et ante.
        Nam mi ligula, gravida euismod condimentum at, blandit vehicula eros. In
        a facilisis mauris. Etiam in eleifend nisi.
      </p>
      <p className="text-lg">
        Vivamus tincidunt feugiat varius. Nam nec orci felis. Integer nec tempus
        erat. Nullam commodo enim volutpat, egestas ipsum sed, tincidunt nunc.
        Fusce sed commodo tortor. Morbi ut arcu lacinia ligula fringilla
        facilisis vel in sapien. Nulla at cursus augue. Vestibulum ante ipsum
        primis in faucibus orci luctus et ultrices posuere cubilia curae;
        Praesent elementum facilisis commodo. Quisque pretium consequat diam
        eget interdum. Aliquam ac convallis nibh, at pulvinar leo.
      </p>
      <p className="text-lg">
        Aenean tristique feugiat nunc. Nullam pellentesque pharetra mattis. Sed
        quis sapien augue. Integer efficitur magna risus, eu dapibus elit
        aliquam a. Etiam suscipit in ex in aliquet. Cras sed elit eleifend,
        facilisis felis ultrices, pretium odio. Fusce mattis neque sollicitudin
        semper volutpat. Cras erat libero, vulputate et arcu id, semper placerat
        justo. Vestibulum venenatis id massa et egestas. Nam aliquet ante sit
        amet tristique dictum. Ut pretium nec metus sit amet ultrices. Ut
        fermentum tortor a tincidunt laoreet. Nulla viverra velit non neque
        faucibus accumsan.
      </p>
    </main>
  );
}
