41 lines
1.9 KiB
Text
41 lines
1.9 KiB
Text
---
|
||
import Link from "next/link";
|
||
import { GoArrowDownRight } from "react-icons/go";
|
||
import { Image } from "astro:assets";
|
||
import { FaGear } from "react-icons/fa6";
|
||
import { IoMdCalendar } from "react-icons/io";
|
||
import { RiRobot2Fill } from "react-icons/ri";
|
||
const {image, text, link} = Astro.props;
|
||
---
|
||
<div class="w-[15vw] relative group">
|
||
|
||
<img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
|
||
<Link href={link} className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
|
||
<div class="w-full flex justify-end pr-[5%]">
|
||
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
|
||
{
|
||
text === "PROJECTS"? <RiRobot2Fill/>:
|
||
text === "EVENTS"? <IoMdCalendar/>:
|
||
<FaGear/>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[30%] pb-[5%]">
|
||
<div class="text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
|
||
<p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
|
||
{text}
|
||
</p>
|
||
<GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow"/>
|
||
</div>
|
||
|
||
{text === "H.A.R.D. HACK" &&
|
||
<p class="text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
|
||
UC San Diego’s largest
|
||
hardware focused hackathon
|
||
hold by IEEE UCSD, HKN, and TNT
|
||
</p>
|
||
}
|
||
</div>
|
||
</Link>
|
||
</div>
|