diff --git a/public/images/robot-space.png b/public/images/robot-space.png
new file mode 100644
index 0000000..88d8c63
Binary files /dev/null and b/public/images/robot-space.png differ
diff --git a/public/images/星云.png b/public/images/星云.png
new file mode 100644
index 0000000..ea1441b
Binary files /dev/null and b/public/images/星云.png differ
diff --git a/public/videos/starry-sky.mp4 b/public/videos/starry-sky.mp4
new file mode 100644
index 0000000..8be0bf0
Binary files /dev/null and b/public/videos/starry-sky.mp4 differ
diff --git a/public/videos/黑背景.mp4 b/public/videos/黑背景.mp4
new file mode 100644
index 0000000..d8f3c10
Binary files /dev/null and b/public/videos/黑背景.mp4 differ
diff --git a/src/App.vue b/src/App.vue
index 1c634c2..9e9114e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted } from 'vue'
 import Navbar from '@/components/Navbar.vue'
 import Footer from '@/components/Footer.vue'
+import MouseTrail from '@/components/MouseTrail.vue'
 
 const handleScroll = () => {
   const nav = document.querySelector('.navbar')
@@ -25,6 +26,7 @@ onUnmounted(() => {
 
 <template>
   <div class="min-h-screen flex flex-col">
+    <MouseTrail />
     <Navbar />
     <main class="flex-1">
       <router-view v-slot="{ Component }">
diff --git a/src/components/CosmicBackground.vue b/src/components/CosmicBackground.vue
new file mode 100644
index 0000000..b7d28af
--- /dev/null
+++ b/src/components/CosmicBackground.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface Particle {
+  element: HTMLElement
+  angle: number
+  radius: number
+  speed: number
+  size: number
+  opacity: number
+  baseOpacity: number
+  color: string
+  centerX: number
+  centerY: number
+  twinkleSpeed: number
+  twinkleOffset: number
+}
+
+const particlesContainer = ref<HTMLDivElement | null>(null)
+const particles: Particle[] = []
+const mousePos = { x: 0, y: 0 }
+let animationFrameId: number | null = null
+let time = 0
+
+const nebulaColors = [
+  '#6366f1',
+  '#8b5cf6',
+  '#a855f7',
+  '#d946ef',
+  '#ec4899',
+  '#f43f5e',
+  '#3b82f6',
+  '#60a5fa',
+  '#22d3ee',
+  '#14b8a6',
+]
+
+const createNebulaParticle = (centerX: number, centerY: number, maxRadius: number) => {
+  const particle = document.createElement('div')
+  particle.className = 'particle nebula'
+  particle.style.position = 'absolute'
+  particle.style.borderRadius = '50%'
+  particle.style.pointerEvents = 'none'
+  particle.style.transition = 'opacity 0.3s ease'
+  
+  const angle = Math.random() * Math.PI * 2
+  const radius = Math.random() * maxRadius
+  const size = Math.random() * 3 + 1
+  const color = nebulaColors[Math.floor(Math.random() * nebulaColors.length)]
+  const baseOpacity = Math.random() * 0.4 + 0.2
+  
+  particle.style.width = `${size}px`
+  particle.style.height = `${size}px`
+  particle.style.backgroundColor = color
+  particle.style.left = `${centerX + Math.cos(angle) * radius}px`
+  particle.style.top = `${centerY + Math.sin(angle) * radius}px`
+  particle.style.opacity = `${baseOpacity}`
+  
+  if (particlesContainer.value) {
+    particlesContainer.value.appendChild(particle)
+  }
+  
+  particles.push({
+    element: particle,
+    angle,
+    radius,
+    speed: (Math.random() * 0.001 + 0.0005) * (Math.random() > 0.5 ? 1 : -1),
+    size,
+    opacity: baseOpacity,
+    baseOpacity,
+    color,
+    centerX,
+    centerY,
+    twinkleSpeed: Math.random() * 0.005 + 0.002,
+    twinkleOffset: Math.random() * Math.PI * 2,
+  })
+}
+
+const createNebulaCenter = () => {
+  const centerX = window.innerWidth / 2
+  const centerY = window.innerHeight / 2
+  
+  for (let i = 0; i < 150; i++) {
+    createNebulaParticle(centerX, centerY, Math.min(window.innerWidth, window.innerHeight) * 0.4)
+  }
+  
+  for (let i = 0; i < 100; i++) {
+    createNebulaParticle(centerX, centerY, Math.min(window.innerWidth, window.innerHeight) * 0.6)
+  }
+  
+  for (let i = 0; i < 50; i++) {
+    createNebulaParticle(centerX, centerY, Math.min(window.innerWidth, window.innerHeight) * 0.8)
+  }
+}
+
+const updateParticles = () => {
+  particles.forEach((particle) => {
+    const x = particle.centerX + Math.cos(particle.angle) * particle.radius
+    const y = particle.centerY + Math.sin(particle.angle) * particle.radius
+    
+    particle.element.style.left = `${x}px`
+    particle.element.style.top = `${y}px`
+    
+    particle.element.style.opacity = `${particle.baseOpacity}`
+    
+    const glowSize = particle.size * 6
+    particle.element.style.boxShadow = `0 0 ${glowSize}px ${particle.color}40`
+  })
+  
+  animationFrameId = requestAnimationFrame(updateParticles)
+}
+
+const handleMouseMove = (e: MouseEvent) => {
+  mousePos.x = e.clientX
+  mousePos.y = e.clientY
+}
+
+const handleResize = () => {
+  particles.forEach(p => {
+    p.element.remove()
+  })
+  particles.length = 0
+  createNebulaCenter()
+}
+
+onMounted(() => {
+  createNebulaCenter()
+  updateParticles()
+  window.addEventListener('mousemove', handleMouseMove)
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+  window.removeEventListener('mousemove', handleMouseMove)
+  window.removeEventListener('resize', handleResize)
+  particles.forEach(p => {
+    p.element.remove()
+  })
+})
+</script>
+
+<template>
+  <div class="cosmic-background">
+    <div ref="particlesContainer" class="particles-container"></div>
+    <div class="bg-gradient-radial-from-center"></div>
+    <div class="bg-gradient-radial-abyss"></div>
+    <div class="galaxy-core"></div>
+    <div class="galaxy-arms"></div>
+    <div class="cosmic-dust"></div>
+  </div>
+</template>
+
+<style scoped>
+.cosmic-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: #000;
+  overflow: hidden;
+}
+
+.cosmic-background::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('/images/星云.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.6;
+  z-index: 0;
+}
+
+.particles-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.bg-gradient-radial-from-center {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(30, 30, 60, 0.4) 0%,
+    rgba(20, 20, 40, 0.3) 30%,
+    rgba(10, 10, 20, 0.2) 60%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  z-index: 2;
+}
+
+.bg-gradient-radial-abyss {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 80% 50% at 50% 100%,
+    rgba(0, 0, 0, 0.85) 0%,
+    rgba(5, 5, 15, 0.7) 40%,
+    rgba(10, 10, 30, 0.5) 70%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  z-index: 3;
+}
+
+.galaxy-core {
+  display: none;
+}
+
+.galaxy-arms {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 800px;
+  height: 800px;
+  transform: translate(-50%, -50%);
+  animation: rotate-arms 120s linear infinite;
+  z-index: 4;
+}
+
+.galaxy-arms::before,
+.galaxy-arms::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform-origin: center;
+}
+
+.galaxy-arms::before {
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    rgba(100, 100, 200, 0.02) 10deg,
+    rgba(150, 150, 255, 0.04) 20deg,
+    rgba(100, 100, 200, 0.02) 30deg,
+    transparent 40deg,
+    transparent 90deg,
+    rgba(100, 100, 200, 0.02) 100deg,
+    rgba(150, 150, 255, 0.04) 110deg,
+    rgba(100, 100, 200, 0.02) 120deg,
+    transparent 130deg,
+    transparent 180deg,
+    rgba(100, 100, 200, 0.02) 190deg,
+    rgba(150, 150, 255, 0.04) 200deg,
+    rgba(100, 100, 200, 0.02) 210deg,
+    transparent 220deg,
+    transparent 270deg,
+    rgba(100, 100, 200, 0.02) 280deg,
+    rgba(150, 150, 255, 0.04) 290deg,
+    rgba(100, 100, 200, 0.02) 300deg,
+    transparent 310deg,
+    transparent 360deg
+  );
+  border-radius: 50%;
+}
+
+.galaxy-arms::after {
+  background: conic-gradient(
+    from 45deg,
+    transparent 0deg,
+    rgba(180, 180, 255, 0.015) 15deg,
+    rgba(200, 200, 255, 0.03) 30deg,
+    rgba(180, 180, 255, 0.015) 45deg,
+    transparent 60deg,
+    transparent 150deg,
+    rgba(180, 180, 255, 0.015) 165deg,
+    rgba(200, 200, 255, 0.03) 180deg,
+    rgba(180, 180, 255, 0.015) 195deg,
+    transparent 210deg,
+    transparent 300deg,
+    rgba(180, 180, 255, 0.015) 315deg,
+    rgba(200, 200, 255, 0.03) 330deg,
+    rgba(180, 180, 255, 0.015) 345deg,
+    transparent 360deg
+  );
+  border-radius: 50%;
+}
+
+.cosmic-dust {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(2px 2px at 230px 80px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(1px 1px at 300px 150px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 370px 60px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 450px 200px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 520px 100px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 600px 180px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 680px 90px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 750px 250px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 830px 130px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 900px 300px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 980px 160px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 20px 280px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 100px 350px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 180px 420px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 260px 300px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 340px 480px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 420px 360px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 500px 440px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 580px 320px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 660px 500px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 740px 380px, rgba(255,255,255,0.3), transparent),
+    radial-gradient(2px 2px at 820px 560px, rgba(255,255,255,0.4), transparent),
+    radial-gradient(1px 1px at 900px 450px, rgba(255,255,255,0.2), transparent),
+    radial-gradient(1px 1px at 980px 520px, rgba(255,255,255,0.3), transparent);
+  background-size: 1000px 600px;
+  animation: float-dust 60s linear infinite;
+  z-index: 5;
+}
+
+@keyframes rotate-core {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes rotate-arms {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes pulse-core {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.2;
+  }
+}
+
+@keyframes float-dust {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 1000px 600px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MouseTrail.vue b/src/components/MouseTrail.vue
new file mode 100644
index 0000000..6a94cd3
--- /dev/null
+++ b/src/components/MouseTrail.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface TrailPoint {
+  id: number
+  x: number
+  y: number
+  opacity: number
+  size: number
+  life: number
+}
+
+const isVisible = ref(false)
+const trailPoints = ref<TrailPoint[]>([])
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+let animationFrameId: number | null = null
+let pointId = 0
+let lastX = 0
+let lastY = 0
+let lastTime = 0
+let moveSpeed = 0
+let lastTrailTime = 0
+
+const handleMouseMove = (e: MouseEvent) => {
+  const currentTime = Date.now()
+  const deltaTime = currentTime - lastTime
+  const dx = e.clientX - lastX
+  const dy = e.clientY - lastY
+  
+  mouseX.value = e.clientX
+  mouseY.value = e.clientY
+  
+  if (deltaTime > 0) {
+    moveSpeed = Math.sqrt(dx * dx + dy * dy) / deltaTime
+  }
+  
+  const distance = Math.sqrt(dx * dx + dy * dy)
+  
+  if (distance > 5 && currentTime - lastTrailTime > 20) {
+    const trailLength = Math.min(Math.floor(moveSpeed * 1.5), 5)
+    
+    for (let i = 0; i < trailLength; i++) {
+      const ratio = i / trailLength
+      const wave = Math.sin(ratio * Math.PI)
+      const sizeVariation = Math.sin(ratio * Math.PI * 3) * 2
+      
+      trailPoints.value.push({
+        id: pointId++,
+        x: e.clientX - dx * ratio,
+        y: e.clientY - dy * ratio,
+        opacity: wave * (1 - ratio * 0.4),
+        size: 6 + wave * 3 + sizeVariation,
+        life: 1
+      })
+    }
+    
+    lastTrailTime = currentTime
+  }
+  
+  lastX = e.clientX
+  lastY = e.clientY
+  lastTime = currentTime
+  
+  if (!isVisible.value) {
+    isVisible.value = true
+  }
+}
+
+const animate = () => {
+  const decaySpeed = moveSpeed > 0.5 ? 0.015 : 0.03
+  
+  trailPoints.value = trailPoints.value
+    .map(p => ({
+      ...p,
+      life: p.life - decaySpeed,
+      opacity: p.opacity * (1 - decaySpeed * 0.5),
+      size: p.size * (1 - decaySpeed * 0.3)
+    }))
+    .filter(p => p.life > 0 && p.opacity > 0)
+  
+  if (moveSpeed < 0.1) {
+    moveSpeed *= 0.95
+  }
+  
+  animationFrameId = requestAnimationFrame(animate)
+}
+
+const handleMouseLeave = () => {
+  isVisible.value = false
+  trailPoints.value = []
+}
+
+onMounted(() => {
+  if (window.matchMedia('(pointer: fine)').matches) {
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseleave', handleMouseLeave)
+    animate()
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseleave', handleMouseLeave)
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+})
+</script>
+
+<template>
+  <div 
+    v-show="isVisible"
+    class="comet-trail-container"
+  >
+    <div 
+      v-for="point in trailPoints"
+      :key="point.id"
+      class="comet-trail-point"
+      :style="{
+        left: `${point.x}px`,
+        top: `${point.y}px`,
+        opacity: point.opacity,
+        width: `${point.size}px`,
+        height: `${point.size}px`
+      }"
+    ></div>
+    
+    <div 
+      class="comet-head"
+      :style="{
+        left: `${mouseX}px`,
+        top: `${mouseY}px`
+      }"
+    ></div>
+    
+    <div 
+      class="comet-glow"
+      :style="{
+        left: `${mouseX}px`,
+        top: `${mouseY}px`
+      }"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.comet-trail-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.comet-trail-point {
+  position: absolute;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    circle,
+    rgba(147, 197, 253, 1) 0%,
+    rgba(139, 92, 246, 0.8) 40%,
+    rgba(99, 102, 241, 0.5) 70%,
+    transparent 100%
+  );
+  box-shadow: 
+    0 0 6px rgba(147, 197, 253, 0.9),
+    0 0 12px rgba(139, 92, 246, 0.6),
+    0 0 18px rgba(99, 102, 241, 0.4);
+  filter: blur(1px);
+}
+
+.comet-head {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(200, 220, 255, 1) 30%,
+    rgba(147, 197, 253, 0.9) 60%,
+    transparent 100%
+  );
+  box-shadow: 
+    0 0 15px rgba(255, 255, 255, 1),
+    0 0 30px rgba(147, 197, 253, 0.9),
+    0 0 45px rgba(59, 130, 246, 0.6),
+    0 0 60px rgba(139, 92, 246, 0.4);
+}
+
+.comet-glow {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    circle,
+    rgba(147, 197, 253, 0.4) 0%,
+    rgba(59, 130, 246, 0.2) 40%,
+    transparent 70%
+  );
+  filter: blur(10px);
+  animation: glow-pulse 1s ease-in-out infinite;
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 1;
+  }
+}
+
+@media (pointer: coarse) {
+  .comet-trail-container {
+    display: none !important;
+  }
+}
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 22e1833..326ac9d 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -7,7 +7,7 @@ const isMenuOpen = ref(false)
 const isScrolled = ref(false)
 
 const navItems = [
-  { name: '首页', path: '/' },
+  { name: '首页', path: '/home' },
   { name: '产品中心', path: '/products' },
   { name: '解决方案', path: '/solutions' },
   { name: '关于我们', path: '/about' },
@@ -42,7 +42,7 @@ onUnmounted(() => {
   >
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-16 lg:h-20">
-        <div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/')">
+        <div class="flex items-center space-x-3 cursor-pointer" @click="router.push('/home')">
           <img src="/images/logo.jpg" alt="云阶智元" class="w-10 h-10 rounded-lg object-cover" />
           <div>
             <span 
diff --git a/src/directives/neuralCard.ts b/src/directives/neuralCard.ts
new file mode 100644
index 0000000..a3b76f6
--- /dev/null
+++ b/src/directives/neuralCard.ts
@@ -0,0 +1,120 @@
+import type { Directive } from 'vue'
+
+interface ActivatePoint {
+  id: number
+  x: number
+  y: number
+  progress: number
+}
+
+const vNeuralCard: Directive = {
+  mounted(el: HTMLElement) {
+    const points: ActivatePoint[] = []
+    let pointId = 0
+    let animationId: number | null = null
+    let isHovering = false
+
+    const createActivatePoint = () => {
+      const rect = el.getBoundingClientRect()
+      const edge = Math.floor(Math.random() * 4)
+      let x: number, y: number
+
+      switch (edge) {
+        case 0:
+          x = rect.left + Math.random() * rect.width
+          y = rect.top
+          break
+        case 1:
+          x = rect.right
+          y = rect.top + Math.random() * rect.height
+          break
+        case 2:
+          x = rect.left + Math.random() * rect.width
+          y = rect.bottom
+          break
+        default:
+          x = rect.left
+          y = rect.top + Math.random() * rect.height
+      }
+
+      points.push({
+        id: pointId++,
+        x,
+        y,
+        progress: 0
+      })
+
+      updateCSS()
+    }
+
+    const updateCSS = () => {
+      if (points.length === 0) {
+        el.style.setProperty('--neural-points', '')
+        return
+      }
+
+      const pointData = points
+        .map(p => `${p.x},${p.y},${p.progress}`)
+        .join('|')
+      el.style.setProperty('--neural-points', pointData)
+      el.style.setProperty('--neural-count', String(points.length))
+    }
+
+    const animate = () => {
+      points.forEach(p => {
+        p.progress += 0.02
+      })
+
+      const activePoints = points.filter(p => p.progress < 1)
+      points.length = 0
+      points.push(...activePoints)
+
+      updateCSS()
+
+      if (isHovering && points.length < 6) {
+        if (Math.random() > 0.7) {
+          createActivatePoint()
+        }
+      }
+
+      animationId = requestAnimationFrame(animate)
+    }
+
+    const handleMouseEnter = () => {
+      isHovering = true
+      el.classList.add('neural-active')
+      el.classList.add('neural-card-active')
+    }
+
+    const handleMouseLeave = () => {
+      isHovering = false
+      el.classList.remove('neural-active')
+      el.classList.remove('neural-card-active')
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = el.getBoundingClientRect()
+      const mouseX = ((e.clientX - rect.left) / rect.width) * 100
+      const mouseY = ((e.clientY - rect.top) / rect.height) * 100
+      
+      el.style.setProperty('--mouse-x', `${mouseX}%`)
+      el.style.setProperty('--mouse-y', `${mouseY}%`)
+    }
+
+    el.addEventListener('mouseenter', handleMouseEnter)
+    el.addEventListener('mouseleave', handleMouseLeave)
+    el.addEventListener('mousemove', handleMouseMove)
+
+    animate()
+
+    el._neuralAnimationId = animationId
+  },
+
+  unmounted(el: HTMLElement) {
+    if (el._neuralAnimationId) {
+      cancelAnimationFrame(el._neuralAnimationId)
+    }
+  }
+}
+
+export default vNeuralCard
diff --git a/src/directives/ripple.ts b/src/directives/ripple.ts
new file mode 100644
index 0000000..5168ebd
--- /dev/null
+++ b/src/directives/ripple.ts
@@ -0,0 +1,94 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+interface RippleEvent extends MouseEvent {
+  _ripple?: HTMLElement
+}
+
+const vRipple: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    el.style.position = 'relative'
+    el.style.overflow = 'hidden'
+    
+    const handleClick = (e: RippleEvent) => {
+      const rect = el.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      
+      const maxSize = Math.max(rect.width, rect.height) * 2
+      
+      const rippleOuter = document.createElement('span')
+      rippleOuter.style.position = 'absolute'
+      rippleOuter.style.borderRadius = '50%'
+      rippleOuter.style.background = 'rgba(59, 130, 246, 0.5)'
+      rippleOuter.style.width = '30px'
+      rippleOuter.style.height = '30px'
+      rippleOuter.style.left = `${x}px`
+      rippleOuter.style.top = `${y}px`
+      rippleOuter.style.transform = 'translate(-50%, -50%) scale(0)'
+      rippleOuter.style.transition = 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease-out'
+      rippleOuter.style.pointerEvents = 'none'
+      rippleOuter.style.zIndex = '100'
+      rippleOuter.style.boxShadow = '0 0 40px rgba(59, 130, 246, 0.8), 0 0 80px rgba(147, 197, 253, 0.6), 0 0 120px rgba(139, 92, 246, 0.4)'
+      
+      const rippleMiddle = document.createElement('span')
+      rippleMiddle.style.position = 'absolute'
+      rippleMiddle.style.borderRadius = '50%'
+      rippleMiddle.style.background = 'rgba(147, 197, 253, 0.7)'
+      rippleMiddle.style.width = '20px'
+      rippleMiddle.style.height = '20px'
+      rippleMiddle.style.left = `${x}px`
+      rippleMiddle.style.top = `${y}px`
+      rippleMiddle.style.transform = 'translate(-50%, -50%) scale(0)'
+      rippleMiddle.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-out'
+      rippleMiddle.style.pointerEvents = 'none'
+      rippleMiddle.style.zIndex = '101'
+      rippleMiddle.style.boxShadow = '0 0 30px rgba(147, 197, 253, 0.9), 0 0 60px rgba(59, 130, 246, 0.7), 0 0 90px rgba(255, 255, 255, 0.5)'
+      
+      const rippleInner = document.createElement('span')
+      rippleInner.style.position = 'absolute'
+      rippleInner.style.borderRadius = '50%'
+      rippleInner.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(147, 197, 253, 1) 30%, rgba(59, 130, 246, 0.8) 70%, transparent 100%)'
+      rippleInner.style.width = '15px'
+      rippleInner.style.height = '15px'
+      rippleInner.style.left = `${x}px`
+      rippleInner.style.top = `${y}px`
+      rippleInner.style.transform = 'translate(-50%, -50%) scale(0)'
+      rippleInner.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-out'
+      rippleInner.style.pointerEvents = 'none'
+      rippleInner.style.zIndex = '102'
+      rippleInner.style.boxShadow = '0 0 25px rgba(255, 255, 255, 1), 0 0 50px rgba(147, 197, 253, 0.9), 0 0 80px rgba(59, 130, 246, 0.7), 0 0 110px rgba(139, 92, 246, 0.5)'
+      
+      el.appendChild(rippleOuter)
+      el.appendChild(rippleMiddle)
+      el.appendChild(rippleInner)
+      
+      requestAnimationFrame(() => {
+        rippleOuter.style.transform = `translate(-50%, -50%) scale(${maxSize / 15})`
+        rippleOuter.style.opacity = '0'
+        
+        rippleMiddle.style.transform = `translate(-50%, -50%) scale(${maxSize / 10})`
+        rippleMiddle.style.opacity = '0'
+        
+        rippleInner.style.transform = `translate(-50%, -50%) scale(${maxSize / 7})`
+        rippleInner.style.opacity = '0'
+      })
+      
+      setTimeout(() => {
+        rippleOuter.remove()
+        rippleMiddle.remove()
+        rippleInner.remove()
+      }, 700)
+    }
+    
+    el.addEventListener('click', handleClick)
+    el._rippleHandler = handleClick
+  },
+  
+  unmounted(el: HTMLElement) {
+    if (el._rippleHandler) {
+      el.removeEventListener('click', el._rippleHandler)
+    }
+  }
+}
+
+export default vRipple
diff --git a/src/main.ts b/src/main.ts
index 30a5e0f..1ed6660 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,12 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import vRipple from './directives/ripple'
+import vNeuralCard from './directives/neuralCard'
 
 const app = createApp(App)
 app.use(router)
 app.use(ElementPlus)
