主页优化

hongjli

2025-04-08 d0c9d7d10f846a831228663885e015120cdf950c

 src/app/page.tsx

@@ -3,6 +3,7 @@
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import SupplyChainAIMindMap from '@/components/SupplyChainAIMindMap';

export default function Home() {
  const [mounted, setMounted] = useState(false);
@@ -20,18 +21,32 @@
  };
  
  const fadeInLeft = {
    hidden: { opacity: 0, x: -50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
    hidden: { opacity: 0, x: -100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: [0.25, 0.1, 0.25, 1] } }
  };
  
  const fadeInRight = {
    hidden: { opacity: 0, x: 50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
    hidden: { opacity: 0, x: 100 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, 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" } }
  };

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

  return (
@@ -40,12 +55,103 @@
      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#1E2B63] to-[#0A1033] z-0"></div>
      
      <div className="max-w-7xl mx-auto py-0">
        {/* 页面内容 */}
        
        {/* 主要内容部分 */}
        <div className="relative z-10 min-h-screen pt-32 pb-24">
          {/* 技术优势部分 */}
          <section className="w-full py-6 relative">
          {/* 交互按钮组 - 顶部 */}
          <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-8 mb-20">
            <Link href="/ai-scene">
              <motion.div
                custom={0}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                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>
                  <span className="text-white font-medium">AI场景模拟</span>
                  
                  {/* 粒子效果 */}
                  <div className="absolute inset-0 overflow-hidden rounded-lg">
                    {[...Array(6)].map((_, i) => (
                      <motion.div
                        key={i}
                        className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
                        initial={{ x: "100%", y: "100%", opacity: 0 }}
                        animate={{ 
                          x: ["100%", `${Math.random() * 100}%`, "0%"], 
                          y: ["100%", `${Math.random() * 100}%`, "0%"],
                          opacity: [0, 1, 0]
                        }}
                        transition={{ 
                          duration: 2 + Math.random() * 3, 
                          repeat: Infinity, 
                          repeatType: "loop",
                          ease: "easeInOut",
                          delay: i * 0.2
                        }}
                      />
                    ))}
                  </div>
                </div>
              </motion.div>
            </Link>

            <Link href="/chat">
              <motion.div
                custom={1}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-150px" }}
                variants={buttonVariants}
                whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
                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>
                  <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>
            </Link>
          </div>

          {/* AI赋能APS优势全景 - 独立区块 */}
          <section className="w-full py-12 relative mb-24">
            <SupplyChainAIMindMap />
          </section>
          
          {/* AI赋能APS核心技术优势部分 */}
          <section className="w-full py-16 relative mb-20">
            {/* 标题 */}
            <motion.div
              initial="hidden"
@@ -61,14 +167,14 @@
              </h2>
              <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88]"></div>
            </motion.div>
            

            {/* 技术卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mt-16">
              {/* 左侧：量子启发算法 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                viewport={{ once: false, margin: "-150px" }}
                variants={fadeInLeft}
                className="relative"
              >
@@ -85,7 +191,7 @@
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                viewport={{ once: false, margin: "-150px" }}
                variants={fadeInRight}
                className="relative"
              >
@@ -101,11 +207,11 @@
            
            {/* 数字指标区域 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: false, margin: "-100px" }}
              transition={{ duration: 0.8, ease: "easeOut" }}
              className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 mb-20"
              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"
            >
              <div className="text-center">
                <div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>