主页面优化

hongjli

2025-04-07 dc5ccbb11801c997fd91b427341e4ea79f95b084

 src/app/page.tsx

@@ -1,77 +1,210 @@
"use client";

import { useState } from 'react';
import Sidebar from '@/components/layout/Sidebar';
import Card from '@/components/Card';
import ChatDialog from '@/components/ChatDialog';

const services = [
  {
    title: '补料',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
    chatbotId: 'JELkWpPLHQfRNhEH'
  },
  {
    title: '插单',
    description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
    imageUrl: '/images/xuqiu.jpg',
    chatbotId: 'DfH4cIzujVGvn5iR'
  },
  {
    title: '科沃斯销售推荐小助手',
    description: '智能化产品推荐提升导购效率',
    imageUrl: '/images/robot.jpg',
    chatbotId: 'sUAviPXvcEIw3oQC'
  },
  {
    title: '库存管理知识库问答',
    description: '库存知识，提供专业的供应链库存知识问答',
    imageUrl: '/images/know.jpg',
    chatbotId: 'pDDfkU9HyBl2gzXx'
  },
];
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

export default function Home() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [currentChatbot, setCurrentChatbot] = useState('');

  const handleCardClick = (title: string, chatbotId?: string) => {
    if (chatbotId) {
      setCurrentChatbot(chatbotId);
      setIsChatOpen(true);
    }
  const [mounted, setMounted] = useState(false);
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setMounted(true);
    setIsClient(true);
  }, []);
  
  // 定义动画变体
  const fadeInUp = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
  };
  
  const fadeInLeft = {
    hidden: { opacity: 0, x: -50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
  };
  
  const fadeInRight = {
    hidden: { opacity: 0, x: 50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
  };
  
  const fadeInScale = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
  };

  return (
    <div className="flex">
      <Sidebar />
      <div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white">
        <div className="max-w-7xl mx-auto">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2">
              AI场景模拟
              <span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span>
            </h1>
            <p className="text-gray-600">选择以下场景，体验人工智能如何解决实际业务问题</p>
            <div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service, index) => (
              <Card
                key={index}
                {...service}
                onClick={() => handleCardClick(service.title, service.chatbotId)}
              />
            ))}
          </div>
    <main className="relative w-full min-h-screen bg-[#0A1033] text-white overflow-hidden px-4 -mt-[1px]">
      {/* 顶部导航背景延伸层 */}
      <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">
            {/* 标题 */}
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-100px" }}
              variants={fadeInUp}
              className="text-center mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
                  AI赋能APS
                </span> 核心技术优势
              </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">
              {/* 左侧：量子启发算法 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInLeft}
                className="relative"
              >
                <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">
                  <h3 className="text-2xl font-semibold text-white mb-4">量子启发算法</h3>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    基于量子计算原理设计的优化算法，能够在指数级复杂度的排程问题中快速寻找近似最优解。
                  </p>
                </div>
              </motion.div>
              
              {/* 右侧：深度学习预测 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInRight}
                className="relative"
              >
                <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">
                  <h3 className="text-2xl font-semibold text-white mb-4">深度学习预测</h3>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    采用自研的时间序列深度学习架构，对生产环境中的关键指标进行精准预测。
                  </p>
                </div>
              </motion.div>
            </div>
            
            {/* 数字指标区域 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              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"
            >
              <div className="text-center">
                <div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>
                <p className="text-gray-300">计划准确率</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-[#5E72EB] mb-2">45%</div>
                <p className="text-gray-300">效率提升</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-[#FF6A88] mb-2">30%</div>
                <p className="text-gray-300">成本降低</p>
              </div>
              <div className="text-center">
                <div className="text-4xl font-bold text-white mb-2">500+</div>
                <p className="text-gray-300">企业案例</p>
              </div>
            </motion.div>
          </section>
          
          {/* 应用场景区域 */}
          <section className="w-full py-10 relative">
            <motion.div
              initial="hidden"
              whileInView="visible"
              viewport={{ once: false, margin: "-100px" }}
              variants={fadeInUp}
              className="text-center mb-16"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]">
                  应用场景
                </span>
              </h2>
              <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]"></div>
            </motion.div>
            
            {/* 应用场景卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
              {/* 应用场景卡片内容 */}
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.1 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">离散制造</h3>
                <p className="text-gray-300">
                  在零部件多、工艺复杂的离散制造环境中，我们的解决方案能够同时考虑设备利用率、交期、在制品库存等多维目标，生成最优排程方案。
                </p>
              </motion.div>
              
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.2 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">流程工业</h3>
                <p className="text-gray-300">
                  针对连续生产特性，我们的解决方案实现了原料采购、生产计划与排程的一体化优化，最小化切换损耗和能源消耗，提高产线利用率。
                </p>
              </motion.div>
              
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: false, margin: "-100px" }}
                variants={fadeInUp}
                transition={{ delay: 0.3 }}
                className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
              >
                <h3 className="text-xl font-semibold text-white mb-4">物流仓储</h3>
                <p className="text-gray-300">
                  优化仓储布局与拣选路径，结合机器人调度系统，实现高效率、低差错的智能物流管理，提升仓储中心整体运营效率。
                </p>
              </motion.div>
            </div>
          </section>
        </div>
        
        {/* 动态波形图 - 放在页面底部 */}
        <div className="relative w-full h-20 opacity-20 mt-auto">
          <svg className="w-full h-full" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,36c200,0,200,84,400,84c200,0,200-84,400-84c200,0,200,84,400,84c200,0,200-84,400-84v84H0V36z" fill="url(#blueGradient)"></path>
            <defs>
              <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0.5" />
                <stop offset="50%" stopColor="#5E72EB" stopOpacity="0.5" />
                <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0.5" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <ChatDialog 
        isOpen={isChatOpen} 
        onClose={() => setIsChatOpen(false)}
        chatbotId={currentChatbot}
      />
    </div>
    </main>
  );
}