主页优化

hongjli

2025-04-08 6590930e7aeb1345539dc571ca8202d4825ec12d

 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,13 +21,13 @@
  };
  
  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 = {
@@ -40,12 +41,48 @@
      <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 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>
            </motion.button>

            <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"
            >
              <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>
          </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 +98,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 +122,7 @@
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                viewport={{ once: false, margin: "-150px" }}
                variants={fadeInRight}
                className="relative"
              >
@@ -101,11 +138,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>