44 lines
2.1 KiB
Text
44 lines
2.1 KiB
Text
---
|
||
import Link from "next/link";
|
||
import { GoArrowDownRight } from "react-icons/go";
|
||
import { FaGear } from "react-icons/fa6";
|
||
import { IoMdCalendar } from "react-icons/io";
|
||
import { RiRobot2Fill } from "react-icons/ri";
|
||
const {image, text, link, delay} = Astro.props;
|
||
---
|
||
<div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
|
||
|
||
<img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/>
|
||
<Link
|
||
href={link}
|
||
target={text==="H.A.R.D. HACK"? "_blank":"_self"}
|
||
className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
|
||
>
|
||
<div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
|
||
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md: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-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]">
|
||
<div class="text-[2vw] md: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-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
|
||
</div>
|
||
|
||
{text === "H.A.R.D. HACK" &&
|
||
<p class="text-[1.8vw] md: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>
|