ali_ai_learn_web/src/pages/Home/SectionHowItWorks.vue

<template>
  <section class="section-how relative overflow-hidden bg-violet-50 py-24">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 1px 1px, rgba(139,92,246,0.06) 1px, transparent 0); background-size: 32px 32px;"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-20">
        <span class="inline-flex items-center gap-2 bg-green-50 border border-green-200 text-green-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
          <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
          {{ $t('howItWorks.badge') }}
        </span>
        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4">
          {{ $t('howItWorks.title') }}<span class="bg-gradient-to-r from-green-600 to-teal-500 bg-clip-text text-transparent">{{ $t('howItWorks.subtitle') }}</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-xl mx-auto">{{ $t('howItWorks.description') }}</p>
      </div>

      <!-- 时间轴主体 -->
      <div class="relative">
        <!-- 中央连接线 -->
        <div class="hidden lg:block absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2" style="background: linear-gradient(180deg, transparent 0%, #d1fae5 10%, #6ee7b7 30%, #34d399 50%, #6ee7b7 70%, #d1fae5 90%, transparent 100%);"></div>

        <!-- 流动粒子 -->
        <div class="hidden lg:block absolute left-1/2 -translate-x-1/2 top-0 bottom-0 overflow-hidden w-px pointer-events-none">
          <div class="timeline-particle"></div>
          <div class="timeline-particle" style="animation-delay: 1.5s;"></div>
          <div class="timeline-particle" style="animation-delay: 3s;"></div>
        </div>

        <!-- 步骤列表 -->
        <div class="space-y-16 lg:space-y-24">
          <div v-for="(step, idx) in steps" :key="step.title"
            class="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-0"
            :class="idx % 2 === 1 ? 'lg:flex-row-reverse' : ''">

            <!-- 内容侧 -->
            <div class="w-full lg:w-5/12 group"
              :class="idx % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:pl-16'">
              <div class="inline-flex items-center gap-2 mb-4"
                :class="idx % 2 === 0 ? 'lg:flex-row-reverse' : ''">
                <span class="text-xs font-bold px-3 py-1 rounded-full" :class="step.badgeClass">{{ step.badge }}</span>
                <span class="text-gray-400 text-xs">Step {{ idx + 1 }}</span>
              </div>
              <h3 class="text-2xl lg:text-3xl font-black text-gray-900 mb-3">{{ step.title }}</h3>
              <p class="text-gray-500 text-base leading-relaxed mb-5">{{ step.desc }}</p>

              <!-- 特性标签 -->
              <div class="flex flex-wrap gap-2"
                :class="idx % 2 === 0 ? 'lg:justify-end' : ''">
                <span v-for="tag in step.tags" :key="tag"
                  class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border"
                  :class="step.tagClass">
                  <span class="w-1.5 h-1.5 rounded-full" :class="step.dotClass"></span>
                  {{ tag }}
                </span>
              </div>

              <!-- 时间指标 -->
              <div class="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-2xl"
                :class="step.timeClass">
                <span class="text-lg font-black" :class="step.timeNumClass">{{ step.time }}</span>
                <span class="text-xs font-medium opacity-70">{{ step.timeLabel }}</span>
              </div>
            </div>

            <!-- 中央节点 -->
            <div class="relative z-10 flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
              <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-2xl shadow-xl border-4 border-white transition-transform duration-300 hover:scale-110"
                :class="step.nodeBg">
                {{ step.icon }}
              </div>
              <!-- 步骤序号 -->
              <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-black text-white shadow-md"
                :class="step.numBg">
                {{ idx + 1 }}
              </div>
            </div>

            <!-- 预览侧 -->
            <div class="w-full lg:w-5/12"
              :class="idx % 2 === 0 ? 'lg:pl-16' : 'lg:pr-16'">
              <div class="relative rounded-2xl overflow-hidden shadow-xl border border-gray-100 group cursor-pointer hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
                <!-- 图片 -->
                <div class="relative h-52 overflow-hidden">
                  <img :src="step.img" :alt="step.title"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                  <div class="absolute inset-0" :class="step.imgOverlay"></div>
                </div>
                <!-- 底部信息条 -->
                <div class="bg-white px-5 py-3 flex items-center justify-between border-t border-gray-50">
                  <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full" :class="step.dotClass"></span>
                    <span class="text-sm font-semibold text-gray-700">{{ step.previewLabel }}</span>
                  </div>
                  <span class="text-xs text-gray-400">{{ step.previewSub }}</span>
                </div>
                <!-- 悬停播放按钮 -->
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div class="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl">
                    <svg class="w-6 h-6 text-gray-700 ml-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 CTA -->
      <div class="text-center mt-20">
        <div class="inline-flex flex-col items-center gap-4">
          <div class="flex items-center gap-3 text-sm text-gray-500">
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-green-400 rounded-full"></span>{{ $t('howItWorks.benefits.noCreditCard') }}</span>
            <span class="w-px h-4 bg-gray-200"></span>
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-blue-400 rounded-full"></span>{{ $t('howItWorks.benefits.quickStart') }}</span>
            <span class="w-px h-4 bg-gray-200"></span>
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-violet-400 rounded-full"></span>{{ $t('howItWorks.benefits.freeBasic') }}</span>
          </div>
          <button class="bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold text-base px-8 py-4 rounded-2xl shadow-xl shadow-green-200/60 hover:shadow-green-300/60 hover:-translate-y-0.5 transition-all duration-300">
            {{ $t('howItWorks.cta.startFree') }} →
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const steps = [
  {
    icon: '🎯',
    title: t('howItWorks.steps.0.title'),
    desc: t('howItWorks.steps.0.desc'),
    badge: t('howItWorks.steps.0.badge'),
    badgeClass: 'bg-green-100 text-green-700',
    tags: [t('howItWorks.steps.0.tags.0'), t('howItWorks.steps.0.tags.1'), t('howItWorks.steps.0.tags.2')],
    tagClass: 'bg-green-50 text-green-600 border-green-100',
    dotClass: 'bg-green-400',
    time: '< 5 min',
    timeLabel: t('howItWorks.steps.0.timeLabel'),
    timeClass: 'bg-green-50',
    timeNumClass: 'text-green-600',
    nodeBg: 'bg-gradient-to-br from-green-400 to-teal-500',
    numBg: 'bg-green-500',
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-green-900/40 to-transparent',
    previewLabel: t('howItWorks.steps.0.previewLabel'),
    previewSub: t('howItWorks.steps.0.previewSub')
  },
  {
    icon: '⚙️',
    title: t('howItWorks.steps.1.title'),
    desc: t('howItWorks.steps.1.desc'),
    badge: t('howItWorks.steps.1.badge'),
    badgeClass: 'bg-violet-100 text-violet-700',
    tags: [ t('howItWorks.steps.1.tags.0'),
      t('howItWorks.steps.1.tags.1'),
      t('howItWorks.steps.1.tags.2')],
    tagClass: 'bg-violet-50 text-violet-600 border-violet-100',
    dotClass: 'bg-violet-400',
    time: t('howItWorks.steps.1.time'),
    timeLabel: t('howItWorks.steps.1.timeLabel'),
    timeClass: 'bg-violet-50',
    timeNumClass: 'text-violet-600',
    nodeBg: 'bg-gradient-to-br from-violet-500 to-blue-500',
    numBg: 'bg-violet-500',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-violet-900/40 to-transparent',
    previewLabel: t('howItWorks.steps.1.previewLabel'),
    previewSub: t('howItWorks.steps.1.previewSub')
  },
  {
    icon: '🚀',
    title: t('howItWorks.steps.2.title'),
    desc: t('howItWorks.steps.2.desc'),
    badge:t('howItWorks.steps.2.badge'),
    badgeClass: 'bg-blue-100 text-blue-700',
    tags: [t('howItWorks.steps.2.tags.0'),
      t('howItWorks.steps.2.tags.1'),
      t('howItWorks.steps.2.tags.2')],
    tagClass: 'bg-blue-50 text-blue-600 border-blue-100',
    dotClass: 'bg-blue-400',
    time: '99.9%',
    timeLabel: t('howItWorks.steps.2.timeLabel'),
    timeClass: 'bg-blue-50',
    timeNumClass: 'text-blue-600',
    nodeBg: 'bg-gradient-to-br from-blue-500 to-cyan-500',
    numBg: 'bg-blue-500',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-blue-900/40 to-transparent',
    previewLabel: t('howItWorks.steps.2.previewLabel'),
    previewSub: t('howItWorks.steps.2.previewSub')
  }
]
</script>

<style scoped>
.timeline-particle {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: particleFall 4.5s linear infinite;
}
@keyframes particleFall {
  0% { top: -8px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
</style>