+app.directive('ripple', vRipple)
+app.directive('neural-card', vNeuralCard)
 app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 0c85050..74e015e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,11 @@ const router = createRouter({
   routes: [
     {
       path: '/',
+      name: 'Landing',
+      component: () => import('@/views/LandingPage.vue')
+    },
+    {
+      path: '/home',
       name: 'Home',
       component: () => import('@/views/Home.vue')
     },
diff --git a/src/style.css b/src/style.css
index 67e07d6..8ae212f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -90,6 +90,21 @@ body {
   animation: float 6s ease-in-out infinite;
 }
 
+.page-visible {
+  animation: page-fade-in 1s ease-out forwards;
+}
+
+@keyframes page-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 /* 渐变背景 */
 .bg-gradient-primary {
   background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
@@ -143,3 +158,102 @@ body {
 .text-gradient {
   @apply bg-gradient-to-r from-primary-600 to-accent-500 bg-clip-text text-transparent;
 }
+
+/* 神经网络卡片激活效果 - 旋转光效 */
+.neural-card-active {
+  position: relative;
+  transform: translateY(-6px) scale(1.02);
+  box-shadow: 
+    0 0 30px rgba(59, 130, 246, 0.4),
+    0 0 60px rgba(147, 197, 253, 0.3),
+    inset 0 0 20px rgba(147, 197, 253, 0.1);
+}
+
+.neural-card-active::before {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    rgba(147, 197, 253, 0.3) 30deg,
+    rgba(59, 130, 246, 0.6) 60deg,
+    rgba(139, 92, 246, 0.8) 90deg,
+    rgba(59, 130, 246, 0.6) 120deg,
+    rgba(147, 197, 253, 0.3) 150deg,
+    transparent 180deg,
+    transparent 360deg
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 3px;
+  animation: neural-rotate 3s linear infinite;
+}
+
+@keyframes neural-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.neural-card-active::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from 180deg,
+    transparent 0deg,
+    rgba(59, 130, 246, 0.4) 45deg,
+    rgba(147, 197, 253, 0.7) 90deg,
+    rgba(255, 255, 255, 0.9) 110deg,
+    rgba(147, 197, 253, 0.7) 130deg,
+    rgba(59, 130, 246, 0.4) 180deg,
+    transparent 360deg
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 3px;
+  animation: neural-rotate-reverse 4s linear infinite;
+  opacity: 0.7;
+}
+
+@keyframes neural-rotate-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.neural-card-active .card-inner-glow {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    rgba(147, 197, 253, 0.2) 0%,
+    rgba(59, 130, 246, 0.1) 30%,
+    transparent 60%
+  );
+  pointer-events: none;
+  animation: neural-flicker 2s ease-in-out infinite;
+}
+
+@keyframes neural-flicker {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+  }
+}
diff --git a/src/views/About.vue b/src/views/About.vue
index 5fc70b4..7ae541b 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -54,20 +54,19 @@ const advantages = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-white">
-    <section class="relative py-20 overflow-hidden">
-      <video 
-        src="/videos/tech3.mp4" 
-        class="absolute inset-0 w-full h-full object-cover"
-        autoplay loop muted playsinline
-      ></video>
-      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="min-h-screen relative">
+    <video 
+      class="fixed inset-0 w-full h-full object-cover z-0"
+      autoplay loop muted playsinline
+    >
+      <source src="/videos/starry-sky.mp4" type="video/mp4" />
+    </video>
+    <div class="fixed inset-0 bg-black/30 z-0"></div>
+    
+    <section class="relative min-h-screen flex items-center overflow-hidden z-10">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 pt-20">
         <div class="text-center">
-          <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
-            关于我们
-          </span>
-          <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
+          <h1 class="text-5xl sm:text-6xl font-bold bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent mb-4">
             西安云阶智元信息科技有限公司
           </h1>
           <p class="text-lg text-white/80 max-w-2xl mx-auto">
@@ -77,12 +76,12 @@ const advantages = [
       </div>
     </section>
 
-    <section class="py-20">
+    <section class="py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div>
-            <h2 class="text-3xl font-bold text-gray-900 mb-6">公司简介</h2>
-            <p class="text-gray-600 mb-8 leading-relaxed">
+            <h2 class="text-3xl font-bold text-white mb-6">公司简介</h2>
+            <p class="text-white/70 mb-8 leading-relaxed">
               西安云阶智元信息科技有限公司（简称"云阶智元"）成立于2026年，坐落于西安市未央区立讯未来中心，是一家以智能体（Agent）技术为核心驱动、致力于为实体产业注入智能化增长动能的新型科技企业，公司自助研发智能体架构"启元"。公司拥有自主可控的研发团队，核心成员10余人，精通智能体架构设计、高可用运维保障、零信任安全防护等关键技术。公司主业聚焦Agent定制开发、智能运维托管、全链路安全防护三大板块，同时拓展跨境电商平台、科研协同、智慧规划、产教融合等衍生服务，灵活适配制造业、农业、文旅、水利、政务等多行业智能化需求。公司已成功落地某零食厂家智能运营体、西安市某乡村自媒体无人运营系统、长江流域水文科研平台、产业发展推演模型等标杆项目，切实助力客户实现管理效率提升、决策模式优化与运营成本降低。未来，云阶智元将持续深耕Agent底层技术，强化场景化赋能能力，致力成为西北地区产业智能化升级最值得信赖的合作伙伴。
             </p>
             <ul class="space-y-3">
@@ -91,14 +90,14 @@ const advantages = [
                 :key="index"
                 class="flex items-center"
               >
-                <svg class="w-5 h-5 text-accent-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-5 h-5 text-accent-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                 </svg>
-                <span class="text-gray-700">{{ advantage }}</span>
+                <span class="text-white/80">{{ advantage }}</span>
               </li>
             </ul>
           </div>
-          <div class="relative">
+          <div class="relative self-start mt-16">
             <div class="absolute -inset-4 bg-gradient-to-r from-primary-400 to-accent-400 rounded-2xl blur-xl opacity-20"></div>
             <video 
               src="/videos/001.mp4" 
@@ -111,87 +110,89 @@ const advantages = [
       </div>
     </section>
 
-    <section class="py-16 bg-gray-50">
+    <section class="py-16 bg-white/5 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <div class="text-center">
-            <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="text-center group">
+            <div class="w-16 h-16 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-primary-500/30 transition-all duration-300">
+              <svg class="w-8 h-8 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.employees }}</p>
-            <p class="text-gray-600">核心团队</p>
+            <p class="text-3xl font-bold text-white mb-1">{{ companyInfo.employees }}</p>
+            <p class="text-white/60">核心团队</p>
           </div>
-          <div class="text-center">
-            <div class="w-16 h-16 bg-accent-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="text-center group">
+            <div class="w-16 h-16 bg-gradient-to-br from-accent-500/30 to-purple-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-accent-500/30 transition-all duration-300">
+              <svg class="w-8 h-8 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">{{ companyInfo.clients }}</p>
-            <p class="text-gray-600">标杆项目</p>
+            <p class="text-3xl font-bold text-white mb-1">{{ companyInfo.clients }}</p>
+            <p class="text-white/60">标杆项目</p>
           </div>
-          <div class="text-center">
-            <div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="text-center group">
+            <div class="w-16 h-16 bg-gradient-to-br from-purple-500/30 to-pink-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-purple-500/30 transition-all duration-300">
+              <svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-5 0h-5m-5 0H2m2 0v-4a2 2 0 012-2h10a2 2 0 012 2v4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">20+</p>
-            <p class="text-gray-600">行业覆盖</p>
+            <p class="text-3xl font-bold text-white mb-1">20+</p>
+            <p class="text-white/60">行业覆盖</p>
           </div>
-          <div class="text-center">
-            <div class="w-16 h-16 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div class="text-center group">
+            <div class="w-16 h-16 bg-gradient-to-br from-orange-500/30 to-red-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-orange-500/30 transition-all duration-300">
+              <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
               </svg>
             </div>
-            <p class="text-3xl font-bold text-gray-900 mb-1">信息安全</p>
-            <p class="text-gray-600">核心技术</p>
+            <p class="text-3xl font-bold text-white mb-1">信息安全</p>
+            <p class="text-white/60">核心技术</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="py-20">
+    <section class="py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">核心价值观</h2>
-          <p class="text-gray-600">我们坚信的理念，指引我们不断前行</p>
+          <h2 class="text-3xl font-bold text-white mb-4">核心价值观</h2>
+          <p class="text-white/70">我们坚信的理念，指引我们不断前行</p>
         </div>
         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
           <div 
             v-for="(value, index) in coreValues" 
             :key="index"
-            class="bg-gray-50 rounded-xl p-6 text-center"
+            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/10 hover:border-white/30 hover:shadow-lg hover:shadow-primary-500/20 transition-all duration-300 group cursor-pointer"
+            v-ripple
+            v-neural-card
           >
-            <div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg v-if="value.icon === 'target'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="w-14 h-14 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <svg v-if="value.icon === 'target'" class="w-7 h-7 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
-              <svg v-else-if="value.icon === 'lightbulb'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="value.icon === 'lightbulb'" class="w-7 h-7 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
               </svg>
-              <svg v-else-if="value.icon === 'users'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="value.icon === 'users'" class="w-7 h-7 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
               </svg>
-              <svg v-else-if="value.icon === 'trending'" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="value.icon === 'trending'" class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
               </svg>
             </div>
-            <h3 class="font-semibold text-gray-900 mb-2">{{ value.title }}</h3>
-            <p class="text-gray-600 text-sm">{{ value.desc }}</p>
+            <h3 class="font-semibold text-white mb-2">{{ value.title }}</h3>
+            <p class="text-white/60 text-sm">{{ value.desc }}</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="py-20 bg-gradient-to-br from-gray-50 via-primary-50/50 to-accent-50/50">
+    <section class="py-20 bg-white/5 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">公司来历</h2>
-          <p class="text-gray-600">从技术研发到公司成立，我们的成长之路</p>
+          <h2 class="text-3xl font-bold text-white mb-4">公司来历</h2>
+          <p class="text-white/70">从技术研发到公司成立，我们的成长之路</p>
         </div>
         
         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -201,28 +202,28 @@ const advantages = [
             class="relative group"
           >
             <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-accent-500 rounded-2xl blur-lg opacity-0 group-hover:opacity-20 transition-opacity duration-500"></div>
-            <div class="relative bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 h-full flex flex-col">
-              <div class="w-14 h-14 bg-gradient-to-br from-primary-100 to-accent-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
-                <svg v-if="index === 0" class="w-7 h-7 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="relative bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 hover:shadow-lg hover:shadow-primary-500/20 transition-all duration-300 h-full flex flex-col cursor-pointer" v-ripple v-neural-card>
+              <div class="w-14 h-14 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                <svg v-if="index === 0" class="w-7 h-7 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                 </svg>
-                <svg v-else-if="index === 1" class="w-7 h-7 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else-if="index === 1" class="w-7 h-7 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                 </svg>
-                <svg v-else-if="index === 2" class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else-if="index === 2" class="w-7 h-7 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                 </svg>
-                <svg v-else class="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
                 </svg>
               </div>
-              <p class="text-xl font-bold text-gray-900 mb-2">{{ milestone.year }}</p>
-              <p class="text-gray-600 text-sm flex-grow mb-4">{{ milestone.event }}</p>
+              <p class="text-xl font-bold text-white mb-2">{{ milestone.year }}</p>
+              <p class="text-white/70 text-sm flex-grow mb-4">{{ milestone.event }}</p>
               <div class="flex flex-wrap gap-2">
                 <span 
                   v-for="(tag, tagIndex) in milestone.tags" 
                   :key="tagIndex"
-                  class="px-2 py-1 bg-primary-50 text-primary-600 text-xs rounded-full font-medium"
+                  class="px-2 py-1 bg-primary-500/20 text-primary-400 text-xs rounded-full font-medium"
                 >
                   {{ tag }}
                 </span>
@@ -232,87 +233,87 @@ const advantages = [
               v-if="index < milestones.length - 1"
               class="hidden lg:block absolute top-1/2 -right-3 transform -translate-y-1/2 z-10"
             >
-              <svg class="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-6 h-6 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
               </svg>
             </div>
           </div>
         </div>
 
-        <div class="mt-12 bg-white rounded-2xl p-8 shadow-lg border border-gray-100">
+        <div class="mt-12 bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
           <div class="text-center mb-6">
-            <h3 class="text-2xl font-bold text-gray-900 mb-2">核心Agent产品矩阵</h3>
-            <p class="text-gray-600">基于多年技术积累，打造全方位智能体解决方案</p>
+            <h3 class="text-2xl font-bold text-white mb-2">核心Agent产品矩阵</h3>
+            <p class="text-white/70">基于多年技术积累，打造全方位智能体解决方案</p>
           </div>
           <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div class="bg-gradient-to-br from-primary-50 to-primary-100/50 rounded-xl p-4 text-center">
-              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
-                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="bg-white/5 rounded-xl p-4 text-center border border-white/10 hover:border-white/30 transition-colors cursor-pointer" v-ripple v-neural-card>
+              <div class="w-12 h-12 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                 </svg>
               </div>
-              <p class="font-semibold text-gray-900 text-sm">企业智能体中枢</p>
-              <p class="text-gray-500 text-xs mt-1">集群核心大脑</p>
+              <p class="font-semibold text-white text-sm">企业智能体中枢</p>
+              <p class="text-white/60 text-xs mt-1">集群核心大脑</p>
             </div>
-            <div class="bg-gradient-to-br from-accent-50 to-accent-100/50 rounded-xl p-4 text-center">
-              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
-                <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="bg-white/5 rounded-xl p-4 text-center border border-white/10 hover:border-white/30 transition-colors cursor-pointer" v-ripple v-neural-card>
+              <div class="w-12 h-12 bg-gradient-to-br from-accent-500/30 to-purple-500/30 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                 </svg>
               </div>
-              <p class="font-semibold text-gray-900 text-sm">智能客服助手</p>
-              <p class="text-gray-500 text-xs mt-1">7x24服务</p>
+              <p class="font-semibold text-white text-sm">智能客服助手</p>
+              <p class="text-white/60 text-xs mt-1">7x24服务</p>
             </div>
-            <div class="bg-gradient-to-br from-purple-50 to-purple-100/50 rounded-xl p-4 text-center">
-              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
-                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="bg-white/5 rounded-xl p-4 text-center border border-white/10 hover:border-white/30 transition-colors cursor-pointer" v-ripple v-neural-card>
+              <div class="w-12 h-12 bg-gradient-to-br from-purple-500/30 to-pink-500/30 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                 </svg>
               </div>
-              <p class="font-semibold text-gray-900 text-sm">智能营销助手</p>
-              <p class="text-gray-500 text-xs mt-1">精准获客</p>
+              <p class="font-semibold text-white text-sm">智能营销助手</p>
+              <p class="text-white/60 text-xs mt-1">精准获客</p>
             </div>
-            <div class="bg-gradient-to-br from-orange-50 to-orange-100/50 rounded-xl p-4 text-center">
-              <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm">
-                <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="bg-white/5 rounded-xl p-4 text-center border border-white/10 hover:border-white/30 transition-colors cursor-pointer" v-ripple v-neural-card>
+              <div class="w-12 h-12 bg-gradient-to-br from-orange-500/30 to-red-500/30 rounded-full flex items-center justify-center mx-auto mb-3">
+                <svg class="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                 </svg>
               </div>
-              <p class="font-semibold text-gray-900 text-sm">智能办公助手</p>
-              <p class="text-gray-500 text-xs mt-1">效率提升</p>
+              <p class="font-semibold text-white text-sm">智能办公助手</p>
+              <p class="text-white/60 text-xs mt-1">效率提升</p>
             </div>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="py-20" id="team">
+    <section class="py-20 relative z-10" id="team">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">核心团队</h2>
-          <p class="text-gray-600">专业的领导团队，带领公司不断发展</p>
+          <h2 class="text-3xl font-bold text-white mb-4">核心团队</h2>
+          <p class="text-white/70">专业的领导团队，带领公司不断发展</p>
         </div>
         <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
           <div 
             v-for="(member, index) in team" 
             :key="index"
-            class="text-center"
+            class="text-center group"
           >
             <div class="relative mb-4">
               <img 
                 :src="member.avatar" 
                 :alt="member.name" 
-                class="w-32 h-32 rounded-full mx-auto object-cover ring-4 ring-primary-100"
+                class="w-32 h-32 rounded-full mx-auto object-cover ring-4 ring-primary-500/30 group-hover:ring-primary-500/60 group-hover:scale-105 transition-all duration-300"
               />
             </div>
-            <h3 class="font-semibold text-gray-900 mb-1">{{ member.name }}</h3>
-            <p class="text-primary-600 text-sm">{{ member.role }}</p>
+            <h3 class="font-semibold text-white mb-1">{{ member.name }}</h3>
+            <p class="text-primary-400 text-sm">{{ member.role }}</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="bg-gradient-to-br from-primary-900 to-accent-900 py-20">
+    <section class="bg-white/5 backdrop-blur-sm border-t border-white/10 py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
           加入我们
@@ -320,7 +321,7 @@ const advantages = [
         <p class="text-white/80 mb-8 max-w-2xl mx-auto">
           我们正在寻找优秀的人才加入我们的团队，共同推动技术创新和企业发展
         </p>
-        <button @click="openRecruitment" class="btn-primary">
+        <button @click="openRecruitment" class="px-8 py-4 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-xl hover:from-primary-500 hover:to-accent-400 transition-all duration-300 shadow-lg shadow-primary-500/30">
           查看招聘信息
         </button>
       </div>
@@ -329,10 +330,10 @@ const advantages = [
     <Teleport to="body">
       <div 
         v-if="showRecruitment" 
-        class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+        class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4"
         @click.self="closeRecruitment"
       >
-        <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div class="bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
           <div class="bg-gradient-to-r from-primary-600 to-accent-600 p-6 rounded-t-2xl">
             <div class="flex items-center justify-between">
               <h3 class="text-2xl font-bold text-white">【西安云阶智元科技｜AI Agent方向招聘】</h3>
@@ -347,79 +348,79 @@ const advantages = [
             </div>
           </div>
           <div class="p-8">
-            <p class="text-gray-700 mb-6 leading-relaxed">
+            <p class="text-white/80 mb-6 leading-relaxed">
               云阶智元是一家专注于 AI Agent、企业智能体中枢与行业智能化解决方案的科技公司，致力于推动智能体在企业流程、知识管理、业务协同和自动化运营中的落地应用。
             </p>
             
             <div class="mb-6">
-              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <h4 class="text-lg font-semibold text-white mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                 </svg>
                 招聘岗位
               </h4>
               <div class="flex flex-wrap gap-2">
-                <span class="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm font-medium">AI产品经理</span>
-                <span class="px-3 py-1 bg-accent-50 text-accent-700 rounded-full text-sm font-medium">Agent应用开发工程师</span>
-                <span class="px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-sm font-medium">前端开发工程师</span>
-                <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm font-medium">后端开发工程师</span>
-                <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm font-medium">AI解决方案顾问</span>
-                <span class="px-3 py-1 bg-orange-50 text-orange-700 rounded-full text-sm font-medium">内容/市场运营</span>
+                <span class="px-3 py-1 bg-primary-500/20 text-primary-400 rounded-full text-sm font-medium">AI产品经理</span>
+                <span class="px-3 py-1 bg-accent-500/20 text-accent-400 rounded-full text-sm font-medium">Agent应用开发工程师</span>
+                <span class="px-3 py-1 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium">前端开发工程师</span>
+                <span class="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">后端开发工程师</span>
+                <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-medium">AI解决方案顾问</span>
+                <span class="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm font-medium">内容/市场运营</span>
               </div>
             </div>
 
             <div class="mb-6">
-              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <h4 class="text-lg font-semibold text-white mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                 </svg>
                 岗位要求
               </h4>
               <ul class="space-y-2">
-                <li class="flex items-start text-gray-700">
-                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">1</span>
+                <li class="flex items-start text-white/70">
+                  <span class="w-6 h-6 bg-primary-500/30 text-primary-400 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">1</span>
                   关注AI Agent、大模型应用、企业数字化方向；
                 </li>
-                <li class="flex items-start text-gray-700">
-                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">2</span>
+                <li class="flex items-start text-white/70">
+                  <span class="w-6 h-6 bg-primary-500/30 text-primary-400 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">2</span>
                   具备较强的学习能力、执行力和项目推进能力；
                 </li>
-                <li class="flex items-start text-gray-700">
-                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">3</span>
+                <li class="flex items-start text-white/70">
+                  <span class="w-6 h-6 bg-primary-500/30 text-primary-400 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">3</span>
                   有产品、研发、SaaS、企业服务或AI应用经验者优先；
                 </li>
-                <li class="flex items-start text-gray-700">
-                  <span class="w-6 h-6 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">4</span>
+                <li class="flex items-start text-white/70">
+                  <span class="w-6 h-6 bg-primary-500/30 text-primary-400 rounded-full flex items-center justify-center text-xs font-bold mr-3 flex-shrink-0">4</span>
                   能适应创业团队节奏，愿意参与从0到1的产品建设。
                 </li>
               </ul>
             </div>
 
             <div class="mb-6">
-              <h4 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
-                <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <h4 class="text-lg font-semibold text-white mb-3 flex items-center">
+                <svg class="w-5 h-5 text-primary-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                 </svg>
                 薪资待遇
               </h4>
-              <p class="text-gray-700">
+              <p class="text-white/70">
                 基础薪资8K-25K/月，核心岗位可面议；优秀者可享项目奖金、绩效激励及长期发展权益。
               </p>
             </div>
 
             <div class="grid grid-cols-2 gap-4 mb-6">
-              <div class="bg-gray-50 rounded-xl p-4">
-                <p class="text-sm text-gray-500 mb-1">工作地点</p>
-                <p class="font-semibold text-gray-900">西安</p>
+              <div class="bg-white/10 rounded-xl p-4 border border-white/10">
+                <p class="text-sm text-white/60 mb-1">工作地点</p>
+                <p class="font-semibold text-white">西安</p>
               </div>
-              <div class="bg-gray-50 rounded-xl p-4">
-                <p class="text-sm text-gray-500 mb-1">联系方式</p>
-                <p class="font-semibold text-gray-900">15515659613</p>
+              <div class="bg-white/10 rounded-xl p-4 border border-white/10">
+                <p class="text-sm text-white/60 mb-1">联系方式</p>
+                <p class="font-semibold text-white">15515659613</p>
               </div>
             </div>
 
-            <div class="bg-primary-50 rounded-xl p-4">
-              <p class="text-primary-800 text-center font-medium">
+            <div class="bg-primary-500/20 rounded-xl p-4 border border-primary-500/30">
+              <p class="text-primary-400 text-center font-medium">
                 欢迎真正看好AI时代、愿意一起做长期事业的伙伴加入。
               </p>
             </div>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 57b8279..f29d2a5 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -49,20 +49,19 @@ const contactInfo = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-white">
-    <section class="relative py-20 overflow-hidden">
-      <video 
-        src="/videos/tech3.mp4" 
-        class="absolute inset-0 w-full h-full object-cover"
-        autoplay loop muted playsinline
-      ></video>
-      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="min-h-screen relative">
+    <video 
+      class="fixed inset-0 w-full h-full object-cover z-0"
+      autoplay loop muted playsinline
+    >
+      <source src="/videos/starry-sky.mp4" type="video/mp4" />
+    </video>
+    <div class="fixed inset-0 bg-black/30 z-0"></div>
+    
+    <section class="relative min-h-screen flex items-center overflow-hidden z-10">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 pt-20">
         <div class="text-center">
-          <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
-            联系我们
-          </span>
-          <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
+          <h1 class="text-5xl sm:text-6xl font-bold bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent mb-4">
             与我们取得联系
           </h1>
           <p class="text-lg text-white/80 max-w-2xl mx-auto">
@@ -72,77 +71,79 @@ const contactInfo = [
       </div>
     </section>
 
-    <section class="py-16 bg-gray-50">
+    <section class="py-16 bg-white/5 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
           <div 
             v-for="(info, index) in contactInfo" 
             :key="index"
-            class="bg-white rounded-xl p-6 text-center"
+            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/10 hover:border-white/30 hover:shadow-lg hover:shadow-primary-500/20 transition-all duration-300 group cursor-pointer"
+            v-ripple
+            v-neural-card
           >
-            <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg v-if="info.icon === 'map'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="w-12 h-12 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <svg v-if="info.icon === 'map'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
               </svg>
-              <svg v-else-if="info.icon === 'phone'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="info.icon === 'phone'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
               </svg>
-              <svg v-else-if="info.icon === 'mail'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="info.icon === 'mail'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
               </svg>
-              <svg v-else-if="info.icon === 'clock'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="info.icon === 'clock'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
             </div>
-            <h3 class="font-semibold text-gray-900 mb-2">{{ info.title }}</h3>
-            <p class="text-gray-600 text-sm">{{ info.content }}</p>
+            <h3 class="font-semibold text-white mb-2">{{ info.title }}</h3>
+            <p class="text-white/60 text-sm">{{ info.content }}</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="py-20">
+    <section class="py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid lg:grid-cols-2 gap-12">
           <div>
-            <h2 class="text-3xl font-bold text-gray-900 mb-6">获取免费咨询</h2>
-            <p class="text-gray-600 mb-8">
+            <h2 class="text-3xl font-bold text-white mb-6">获取免费咨询</h2>
+            <p class="text-white/70 mb-8">
               填写以下表单，我们的专业团队将在24小时内与您联系，为您提供定制化的解决方案。
             </p>
             
             <div class="space-y-6 mb-8">
               <div class="flex items-start space-x-4">
-                <div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-12 h-12 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <svg class="w-6 h-6 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                   </svg>
                 </div>
                 <div>
-                  <h4 class="font-semibold text-gray-900">专业团队</h4>
-                  <p class="text-gray-600 text-sm">资深技术顾问一对一服务，深入了解您的需求</p>
+                  <h4 class="font-semibold text-white">专业团队</h4>
+                  <p class="text-white/60 text-sm">资深技术顾问一对一服务，深入了解您的需求</p>
                 </div>
               </div>
               <div class="flex items-start space-x-4">
-                <div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-12 h-12 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <svg class="w-6 h-6 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                   </svg>
                 </div>
                 <div>
-                  <h4 class="font-semibold text-gray-900">定制方案</h4>
-                  <p class="text-gray-600 text-sm">根据您的业务需求，提供专属解决方案</p>
+                  <h4 class="font-semibold text-white">定制方案</h4>
+                  <p class="text-white/60 text-sm">根据您的业务需求，提供专属解决方案</p>
                 </div>
               </div>
               <div class="flex items-start space-x-4">
-                <div class="w-12 h-12 bg-accent-100 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-12 h-12 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <svg class="w-6 h-6 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                   </svg>
                 </div>
                 <div>
-                  <h4 class="font-semibold text-gray-900">免费评估</h4>
-                  <p class="text-gray-600 text-sm">免费提供项目评估和报价服务</p>
+                  <h4 class="font-semibold text-white">免费评估</h4>
+                  <p class="text-white/60 text-sm">免费提供项目评估和报价服务</p>
                 </div>
               </div>
             </div>
@@ -153,7 +154,7 @@ const contactInfo = [
                 alt="公司环境" 
                 class="w-full h-full object-cover"
               />
-              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+              <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
               <div class="absolute bottom-4 left-4 text-white">
                 <p class="font-semibold">欢迎来访</p>
                 <p class="text-sm text-white/80">陕西省西安市高新区科技二路65号清华科技园E座</p>
@@ -161,36 +162,36 @@ const contactInfo = [
             </div>
           </div>
 
-          <div class="bg-gray-50 rounded-2xl p-8">
+          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
             <div v-if="isSubmitted" class="text-center py-12">
-              <div class="w-20 h-20 bg-accent-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg class="w-10 h-10 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div class="w-20 h-20 bg-accent-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-10 h-10 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                 </svg>
               </div>
-              <h3 class="text-2xl font-bold text-gray-900 mb-2">提交成功!</h3>
-              <p class="text-gray-600">我们将在24小时内与您联系</p>
+              <h3 class="text-2xl font-bold text-white mb-2">提交成功!</h3>
+              <p class="text-white/70">我们将在24小时内与您联系</p>
             </div>
             
             <form v-else class="space-y-5" @submit.prevent="handleSubmit">
               <div class="grid md:grid-cols-2 gap-5">
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-2">
+                  <label class="block text-sm font-medium text-white/80 mb-2">
                     <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                     </svg>
-                    姓名 <span class="text-red-500">*</span>
+                    姓名 <span class="text-red-400">*</span>
                   </label>
                   <input 
                     v-model="form.name"
                     type="text" 
                     required
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
+                    class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all text-white placeholder-white/40"
                     placeholder="请输入您的姓名"
                   />
                 </div>
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-2">
+                  <label class="block text-sm font-medium text-white/80 mb-2">
                     <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                     </svg>
@@ -199,7 +200,7 @@ const contactInfo = [
                   <input 
                     v-model="form.company"
                     type="text" 
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
+                    class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all text-white placeholder-white/40"
                     placeholder="请输入公司名称"
                   />
                 </div>
@@ -207,7 +208,7 @@ const contactInfo = [
 
               <div>
                 <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-2">
+                  <label class="block text-sm font-medium text-white/80 mb-2">
                     <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                     </svg>
@@ -216,44 +217,44 @@ const contactInfo = [
                   <input 
                     v-model="form.email"
                     type="email" 
-                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all"
+                    class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all text-white placeholder-white/40"
                     placeholder="请输入电子邮箱"
                   />
                 </div>
               </div>
 
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">咨询服务</label>
+                <label class="block text-sm font-medium text-white/80 mb-2">咨询服务</label>
                 <select 
                   v-model="form.service"
-                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all bg-white"
+                  class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all text-white"
                 >
-                  <option value="">请选择服务类型</option>
-                  <option v-for="service in services" :key="service" :value="service">
+                  <option value="" class="text-gray-900">请选择服务类型</option>
+                  <option v-for="service in services" :key="service" :value="service" class="text-gray-900">
                     {{ service }}
                   </option>
                 </select>
               </div>
 
               <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">
+                <label class="block text-sm font-medium text-white/80 mb-2">
                   <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.013 8.013 0 01-5.45-2.132L2.5 19l1.132-3.238A7.956 7.956 0 014 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"/>
                   </svg>
-                  需求描述 <span class="text-red-500">*</span>
+                  需求描述 <span class="text-red-400">*</span>
                 </label>
                 <textarea 
                   v-model="form.message"
                   rows="4"
                   required
-                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all resize-none"
+                  class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none transition-all resize-none text-white placeholder-white/40"
                   placeholder="请简要描述您的需求..."
                 ></textarea>
               </div>
 
               <button 
                 type="submit" 
-                class="btn-primary w-full flex items-center justify-center"
+                class="w-full flex items-center justify-center px-8 py-4 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-xl hover:from-primary-500 hover:to-accent-400 transition-all duration-300 shadow-lg shadow-primary-500/30"
                 :disabled="isSubmitting"
               >
                 <span v-if="isSubmitting">提交中...</span>
@@ -270,20 +271,20 @@ const contactInfo = [
       </div>
     </section>
 
-    <section class="bg-gray-50 py-16">
+    <section class="bg-white/5 py-16 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid md:grid-cols-3 gap-8">
           <div class="text-center">
-            <div class="text-4xl font-bold text-primary-600 mb-2">24小时</div>
-            <p class="text-gray-600">快速响应</p>
+            <div class="text-4xl font-bold text-primary-400 mb-2">24小时</div>
+            <p class="text-white/70">快速响应</p>
           </div>
           <div class="text-center">
-            <div class="text-4xl font-bold text-accent-600 mb-2">1对1</div>
-            <p class="text-gray-600">专属服务</p>
+            <div class="text-4xl font-bold text-accent-400 mb-2">1对1</div>
+            <p class="text-white/70">专属服务</p>
           </div>
           <div class="text-center">
-            <div class="text-4xl font-bold text-purple-600 mb-2">免费</div>
-            <p class="text-gray-600">方案评估</p>
+            <div class="text-4xl font-bold text-purple-400 mb-2">免费</div>
+            <p class="text-white/70">方案评估</p>
           </div>
         </div>
       </div>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 641e8f7..d118520 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,14 +1,37 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { images } from '@/assets/images'
 
-
 const router = useRouter()
-
 const bgVideoRef = ref<HTMLVideoElement | null>(null)
+const isVisible = ref(false)
+
+const initScrollAnimation = () => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible')
+        }
+      })
+    },
+    {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    }
+  )
+
+  document.querySelectorAll('.scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale').forEach((el) => {
+    observer.observe(el)
+  })
+}
 
 onMounted(() => {
+  setTimeout(() => {
+    isVisible.value = true
+  }, 100)
+  
   if (bgVideoRef.value) {
     bgVideoRef.value.currentTime = 2
     bgVideoRef.value.addEventListener('timeupdate', () => {
@@ -19,6 +42,11 @@ onMounted(() => {
       }
     })
   }
+  
+  setTimeout(initScrollAnimation, 100)
+})
+
+onUnmounted(() => {
 })
 
 const stats = [
@@ -95,24 +123,19 @@ const activeTestimonial = ref(0)
 </script>
 
 <template>
-  <div class="min-h-screen">
-    <section class="relative min-h-screen flex items-center overflow-hidden">
+  <div class="min-h-screen" :class="{ 'page-visible': isVisible }">
+    <section class="relative min-h-screen flex items-center overflow-hidden bg-black">
       <video 
-        ref="bgVideoRef"
-        src="/videos/tech3.mp4" 
         class="absolute inset-0 w-full h-full object-cover"
         autoplay loop muted playsinline
-      ></video>
-      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
-      <div class="absolute inset-0 overflow-hidden">
-        <div class="absolute top-20 left-20 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div>
-        <div class="absolute bottom-20 right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-400/10 rounded-full blur-3xl"></div>
-      </div>
+      >
+        <source src="/videos/starry-sky.mp4" type="video/mp4" />
+      </video>
+      <div class="absolute inset-0 bg-black/30"></div>
       
       <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-20">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
-          <div class="animate-fadeInUp">
+          <div class="scroll-animate-left">
             <div class="inline-flex items-center px-4 py-2 bg-white/10 rounded-full text-white/90 text-sm mb-6">
               <span class="w-2 h-2 bg-accent-400 rounded-full mr-2 animate-pulse"></span>
               专注数字化转型，赋能企业创新
@@ -136,38 +159,16 @@ const activeTestimonial = ref(0)
               </button>
             </div>
           </div>
-          
-          <div class="animate-slideInRight">
-            <div class="relative">
-              <div class="absolute -inset-4 bg-gradient-to-r from-primary-400 to-accent-400 rounded-2xl blur-xl opacity-20"></div>
-              <video 
-                src="/videos/001.mp4" 
-                class="relative rounded-2xl shadow-2xl w-full"
-                autoplay loop muted playsinline
-              ></video>
-              <div class="absolute -bottom-6 -left-6 bg-white rounded-xl p-4 shadow-xl animate-float">
-                <div class="flex items-center space-x-3">
-                  <div class="w-12 h-12 bg-accent-100 rounded-full flex items-center justify-center">
-                    <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                    </svg>
-                  </div>
-                  <div>
-                    <p class="font-semibold text-gray-900">项目交付</p>
-                    <p class="text-sm text-gray-500">100%准时交付</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+</div>
         
         <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 mt-20">
           <div 
             v-for="(stat, index) in stats" 
             :key="index"
-            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center"
-            :style="{ animationDelay: `${index * 0.1}s` }"
+            class="scroll-animate shimmer-card-dark bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center cursor-pointer"
+            :style="{ transitionDelay: `${index * 0.1}s` }"
+            v-ripple
+            v-neural-card
           >
             <p class="text-3xl lg:text-4xl font-bold text-white mb-2">{{ stat.value }}</p>
             <p class="text-white/70">{{ stat.label }}</p>
@@ -178,7 +179,7 @@ const activeTestimonial = ref(0)
 
     <section id="services" class="py-20 bg-white">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-16">
+        <div class="text-center mb-16 scroll-animate">
           <span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
             核心服务
           </span>
@@ -194,7 +195,10 @@ const activeTestimonial = ref(0)
           <div 
             v-for="(service, index) in services" 
             :key="index"
-            class="card-hover bg-gray-50 rounded-xl p-6 text-center"
+            class="scroll-animate shimmer-card bg-gray-50 rounded-xl p-6 text-center cursor-pointer"
+            :style="{ transitionDelay: `${index * 0.1}s` }"
+            v-ripple
+            v-neural-card
           >
             <div :class="[service.color, 'w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-4']">
               <svg v-if="service.icon === 'zap'" class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -219,7 +223,7 @@ const activeTestimonial = ref(0)
 
     <section id="products" class="py-20 bg-gray-50">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-16">
+        <div class="text-center mb-16 scroll-animate">
           <span class="inline-block px-4 py-2 bg-accent-100 text-accent-700 rounded-full text-sm font-medium mb-4">
             产品中心
           </span>
@@ -235,10 +239,13 @@ const activeTestimonial = ref(0)
           <div 
             v-for="(product, index) in products" 
             :key="index"
-            class="card-hover bg-white rounded-2xl overflow-hidden shadow-lg"
+            class="scroll-animate shimmer-card bg-white rounded-2xl overflow-hidden shadow-lg cursor-pointer"
+            :style="{ transitionDelay: `${index * 0.15}s` }"
+            v-ripple
+            v-neural-card
           >
             <div class="aspect-video overflow-hidden">
-              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
+              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110" />
             </div>
             <div class="p-6">
               <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ product.name }}</h3>
@@ -264,9 +271,17 @@ const activeTestimonial = ref(0)
       </div>
     </section>
 
-    <section id="testimonials" class="py-20 bg-gradient-to-br from-primary-900 to-accent-900">
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-16">
+    <section id="testimonials" class="relative py-20 overflow-hidden">
+      <video 
+        class="absolute inset-0 w-full h-full object-cover"
+        autoplay loop muted playsinline
+      >
+        <source src="/videos/黑背景.mp4" type="video/mp4" />
+      </video>
+      <div class="absolute inset-0 bg-black/30"></div>
+      
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div class="text-center mb-16 scroll-animate">
           <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
             客户评价
           </span>
@@ -279,7 +294,7 @@ const activeTestimonial = ref(0)
         </div>
         
         <div class="max-w-4xl mx-auto">
-          <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 lg:p-12">
+          <div class="scroll-animate-scale shimmer-card-dark bg-white/10 backdrop-blur-sm rounded-2xl p-8 lg:p-12 cursor-pointer" v-ripple>
             <div class="text-center">
               <div class="flex justify-center mb-6">
                 <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
@@ -315,7 +330,7 @@ const activeTestimonial = ref(0)
     <section id="contact" class="py-20 bg-white">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
-          <div>
+          <div class="scroll-animate-left">
             <span class="inline-block px-4 py-2 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
               联系我们
             </span>
@@ -352,7 +367,7 @@ const activeTestimonial = ref(0)
             </div>
           </div>
           
-          <div class="bg-gray-50 rounded-2xl p-8">
+          <div class="scroll-animate-right shimmer-card bg-gray-50 rounded-2xl p-8">
             <h3 class="text-xl font-semibold text-gray-900 mb-6">获取免费咨询</h3>
             <form class="space-y-4">
               <div class="grid md:grid-cols-2 gap-4">
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
new file mode 100644
index 0000000..887a7ad
--- /dev/null
+++ b/src/views/LandingPage.vue
@@ -0,0 +1,653 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+interface Particle {
+  id: number
+  x: number
+  y: number
+  size: number
+  opacity: number
+  speedX: number
+  speedY: number
+  depth: number
+}
+
+interface FloatRing {
+  id: number
+  radius: number
+  speed: number
+  opacity: number
+  rotation: number
+}
+
+const isLoaded = ref(false)
+const isEntering = ref(false)
+const particles = ref<Particle[]>([])
+const floatRings = ref<FloatRing[]>([])
+const mouseX = ref(0)
+const mouseY = ref(0)
+const rotationX = ref(0)
+const rotationY = ref(0)
+
+let animationFrameId: number | null = null
+let particleId = 0
+
+const createParticles = () => {
+  for (let i = 0; i < 80; i++) {
+    particles.value.push({
+      id: particleId++,
+      x: Math.random() * window.innerWidth,
+      y: Math.random() * window.innerHeight,
+      size: Math.random() * 3 + 1,
+      opacity: Math.random() * 0.6 + 0.1,
+      speedX: (Math.random() - 0.5) * 0.3,
+      speedY: (Math.random() - 0.5) * 0.3,
+      depth: Math.random() * 2 + 1
+    })
+  }
+  
+  for (let i = 0; i < 5; i++) {
+    floatRings.value.push({
+      id: i,
+      radius: 120 + i * 40,
+      speed: 0.5 + i * 0.2,
+      opacity: 0.1 + i * 0.05,
+      rotation: Math.random() * 360
+    })
+  }
+}
+
+const animate = () => {
+  particles.value = particles.value.map(p => ({
+    ...p,
+    x: (p.x + p.speedX) % window.innerWidth,
+    y: (p.y + p.speedY) % window.innerHeight,
+    opacity: p.opacity + (Math.random() - 0.5) * 0.02,
+    size: p.size + (Math.random() - 0.5) * 0.1
+  }))
+  
+  floatRings.value = floatRings.value.map(r => ({
+    ...r,
+    rotation: (r.rotation + r.speed * 0.1) % 360
+  }))
+  
+  rotationY.value += 0.05
+  rotationX.value = Math.sin(Date.now() / 2000) * 5
+  
+  animationFrameId = requestAnimationFrame(animate)
+}
+
+const handleMouseMove = (e: MouseEvent) => {
+  mouseX.value = (e.clientX - window.innerWidth / 2) / window.innerWidth
+  mouseY.value = (e.clientY - window.innerHeight / 2) / window.innerHeight
+}
+
+const enterWebsite = () => {
+  isEntering.value = true
+  setTimeout(() => {
+    router.push('/home')
+  }, 1500)
+}
+
+onMounted(() => {
+  createParticles()
+  animate()
+  document.addEventListener('mousemove', handleMouseMove)
+  
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 300)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+})
+</script>
+
+<template>
+  <div 
+    class="landing-page"
+    :class="{ entering: isEntering }"
+  >
+    <div class="gradient-bg"></div>
+    
+    <div class="particles-container">
+      <div 
+        v-for="particle in particles"
+        :key="particle.id"
+        class="particle"
+        :style="{
+          left: `${particle.x}px`,
+          top: `${particle.y}px`,
+          width: `${particle.size}px`,
+          height: `${particle.size}px`,
+          opacity: Math.max(0.1, Math.min(0.8, particle.opacity)),
+          transform: `translate(-50%, -50%) translate(${mouseX * particle.depth * 20}px, ${mouseY * particle.depth * 20}px)`
+        }"
+      ></div>
+    </div>
+    
+    <div 
+      class="center-content"
+      :style="{
+        transform: `translate(${mouseX * 30}px, ${mouseY * 30}px)`
+      }"
+    >
+      <div 
+        class="tech-structure"
+        :style="{
+          transform: `rotateX(${rotationX + mouseY * 10}deg) rotateY(${rotationY + mouseX * 10}deg)`
+        }"
+      >
+        <div class="core-sphere">
+          <div class="inner-core"></div>
+          <div class="energy-ring ring-1"></div>
+          <div class="energy-ring ring-2"></div>
+          <div class="energy-ring ring-3"></div>
+          
+          <svg class="neural-network" viewBox="0 0 300 300">
+            <defs>
+              <linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="rgba(147, 197, 253, 0)" />
+                <stop offset="50%" stop-color="rgba(147, 197, 253, 0.6)" />
+                <stop offset="100%" stop-color="rgba(147, 197, 253, 0)" />
+              </linearGradient>
+              <filter id="neuralGlow">
+                <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+                <feMerge>
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+            </defs>
+            
+            <circle cx="150" cy="150" r="4" fill="rgba(147, 197, 253, 1)" filter="url(#neuralGlow)" />
+            
+            <circle cx="150" cy="80" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            <circle cx="220" cy="110" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            <circle cx="220" cy="190" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            <circle cx="150" cy="220" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            <circle cx="80" cy="190" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            <circle cx="80" cy="110" r="3" fill="rgba(139, 92, 246, 0.8)" filter="url(#neuralGlow)" />
+            
+            <circle cx="150" cy="40" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            <circle cx="250" cy="90" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            <circle cx="250" cy="210" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            <circle cx="150" cy="260" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            <circle cx="50" cy="210" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            <circle cx="50" cy="90" r="2" fill="rgba(0, 229, 255, 0.6)" filter="url(#neuralGlow)" />
+            
+            <line x1="150" y1="150" x2="150" y2="80" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            <line x1="150" y1="150" x2="220" y2="110" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            <line x1="150" y1="150" x2="220" y2="190" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            <line x1="150" y1="150" x2="150" y2="220" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            <line x1="150" y1="150" x2="80" y2="190" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            <line x1="150" y1="150" x2="80" y2="110" stroke="url(#lineGrad)" stroke-width="1" stroke-opacity="0.5" />
+            
+            <line x1="150" y1="80" x2="150" y2="40" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+            <line x1="220" y1="110" x2="250" y2="90" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+            <line x1="220" y1="190" x2="250" y2="210" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+            <line x1="150" y1="220" x2="150" y2="260" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+            <line x1="80" y1="190" x2="50" y2="210" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+            <line x1="80" y1="110" x2="50" y2="90" stroke="url(#lineGrad)" stroke-width="0.5" stroke-opacity="0.3" />
+          </svg>
+        </div>
+        
+        <div 
+          v-for="ring in floatRings"
+          :key="ring.id"
+          class="float-ring"
+          :style="{
+            width: `${ring.radius * 2}px`,
+            height: `${ring.radius * 2}px`,
+            opacity: ring.opacity,
+            transform: `rotateX(${30 + ring.id * 10}deg) rotate(${ring.rotation}deg)`
+          }"
+        ></div>
+        
+        <div class="data-beams">
+          <div class="beam beam-1"></div>
+          <div class="beam beam-2"></div>
+          <div class="beam beam-3"></div>
+          <div class="beam beam-4"></div>
+        </div>
+      </div>
+      
+      <div 
+        class="brand-section"
+        :class="{ visible: isLoaded }"
+      >
+        <h1 class="brand-name">云阶智元</h1>
+        <p class="brand-english">AI Agent Intelligence Hub</p>
+        <p class="brand-slogan">让智能体成为企业增长的新引擎</p>
+        <p class="brand-tagline">AI Agent · 企业智能体中枢 · 数字化协同进化</p>
+      </div>
+      
+      <button 
+        class="enter-btn"
+        @click="enterWebsite"
+      >
+        <span class="btn-text">开启智能之门</span>
+        <span class="btn-glow"></span>
+        <span class="btn-pulse"></span>
+      </button>
+    </div>
+    
+    <div class="transition-overlay" :class="{ active: isEntering }"></div>
+  </div>
+</template>
+
+<style scoped>
+.landing-page {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: #05070D;
+  z-index: 99999;
+}
+
+.gradient-bg {
+  position: absolute;
+  inset: 0;
+  background: 
+    radial-gradient(ellipse at 20% 20%, rgba(30, 107, 255, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 80%, rgba(138, 63, 252, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
+    linear-gradient(180deg, #05070D 0%, #0a0f1a 50%, #0d1225 100%);
+}
+
+.particles-container {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.particle {
+  position: absolute;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(147, 197, 253, 1) 0%,
+    rgba(59, 130, 246, 0.5) 50%,
+    transparent 100%
+  );
+  box-shadow: 0 0 6px rgba(147, 197, 253, 0.5);
+  transition: transform 0.3s ease-out;
+}
+
+.center-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  z-index: 10;
+}
+
+.tech-structure {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  perspective: 800px;
+  transform-style: preserve-3d;
+}
+
+.core-sphere {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 150px;
+  height: 150px;
+  transform: translate(-50%, -50%);
+}
+
+.inner-core {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.9) 0%,
+    rgba(147, 197, 253, 0.7) 30%,
+    rgba(59, 130, 246, 0.4) 60%,
+    transparent 100%
+  );
+  box-shadow: 
+    0 0 30px rgba(147, 197, 253, 0.8),
+    0 0 60px rgba(59, 130, 246, 0.5),
+    0 0 90px rgba(139, 92, 246, 0.3);
+  animation: core-pulse 3s ease-in-out infinite;
+}
+
+@keyframes core-pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1);
+    opacity: 1;
+  }
+}
+
+.energy-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  border: 1px solid;
+  transform-style: preserve-3d;
+}
+
+.ring-1 {
+  width: 100px;
+  height: 100px;
+  transform: translate(-50%, -50%) rotateX(70deg);
+  border-color: rgba(147, 197, 253, 0.5);
+  animation: ring-rotate 10s linear infinite;
+}
+
+.ring-2 {
+  width: 120px;
+  height: 120px;
+  transform: translate(-50%, -50%) rotateX(50deg);
+  border-color: rgba(139, 92, 246, 0.4);
+  animation: ring-rotate 12s linear infinite reverse;
+}
+
+.ring-3 {
+  width: 140px;
+  height: 140px;
+  transform: translate(-50%, -50%) rotateX(30deg);
+  border-color: rgba(0, 229, 255, 0.3);
+  animation: ring-rotate 8s linear infinite;
+}
+
+@keyframes ring-rotate {
+  from { transform: translate(-50%, -50%) rotateX(var(--rx, 70deg)) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotateX(var(--rx, 70deg)) rotate(360deg); }
+}
+
+.ring-1 { --rx: 70deg; }
+.ring-2 { --rx: 50deg; }
+.ring-3 { --rx: 30deg; }
+
+.neural-network {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+}
+
+.float-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 1px solid rgba(147, 197, 253, 0.3);
+  transform-style: preserve-3d;
+}
+
+.data-beams {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  height: 200px;
+  transform: translate(-50%, -50%);
+}
+
+.beam {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 80px;
+  background: linear-gradient(
+    to top,
+    rgba(147, 197, 253, 0) 0%,
+    rgba(147, 197, 253, 0.8) 50%,
+    rgba(147, 197, 253, 0) 100%
+  );
+  transform-origin: bottom center;
+  animation: beam-pulse 2s ease-in-out infinite;
+}
+
+.beam-1 { transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0s; }
+.beam-2 { transform: translate(-50%, -50%) rotate(90deg); animation-delay: 0.5s; }
+.beam-3 { transform: translate(-50%, -50%) rotate(180deg); animation-delay: 1s; }
+.beam-4 { transform: translate(-50%, -50%) rotate(270deg); animation-delay: 1.5s; }
+
+@keyframes beam-pulse {
+  0%, 100% { opacity: 0.3; height: 60px; }
+  50% { opacity: 0.8; height: 100px; }
+}
+
+.brand-section {
+  text-align: center;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 1s ease-out;
+}
+
+.brand-section.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.brand-name {
+  font-size: 4rem;
+  font-weight: 700;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(147, 197, 253, 1) 30%,
+    rgba(0, 229, 255, 1) 50%,
+    rgba(139, 92, 246, 1) 70%,
+    rgba(147, 197, 253, 1) 100%
+  );
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 
+    0 0 30px rgba(147, 197, 253, 0.5),
+    0 0 60px rgba(59, 130, 246, 0.3);
+  animation: gradient-shift 4s ease-in-out infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.brand-english {
+  font-size: 1rem;
+  color: rgba(147, 197, 253, 0.6);
+  letter-spacing: 0.3em;
+  margin-bottom: 16px;
+}
+
+.brand-slogan {
+  font-size: 1.25rem;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 8px;
+}
+
+.brand-tagline {
+  font-size: 0.9rem;
+  color: rgba(147, 197, 253, 0.5);
+  letter-spacing: 0.1em;
+}
+
+.enter-btn {
+  position: relative;
+  padding: 16px 48px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: white;
+  background: linear-gradient(135deg, rgba(30, 107, 255, 0.2), rgba(138, 63, 252, 0.2));
+  border: 1px solid rgba(147, 197, 253, 0.4);
+  border-radius: 50px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.enter-btn:hover {
+  background: linear-gradient(135deg, rgba(30, 107, 255, 0.3), rgba(138, 63, 252, 0.3));
+  border-color: rgba(147, 197, 253, 0.8);
+  transform: translateY(-2px);
+}
+
+.btn-text {
+  position: relative;
+  z-index: 2;
+}
+
+.btn-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle at center,
+    rgba(147, 197, 253, 0.3) 0%,
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.enter-btn:hover .btn-glow {
+  opacity: 1;
+}
+
+.btn-pulse {
+  position: absolute;
+  inset: -2px;
+  border-radius: 50px;
+  border: 2px solid transparent;
+  background: linear-gradient(#05070D, #05070D) padding-box,
+              linear-gradient(135deg, rgba(147, 197, 255, 0), rgba(138, 63, 252, 0)) border-box;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.enter-btn:hover .btn-pulse {
+  opacity: 1;
+  background: linear-gradient(#05070D, #05070D) padding-box,
+              linear-gradient(135deg, rgba(147, 197, 255, 0.8), rgba(138, 63, 252, 0.8)) border-box;
+}
+
+.transition-overlay {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle at center,
+    rgba(147, 197, 253, 0) 0%,
+    rgba(59, 130, 246, 0) 30%,
+    #05070D 100%
+  );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 1.5s ease;
+}
+
+.transition-overlay.active {
+  opacity: 1;
+}
+
+.landing-page.entering {
+  animation: page-transition 1.5s ease forwards;
+}
+
+@keyframes page-transition {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .tech-structure {
+    width: 220px;
+    height: 220px;
+  }
+  
+  .core-sphere {
+    width: 110px;
+    height: 110px;
+  }
+  
+  .inner-core {
+    width: 45px;
+    height: 45px;
+  }
+  
+  .brand-name {
+    font-size: 2.5rem;
+  }
+  
+  .brand-slogan {
+    font-size: 1rem;
+  }
+  
+  .brand-tagline {
+    font-size: 0.75rem;
+  }
+  
+  .enter-btn {
+    padding: 14px 36px;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .tech-structure {
+    width: 180px;
+    height: 180px;
+  }
+  
+  .brand-name {
+    font-size: 2rem;
+  }
+  
+  .brand-slogan {
+    font-size: 0.9rem;
+  }
+  
+  .brand-tagline {
+    font-size: 0.65rem;
+  }
+  
+  .enter-btn {
+    padding: 12px 28px;
+    font-size: 0.9rem;
+  }
+}
+</style>
diff --git a/src/views/Products.vue b/src/views/Products.vue
index 8771604..27d847b 100644
--- a/src/views/Products.vue
+++ b/src/views/Products.vue
@@ -232,20 +232,19 @@ const features = [
 </script>
 
 <template>
-  <div class="min-h-screen bg-white">
-    <section class="relative py-20 overflow-hidden">
-      <video 
-        src="/videos/tech3.mp4" 
-        class="absolute inset-0 w-full h-full object-cover"
-        autoplay loop muted playsinline
-      ></video>
-      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="min-h-screen relative">
+    <video 
+      class="fixed inset-0 w-full h-full object-cover z-0"
+      autoplay loop muted playsinline
+    >
+      <source src="/videos/starry-sky.mp4" type="video/mp4" />
+    </video>
+    <div class="fixed inset-0 bg-black/30 z-0"></div>
+    
+    <section class="relative min-h-screen flex items-center overflow-hidden z-10">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 pt-20">
         <div class="text-center">
-          <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
-            产品中心
-          </span>
-          <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
+          <h1 class="text-5xl sm:text-6xl font-bold bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent mb-4">
             智能产品矩阵
           </h1>
           <p class="text-lg text-white/80 max-w-2xl mx-auto">
@@ -255,45 +254,47 @@ const features = [
       </div>
     </section>
 
-    <section class="py-16 bg-gray-50">
+    <section class="py-16 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
           <div 
             v-for="(feature, index) in features" 
             :key="index"
-            class="bg-white rounded-xl p-6 text-center"
+            class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-6 text-center cursor-pointer hover:bg-white/15 transition-all duration-300"
+            v-ripple
+            v-neural-card
           >
-            <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-              <svg v-if="feature.icon === 'shield'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="w-12 h-12 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mx-auto mb-4">
+              <svg v-if="feature.icon === 'shield'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
               </svg>
-              <svg v-else-if="feature.icon === 'globe'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="feature.icon === 'globe'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
               </svg>
-              <svg v-else-if="feature.icon === 'database'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="feature.icon === 'database'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
               </svg>
-              <svg v-else-if="feature.icon === 'layers'" class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg v-else-if="feature.icon === 'layers'" class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
               </svg>
             </div>
-            <h3 class="font-semibold text-gray-900 mb-1">{{ feature.title }}</h3>
-            <p class="text-sm text-gray-600">{{ feature.desc }}</p>
+            <h3 class="font-semibold text-white mb-1">{{ feature.title }}</h3>
+            <p class="text-sm text-white/60">{{ feature.desc }}</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="py-20">
+    <section class="py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex flex-wrap justify-center gap-4 mb-12">
           <button
             v-for="tab in tabs"
             :key="tab.id"
-            class="flex items-center space-x-2 px-6 py-3 rounded-xl font-medium transition-all duration-300"
+            class="btn-glow flex items-center space-x-2 px-6 py-3 rounded-xl font-medium transition-all duration-300"
             :class="activeTab === tab.id 
-              ? 'bg-primary-600 text-white shadow-lg' 
-              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+              ? 'bg-gradient-to-r from-primary-600 to-accent-500 text-white shadow-lg shadow-primary-500/30' 
+              : 'bg-white/10 text-white/80 hover:bg-white/20 border border-white/10'"
             @click="activeTab = tab.id"
           >
             <svg v-if="tab.icon === 'layers'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -320,22 +321,24 @@ const features = [
 
         <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           <div 
-            v-for="(product, index) in products[activeTab as keyof typeof products]" 
-            :key="index"
-            class="card-hover bg-gray-50 rounded-2xl overflow-hidden"
-          >
-            <div class="aspect-video overflow-hidden">
-              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
-            </div>
-            <div class="p-6">
-              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ product.name }}</h3>
-              <p class="text-gray-600 mb-4">{{ product.description }}</p>
-              <ul class="space-y-2 mb-6">
-                <li 
-                  v-for="(feature, fIndex) in product.features" 
-                  :key="fIndex"
-                  class="flex items-center text-sm text-gray-700"
-                >
+          v-for="(product, index) in products[activeTab as keyof typeof products]" 
+          :key="index"
+          class="card-hover bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl overflow-hidden hover:border-white/30 cursor-pointer"
+          v-ripple
+          v-neural-card
+        >
+          <div class="aspect-video overflow-hidden">
+            <img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
+          </div>
+          <div class="p-6">
+            <h3 class="text-xl font-semibold text-white mb-2">{{ product.name }}</h3>
+            <p class="text-white/70 mb-4">{{ product.description }}</p>
+            <ul class="space-y-2 mb-6">
+              <li 
+                v-for="(feature, fIndex) in product.features" 
+                :key="fIndex"
+                class="flex items-center text-sm text-white/80"
+              >
                   <svg class="w-4 h-4 text-accent-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                   </svg>
@@ -343,7 +346,7 @@ const features = [
                 </li>
               </ul>
               <button 
-                class="btn-secondary w-full flex items-center justify-center"
+                class="btn-glow w-full flex items-center justify-center px-6 py-3 border-2 border-white/30 text-white font-medium rounded-lg hover:bg-white/10 hover:border-white/50 transition-all duration-300"
                 @click="openDetail(product)"
               >
                 了解详情
@@ -357,15 +360,15 @@ const features = [
       </div>
     </section>
 
-    <section class="bg-gradient-to-br from-primary-900 to-accent-900 py-20">
+    <section class="bg-white/5 backdrop-blur-sm border-t border-white/10 py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
           找不到合适的产品？
         </h2>
-        <p class="text-white/80 mb-8 max-w-2xl mx-auto">
+        <p class="text-white/70 mb-8 max-w-2xl mx-auto">
           我们提供定制化开发服务，根据您的具体需求，为您量身打造专属解决方案
         </p>
-        <button class="btn-primary">
+        <button class="btn-glow px-8 py-4 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-xl hover:from-primary-500 hover:to-accent-400 transition-all duration-300 shadow-lg shadow-primary-500/30">
           预约定制咨询
           <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
@@ -376,23 +379,23 @@ const features = [
 
     <div 
       v-if="selectedProduct" 
-      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4"
       @click.self="closeDetail"
     >
-      <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto shadow-2xl">
-        <div class="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
-          <h3 class="text-xl font-semibold text-gray-900">{{ selectedProduct.name }}</h3>
+      <div class="bg-gray-900/95 backdrop-blur-xl border border-white/20 rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto shadow-2xl">
+        <div class="sticky top-0 bg-gray-900/95 border-b border-white/10 px-6 py-4 flex items-center justify-between">
+          <h3 class="text-xl font-semibold text-white">{{ selectedProduct.name }}</h3>
           <button 
-            class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-colors"
+              class="btn-glow w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors"
             @click="closeDetail"
           >
-            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="w-5 h-5 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
             </svg>
           </button>
         </div>
         <div class="p-6">
-          <div class="aspect-video rounded-xl overflow-hidden mb-6 bg-gray-900">
+          <div class="aspect-video rounded-xl overflow-hidden mb-6 bg-black">
             <video 
               :src="selectedProduct.video" 
               controls 
@@ -405,10 +408,10 @@ const features = [
           </div>
           
           <div class="flex items-center justify-between mb-4">
-            <h4 class="text-lg font-semibold text-gray-900">产品介绍</h4>
+            <h4 class="text-lg font-semibold text-white">产品介绍</h4>
             <button 
-              class="flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors"
-              :class="isSpeaking ? 'bg-red-100 text-red-600 hover:bg-red-200' : 'bg-primary-100 text-primary-600 hover:bg-primary-200'"
+            class="btn-glow flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors"
+              :class="isSpeaking ? 'bg-red-500/20 text-red-400 hover:bg-red-500/30' : 'bg-primary-500/20 text-primary-400 hover:bg-primary-500/30'"
               @click="toggleSpeaking"
             >
               <svg v-if="!isSpeaking" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -422,13 +425,13 @@ const features = [
             </button>
           </div>
           
-          <p class="text-gray-700 leading-relaxed text-lg">
+          <p class="text-white/80 leading-relaxed text-lg">
             {{ selectedProduct.details }}
           </p>
         </div>
-        <div class="bg-gray-50 border-t border-gray-100 px-6 py-4">
+        <div class="bg-white/5 border-t border-white/10 px-6 py-4">
           <button 
-            class="btn-primary w-full"
+            class="w-full px-6 py-3 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-lg hover:from-primary-500 hover:to-accent-400 transition-all duration-300"
             @click="closeDetail"
           >
             关闭
@@ -437,4 +440,68 @@ const features = [
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+@keyframes glow-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7), 0 0 0 0 rgba(139, 92, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px 10px rgba(59, 130, 246, 0.5), 0 0 40px 20px rgba(139, 92, 246, 0.3);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 0 0 0 rgba(139, 92, 246, 0);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.btn-glow {
+  position: relative;
+  overflow: visible;
+  transition: all 0.3s ease;
+}
+
+.btn-glow:active {
+  animation: glow-pulse 0.6s ease-out;
+  transform: scale(0.98);
+}
+
+.btn-glow::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(139, 92, 246, 0.4) 40%, transparent 70%);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.btn-glow:active::after {
+  transform: translate(-50%, -50%) scale(2);
+  opacity: 1;
+}
+
+.card-hover {
+  transition: all 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2), 0 10px 20px rgba(139, 92, 246, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Solutions.vue b/src/views/Solutions.vue
index 15ef0c9..fa9dbb5 100644
--- a/src/views/Solutions.vue
+++ b/src/views/Solutions.vue
@@ -161,20 +161,19 @@ const closeCaseDetail = () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-white">
-    <section class="relative py-20 overflow-hidden">
-      <video 
-        src="/videos/tech3.mp4" 
-        class="absolute inset-0 w-full h-full object-cover"
-        autoplay loop muted playsinline
-      ></video>
-      <div class="absolute inset-0 bg-gradient-to-br from-primary-900/90 via-primary-800/80 to-accent-900/90"></div>
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="min-h-screen relative">
+    <video 
+      class="fixed inset-0 w-full h-full object-cover z-0"
+      autoplay loop muted playsinline
+    >
+      <source src="/videos/starry-sky.mp4" type="video/mp4" />
+    </video>
+    <div class="fixed inset-0 bg-black/30 z-0"></div>
+    
+    <section class="relative min-h-screen flex items-center overflow-hidden z-10">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8 pt-20">
         <div class="text-center">
-          <span class="inline-block px-4 py-2 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-4">
-            解决方案
-          </span>
-          <h1 class="text-4xl sm:text-5xl font-bold text-white mb-4">
+          <h1 class="text-5xl sm:text-6xl font-bold bg-gradient-to-r from-green-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent mb-4">
             行业解决方案
           </h1>
           <p class="text-lg text-white/80 max-w-2xl mx-auto">
@@ -184,20 +183,22 @@ const closeCaseDetail = () => {
       </div>
     </section>
 
-    <section class="py-16">
+    <section class="py-16 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
           <button
             v-for="solution in solutions"
             :key="solution.id"
-            class="flex flex-col items-center p-6 rounded-xl transition-all duration-300"
+            class="flex flex-col items-center p-6 rounded-xl transition-all duration-300 border border-white/10 hover:border-white/30 group"
             :class="activeSolution === solution.id 
-              ? 'bg-primary-100 ring-2 ring-primary-500' 
-              : 'bg-gray-50 hover:bg-gray-100'"
+              ? 'bg-white/20 shadow-lg shadow-primary-500/20 scale-105' 
+              : 'bg-white/5 hover:bg-white/10'"
             @click="setActiveSolution(solution)"
+            v-ripple
+            v-neural-card
           >
             <div 
-              class="w-14 h-14 rounded-xl flex items-center justify-center mb-3"
+              class="w-14 h-14 rounded-xl flex items-center justify-center mb-3 transition-all duration-300 group-hover:scale-110"
               :class="solution.color"
             >
               <svg v-if="solution.icon === 'factory'" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -219,7 +220,7 @@ const closeCaseDetail = () => {
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
               </svg>
             </div>
-            <span class="font-medium" :class="activeSolution === solution.id ? 'text-primary-700' : 'text-gray-700'">
+            <span class="font-medium" :class="activeSolution === solution.id ? 'text-white' : 'text-white/70'">
               {{ solution.name }}
             </span>
           </button>
@@ -227,20 +228,20 @@ const closeCaseDetail = () => {
       </div>
     </section>
 
-    <section class="py-16 bg-gray-50">
+    <section class="py-16 bg-white/5 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div>
             <span 
               class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-4"
-              :class="currentSolution.color.replace('500', '100') + ' ' + currentSolution.color.replace('bg-', 'text-')"
+              :class="currentSolution.color.replace('500', '200') + ' ' + currentSolution.color.replace('bg-', 'text-') + ' bg-opacity-20'"
             >
               {{ currentSolution.name }}
             </span>
-            <h2 class="text-3xl font-bold text-gray-900 mb-4">
+            <h2 class="text-3xl font-bold text-white mb-4">
               {{ currentSolution.name }}解决方案
             </h2>
-            <p class="text-gray-600 mb-6">
+            <p class="text-white/70 mb-6">
               {{ currentSolution.description }}
             </p>
             <ul class="space-y-3 mb-8">
@@ -249,13 +250,13 @@ const closeCaseDetail = () => {
                 :key="index"
                 class="flex items-center"
               >
-                <svg class="w-5 h-5 text-accent-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-5 h-5 text-accent-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                 </svg>
-                <span class="text-gray-700">{{ feature }}</span>
+                <span class="text-white/80">{{ feature }}</span>
               </li>
             </ul>
-            <button class="btn-primary flex items-center">
+            <button class="px-8 py-4 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-xl hover:from-primary-500 hover:to-accent-400 transition-all duration-300 shadow-lg shadow-primary-500/30 flex items-center">
               获取方案详情
               <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
@@ -277,11 +278,11 @@ const closeCaseDetail = () => {
       </div>
     </section>
 
-    <section class="py-16">
+    <section class="py-16 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">成功案例</h2>
-          <p class="text-gray-600">我们在各行业的成功实践</p>
+          <h2 class="text-3xl font-bold text-white mb-4">成功案例</h2>
+          <p class="text-white/70">我们在各行业的成功实践</p>
         </div>
         <div class="relative h-32 overflow-hidden">
           <div 
@@ -294,18 +295,18 @@ const closeCaseDetail = () => {
               class="flex-shrink-0 w-1/3 px-3"
             >
               <div 
-                class="bg-gray-50 rounded-xl p-6 border border-gray-100 hover:border-primary-200 hover:shadow-lg transition-all duration-300 cursor-pointer h-full flex items-center justify-center"
+                class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-white/30 hover:shadow-lg hover:shadow-primary-500/20 transition-all duration-300 cursor-pointer h-full flex items-center justify-center group"
                 @click="openCaseDetail(caseItem)"
               >
                 <div class="flex items-center space-x-4">
-                  <div class="w-10 h-10 bg-accent-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                    <svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div class="w-10 h-10 bg-gradient-to-br from-accent-500/30 to-primary-500/30 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                    <svg class="w-5 h-5 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                     </svg>
                   </div>
                   <div class="text-center">
-                    <h4 class="font-semibold text-gray-900 mb-1">{{ caseItem.name }}</h4>
-                    <p class="text-sm text-gray-600">基于Agent技术的智能解决方案</p>
+                    <h4 class="font-semibold text-white mb-1">{{ caseItem.name }}</h4>
+                    <p class="text-sm text-white/60">基于Agent技术的智能解决方案</p>
                   </div>
                 </div>
               </div>
@@ -315,46 +316,46 @@ const closeCaseDetail = () => {
       </div>
     </section>
 
-    <section class="py-16 bg-gray-50">
+    <section class="py-16 bg-white/5 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-gray-900 mb-4">服务流程</h2>
-          <p class="text-gray-600">标准化的服务流程，确保项目高质量交付</p>
+          <h2 class="text-3xl font-bold text-white mb-4">服务流程</h2>
+          <p class="text-white/70">标准化的服务流程，确保项目高质量交付</p>
         </div>
         <div class="grid md:grid-cols-4 gap-6">
           <div 
             v-for="(step, index) in steps" 
             :key="index"
-            class="text-center"
+            class="text-center group"
           >
             <div class="relative">
-              <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mx-auto mb-4">
-                <svg v-if="step.icon === 'users'" class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div class="w-16 h-16 bg-gradient-to-br from-primary-500/30 to-accent-500/30 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-primary-500/30 transition-all duration-300">
+                <svg v-if="step.icon === 'users'" class="w-8 h-8 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                 </svg>
-                <svg v-else-if="step.icon === 'settings'" class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else-if="step.icon === 'settings'" class="w-8 h-8 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                 </svg>
-                <svg v-else-if="step.icon === 'factory'" class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else-if="step.icon === 'factory'" class="w-8 h-8 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                 </svg>
-                <svg v-else-if="step.icon === 'check'" class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg v-else-if="step.icon === 'check'" class="w-8 h-8 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                 </svg>
               </div>
-              <div class="absolute -top-2 -right-2 w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
+              <div class="absolute -top-2 -right-2 w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-lg">
                 {{ index + 1 }}
               </div>
             </div>
-            <h3 class="font-semibold text-gray-900 mb-1">{{ step.title }}</h3>
-            <p class="text-sm text-gray-600">{{ step.desc }}</p>
+            <h3 class="font-semibold text-white mb-1">{{ step.title }}</h3>
+            <p class="text-sm text-white/60">{{ step.desc }}</p>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="bg-gradient-to-br from-primary-900 to-accent-900 py-20">
+    <section class="bg-white/5 backdrop-blur-sm border-t border-white/10 py-20 relative z-10">
       <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
           开启您的数字化转型之旅
@@ -362,7 +363,7 @@ const closeCaseDetail = () => {
         <p class="text-white/80 mb-8 max-w-2xl mx-auto">
           无论您处于数字化转型的哪个阶段，我们都能为您提供专业的解决方案和技术支持
         </p>
-        <button class="btn-primary">
+        <button class="px-8 py-4 bg-gradient-to-r from-primary-600 to-accent-500 text-white font-medium rounded-xl hover:from-primary-500 hover:to-accent-400 transition-all duration-300 shadow-lg shadow-primary-500/30">
           预约方案咨询
           <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>