1<template>
2 <div class="card border-l-4 border-indigo-500 rounded-xl p-6">
3 <h2 class="text-purple-600 text-2xl font-bold">{{ title }}</h2>
4 <p class="text-gray-400">{{ description }}</p>
5 <button class="animate-bounce mt-4 px-4 py-2 bg-indigo-500 text-white rounded">
6 Get Started
7 </button>
8 </div>
9</template>
10
11<script setup>
12defineProps({
13 title: String,
14 description: String,
15});
16</script>
17
18<style scoped>
19.card {
20 border-left: 4px solid #6366f1;
21 border-radius: 12px;
22 font-family: 'Inter', sans-serif;
23}
24
25.card h2 {
26 background: linear-gradient(to right, #a855f7, #06b6d4);
27 -webkit-background-clip: text;
28 background-clip: text;
29 color: transparent;
30}
31
32.highlight {
33 animation: bounce 1s infinite;
34 transition: width 0.3s ease;
35}
36</style>