<script setup lang="ts">
import FeatureCard from "@/components/FeatureCard.vue";
</script>

<template>
    <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></style>
