ali_ai_learn_web/src/pages/Home/SectionCTA.vue

<template>
  <section class="section-cta relative py-32 overflow-hidden" ref="ctaRef">
    <!-- 深色背景 -->
    <div class="absolute inset-0" style="background: linear-gradient(135deg, #0f0c29 0%, #1e0a3c 35%, #0d1b3e 65%, #0a0a1a 100%);"></div>

    <!-- 背景图 -->
    <div class="absolute inset-0">
      <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&h=700&fit=crop&q=80"
        alt="背景" class="w-full h-full object-cover opacity-10" />
    </div>

    <!-- 网格纹理 -->
    <div class="absolute inset-0 pointer-events-none" style="background-image: linear-gradient(rgba(139,92,246,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.05) 1px, transparent 1px); background-size: 60px 60px;"></div>

    <!-- 动态光晕 -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="cta-orb cta-orb-1"></div>
      <div class="cta-orb cta-orb-2"></div>
      <div class="cta-orb cta-orb-3"></div>
    </div>

    <!-- 浮动节点装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div v-for="(node, idx) in floatingNodes" :key="idx"
        class="absolute rounded-2xl overflow-hidden shadow-2xl border border-white/10 cta-float-node"
        :style="{ left: node.x, top: node.y, width: node.size, height: node.size, animationDelay: node.delay, animationDuration: node.duration }">
        <img :src="node.img" :alt="'node'" class="w-full h-full object-cover opacity-40" />
        <div class="absolute inset-0 flex items-center justify-center text-2xl">{{ node.icon }}</div>
        <div class="absolute inset-0" :style="{ background: node.glow }"></div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">

      <!-- 用户头像群 -->
      <div class="flex items-center justify-center gap-1 mb-10 reveal-up" :class="{ 'is-visible': isVisible }">
        <div class="flex -space-x-2.5">
          <img v-for="(av, i) in avatars" :key="i" :src="av" :alt="t('cta.user')"
            class="w-10 h-10 rounded-full object-cover ring-2 ring-white/20 shadow-lg hover:scale-110 hover:z-10 transition-transform duration-200 cursor-pointer"
            :style="{ zIndex: avatars.length - i }" />
        </div>
        <div class="ml-4 text-left">
          <div class="text-sm font-bold text-white">{{ t('cta.usersUsing') }}</div>
          <div class="flex items-center gap-1 text-xs text-yellow-300 mt-0.5">
            <span>★★★★★</span>
            <span class="text-white/50 ml-1">{{ t('cta.rating') }}</span>
          </div>
        </div>
      </div>

      <!-- 主标题 -->
      <div class="reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.15s;">
        <h2 class="text-5xl lg:text-7xl font-black mb-6 leading-tight tracking-tight">
          {{ t('cta.titlePrefix') }}<br />
          <span class="cta-gradient-text">{{ t('cta.title') }}</span>
        </h2>
        <p class="text-white/60 text-xl mb-12 max-w-3xl mx-auto text-center leading-relaxed" v-html="t('cta.description')">
          
        </p>
      </div>

      <!-- 按钮组 -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.3s;">
        <!-- 主按钮 -->
        <button class="cta-btn-primary group" @mouseenter="primaryHover = true" @mouseleave="primaryHover = false">
          <div class="cta-btn-shine" :class="{ 'cta-btn-shine-active': primaryHover }"></div>
          <span class="relative z-10 flex items-center gap-2">
            <span>🚀</span>
            <span>{{ t('cta.cta.startFree') }}</span>
          </span>
        </button>

        <!-- 次按钮 -->
        <button class="cta-btn-secondary group">
          <div class="cta-btn-play">
            <svg class="w-4 h-4 ml-0.5" 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>
          {{ t('cta.cta.watchDemo') }}
        </button>
      </div>

      <!-- 信任标签 -->
      <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-white/40 reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.45s;">
        <span v-for="trust in trustItems" :key="trust.key" class="flex items-center gap-2 hover:text-white/70 transition-colors duration-200 cursor-default">
          <span class="text-emerald-400 font-bold">✓</span>
          {{ t(`cta.trust.${trust.key}`) }}
        </span>
      </div>

      <!-- 底部数据展示 -->
      <div class="mt-16 grid grid-cols-3 gap-6 max-w-lg mx-auto reveal-up" :class="{ 'is-visible': isVisible }" style="transition-delay: 0.6s;">
        <div v-for="stat in bottomStats" :key="stat.key" class="cta-bottom-stat">
          <div class="text-2xl font-black mb-1" :style="{ color: stat.color }">{{ stat.value }}</div>
          <div class="text-white/40 text-xs">{{ t(`cta.stats.${stat.key}`) }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const { t } = useI18n()
const isVisible = ref(false)
const ctaRef = ref(null)
const primaryHover = ref(false)

onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
    { threshold: 0.1 }
  )
  if (ctaRef.value) observer.observe(ctaRef.value)
})

