feat: add list card/card

src/App.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
   import 'primeicons/primeicons.css'
 
 </script>

src/components/Card.vue

@@ -0,0 +1,12 @@
+<template lang="">
+  <div>
+    <router-link to="">
+      <img src="https://api.baitaptracnghiem.com/storage/images/76ji3bW7kV8MFwkTr1VI123b0E7IBDbH1me2pmey.webp" alt="exercise-background" class="w-fit rounded-lg object-contain"/>
+      <div class="text-md mt-3">Thi thử THPT môn Sinh Học online - Đề minh họa năm 2024 của Bộ GD&ĐT</div>
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+
+</script>

src/components/Icon.vue

@@ -3,5 +3,13 @@
 </template>
 
 <script setup>
-  const props = defineProps(['icon', 'className']);
+  const props = defineProps({
+      icon: {
+        type: String,
+        required: true,
+      },
+      className: {
+        type: String,
+      }
+  });
 </script>

src/components/ListCard.vue

@@ -0,0 +1,25 @@
+<template lang="">
+  <div>
+    <router-link :to="props.url" class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">
+      <h1 class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">{{ title }}</h1>
+    </router-link>
+    <div class="grid md:grid-cols-3 gap-x-8 md:gap-y-10 gap-y-5 grid-cols-1 mb-10">
+      <Card v-for="n in 6" :key="n"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Card from"@/components/Card.vue";
+
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: true,
+    }
+  });
+</script>

src/layout/Footer.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <div class="h-16 bg-slate-100 flex items-center justify-center">
+  <div class="h-16 bg-slate-100 flex items-center justify-center mt-5">
     Footer
   </div>
 </template>

src/views/HomePage.vue

@@ -1,8 +1,10 @@
 <template lang="">
-
-  <div>
-    Home page
+  <div class="px-5 md:px-20 mt-2">
+    <ListCard title="Đề thi THPT" url="/"/>
+    <ListCard title="Lớp 12" url="/"/>
   </div>
 </template>
-<script setup lang="ts">
+
+<script setup>
+  import ListCard from"@/components/ListCard.vue";
 </script>