complete join page

src/components/join/Findus.astro

@@ -0,0 +1,8 @@
+---
+import OH from "./OH.astro"
+---
+
+<div class="w-full flex justify-evenly px-[10%]">
+    <OH title="Check out our calendar!" subtitle="Each officer has their own OAH" image="/calendar.png" />
+    <OH title="Check out our location!" subtitle="We are located in EBU1-4710" image="/map.png" />
+</div>

src/components/join/Involvement.astro

@@ -0,0 +1,41 @@
+---
+import Link from "next/link";
+import { GoArrowDownRight } from "react-icons/go";
+import { Image } from "astro:assets";
+import { FaGear } from "react-icons/fa6";
+import { IoMdCalendar } from "react-icons/io";
+import { RiRobot2Fill } from "react-icons/ri";
+const {image, text, link} = Astro.props;
+---
+<div class="w-[15vw] relative">
+
+    <img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw]"/>
+    <Link href={link} className="group absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
+        <div class="w-full flex justify-end pr-[5%]">
+            <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
+                {
+                    text === "PROJECTS"? <RiRobot2Fill/>:
+                    text === "EVENTS"? <IoMdCalendar/>:
+                    <FaGear/>
+                }
+            </div>
+        </div>
+    
+        <div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[30%] pb-[5%]">
+            <div class="text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end">
+                <p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
+                    {text}
+                </p>
+                <GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow"/>
+            </div>
+    
+            {text === "H.A.R.D. HACK" &&
+                <p class="text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
+                    UC San Diego’s largest
+                    hardware focused hackathon
+                    hold by IEEE UCSD, HKN, and TNT
+                </p>
+            }
+        </div>
+    </Link>
+</div>

src/components/join/Involvements.astro

@@ -0,0 +1,26 @@
+---
+import Involvement from "./Involvement.astro";
+import involve from "../../data/involve.json";
+---
+<div class="px-[8%] flex items-center mb-[10%]">
+    <div class="flex w-3/5 justify-between">
+        {involve.map((item)=>(
+            <Involvement
+             text = {item.text}
+             image = {item.image}
+             link = {item.link}
+    
+            /> 
+         ))}
+    </div>
+
+    <div class="w-2/5 flex flex-col px-[5%]">
+        <p class="text-ieee-yellow text-[1.2vw] mb-[5%]">
+            Get involve in international IEEE
+        </p>
+        <p class="text-white text-[2vw] font-bold">
+            How To Keep Up With And Get Engaged With IEEE at UCSD
+        </p>
+    </div>
+</div>
+

src/components/join/OH.astro

@@ -0,0 +1,13 @@
+---
+const {title, subtitle, image} = Astro.props;
+---
+
+<div class="flex flex-col items-center w-[40vw] my-[10%]">
+    <p class="text-ieee-yellow text-[1.2vw]">
+        {subtitle}
+    </p>
+    <p class="text-white text-[2.5vw] my-[2%]">
+        {title}
+    </p>
+    <img src={image} alt="Office hours" class="object-cover aspect-[620/408] w-[90%] rounded-[2vw]" />
+</div>

src/components/main_page/Activity.astro

@@ -13,7 +13,7 @@ const {  title, text, link, number  } = Astro.props;
         {text}
     </p>
 
-    <Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%]">
+    <Link href={link} className="flex items-center text-[1.2vw] mb-[3%] absolute bottom-[22%] hover:text-ieee-yellow duration-300">
         more details
         <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
     </Link>

src/data/involve.json

@@ -0,0 +1,17 @@
+[
+    {
+        "text": "PROJECTS",
+        "image": "/about2.png",
+        "link": "/projects"
+    },
+    {
+        "text": "EVENTS",
+        "image": "/about2.png",
+        "link": "/events"
+    },
+    {
+        "text": "H.A.R.D. HACK",
+        "image": "/about2.png",
+        "link": "https://hardhack.dev/"
+    }
+]

src/layouts/Layout.astro

@@ -13,7 +13,7 @@ import Footer from "../components/core/Footer.astro";
         <title>Astro Basics</title>
     </head>
 
-    <body class="bg-ieee-black relative flex flex-col items-center min-h-screen justify-between">
+    <body class="bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
         <Navbar />
         <main class="w-[95%]">
             <slot />

src/pages/join.astro

@@ -4,11 +4,19 @@ import Social from "../components/core/Social.astro";
 import JoinTitle from "../components/join/JoinTitle.astro";
 import Resources from "../components/join/Resources.jsx";
 import Questions from "../components/join/Questions.astro";
+import Involvements from "../components/join/Involvements.astro";
+import Findus from "../components/join/Findus.astro";
+import { Image } from "astro:assets";
+import join from "../../public/join.png";
 ---
 
 <Layout>
+    <Image src={join} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
+    <Image src={join} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
     <JoinTitle/>
+    <Involvements/>
     <Social/>
     <Questions/>
     <Resources/>
+    <Findus/>
 </Layout>