const floatingNodes = [
  { x: '4%', y: '12%', size: '72px', icon: '⚡', delay: '0s', duration: '6s', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(245,158,11,0.3), transparent)' },
  { x: '88%', y: '8%', size: '64px', icon: '🤖', delay: '1s', duration: '7s', img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(139,92,246,0.3), transparent)' },
  { x: '2%', y: '62%', size: '58px', icon: '📊', delay: '2s', duration: '8s', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(59,130,246,0.3), transparent)' },
  { x: '91%', y: '58%', size: '68px', icon: '🔗', delay: '0.5s', duration: '9s', img: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(16,185,129,0.3), transparent)' },
  { x: '46%', y: '4%', size: '52px', icon: '✨', delay: '1.5s', duration: '7.5s', img: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=100&h=100&fit=crop', glow: 'linear-gradient(135deg, rgba(236,72,153,0.3), transparent)' }
]

const avatars = [
  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop',
  'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=60&h=60&fit=crop',
  'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=60&h=60&fit=crop',
  'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop',
  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop'
]

const trustItems = [
  { key: 'noCreditCard' },
  { key: 'quickStart' },
  { key: 'freeForever' },
  { key: 'cancelAnytime' }
]

// 底部数据
const bottomStats = [
  { value: '50K+', key: 'activeUsers', color: '#a78bfa' },
  { value: '99.9%', key: 'uptime', color: '#34d399' },
  { value: '4.9★', key: 'userRating', color: '#fbbf24' }
]
</script>

<style scoped>
/* 光晕 */
.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.cta-orb-1 {
  width: 600px; height: 600px;
  top: -150px; left: -100px;
  background: radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%);
  animation: ctaOrbFloat 12s ease-in-out infinite;
}
.cta-orb-2 {
  width: 500px; height: 500px;
  top: 50%; right: -100px;
  background: radial-gradient(circle, rgba(236,72,153,0.2) 0%, transparent 70%);
  animation: ctaOrbFloat 16s ease-in-out infinite reverse;
}
.cta-orb-3 {
  width: 400px; height: 400px;
  bottom: -100px; left: 40%;
  background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
  animation: ctaOrbFloat 10s ease-in-out infinite;
}
@keyframes ctaOrbFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -40px); }
}

/* 浮动节点 */
.cta-float-node {
  animation: ctaNodeFloat linear infinite;
}
@keyframes ctaNodeFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-14px) rotate(4deg); }
  66% { transform: translateY(-7px) rotate(-3deg); }
}

/* 渐变文字 */
.cta-gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f472b6 40%, #a78bfa 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 主按钮 */
.cta-btn-primary {
  position: relative;
  overflow: hidden;
  background: white;
  color: #7c3aed;
  font-weight: 900;
  font-size: 16px;
  padding: 16px 40px;
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
}
.cta-btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 50px rgba(255,255,255,0.25);
}
.cta-btn-primary:active {
  transform: translateY(-1px) scale(1.01);
}
.cta-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.cta-btn-shine-active {
  transform: translateX(100%);
}

/* 次按钮 */
.cta-btn-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.cta-btn-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}
.cta-btn-play {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.cta-btn-secondary:hover .cta-btn-play {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
}

/* 底部数据 */
.cta-bottom-stat {
  text-align: center;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.3s ease;
}
.cta-bottom-stat:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-3px);
}

/* 滚动动画 */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 响应式 ===== */

/* 标题自适应 */
.section-cta h2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}
.section-cta p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* 平板（≤1024px）*/
@media (max-width: 1024px) {
  .section-cta { padding-top: 5rem; padding-bottom: 5rem; }
  /* 浮动节点在平板上隐藏以防溢出 */
  .cta-float-node { display: none; }
}

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-cta { padding-top: 4rem; padding-bottom: 4rem; }
  .section-cta .max-w-4xl { padding-left: 1.25rem; padding-right: 1.25rem; }
  .cta-btn-primary { padding: 14px 32px; font-size: 15px; }
  .cta-btn-secondary { padding: 14px 22px; font-size: 14px; }
  .section-cta .mt-16 { margin-top: 2.5rem; }
  .section-cta .mb-12 { margin-bottom: 2rem; }
  .section-cta .mb-10 { margin-bottom: 1.5rem; }
  /* 底部数据卡片 */
  .cta-bottom-stat { padding: 12px 8px; }
  .cta-bottom-stat .text-2xl { font-size: 1.25rem; }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-cta { padding-top: 3rem; padding-bottom: 3rem; }
  .section-cta .max-w-4xl { padding-left: 1rem; padding-right: 1rem; }
  .cta-btn-primary { padding: 12px 24px; font-size: 14px; border-radius: 16px; }
  .cta-btn-secondary { padding: 12px 18px; font-size: 13px; border-radius: 16px; gap: 8px; }
  .cta-btn-play { width: 30px; height: 30px; }
  .section-cta .w-10 { width: 2rem; height: 2rem; }
  .section-cta .mt-16 { margin-top: 2rem; }
  /* 底部数据卡片 */
  .cta-bottom-stat { padding: 10px 6px; }
  .cta-bottom-stat .text-2xl { font-size: 1.1rem; }
  .cta-bottom-stat .text-xs { font-size: 0.65rem; }
  /* 信任标签 */
  .section-cta .text-sm { font-size: 0.75rem; }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .cta-btn-primary { padding: 11px 20px; font-size: 13px; }
  .cta-btn-secondary { padding: 11px 14px; font-size: 12px; }
  .cta-bottom-stat .text-2xl { font-size: 1rem; }
}
</style>