页面调整优化

hongjli

2025-06-05 05e55761058e2089e81fb93dd4000dc3f42f40b3

 src/app/page.tsx

@@ -12,27 +12,44 @@
  useEffect(() => {
    setMounted(true);
    setIsClient(true);
    
    // 确保页面刷新时滚动到顶部
    window.scrollTo(0, 0);
  }, []);
  
  // 定义动画变体
  const fadeInUp = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
  };
  
  const fadeInLeft = {
    hidden: { opacity: 0, x: -100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: [0.25, 0.1, 0.25, 1] } }
    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
  };
  
  const fadeInRight = {
    hidden: { opacity: 0, x: 100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: [0.25, 0.1, 0.25, 1] } }
    visible: { opacity: 1, x: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
  };
  
  const fadeInScale = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
    visible: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: "easeOut" } }
  };

  // 按钮出场动画
  const buttonVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: i * 0.15,
        duration: 0.4,
        ease: [0.25, 0.1, 0.25, 1],
      },
    }),
  };

  return (
@@ -42,38 +59,225 @@
      
      <div className="max-w-7xl mx-auto py-0">
        {/* 主要内容部分 */}
        <div className="relative z-10 min-h-screen pt-32 pb-24">
          {/* 交互按钮组 - 顶部 */}
          <div className="flex justify-center gap-8 mb-20">
            <motion.button
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-150px" }}
              variants={fadeInLeft}
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#6ADBFF]/30 hover:border-[#6ADBFF]/50 transition-all duration-300"
            >
              <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 group-hover:from-[#6ADBFF]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
              <div className="relative">
                <span className="text-white font-semibold">AI场景模拟</span>
        <div className="relative z-10 min-h-screen pt-48 pb-24">
          {/* 公司名称和目标描述 */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: false, margin: "-100px" }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            className="text-center mb-32 relative will-change-transform"
          >
            {/* 背景装饰效果 */}
            <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 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.8, delay: 0.2 }}
              />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                {[...Array(2)].map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute rounded-full border border-[#6ADBFF]/20"
                    style={{
                      left: "50%",
                      top: "50%",
                      width: "160px",
                      height: "160px",
                      willChange: "transform, opacity"
                    }}
                    initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.1 }}
                    whileInView={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
                    viewport={{ once: false, margin: "-100px" }}
                    transition={{ 
                      duration: 2,
                      repeat: Infinity,
                      delay: i * 0.6
                    }}
                  />
                ))}
              </div>
            </motion.button>
            </div>

            <motion.button
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-150px" }}
              variants={fadeInRight}
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#FF6A88]/30 hover:border-[#FF6A88]/50 transition-all duration-300"
            <motion.h1 
              className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-[#FF6A88]/5 to-[#5E72EB]/5 group-hover:from-[#FF6A88]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
              <div className="relative">
                <span className="text-white font-semibold">开始聊天</span>
              </div>
            </motion.button>
              <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: 1.5,
                    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 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.5, delay: 0.3, 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 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.4, delay: 0.4 }}
            >
              智能化供应链管理，
              <motion.span 
                className="inline-block text-[#6ADBFF] px-1"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.3, delay: 0.6 }}
              >
                AI模拟APS场景
              </motion.span>
              的领航者
              
              {/* 装饰线条 */}
              <motion.div 
                className="absolute left-1/2 bottom-[-22px] w-16 h-[2px] -translate-x-1/2"
                initial={{ scale: 0 }}
                whileInView={{ scale: 1 }}
                viewport={{ once: false, margin: "-100px" }}
                transition={{ duration: 0.4, delay: 0.7 }}
              >
                <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 items-center justify-center gap-6 mb-20">
            <a 
              href="/ai-scene" 
              className="no-flash-link"
              onClick={(e) => {
                e.preventDefault();
                document.body.classList.add('page-transitioning');
                setTimeout(() => {
                  window.location.href = '/ai-scene';
                }, 100);
              }}
            >
              <motion.div
                custom={0}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative will-change-transform cursor-pointer"
              >
                <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-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>
                  
                  {/* 粒子效果 */}
                  <div className="absolute inset-0 overflow-hidden rounded-lg">
                    {[...Array(3)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="absolute rounded-full border border-[#6ADBFF]/20"
                        style={{
                          left: "50%",
                          top: "50%",
                          width: "10px",
                          height: "10px",
                        }}
                        initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
                        animate={{ 
                          scale: [0, 8],
                          opacity: [0.5, 0]
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          delay: i * 0.6
                        }}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </a>

            <a 
              href="/chat" 
              className="no-flash-link"
              onClick={(e) => {
                e.preventDefault();
                document.body.classList.add('page-transitioning');
                const token = localStorage.getItem('token');
                const targetUrl = token ? '/chat' : '/login';
                setTimeout(() => {
                  window.location.href = targetUrl;
                }, 100);
              }}
            >
              <motion.div
                custom={1}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                className="group relative will-change-transform cursor-pointer"
              >
                <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-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>
                  
                  {/* 波纹效果 */}
                  <div className="absolute inset-0 overflow-hidden rounded-lg">
                    {[...Array(3)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="absolute rounded-full border border-[#FF6A88]/20"
                        style={{
                          left: "50%",
                          top: "50%",
                          width: "10px",
                          height: "10px",
                        }}
                        initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
                        animate={{ 
                          scale: [0, 8],
                          opacity: [0.5, 0]
                        }}
                        transition={{ 
                          duration: 2,
                          repeat: Infinity,
                          delay: i * 0.6
                        }}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </a>
          </div>

          {/* AI赋能APS优势全景 - 独立区块 */}
@@ -105,9 +309,9 @@
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInLeft}
                className="relative"
                className="relative will-change-transform"
              >
                <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#6ADBFF] via-[#5E72EB] to-transparent"></div>
                <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#6ADBFF]/20 h-full">
@@ -122,9 +326,9 @@
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInRight}
                className="relative"
                className="relative will-change-transform"
              >
                <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#FF6A88] via-[#5E72EB] to-transparent"></div>
                <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#FF6A88]/20 h-full">
@@ -140,9 +344,9 @@
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-150px" }}
              transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
              className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8"
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1], delay: 0.2 }}
              className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 will-change-transform"
            >
              <div className="text-center">
                <div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>