created join card

src/app/join/page.js

@@ -1,9 +1,28 @@
 import React from "react";
-import PageTitle from "@/components/PageTitle";
+import Card from "@/components/join/Card";
+import Card2 from "@/components/join/Card2";
+import { MdGroups } from "react-icons/md";
+import { FaDiscord } from "react-icons/fa";
+import { FaBell } from "react-icons/fa";
+
 const page = () => {
   return (
-    <div>
-      <PageTitle title="JOIN US" />
+    <div className="justify justify-center grid grid-cols-3 my-28 mx-14">
+      <Card2
+        title="Come to our meetings and events"
+        description="HSP regularly conducts meetings and work sessions that build towards competitions."
+        icon={<MdGroups className="text-black" size={100} />}
+      />
+      <Card
+        title="Join Our Discord"
+        description="Join our Discord to communicate with us and have access to all our channels. It’s a great resource for seeking internships and on-campus jobs."
+        icon={<FaDiscord className="text-black pt-3" size={75} />}
+      />
+      <Card2
+        title="Follow our Socials"
+        description="Following our socials will keep you updated on what's happening with HSP!"
+        icon={<FaBell className="text-black justify pt-20" size={150} />}
+      />
     </div>
   );
 };

src/components/join/Card.js

@@ -1,7 +1,32 @@
 import React from "react";
+import { IoIosCloseCircle } from "react-icons/io";
+import { MdRemoveCircle } from "react-icons/md";
+import { MdExpandCircleDown } from "react-icons/md";
+import Link from "next/link";
 
-const Card = () => {
-  return <div>Card</div>;
+const Card = ({ title, description, icon }) => {
+  return (
+    <div className="bg-white text-black border border-black rounded-3xl">
+      <div className="flex items-center text-2xl mx-4 my-2">
+        <IoIosCloseCircle className="mx-1" />
+        <MdRemoveCircle className="mx-1" />
+        <MdExpandCircleDown className="mx-1" />
+      </div>
+      <div className="border border-black"></div>
+      <div className="font-montserrat text-3xl font-extrabold leading-10 p-3">
+        {title}
+      </div>
+      <div className="font-sans-arial text-xl font-light leading-9 px-3">
+        {description}
+      </div>
+      <div className="flex justify justify-center">
+        <div>{icon}</div>
+      </div>
+      <div className="flex justify justify-center font-montserrat text-3xl font-extrabold text-blue-600 underline mt-5">
+        <Link href="www.google.com">Join Here</Link>
+      </div>
+    </div>
+  );
 };
 
 export default Card;

src/components/join/Card2.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { IoIosCloseCircle } from "react-icons/io";
+import { MdRemoveCircle } from "react-icons/md";
+import { MdExpandCircleDown } from "react-icons/md";
+const Card2 = ({ title, description, icon }) => {
+  return (
+    <div className="bg-white text-black border border-black rounded-3xl my-5 mx-4">
+      <div className="flex items-center text-2xl mx-4 my-2">
+        <IoIosCloseCircle className="mx-1" />
+        <MdRemoveCircle className="mx-1" />
+        <MdExpandCircleDown className="mx-1" />
+      </div>
+      <div className="border border-black"></div>
+      <div className="font-montserrat text-3xl font-extrabold leading-10 p-3">
+        {title}
+      </div>
+      <div className="font-sans-arial text-xl font-light leading-9 px-3">
+        {description}
+      </div>
+      <div className="flex justify justify-center">
+        <div>{icon}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Card2;