"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" } }
|
};
|
|
// 按钮出场动画
|
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 (
|
<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-48 pb-24">
|
{/* 公司名称和目标描述 */}
|
<motion.div
|
initial={{ opacity: 0, y: 30 }}
|
animate={{ opacity: 1, y: 0 }}
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
className="text-center mb-32 relative"
|
>
|
{/* 背景装饰效果 */}
|
<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 }}
|
animate={{ scaleX: 1 }}
|
transition={{ duration: 1.2, delay: 0.3 }}
|
/>
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
{[...Array(3)].map((_, i) => (
|
<motion.div
|
key={i}
|
className="absolute rounded-full border border-[#6ADBFF]/20"
|
style={{
|
left: "50%",
|
top: "50%",
|
width: "160px",
|
height: "160px",
|
}}
|
initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.1 }}
|
animate={{ scale: [0, 5 + i], opacity: [0.2, 0] }}
|
transition={{
|
duration: 3,
|
repeat: Infinity,
|
delay: i * 0.8
|
}}
|
/>
|
))}
|
</div>
|
</div>
|
|
<motion.h1
|
className="text-4xl md:text-5xl font-bold mb-3 relative inline-block"
|
initial={{ opacity: 0, filter: "blur(10px)" }}
|
animate={{ opacity: 1, filter: "blur(0px)" }}
|
transition={{ duration: 0.8, delay: 0.2 }}
|
>
|
<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: 2,
|
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 }}
|
animate={{ scaleX: 1 }}
|
transition={{ duration: 0.8, delay: 0.5, 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 }}
|
animate={{ opacity: 1, y: 0 }}
|
transition={{ duration: 0.6, delay: 0.7 }}
|
>
|
智能化供应链管理，
|
<motion.span
|
className="inline-block text-[#6ADBFF] px-1"
|
initial={{ opacity: 0 }}
|
animate={{ opacity: 1 }}
|
transition={{ duration: 0.4, delay: 1.1 }}
|
>
|
AI模拟APS场景
|
</motion.span>
|
的领航者
|
|
{/* 装饰线条 */}
|
<motion.div
|
className="absolute left-1/2 bottom-[-22px] w-16 h-[2px] -translate-x-1/2"
|
initial={{ scale: 0 }}
|
animate={{ scale: 1 }}
|
transition={{ duration: 0.5, delay: 1.2 }}
|
>
|
<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 justify-center items-center gap-6 sm:gap-12 mb-28 mt-16">
|
<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-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(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-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>
|
</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"
|
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>
|
);
|
}
|
