Added the team page (EshaanAgg#21)

* teams card added and updated in the page

* skills added

* added the teams page and linked

* minor formating fixes done

* astro icons added

* formatted

* improved the styling

* formatted

* reverted the changes and put the styles in the end

* formatted

src/components/Header.astro

@@ -26,7 +26,8 @@
         <a
           href="/"
           class="animSlowOpacity font-subHeader hover:text-dark-blue duration-200 hover:text-3xl"
-          >Home</a
+        >
+          Home</a
         >
       </li>
       <li>

src/components/home/OrganizationCard.astro

@@ -8,7 +8,8 @@ interface Props {
 
 const { id, name, logoUrl, skills } = Astro.props;
 
-// We will only display the non-empty and (at max) the most frequent 6 skills
+//We will only display the non-empty and (at max) the most frequent 6 skills
+
 const filtertedSkills = skills.filter((skill) => skill != "").slice(0, 6);
 const description =
   "CNCF is the open source, vendor-neutral hub of cloud native computing, hosting projects....";

src/components/team/Collaborators.astro

@@ -4,6 +4,6 @@ import CollabImg from "../../../public/images/collaborators.svg";
 ---
 
 <div class="flex flex-col items-center justify-center mt-28">
-  <h1 class="text-6xl text-bold text-white">Collaborators</h1>
+  <h1 class="text-6xl font-bold text-white">Collaborators</h1>
   <Image src={CollabImg} alt="collaborators" class="mt-20" />
 </div>

src/components/team/TeamsCard.astro

@@ -1,30 +1,69 @@
 ---
 import { Image } from "astro:assets";
-import { Icon } from 'astro-icon'
+import { Icon } from "astro-icon";
+import DemoImg from "../../../public/images/demeface.png";
 import Collaborators from "../../../public/images/collaborators.svg";
 ---
 
-<div class="w-96 h-[450px] border border-3 border-[#0077CC] rounded-lg">
-  <Image src={Collaborators} class="w-96 h-44" alt="collaborate" />
-  <div class="px-7"></div>
-  <div>
-    <h1 class="text-2xl text-[#00101B] mt-6 font-bold">Members name</h1>
-    <hr />
-  </div>
-  <div>
-    <h1 class="text-[#00101B] opacity-60 text-sm">Skills</h1>
-    <div class="gap-4">
-      <div
-        class="bg-[#0077CC] rounded-full py-1 px-3 text-white text-bold text-xs"
-      >
-        skillname
+<div class="w-96 border-4 border-[#0077CC] rounded-lg bg-white mt-32">
+  <Image src={DemoImg} class="w-96 h-44" alt="collaborate" />
+  <div class="px-7">
+    <div>
+      <h1 class="text-2xl text-[#00101B] my-5 font-bold">Members name</h1>
+      <hr />
+    </div>
+    <div>
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        About
+      </h1>
+      <p class="font-sm opacity-70">LOream Ipsup heiu adoay jdoawd</p>
+    </div>
+    <div>
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        Skills
+      </h1>
+      <div class="gap-2 flex flex-row flex-wrap">
+        <div
+          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
+        >
+          Go
+        </div>
+        <div
+          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
+        >
+          Docker
+        </div>
+        <div
+          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
+        >
+          Kubernetes
+        </div>
+        <div
+          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
+        >
+          Yaml
+        </div>
       </div>
     </div>
-  </div>
-  <h1 class="text-[#00101B] opacity-60 text-sm">Let's Connect</h1>
-  <div class="flex flex-row items-center justify-evenly">
-    <a href=""><Icon name="mdi:linkedin"/></a>
-    <a href=""><Icon name="material-symbols:mail" /></a>
-    <a href=""><Icon name="icon-park-solid:big-x"/></a>
+    <h1 class="text-[#00101B] opacity-60 font-bold text-sm my-4">
+      Let's Connect
+    </h1>
+    <div class="flex flex-row mb-4">
+      <Icon pack="mdi" name="linkedin" class="h-[30px] mr-4" />
+      <Icon pack="mdi" name="gmail" class="h-[30px] mr-4" />
+      <Icon pack="mdi" name="twitter" class="h-[30px]" />
+    </div>
   </div>
 </div>
+
+<style lang="css">
+  [astro-icon="linkedin"] {
+    color: #00101b;
+  }
+  [astro-icon="mail"] {
+    color: #00101b;
+  }
+  [astro-icon="big-x"] {
+    color: #00101b;
+  }
+</style>

src/components/teams/Collaborators.astro

@@ -0,0 +1,9 @@
+---
+import { Image } from "astro:assets";
+import CollabImg from "../../../public/images/collaborators.svg";
+---
+
+<div class="flex flex-col items-center justify-center mt-28">
+  <h1 class="text-6xl text-bold text-white">Collaborators</h1>
+  <Image src={CollabImg} alt="collaborators" class="mt-20" />
+</div>

src/components/teams/TeamsCard.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from "astro:assets";
+import { Icon } from "astro-icon";
+import Collaborators from "../../../public/images/collaborators.svg";
+---
+
+<div class="w-96 h-[450px] border border-3 border-[#0077CC] rounded-lg">
+  <Image src={Collaborators} class="w-96 h-44" alt="collaborate" />
+  <div class="px-7"></div>
+  <div>
+    <h1 class="text-2xl text-[#00101B] mt-6 font-bold">Members name</h1>
+    <hr />
+  </div>
+  <div>
+    <h1 class="text-[#00101B] opacity-60 text-sm">Skills</h1>
+    <div class="gap-4">
+      <div
+        class="bg-[#0077CC] rounded-full py-1 px-3 text-white text-bold text-xs"
+      >
+        skillname
+      </div>
+    </div>
+  </div>
+  <h1 class="text-[#00101B] opacity-60 text-sm">Let's Connect</h1>
+  <div class="flex flex-row items-center justify-evenly">
+    <a href=""><Icon name="mdi:linkedin" /></a>
+    <a href=""><Icon name="material-symbols:mail" /></a>
+    <a href=""><Icon name="icon-park-solid:big-x" /></a>
+  </div>
+</div>

src/pages/team.astro

@@ -3,11 +3,14 @@ import Collaborators from "../components/team/Collaborators.astro";
 import TeamsCard from "../components/team/TeamsCard.astro";
 ---
 
-<div class="flex flex-col items-center justify-center">
+<div class="flex flex-col items-center justify-center bg-[#00101B] px-32">
   <Collaborators />
-  <div>
-    <h1 class="text-white text-4xl font-bold">Our Team</h1>
-    <div>
+  <div class="flex flex-col items-center justify-center pb-20">
+    <h1 class="text-white text-5xl font-bold pt-32">Our Team</h1>
+    <div class="flex flex-row items-center justify-center flex-wrap gap-x-10">
+      <TeamsCard />
+      <TeamsCard />
+      <TeamsCard />
       <TeamsCard />
     </div>
   </div>

src/pages/teams/index.astro

@@ -0,0 +1,15 @@
+---
+import Collaborators from "../../components/teams/Collaborators.astro";
+import TeamsCard from "../../components/teams/TeamsCard.astro";
+---
+
+<div class="flex flex-col items-center justify-center">
+  <Collaborators />
+  <div>
+    <h1 class="text-white text-4xl font-bold">Our Team</h1>
+    <div>
+      <TeamsCard />
+      <div></div>
+    </div>
+  </div>
+</div>