Tweaked default layout

src/App.vue

@@ -1,30 +1,37 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import FeatureCard from "@/components/FeatureCard.vue";
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+    <div class="mx-auto mt-6 max-w-6xl px-4">
+        <h1 class="h1">ShadCN Vue template</h1>
+        <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
+            <FeatureCard
+                title="Vue"
+                overview="JavaScript framework"
+                url="https://vuejs.org"
+                description="Integrates HTML, CSS and JS in simple templates."
+            />
+            <FeatureCard
+                title="Vite"
+                overview="Build tool"
+                url="https://vite.dev"
+                description="Turns your Vue code into plain HTML."
+            />
+            <FeatureCard
+                title="Tailwind"
+                overview="CSS framework"
+                url="https://tailwindcss.com"
+                description="Lets you style your site directly in the HTML through CSS classes."
+            />
+            <FeatureCard
+                title="ShadCN"
+                overview="Component library"
+                url="https://shadcn-vue.com"
+                description="Provides ready to use, already styled components."
+            />
+        </div>
+    </div>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<style scoped></style>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/FeatureCard.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+    Card,
+    CardAction,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+defineProps<{
+    title: string;
+    overview: string;
+    url: string;
+    description: string;
+}>();
+</script>
+
+<template>
+    <Card>
+        <CardHeader>
+            <CardTitle>{{ title }}</CardTitle>
+            <CardDescription>{{ overview }}</CardDescription>
+            <CardAction>
+                <a :href="url"
+                    ><Button variant="outline">Documentation</Button></a
+                >
+            </CardAction>
+        </CardHeader>
+        <CardContent>
+            <p class="p">{{ description }}</p>
+        </CardContent>
+    </Card>
+</template>