app/page.tsx

import Link from "next/link";
import Image from "next/image";
import { IoMdImages } from "react-icons/io";
import { RxLapTimer } from "react-icons/rx";
import { TbPointerSearch } from "react-icons/tb";

import { Button } from "@/components/button/button";
import SparklingEffect from "@/assets/images/sparkles.svg";
import SparklingEffect2 from "@/assets/images/sparkles-2.svg";

export default function Home() {
  return (
    <div className="w-full min-h-screen mx-auto max-w-4xl relative flex items-center justify-center">
      <div className="relative grid grid-cols-1 gap-8 py-12 px-6">
        <h1 className="text-center text-5xl md:text-7xl font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80 relative">
          <Image
            src={SparklingEffect}
            width={30}
            height={50}
            alt="Sparkling effect"
            className="absolute top-8 left-0 -translate-x-1/2 lg:-translate-x-[calc(100%+1rem)]"
          />
          Which image is the <br />
          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
            good
          </span>{" "}
          one?
          <Image
            src={SparklingEffect2}
            width={30}
            height={50}
            alt="Sparkling effect"
            className="absolute -top-6 right-0 translate-x-1/2 lg:translate-x-[calc(100%+1rem)]"
          />
        </h1>
        <h2 className="text-white text-xl md:text-2xl text-center font-light">
          Time to test if you know how to compose the perfect prompt.
        </h2>
        <ul className="grid grid-cols-1 lg:grid-cols-3 gap-6 my-3">
          <li className="font-regular text-center text-white text-sm lg:text-base">
            <IoMdImages className="inline-block mb-4 lg:mb-2 text-3xl lg:text-4xl" />
            <p>3 images and 1 prompt are displayed</p>
          </li>
          <li className="font-regular text-center text-white text-sm lg:text-base">
            <TbPointerSearch className="inline-block mb-4 lg:mb-2 text-3xl lg:text-4xl" />
            <p>Guess which image is related to the prompt</p>
          </li>
          <li className="font-regular text-center text-white text-sm lg:text-base">
            <RxLapTimer className="inline-block mb-4 lg:mb-2 text-3xl lg:text-4xl" />
            <p>Guess the answer in 10 seconds or loose</p>
          </li>
        </ul>
        <div className="w-full max-w-xs mx-auto">
          <Link href="/quizz">
            <Button theme="primary" className="mx-auto">
              Start a quizz
            </Button>
          </Link>
        </div>
        <div className="absolute top-1/2 left-1/2 will-transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-br from-green to-cyan blur-[120px] md:blur-[140px] w-full h-2/3 lg:max-h-[250px] rounded-full z-[-1] opacity-40"></div>
      </div>
    </div>
  );
}