Make an events section

src/app/home/Home/Home.vue

@@ -51,6 +51,44 @@
       </p>
     </div>
 
+    <div :class="$style.title" ref="events" id="events">
+      <a name="events"></a>
+      <span :class="$style.bigspan">Events</span>
+      <!-- <span :class="$style.smallspan">vision</span> -->
+    </div>
+    <vue-grid>
+      <vue-grid-row>
+        <vue-grid-item :class="$style.centeritem">
+          <project-card :class="$style.cardsize" image="soarchallenge.jpg" title="Soar Challenge">
+            <p>
+              SOAR Challenge aims to introduce robotics in a fun and engaging way.
+              Participants will hone their basic robotics skills in a series of workshops, build a robot, and face-off in a challenge. 
+            </p>
+          </project-card>
+        </vue-grid-item>
+        <vue-grid-item :class="$style.centeritem">
+          <project-card :class="$style.cardsize" image="roboclash23.png" title="Roboclash 2024">
+            <p>
+              <a href="https://robocla.sh/">ROBOCLASH 2024</a> is making a comeback! 
+              Get ready for another round of intense robot battles and exiting challenges! 
+              Whether you're a novice or a pro, this head-to-head competition is your chance to showcase your skills. 
+              Take on the challenge, build a robot, and watch it battle it out in the ultimate ROBOCLASH!
+              <br />
+              <br /> Registration starts on 27 Oct 2023 till 15 Nov 2023! What are you waiting for? Go click on the link now!
+            </p>
+          </project-card>
+        </vue-grid-item>
+      </vue-grid-row>
+    </vue-grid>
+
+
+
+
+
+
+
+
+
     <div :class="$style.title" ref="projects" id="projects">
       <a name="projects"></a>
       <span :class="$style.bigspan">Projects</span>
@@ -59,7 +97,7 @@
     <vue-grid>
       <vue-grid-row>
         <vue-grid-item :class="$style.centeritem">
-          <project-card :class="$style.cardsize" image="BioRobot.jpg" title="BioRobot">
+          <project-card :class="$style.cardsize" image="BioRobot.png" title="BioRobot">
           </project-card>
         </vue-grid-item>
         <vue-grid-item :class="$style.centeritem">
@@ -84,7 +122,7 @@
       </vue-grid-row>
       <vue-grid-row>
         <vue-grid-item :class="$style.centeritem">
-          <project-card :class="$style.cardsize" image="Adele.jpg" title="Adele">
+          <project-card :class="$style.cardsize" image="Adele.png" title="Adele">
 
           </project-card>
         </vue-grid-item>
@@ -232,6 +270,11 @@
   </div>
 </template>
 
+
+
+
+
+
 <script lang="ts">
 import { mapState } from 'vuex';
 import Stage from '../components/Stage/Stage.vue';