<template>
  <div
      class="relative bg-white rounded-xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-shadow overflow-hidden"
      data-aos="fade-up"
      data-aos-duration="600"
  >
    <div
        class="w-12 h-12 md:w-16 md:h-16 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mb-6"
    >
      <i :class="icon" class="text-xl"></i>
    </div>
    <h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">
      {{ title }}
    </h3>
    <p class="text-gray-600">
      {{ description }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'FeatureCard',
  props: {
    icon: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  }
}
</script>