<script lang="ts" setup>
definePageMeta({
  layout: "blank",
});

useHead({
  title: "AI 智慧课程平台",
});
</script>

<template>
  <div
    class="w-full h-full flex flex-col justify-center items-center relative bg-img"
  >
    <div class="absolute inset-16"></div>
    <div class="flex flex-col items-center gap-16 pb-48">
      <h1 class="text-4xl font-medium drop-shadow-xl text-ai-gradient">
        AI 智慧课程平台
      </h1>
      <div class="flex gap-6">
        <NuxtLink
          to="/course"
          target="_blank"
          class="fn-block border-blue-300/80 from-blue-300/5 via-blue-300/40 to-blue-400/20"
        >
          <Icon name="fluent-color:chat-multiple-24" class="text-5xl" />
          <h2 class="text-lg font-medium text-blue-500">AI 助教</h2>
        </NuxtLink>
        <NuxtLink
          class="fn-block border-teal-300/80 from-teal-300/5 via-teal-300/40 to-teal-400/20"
        >
          <Icon name="fluent-color:book-open-24" class="text-5xl" />
          <h2 class="text-lg font-medium text-teal-500">AI 助学</h2>
        </NuxtLink>
        <NuxtLink
          class="fn-block border-violet-300/80 from-violet-300/5 via-violet-300/40 to-violet-400/20"
        >
          <Icon name="fluent-color:star-settings-24" class="text-5xl" />
          <h2 class="text-lg font-medium text-violet-500">AI 助管</h2>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-ai-gradient {
  background: linear-gradient(90deg, rgb(94, 222, 255), rgb(136, 99, 253));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-img {
  background-image: url("/images/bg_home.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fn-block {
  @apply flex flex-col items-center gap-4 rounded-lg border bg-gradient-to-b via-35% backdrop-blur px-16 py-4 select-none cursor-pointer;
}
</style>
