import { component$ } from "@builder.io/qwik";
import { OAUTH_LINK } from "~/lib/constants";

export default component$(() => (
    <div
        data-aos="fade-up"
        data-aos-duration="1000"
        class="flex flex-col gap-1.5 items-center justify-center w-4/5 bg-gradient-to-b from-stereo/30 to-transparent rounded-2xl h-96 py-4"
    >
        <p class="text-4xl text-center">
            ready to try the <span class="text-stereo">stereo</span> experience?
        </p>
        <p class="text-xl text-white/80 text-center">
            join over <span class="text-stereo">100k</span> other people hosting their files with <span class="text-stereo">stereo</span>!
        </p>
        <a
            href={OAUTH_LINK}
            class="px-12 py-1.5 mt-1.5 text-lg font-medium text-white bg-stereo rounded-full hover:text-stereo hover:bg-white transition duration-300"
        >
            get started
        </a>
    </div>
));