From 6590930e7aeb1345539dc571ca8202d4825ec12d Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 09:32:56 +0800
Subject: [PATCH] 主页优化
---
src/app/page.tsx | 69 ++++++++++++++++++++++++++--------
1 files changed, 53 insertions(+), 16 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a5f9c3e..712166e 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,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>
--
Gitblit v1.9.3