tailwind and coming soon page

src/components/FeatureCard.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300 hover:border-[#ff6b6b]/50 hover:shadow-lg hover:shadow-[#ff6b6b]/20">
+    <div class="w-12 h-12 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-[#ff6b6b]/30">
+      <component :is="icon" class="w-6 h-6 text-white" />
+    </div>
+    <h3 class="text-xl font-bold mb-2 text-white">{{ title }}</h3>
+    <p class="text-gray-300 leading-relaxed">{{ description }}</p>
+  </div>
+</template>
+<script setup>
+defineProps({
+  icon: Object,
+  title: String,
+  description: String,
+});
+</script>

src/components/ui/Button.vue

@@ -0,0 +1,23 @@
+<template>
+  <button
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+      'h-10 py-2 px-4',
+      className
+    )"
+    :disabled="disabled"
+    v-bind="$attrs"
+  >
+    <slot>
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { cn } from '@/lib/utils';
+
+defineProps({
+  className: String,
+  disabled: Boolean
+});
+</script>

src/components/ui/Input.vue

@@ -0,0 +1,26 @@
+<template>
+  <input
+  :class="cn(
+    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )"
+  :type="type"
+  :placeholder="placeholder"
+  :value="modelValue"
+  @input="$emit('update:modelValue', $event.target.value)"
+  v-bind="$attrs"
+/>
+</template>
+<script setup>
+import { cn } from '@/lib/utils';
+
+defineProps({
+  type: String,
+  placeholder: String,
+  modelValue: String,
+  className: String,
+});
+
+
+const emit = defineEmits(['update:modelValue']);
+</script>