add resources

src/components/join/Resource.jsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+const Resource = ({icon, title, text, link}) => {
+    return (
+        <div class="text-white flex w-[30vw] items-center">
+            <div class = "mr-[1vw] bg-gradient-radial from-ieee-blue-300 via-ieee-black to-ieee-black rounded-full text-[6.5vw] aspect-square w-[12vw] flex justify-center items-center">
+                {icon}
+            </div>
+            <div class="w-[24vw]">
+                <p class = "text-[1.8vw] mb-[2vh] font-extralight">
+                    {title}
+                </p>
+                <p class = "text-[1vw] mb-[1vh] font-light">
+                    {text}
+                </p>
+                <div class="flex justify-end mt-[5%]">
+                    <Link href={link} target="_blank" className=" text-[1.1vw] font-extralight border-white/70 border-[0.1vw] py-[1%] px-[11%] rounded-[0.5vw] cursor-pointer hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
+                        VIEW
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Resource

src/components/join/Resources.jsx

@@ -0,0 +1,35 @@
+import Resource from "./Resource.jsx"
+import { LiaDotCircle } from "react-icons/lia";
+import { RiSlideshowLine } from "react-icons/ri";
+import { BiMoviePlay } from "react-icons/bi";
+
+const Resources = () => {
+    return (
+        <div class = "text-white w-full flex flex-col items-center h-[55vh] justify-center">
+            <div class = "text-[2.5vw] flex items-center">
+                <div>
+                    <LiaDotCircle className = "mr-[1vw] pt-[0.5%]" />
+                </div>
+                <p>
+                    Member Resources 
+                </p>
+            </div>
+            <div class = " w-[90%] flex justify-evenly mt-[9vh]">
+                <Resource 
+                icon = <RiSlideshowLine/>
+                title = "Workshop Slides" 
+                text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" 
+                link = "http://www.google.com"
+                /> 
+                <Resource 
+                icon = <BiMoviePlay/>
+                title = "Workshop Videos" 
+                text = "Hac at maecenas maximus faucibus venenatis blandit. Netus elit fusce a tortor" 
+                link = "http://www.google.com"
+                /> 
+            </div>
+        </div>
+    );
+};
+
+export default Resources

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Landing from "../components/main_page/Landing.astro";
-import Divider from "../components/main_page/divider.astro";
+import Divider from "../components/main_page/Divider.astro";
 import Social from "../components/core/Social.astro";
 ---
 

src/pages/join.astro

@@ -2,9 +2,11 @@
 import Layout from "../layouts/Layout.astro";
 import Social from "../components/core/Social.astro";
 import JoinTitle from "../components/join/JoinTitle.astro";
+import Resources from "../components/join/Resources.jsx";
 ---
 
 <Layout>
     <JoinTitle/>
     <Social/>
+    <Resources/>
 </Layout>