arcticnewone/app/components/home/HomeCTA.vue

<template>
  <section ref="rootRef" class="relative min-h-screen flex items-center justify-center overflow-hidden">
    <!-- 粒子背景 -->
    <canvas ref="canvasRef" class="absolute inset-0 w-full h-full"></canvas>

    <!-- 渐变背景 -->
    <div
      ref="gradientRef"
      class="absolute inset-0 opacity-80"
      style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);"
    ></div>

    <!-- 内容 -->
    <div class="relative z-10 text-center px-6 md:px-10 max-w-5xl mx-auto">
      <!-- 主标题 - 分裂后合并动画 -->
      <h2 ref="titleRef" class="mb-8 md:mb-12 overflow-hidden">
        <div class="title-line flex justify-center gap-3 md:gap-4 mb-4 md:mb-6">
          <span
            v-for="(char, i) in line1Chars"
            :key="`l1-${i}`"
            :ref="el => setCharRef(el, 'line1', i)"
            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white char-hidden"
            v-html="char === ' ' ? '&nbsp;' : char"
          ></span>
        </div>
        <div class="title-line flex justify-center gap-3 md:gap-4">
          <span
            v-for="(char, i) in line2Chars"
            :key="`l2-${i}`"
            :ref="el => setCharRef(el, 'line2', i)"
            class="inline-block text-5xl md:text-7xl lg:text-8xl font-bold text-white char-hidden"
            v-html="char === ' ' ? '&nbsp;' : char"
          ></span>
        </div>
      </h2>

      <!-- 副标题 -->
      <p ref="subtitleRef" class="text-xl md:text-3xl text-white/90 mb-12 md:mb-16 leading-relaxed max-w-3xl mx-auto" >
        {{ t('home.cta.subtitle') }}
      </p>

      <!-- 按钮组 -->
      <div ref="buttonsRef" class="flex flex-col sm:flex-row gap-6 justify-center items-center" >
        <NuxtLink
          to="/contact"
          class="cta-button group relative px-10 py-5 rounded-full bg-white text-black text-lg font-bold overflow-hidden shadow-2xl hover:shadow-white/50 transition-all duration-300"
        >
          <span class="relative z-10 flex items-center gap-3">
            {{ t('home.cta.primaryButton') }}
            <Icon name="ph:arrow-right" class="w-6 h-6 transition-transform duration-300 group-hover:translate-x-2" />
          </span>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </NuxtLink>

        <NuxtLink
          to="/work"
          class="cta-button-secondary group px-10 py-5 rounded-full border-2 border-white text-white text-lg font-bold hover:bg-white hover:text-black transition-all duration-300"
        >
          <span class="flex items-center gap-3">
            {{ t('home.cta.secondaryButton') }}
            <Icon name="ph:eye" class="w-6 h-6" />
          </span>
        </NuxtLink>
      </div>

      <!-- 滚动提示 -->
      <div ref="scrollHintRef" class="absolute bottom-12 left-1/2 -translate-x-1/2" >
        <div class="flex flex-col items-center gap-2 animate-bounce">
          <span class="text-white/70 text-sm">{{ t('home.cta.scrollDown') }}</span>
          <Icon name="ph:caret-down" class="w-6 h-6 text-white/70" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import gsap from 'gsap'

const { t } = useI18n()

const rootRef = ref<HTMLElement | null>(null)
const canvasRef = ref<HTMLCanvasElement | null>(null)
const gradientRef = ref<HTMLElement | null>(null)
const titleRef = ref<HTMLElement | null>(null)
const subtitleRef = ref<HTMLElement | null>(null)
const buttonsRef = ref<HTMLElement | null>(null)
const scrollHintRef = ref<HTMLElement | null>(null)

const line1Chars = computed(() => t('home.cta.titleLine1').split(''))
const line2Chars = computed(() => t('home.cta.titleLine2').split(''))

const line1CharRefs = ref<(HTMLElement | null)[]>([])
const line2CharRefs = ref<(HTMLElement | null)[]>([])

let animationId: number | null = null
let gradientHue = 0

