---
import { FaDiscord , FaGlobe} from "react-icons/fa";
import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia";
---

<div class="flex justify-center my-[10%]">
    <div class="w-1/2 flex justify-between">
        <div>
            <div class="flex items-center md:text-[2.5vw] text-[4vw]">
                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
                <p>
                    Contacts
                </p>
            </div>
            <p class="md:text-[1.1vw] text-[1.5vw] ml-[5%] text-nowrap">
                To stay up to date, join discord server
            </p>
        </div>
        <div class="flex">
            <Link href="https://ieee-ucsd-robocupssl.github.io/TeamWebsite/index.html" target="_blank" className="mr-[20%] flex flex-col items-center">
                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
                    <FaGlobe />
                </div>
                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Website</p>
            </Link>

            <Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="flex flex-col items-center">
                <div class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] md:text-[2.2vw] text-[3.5vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white via-white to-white/40">
                    <FaDiscord />
                </div>
                <p class="md:text-[1.3vw] text-[2vw] font-semibold">Discord</p>
            </Link>
        </div>
    </div>

</div>

