Spaces:
Running
Running
File size: 2,886 Bytes
7bf2ef2 091969f d5135a6 091969f b1a70c5 7bf2ef2 091969f d5135a6 091969f 7bf2ef2 091969f d5135a6 091969f 7bf2ef2 d5135a6 7bf2ef2 d5135a6 7bf2ef2 d5135a6 7bf2ef2 416e7d7 b1a70c5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
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>
);
}
|