---
import Link from "next/link";
import { GoArrowDownRight } from "react-icons/go";
import { Image } from "astro:assets";
import robocup from "../../images/robocup.webp";
---

<div class="flex flex-col items-center relative my-[10%]">
    <Image
        src={robocup}
        alt="robocub competition image"
        class="w-3/5 rounded-[2vw] object-cover aspect-[8/5] opacity-40"
    />
    <Link
        href="/"
        target="_blank"
        className="absolute aspect-[8/5] w-3/5 p-[5%] group -bottom-[3%]"
    >
        <div class="w-full flex justify-end items-center h-4/5">
            <p class="text-[4.5vw] font-bold w-fit">
                We Are<br />
                Hiring
            </p>
        </div>
        <div class="text-[1vw] pt-[3%]">
            <p>
                Join a community of beginner to experienced engineers from
                different disciplines and backgrounds
            </p>
            <p>
                Fill out this application form (due week 2 of each quarter if
                space permits)
            </p>
        </div>
        <div
            class="flex w-full justify-end items-end text-[3.5vw] mt-[3%] group-hover:text-ieee-yellow duration-300"
        >
            <p
                class="mr-[2%] w-fit py-[1%] px-[2%] text-[1.2vw] border-[0.1vw] group-hover:text-ieee-yellow border-white rounded-full group-hover:border-ieee-yellow duration-300 font-light"
            >
                Application form
            </p>
            <GoArrowDownRight />
        </div>
    </Link>
</div>
