<template>
  <section class="intro">
    <h1>填写你的恋爱偏好</h1>
    <div class="card-container">
      <el-card class="card" v-for="card in cards" :key="card.title">
        <h3>{{ card.title }}</h3>
        <p>{{ card.description }}</p>
      </el-card>
    </div>
  </section>
</template>

<script>
export default {
  name: "IntroSection",
  data() {
    return {
      cards: [
        { title: "精准配对", description: "为你找到最合适的伴侣" },
        { title: "优质社区", description: "了解更多互动圈子" },
        { title: "趣味排行", description: "参与有趣的话题投票" },
      ],
    };
  },
};
</script>

<style scoped>
.intro {
  padding: 20px;
  text-align: center;
}
.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.card {
  width: 180px;
  text-align: center;
}
</style>
