---
import about from "../../../public/about.png";
import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
import about1 from "../../../public/about1.png";
import about2 from "../../../public/about2.png";
import about3 from "../../../public/about3.png";
import about4 from "../../../public/about4.png";
---
---

<div class="flex border-white/40 border-[0.1vw] rounded-[2vw] h-[85vh] px-[10%] py-[3%] bg-gradient-to-t to-ieee-blue-100/30 via-ieee-black from-ieee-black">
    <div class="w-1/2 flex justify-center pr-[5%] relative">
        <div class="relative w-[35vw]">
            <Image src={about} alt="About background image" />
            <Image src={about4} alt="About image" class="absolute top-[5%] left-[14%] aspect-[399/491] object-cover w-[25vw] rounded-[2vw]" />
        </div>
        <Image src={about2} alt="About image" class="absolute aspect-square object-cover w-[7vw] rounded-[1vw] top-[15%] -left-[15%]" />
        <Image src={about3} alt="About image" class="absolute aspect-[3/3.5] object-cover w-[10vw] rounded-[1.5vw] bottom-[3%] left-0" />
        <div class="absolute w-[3vw] rounded-[1vw] bg-ieee-blue-300/60 aspect-square left-[2%] top-[50%]"/>
        <div class="absolute w-[6vw] rounded-[1vw] bg-ieee-blue-100/40 aspect-square right-[15%] bottom-[4%]"/>
        
    </div>
    <div class="w-1/2 text-white text-[1.3vw] font-light">
        <p class="rounded-full border-[0.1vw] w-fit px-[3%] pb-[1%] text-[1.3vw] ml-[8%] mb-[6%] leading-none">
            we are ...
        </p>
        <div class = "text-[2.7vw] flex items-center ml-[8%] font-semibold mb-[4%]">
            <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
            <p>
                About Us
            </p>
        </div>
        <p class="pl-[8%] mb-[3%]">
            A diverse engineering community seeking to empower students
             through hands-on projects, networking opportunities, and 
             social events. Bonus points on having an open-access project studio!
        </p>
        <p class="pl-[8%] border-l-[0.1vw] border-white/40 pb-[10%]">
            The Institute of Electrical and Electronics Engineers (IEEE) 
            UC San Diego student branch is the second largest student chapter
             in the world's largest professional organization. On the student 
             level, we provide members with a plethora of ways to get involved!
        </p>
        <div class="flex justify-end mt-[2%]">
            <Link href="/join" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
                LEARN MORE
            </Link>
        </div>
    </div>
</div>