主页优化

hongjli

2025-04-08 6e75377a366ac6efffc3356691d380019ba9fac9

 src/app/page.tsx

@@ -56,9 +56,109 @@
      
      <div className="max-w-7xl mx-auto py-0">
        {/* 主要内容部分 */}
        <div className="relative z-10 min-h-screen pt-32 pb-24">
        <div className="relative z-10 min-h-screen pt-48 pb-24">
          {/* 公司名称和目标描述 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="text-center mb-32 relative"
          >
            {/* 背景装饰效果 */}
            <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
              <motion.div 
                className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"
                initial={{ scaleX: 0 }}
                animate={{ scaleX: 1 }}
                transition={{ duration: 1.2, delay: 0.3 }}
              />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                {[...Array(3)].map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute rounded-full border border-[#6ADBFF]/20"
                    style={{
                      left: "50%",
                      top: "50%",
                      width: "160px",
                      height: "160px",
                    }}
                    initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.1 }}
                    animate={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
                    transition={{ 
                      duration: 3,
                      repeat: Infinity,
                      delay: i * 0.8
                    }}
                  />
                ))}
              </div>
            </div>

            <motion.h1 
              className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
              initial={{ opacity: 0, filter: "blur(10px)" }}
              animate={{ opacity: 1, filter: "blur(0px)" }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] relative">
                帷幄君成
                <motion.span 
                  className="absolute -top-1 -right-3 w-2 h-2 rounded-full bg-[#6ADBFF]"
                  animate={{ 
                    scale: [1, 1.5, 1],
                    opacity: [0.6, 1, 0.6] 
                  }}
                  transition={{ 
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                />
              </span>
            </motion.h1>
            
            <div className="relative h-1 w-32 mx-auto mb-5 overflow-hidden">
              <motion.div 
                className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]"
                initial={{ scaleX: 0 }}
                animate={{ scaleX: 1 }}
                transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
                style={{ originX: 0 }}
              />
            </div>
            
            <motion.div 
              className="text-gray-300 max-w-2xl mx-auto text-lg relative"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.7 }}
            >
              智能化供应链管理，
              <motion.span 
                className="inline-block text-[#6ADBFF] px-1"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.4, delay: 1.1 }}
              >
                AI模拟APS场景
              </motion.span>
              的领航者
              
              {/* 装饰线条 */}
              <motion.div 
                className="absolute left-1/2 bottom-[-22px] w-16 h-[2px] -translate-x-1/2"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.5, delay: 1.2 }}
              >
                <div className="w-full h-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF] to-[#6ADBFF]/0"></div>
              </motion.div>
            </motion.div>
          </motion.div>
          
          {/* 交互按钮组 - 顶部 */}
          <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-8 mb-20">
          <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-12 mb-28 mt-16">
            <Link href="/ai-scene">
              <motion.div
                custom={0}
@@ -70,8 +170,7 @@
                className="group relative"
              >
                <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
                <div className="relative flex items-center gap-2 px-8 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
                  <span className="text-[#6ADBFF] text-xl mr-2">⚡</span>
                <div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
                  <span className="text-white font-medium">AI场景模拟</span>
                  
                  {/* 粒子效果 */}
@@ -111,8 +210,7 @@
                className="group relative"
              >
                <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#FF6A88] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
                <div className="relative flex items-center gap-2 px-8 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
                  <span className="text-[#FF6A88] text-xl mr-2">💬</span>
                <div className="relative flex items-center gap-2 px-10 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
                  <span className="text-white font-medium">开始聊天</span>
                  
                  {/* 波纹效果 */}