merge languages and tools into workshops on homepage

src/views/Home/CardItem.vue

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  title: String,
+  color: String,
+  icon: String[2],
+});
+</script>
+
+<template>
+  <div
+    class="inline-flex w-[200px] flex-col justify-between transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
+  >
+    <div
+      class="relative m-4 flex h-40 flex-col justify-between rounded-lg bg-gray-200 p-4 shadow"
+    >
+      <div class="z-10">
+        <h3 class="font-bold mb-2 text-lg">{{ title }}</h3>
+      </div>
+      <div class="absolute right-5 top-10 text-8xl backdrop-blur">
+      <font-awesome-icon :icon="icon" :class="color" />
+      </div>
+    </div>
+  </div>
+</template>

src/views/Home/HomeView.vue

@@ -2,13 +2,17 @@
 import FeedbackForm from "./FeedbackForm.vue";
 import WelcomeMsgSection from "./WelcomeMsgSection.vue";
 import SessionInfo from "./SessionInfo.vue";
+import LanguageToolsSection from "./LanguageToolsSection.vue";
 </script>
 
 <template>
   <div class="py-8 px-2">
     <!-- Welcome msg section -->
     <WelcomeMsgSection />
 
+    <!-- Add languages & tools section -->
+    <LanguageToolsSection />
+
     <!--Add past workshops sessions -->
     <SessionInfo />
 

src/views/Home/LanguageToolsSection.vue

@@ -0,0 +1,62 @@
+<script setup>
+import CardItem from "./CardItem.vue";
+
+const langs_and_tools = [
+  {
+    title: "Java",
+    color: "text-red-800",
+    icon: ["fab", "java"],
+  },
+  {
+    title: "Python",
+    color: "text-yellow-600",
+    icon: ["fab", "python"],
+  },
+  {
+    title: "HTML5",
+    color: "text-red-600",
+    icon: ["fab", "html5"],
+  },
+  {
+    title: "CSS3",
+    color: "text-blue-600",
+    icon: ["fab", "css3-alt"],
+  },
+  {
+    title: "Terminal",
+    color: "text-black-600",
+    icon: ["fas", "terminal"],
+  },
+  {
+    title: "Git",
+    color: "text-red-600",
+    icon: ["fas", "code-branch"],
+  },
+  {
+    title: "Github",
+    color: "text-black-600",
+    icon: ["fab", "github"],
+  },
+];
+</script>
+
+<template>
+  <h1 class="text-center pt-8 text-4xl">What We Offer</h1>
+  <div
+    class="mt-6 flex flex-col md:flex-row items-center justify-center md:container md:pr-5"
+  >
+    <h1 class="text-center text-3xl mb-3 md:pr-10">Languages & Tools</h1>
+    <div
+      class="grid grid-cols-2 sm:grid-cols-3 md:gap-x-8 md:grid-cols-3 xl:grid-cols-4"
+    >
+      <div v-for="item in langs_and_tools">
+        <CardItem
+          :title="item.title"
+          :about="item.about"
+          :color="item.color"
+          :icon="item.icon"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/views/Home/SessionInfo.vue

@@ -17,13 +17,12 @@ const events = [
 
 <template>
   <div class="text-center">
-    <div class="text-3xl my-6">Upcoming Workshops</div>
+    <div class="text-3xl my-6">Workshops</div>
     <div class="text-gray-600 pb-6">No scheduled workshops yet...</div>
 
     <!-- div v-for="event in events">
       <EventCard :title="event.title" :month="event.month" :day="event.day" :img="event.img" :info="event.info"
         :time="event.time" />
     </div-->
-
   </div>
 </template>