From 6e75377a366ac6efffc3356691d380019ba9fac9 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 11:04:43 +0800
Subject: [PATCH] 主页优化
---
src/app/page.tsx | 238 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 221 insertions(+), 17 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a5f9c3e..f380896 100644
--- a/src/app/page.tsx
+++ b/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,201 @@
<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="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"
@@ -61,14 +265,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 +289,7 @@
<motion.div
initial="hidden"
whileInView="visible"
- viewport={{ once: false, margin: "-100px" }}
+ viewport={{ once: false, margin: "-150px" }}
variants={fadeInRight}
className="relative"
>
@@ -101,11 +305,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>
--
Gitblit v1.9.3