nuxt4-demo/app/components/home/GuestHomeSection.vue

<script setup lang="ts">
defineProps<{
  siteName?: string
  allowRegister: boolean
}>()

const features = [
  {
    title: '个人资料',
    desc: '生平叙事、头像、社交链接与公开主页 slug，支持分块可见性。',
    icon: 'i-lucide-user-round',
    to: '/me/profile',
  },
  {
    title: 'Markdown 文章',
    desc: '自写内容、slug、摘要与封面，每条可公开、私密或仅链接分享。',
    icon: 'i-lucide-file-text',
    to: '/me/posts',
  },
  {
    title: '时光机',
    desc: '按时间轴记录里程碑事件，与文章、阅读流在同一叙事里呈现。',
    icon: 'i-lucide-history',
    to: '/me/timeline',
  },
  {
    title: 'RSS 收件箱',
    desc: '订阅源仅自己可见；定时拉取、去重，条目默认可再设为公开展示。',
    icon: 'i-lucide-rss',
    to: '/me/rss',
  },
] as const

const highlights = [
  '多维内容管理',
  '公开页可控展示',
  'RSS 自动聚合',
  '创作与记录一体化',
] as const
</script>

<template>
  <div class="space-y-12">
    <section
      class="relative overflow-hidden rounded-3xl border border-primary/30 bg-gradient-to-br from-primary/20 via-default to-elevated px-6 py-10 sm:px-10 sm:py-12"
    >
      <div class="pointer-events-none absolute -right-20 -top-20 size-72 rounded-full bg-primary/20 blur-3xl" />
      <div class="pointer-events-none absolute -bottom-24 -left-16 size-80 rounded-full bg-primary/10 blur-3xl" />
      <div class="pointer-events-none absolute inset-0 opacity-40" style="background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 35%), radial-gradient(circle at 80% 10%, rgba(212,106,49,0.18), transparent 30%);" />

      <div class="relative grid gap-6 lg:grid-cols-[1.2fr_0.8fr] lg:items-start">
        <div class="space-y-5">
          <UBadge color="primary" variant="soft" size="md" class="ring-1 ring-primary/30">
            {{ siteName }} · Personal Control Center
          </UBadge>
          <h1 class="text-3xl font-extrabold tracking-tight text-highlighted sm:text-5xl">
            你的内容宇宙，
            <span class="text-primary">从这里被看见</span>
          </h1>
          <p class="max-w-2xl text-base leading-relaxed text-toned sm:text-lg">
            一站式管理资料、文章、时间线与 RSS。可精细控制公开范围，用更专业的方式建立你的个人品牌主页。
          </p>

          <div class="flex flex-wrap gap-2">
            <UBadge
              v-for="item in highlights"
              :key="item"
              color="neutral"
              variant="subtle"
              size="sm"
              class="ring-1 ring-default/80"
            >
              {{ item }}
            </UBadge>
          </div>

          <div class="flex flex-wrap gap-3 pt-2">
            <UButton
              v-if="allowRegister"
              to="/register"
              size="lg"
              color="primary"
              icon="i-lucide-sparkles"
              class="shadow-lg shadow-primary/20"
            >
              立即注册，开始搭建主页
            </UButton>
            <UButton
              to="/login"
              size="lg"
              color="neutral"
              variant="outline"
              icon="i-lucide-log-in"
            >
              我已有账号，直接登录
            </UButton>
          </div>
        </div>

        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
            <p class="text-xs text-muted">
              内容表达
            </p>
            <p class="mt-1 text-lg font-semibold text-highlighted">
              文章 + 时间线双叙事
            </p>
          </UCard>
          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
            <p class="text-xs text-muted">
              对外展示
            </p>
            <p class="mt-1 text-lg font-semibold text-highlighted">
              专属公开主页地址
            </p>
          </UCard>
          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
            <p class="text-xs text-muted">
              信息输入
            </p>
            <p class="mt-1 text-lg font-semibold text-highlighted">
              RSS 自动同步与整理
            </p>
          </UCard>
          <UCard class="border-primary/30 bg-default/80 backdrop-blur">
            <p class="text-xs text-muted">
              权限机制
            </p>
            <p class="mt-1 text-lg font-semibold text-highlighted">
              每条内容独立可见性
            </p>
          </UCard>
        </div>
      </div>
    </section>

    <section class="space-y-4">
      <div>
        <h2 class="text-2xl font-semibold text-highlighted">
          你将获得的能力
        </h2>
        <p class="mt-1 text-sm text-muted sm:text-base">
          从个人展示到持续创作，再到信息摄取，形成完整的个人内容工作流。
        </p>
      </div>
      <div class="grid gap-4 sm:grid-cols-2">
        <UCard
          v-for="item in features"
          :key="item.title"
          class="group border-default/80 transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10"
        >
          <div class="flex gap-4">
            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/15 text-primary ring-1 ring-primary/20">
              <UIcon :name="item.icon" class="size-6" />
            </span>
            <div class="min-w-0 flex-1 space-y-2">
              <h3 class="font-semibold text-highlighted">
                <NuxtLink
                  to="/login"
                  class="rounded-sm hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                >
                  {{ item.title }}
                </NuxtLink>
              </h3>
              <p class="text-sm leading-relaxed text-muted">
                {{ item.desc }}
              </p>
              <UButton
                to="/login"
                size="xs"
                variant="soft"
                class="px-0"
                trailing-icon="i-lucide-arrow-right"
              >
                登录后立即体验
              </UButton>
            </div>
          </div>
        </UCard>
      </div>
    </section>

    <section class="rounded-2xl border border-primary/25 bg-gradient-to-r from-primary/10 via-elevated to-default px-6 py-8">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
          <h3 class="text-lg font-semibold text-highlighted">
            准备好搭建你的公开主页了吗？
          </h3>
          <p class="mt-1 text-sm text-muted leading-relaxed">
            新账号采用邀请制开通，开通后即可开始创建并发布你的个人内容空间。
          </p>
        </div>
        <div class="flex flex-wrap gap-2">
          <UButton
            v-if="allowRegister"
            to="/register"
            color="primary"
            icon="i-lucide-user-plus"
          >
            立即注册
          </UButton>
          <UButton to="/login" color="neutral" variant="outline">
            去登录
          </UButton>
        </div>
      </div>
    </section>
  </div>
</template>