"use client";
|
|
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);
|
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: -100 },
|
visible: { opacity: 1, x: 0, transition: { duration: 0.7, 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] } }
|
};
|
|
const fadeInScale = {
|
hidden: { opacity: 0, scale: 0.95 },
|
visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
|
};
|
|
return (
|
<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">
|
{/* 交互按钮组 - 顶部 */}
|
<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"
|
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 mt-16">
|
{/* 左侧：量子启发算法 */}
|
<motion.div
|
initial="hidden"
|
whileInView="visible"
|
viewport={{ once: false, margin: "-150px" }}
|
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: "-150px" }}
|
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: 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"
|
>
|
<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>
|
</main>
|
);
|
}
|
