34 lines
1 KiB
Text
34 lines
1 KiB
Text
---
|
|
const { title, link, image, col } = Astro.props;
|
|
import { GoArrowDownRight } from "react-icons/go";
|
|
import Link from "next/link";
|
|
---
|
|
|
|
<Link
|
|
href={link}
|
|
target="_blank"
|
|
className={`ease-in-out group relative col-span-${col} text-white`}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt="past projects image"
|
|
class="md:h-[30vh] h-[15vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300"
|
|
/>
|
|
|
|
<div
|
|
class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]"
|
|
>
|
|
<div
|
|
class="text-[1.4vw] md:text-[1.1vw] flex w-full px-[2%] justify-between items-end"
|
|
>
|
|
<p
|
|
class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"
|
|
>
|
|
{title}
|
|
</p>
|
|
<GoArrowDownRight
|
|
className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|