First pass implementation for clickable cards!

17th Website/src/App.vue

@@ -18,7 +18,7 @@ body {
 #content-wrapper {
   display: block;
   margin: 0 0 0 60px;
-
+  height: 100%;
   padding: 0px 50px;
 }
 </style>

17th Website/src/components/ProfilePage/activityCard.vue

@@ -0,0 +1,10 @@
+
+
+<template>
+
+<div class="border-2 border-white rounded-xl p-2 px-4">
+    <h2>hello</h2>
+    <p>date</p>
+</div>
+
+</template>

17th Website/src/components/ProfilePage/activityHistory.vue

@@ -1,3 +1,18 @@
+<script>
+import activityCard from './activityCard.vue';
+
+export default {
+    components: {
+        activityCard,
+    }
+}
+</script>
+
 <template>
+    <div class="flex flex-col w-full items-center">
         <h1>This is activity history</h1>
+        <activityCard />
+        <activityCard />
+        <activityCard />
+    </div>
 </template>

17th Website/src/components/cards/clickableCard.vue

@@ -1,17 +1,42 @@
+<script>
+import { RouterLink } from 'vue-router';
+import { Icon } from '@iconify/vue'
+export default {
+    props: {
+        title: String,
+        description: String,
+        icon: String,
+        link: String,
+    },
+    components: {
+        Icon,
+    }
+}
+
+</script>
+
+
 <template>
-    <div class="card">
-        <h1 class="bg-gray-dark rounded-xl w-fit p-5">HELLO</h1>
+    <div class="flex flex-col flex-nowrap justify-end bg-gray-dark w-64 h-64 
+    rounded-2xl hover:ring-2 ring-blue p-6 cursor-pointer" v-on:click="$router.push(link)">
+        <div class="flex flex-row justify-center items-center h-full">
+            <icon :icon="icon" class="h-20 w-20 text-white" />
+        </div>
+        <div>
+            <h1 class="text-4xl m-0">{{ title }}</h1>
+            <p class="text-white h-12">{{ description }}</p>
+        </div>
     </div>
 </template>
 
 
 <style>
-.card {
+/* .card {
     color: var(--white);
     padding: 0 10px;
     margin: 10px;
     border-radius: 10px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     height: fit-content;
-}
+} */
 </style>

17th Website/src/views/home.vue

@@ -1,8 +1,30 @@
-<script setup>
-import card from '../components/cards/Card.vue';
+<script>
+import clickableCard from '../components/cards/clickableCard.vue';
+
+export default {
+  components: {
+    clickableCard
+  }
+}
+
 </script>
 
 <template>
-  <h1>Here is a child component!</h1>
-  <card></card>
+  <div id="MainWrapper" class="flex flex-col items-center">
+    <div id="RangerWelcome" class=" text-center flex flex-col justify-center items-center content-center pt-40">
+      <img src="../components/icons/misc/test.png" class="max-w-sm">
+      <h2>17th Ranger Battalion Admin Portal</h2>
+    </div>
+
+    <div id="QuickLinks" class="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 grid-rows-2 w-full max-w-6xl">
+      <clickableCard title="Transfer" description="Assign a member to a new unit." link="#" icon="carbon:collaborate">
+      </clickableCard>
+      <clickableCard title="Training" description="Complete a training report." link="#" icon="carbon:report">
+      </clickableCard>
+      <clickableCard title="Transfer" description="Assign a member to a new unit." link="#" icon="carbon:collaborate">
+      </clickableCard>
+      <clickableCard title="Transfer" description="Assign a member to a new unit." link="#" icon="carbon:collaborate">
+      </clickableCard>
+    </div>
+  </div>
 </template>