---
import { LiaDotCircle } from "react-icons/lia";
import ProjectSection from "./ProjectSection.astro";
---

<div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
  <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
    <p>Annual Projects</p>
  </div>

  <p
    class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] font-light"
  >
    Join in the fray of internationally-recognized competition through Robocup,
    Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD!
    Participate in an intensive collaborative environment that challenges hard
    skills of hardware and software.
  </p>

  <div
    class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
  >
    <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
    <p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
    <p class="w-3/5">
      IEEE @ UCSD’s annual projects are intended for students with intermediate
      experience with hardware or software. Participation on teams assemble an
      array of skills and talents of soft and hard skills.
    </p>
  </div>

  <ProjectSection />
</div>
