79 lines
3.1 KiB
Text
79 lines
3.1 KiB
Text
---
|
|
import { LiaDotCircle } from "react-icons/lia";
|
|
import { Image } from "astro:assets";
|
|
import jellyfish from "../../images/jellyfish.png";
|
|
import { FaDiscord } from "react-icons/fa";
|
|
import { RiInstagramFill } from "react-icons/ri";
|
|
import { MdEmail } from "react-icons/md";
|
|
import Link from "next/link";
|
|
---
|
|
|
|
<div
|
|
class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between"
|
|
>
|
|
<div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
|
|
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
|
<p>Social Media</p>
|
|
</div>
|
|
|
|
<p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%]">
|
|
Stay connected with us on Discord, Facebook, and Instagram! We regularly
|
|
post information on upcoming events and competitions.
|
|
</p>
|
|
|
|
<div
|
|
class="md:w-[85%] w-full rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative md:h-[15vw] h-[30vw] flex items-center text-white/90"
|
|
>
|
|
<div
|
|
data-inview
|
|
class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000"
|
|
>
|
|
<Link
|
|
href="https://www.instagram.com/ieee.ucsd"
|
|
target="_blank"
|
|
className="flex flex-col items-center"
|
|
>
|
|
<div
|
|
class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
|
|
>
|
|
<RiInstagramFill />
|
|
</div>
|
|
<p class="text-[2vw] md:text-[1.3vw] font-semibold">
|
|
Instagram
|
|
</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] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
|
|
>
|
|
<FaDiscord />
|
|
</div>
|
|
<p class="text-[2vw] md:text-[1.3vw] font-semibold">Discord</p>
|
|
</Link>
|
|
|
|
<Link
|
|
href="mailto:ieee@ucsd.edu"
|
|
target="_blank"
|
|
className="flex flex-col items-center"
|
|
>
|
|
<div
|
|
class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
|
|
>
|
|
<MdEmail />
|
|
</div>
|
|
<p class="text-[2vw] md:text-[1.3vw] font-semibold">Email</p>
|
|
</Link>
|
|
</div>
|
|
<Image
|
|
data-inview
|
|
src={jellyfish}
|
|
alt="Jellyfish mascot"
|
|
class="absolute bottom-[2vw] md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
|
|
/>
|
|
</div>
|
|
</div>
|