---
import Link from "next/link";
import { IoIosArrowDroprightCircle } from "react-icons/io";
const {  title, text, link, number  } = Astro.props;
---

<div class="relative text-white flex flex-col items-center w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black h-[63vh] border-[0.1vw] border-white/40 rounded-[2vw] pt-[5%] pb-[3%]">
    <div class="rounded-full aspect-square w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/>
    <p class="text-[1.7vw] font-bold text-center">
        {title}
    </p>
    <p class="text-[1.2vw] w-4/5 mt-[15%] mb-[25%]">
        {text}
    </p>

    <Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%] hover:text-ieee-yellow duration-300">
        more details
        <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
    </Link>
    <p class="text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
        {number}
    </p>
</div>