ieeeucsd-org/src/components/qp/Mentorship.astro
2025-01-27 11:27:03 -08:00

52 lines
2.2 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
import { Image } from "astro:assets";
import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
import mentorship from "../../images/joinbg.webp";
import jonathan from "../../images/about3.webp";
---
<div class="flex justify-center mt-[10%] mb-[3%]">
<div class="flex md:w-[70%] w-[80%] items-center">
<div class="md:w-1/2 w-[60%] font-light md:text-[1.2vw] text-[1.6vw]">
<div class="flex items-center md:text-[2.3vw] text-[4vw] mb-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
<p
class="md:text-[2.3vw] text-[4vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
>
Mentorship
</p>
</div>
<p class="my-[10%]">
Mentors are a fundamental part of QP, providing teams with
advice and guidance through the ideation and execution of their
project. Each team is paired with a mentor they can regularly
consult for advice and insights. Mentors are matched with teams
based on their expertise and the teams project focus, ensuring
aligned support for each group.
</p>
<p class="mb-[12%]">
If you are interested in becoming a mentor, please follow this
link to signup:
</p>
<div class="w-full flex justify-center">
<Link
href="/"
target="_blank"
className="p-[2%] md:text-[1.2vw] text-[1.6vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
>
BECOME A MENTOR
</Link>
</div>
</div>
<div class="w-1/2 flex justify-center h-full items-center relative">
<Image src={mentorship} alt="blue background" />
<Image
src={jonathan}
alt="blue background"
class="absolute rounded-full object-cover aspect-[262/433] w-[54%] md:top-[5%] top-[15%] right-[10%]"
/>
</div>
</div>
</div>