const setCharRef = (el: any, line: 'line1' | 'line2', index: number) => {
  if (line === 'line1') {
    line1CharRefs.value[index] = el
  } else {
    line2CharRefs.value[index] = el
  }
}

// 星空粒子动画
const initParticles = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  const ctx = canvas.getContext('2d')
  if (!ctx) return

  const resize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resize()
  window.addEventListener('resize', resize)

  const particles: Array<{
    x: number
    y: number
    vx: number
    vy: number
    size: number
    opacity: number
    twinkle: number
  }> = []

  // 创建星星
  for (let i = 0; i < 150; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.3,
      vy: (Math.random() - 0.5) * 0.3,
      size: Math.random() * 2.5 + 0.5,
      opacity: Math.random(),
      twinkle: Math.random() * Math.PI * 2
    })
  }

  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    particles.forEach(p => {
      // 更新位置
      p.x += p.vx
      p.y += p.vy

      // 边界检测
      if (p.x < 0) p.x = canvas.width
      if (p.x > canvas.width) p.x = 0
      if (p.y < 0) p.y = canvas.height
      if (p.y > canvas.height) p.y = 0

      // 闪烁效果
      p.twinkle += 0.02
      const twinkleOpacity = Math.sin(p.twinkle) * 0.5 + 0.5

      // 绘制星星
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
      ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity * twinkleOpacity})`
      ctx.fill()

      // 绘制光晕
      const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3)
      gradient.addColorStop(0, `rgba(255, 255, 255, ${0.3 * twinkleOpacity})`)
      gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
      ctx.fillStyle = gradient
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2)
      ctx.fill()
    })

    animationId = requestAnimationFrame(animate)
  }

  animate()

  return () => {
    window.removeEventListener('resize', resize)
    if (animationId) cancelAnimationFrame(animationId)
  }
}

// 渐变色循环变化
const animateGradient = () => {
  const animate = () => {
    gradientHue = (gradientHue + 0.2) % 360

    if (gradientRef.value) {
      const h1 = gradientHue
      const h2 = (gradientHue + 60) % 360
      const h3 = (gradientHue + 120) % 360

      gradientRef.value.style.background = `linear-gradient(135deg,
        hsl(${h1}, 70%, 60%) 0%,
        hsl(${h2}, 70%, 60%) 50%,
        hsl(${h3}, 70%, 75%) 100%
      )`
    }

    requestAnimationFrame(animate)
  }

  animate()
}

onMounted(async () => {
  await nextTick()

  // 初始化粒子和渐变
  const cleanupParticles = initParticles()
  animateGradient()

  // 文字分裂后合并动画
  const timeline = gsap.timeline()

  // Line 1 字符动画
  line1CharRefs.value.forEach((char, i) => {
    if (!char) return
    timeline.to(char, {
      opacity: 1,
      y: 0,
      rotation: 0,
      duration: 0.8,
      ease: 'back.out(1.5)'
    }, i * 0.03)
  })

  // Line 2 字符动画
  line2CharRefs.value.forEach((char, i) => {
    if (!char) return
    timeline.to(char, {
      opacity: 1,
      y: 0,
      rotation: 0,
      duration: 0.8,
      ease: 'back.out(1.5)'
    }, 0.5 + i * 0.03)
  })

  // 副标题
  timeline.to(subtitleRef.value, {
    opacity: 1,
    duration: 1,
    ease: 'power2.out'
  }, '-=0.3')

  // 按钮组
  timeline.to(buttonsRef.value, {
    opacity: 1,
    y: 0,
    duration: 0.8,
    ease: 'power3.out'
  }, '-=0.5')

  // 滚动提示
  timeline.to(scrollHintRef.value, {
    opacity: 1,
    duration: 0.6,
    ease: 'power2.out'
  }, '-=0.3')

  onUnmounted(() => {
    if (cleanupParticles) cleanupParticles()
  })
})
</script>

<style scoped>
.cta-button {
  will-change: transform, box-shadow;
}

.cta-button:hover {
  transform: translateY(-2px);
}

.cta-button-secondary:hover {
  transform: translateY(-2px);
}

.char-hidden {
  opacity: 0;
  transform: translateY(100px) rotate(10deg);
}
</style>