From dc5ccbb11801c997fd91b427341e4ea79f95b084 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 07 四月 2025 13:46:10 +0800
Subject: [PATCH] 主页面优化
---
src/app/ai-scene/page.tsx | 77 ++++++
src/app/globals.css | 77 +++--
src/app/page.tsx | 265 ++++++++++++++++-----
src/components/layout/Navbar.tsx | 12
src/components/layout/ClientLayoutContent.tsx | 254 +++++++++++++++-----
5 files changed, 514 insertions(+), 171 deletions(-)
diff --git a/src/app/ai-scene/page.tsx b/src/app/ai-scene/page.tsx
new file mode 100644
index 0000000..cfb659c
--- /dev/null
+++ b/src/app/ai-scene/page.tsx
@@ -0,0 +1,77 @@
+"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'
+ },
+];
+
+export default function AIScenePage() {
+ const [isChatOpen, setIsChatOpen] = useState(false);
+ const [currentChatbot, setCurrentChatbot] = useState('');
+
+ const handleCardClick = (title: string, chatbotId?: string) => {
+ if (chatbotId) {
+ setCurrentChatbot(chatbotId);
+ setIsChatOpen(true);
+ }
+ };
+
+ 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>
+ </div>
+ </div>
+ <ChatDialog
+ isOpen={isChatOpen}
+ onClose={() => setIsChatOpen(false)}
+ chatbotId={currentChatbot}
+ />
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index c2ec329..25d60dc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -55,6 +55,20 @@
animation-delay: 0.5s;
}
+/* 椤甸潰鍐呭娣″叆鍔ㄧ敾 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.animate-fadeIn {
+ animation: fadeIn 0.6s ease-out;
+}
+
/* Logo鍦嗙幆鑴夊啿鍔ㄧ敾 */
@keyframes logo-ring-pulse {
0% {
@@ -236,36 +250,29 @@
/* AI鏁版嵁娴佹晥鏋滃姩鐢� */
@keyframes dataflowY {
- 0% {
- background-position: 0 -200px;
+ from {
+ transform: translateY(-100%);
}
- 100% {
- background-position: 0 200px;
+ to {
+ transform: translateY(100%);
}
}
@keyframes dataflowX {
- 0% {
+ from {
transform: translateX(-100%);
- opacity: 0;
}
- 50% {
- opacity: 1;
- }
- 100% {
+ to {
transform: translateX(100%);
- opacity: 0;
}
}
.animate-dataflowY {
- background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
- background-size: 100% 200px;
- animation: dataflowY 8s linear infinite;
+ animation: dataflowY 3s linear infinite;
}
.animate-dataflowX {
- animation: dataflowX 4s infinite;
+ animation: dataflowX 5s linear infinite;
}
/* 鎸夐挳鍊炬枩鍔ㄧ敾 */
@@ -296,7 +303,7 @@
}
.animate-scanline {
- animation: scanline 8s linear infinite;
+ animation: scanline 3s ease-in-out infinite;
}
/* 鍩虹娓愬彉鍔ㄧ敾 */
@@ -439,11 +446,11 @@
}
@keyframes dataflowY {
- 0% {
- background-position: 0 -200px;
+ from {
+ transform: translateY(-100%);
}
- 100% {
- background-position: 0 200px;
+ to {
+ transform: translateY(100%);
}
}
@@ -483,7 +490,7 @@
}
.animate-data-blink {
- animation: data-blink 3s ease-in-out infinite;
+ animation: data-blink 2s ease-in-out infinite;
}
.animate-data-blink-slow {
@@ -491,27 +498,16 @@
}
.animate-dataflowY {
- background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
- background-size: 100% 200px;
- animation: dataflowY 8s linear infinite;
+ animation: dataflowY 3s linear infinite;
}
.animate-scanline {
- animation: scanline 8s linear infinite;
+ animation: scanline 3s ease-in-out infinite;
}
.animate-fade-in {
- animation: fadeIn 1.5s ease-in-out forwards;
+ animation: fade-in 1.5s ease-out forwards;
animation-delay: 0.5s;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
}
/* 鎮仠鏁堟灉澧炲己 */
@@ -736,3 +732,14 @@
.quantum-button:hover .quantum-pulse {
animation: quantum-pulse 2s ease-in-out infinite;
}
+
+/* 涓婚〉闂厜鎸夐挳鏁堟灉 */
+@keyframes shine {
+ 100% {
+ left: 125%;
+ }
+}
+
+.animate-shine {
+ animation: shine 1.5s ease-in-out;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f7bbfb0..a5f9c3e 100644
--- a/src/app/page.tsx
+++ b/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>
);
}
diff --git a/src/components/layout/ClientLayoutContent.tsx b/src/components/layout/ClientLayoutContent.tsx
index 05ba845..bdfb1d7 100644
--- a/src/components/layout/ClientLayoutContent.tsx
+++ b/src/components/layout/ClientLayoutContent.tsx
@@ -1,76 +1,202 @@
"use client";
+import { ReactNode, useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Navbar from './Navbar';
-import Image from 'next/image';
-export default function ClientLayoutContent({ children }: { children: React.ReactNode }) {
- // 浣跨敤瀹㈡埛绔挬瀛愭鏌ヨ矾寰�
+interface ClientLayoutContentProps {
+ children: ReactNode;
+}
+
+export default function ClientLayoutContent({ children }: ClientLayoutContentProps) {
+ const [isClient, setIsClient] = useState(false);
+ const [hasError, setHasError] = useState(false);
const pathname = usePathname();
const isLoginPage = pathname === '/login';
-
- if (isLoginPage) {
- return <>{children}</>;
- }
-
- return (
- <>
- <Navbar />
- <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16">
- {children}
- </main>
- <footer className="bg-gradient-to-br from-[var(--ai-primary)] to-[var(--ai-dark)] text-white py-10">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="mb-8 flex justify-center flex-col items-center">
- <div className="relative w-16 h-16 mb-3">
- <Image
- src="/images/logo.jpg"
- alt="甯峰箘鍚涙垚Logo"
- width={64}
- height={64}
- className="object-contain"
- priority
- />
- </div>
- <div className="text-xl font-bold">甯峰箘鍚涙垚</div>
- <div className="text-sm text-gray-300 mt-1">鏅鸿兘鐗╂祦瑙ｅ喅鏂规</div>
- </div>
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">鍏充簬鎴戜滑</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍏徃浠嬬粛</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鑱旂郴鏂瑰紡</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鍔犲叆鎴戜滑</li>
- </ul>
- </div>
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">浜у搧鏈嶅姟</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏁板瓧鍛樺伐</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鏅鸿兘瀹㈡湇</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鐗╂祦瑙ｅ喅鏂规</li>
- </ul>
- </div>
- <div>
- <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">甯姪涓績</h3>
- <ul className="space-y-2">
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">浣跨敤鎸囧崡</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">甯歌闂</li>
- <li className="hover:text-[#F5A800] transition-colors cursor-pointer">鎶�鏈敮鎸�</li>
- </ul>
- </div>
- </div>
- <div className="mt-8 pt-8 border-t border-opacity-20 border-[#F5A800] text-center">
- <div className="flex items-center justify-center mb-4">
- <span className="inline-block w-2 h-2 bg-[#00A0E9] rounded-full mr-2 animate-pulse"></span>
- <span className="inline-block w-2 h-2 bg-[#5D54A4] rounded-full mx-2 animate-pulse delay-300"></span>
- <span className="inline-block w-2 h-2 bg-[#F5A800] rounded-full ml-2 animate-pulse delay-500"></span>
- </div>
- <p>漏 2024 甯峰箘鍚涙垚. All rights reserved.</p>
+ const isHomePage = pathname === '/';
+
+ useEffect(() => {
+ setIsClient(true);
+ }, []);
+
+ // 娣诲姞閿欒鎹曡幏
+ useEffect(() => {
+ if (hasError) {
+ console.error("娓叉煋閿欒琚崟鑾凤細鍙兘鏄疛SX缁撴瀯涓嶆纭鑷寸殑姘村悎閿欒");
+ }
+ }, [hasError]);
+
+ // 閿欒澶勭悊鍑芥暟
+ const handleError = () => {
+ setHasError(true);
+ return (
+ <div className="min-h-screen bg-[#0A1033] text-white p-8">
+ <div className="max-w-lg mx-auto mt-20 bg-red-900/30 p-6 rounded-lg border border-red-500">
+ <h2 className="text-xl font-bold text-red-400 mb-4">椤甸潰娓叉煋閿欒</h2>
+ <p className="text-white mb-4">椤甸潰浠ｇ爜涓彲鑳藉瓨鍦↗SX缁撴瀯閿欒锛岃妫�鏌ユ爣绛鹃棴鍚堟槸鍚︽纭��</p>
+ <p className="text-gray-300 text-sm">鍏蜂綋閿欒: 鍙兘鏄痬otion.div鏍囩鏈纭棴鍚堟垨宓屽灞傜骇鏈夐棶棰�</p>
+ </div>
+ </div>
+ );
+ };
+
+ // 姝ゅ嚱鏁板彲鍦ㄧ壒娈婃儏鍐典笅鐢ㄤ簬澶勭悊杩囨浮
+ const renderContent = () => {
+ if (!isClient) {
+ // 鏈嶅姟鍣ㄧ鎴栧鎴风鍒濆娓叉煋鏃舵樉绀洪潤鎬佸唴瀹�
+ return (
+ <div className="min-h-screen bg-[#0A1033] text-white">
+ <div className="opacity-50">
+ {/* 闈欐�佸唴瀹圭増鏈紝鏃犲姩鐢� */}
+ {children}
</div>
</div>
- </footer>
+ );
+ }
+
+ // 瀹㈡埛绔覆鏌撳悗鏄剧ず瀹屾暣鍐呭
+ try {
+ return (
+ <div className="animate-fadeIn">
+ <div className="flex flex-col min-h-screen">
+ <Navbar />
+ <main className={`flex-1 ${isHomePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}>
+ {children}
+ </main>
+ <footer className="relative z-20 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] text-white py-10 overflow-hidden">
+ {/* 绉戞妧鎰熷姩鎬佽儗鏅厓绱� */}
+ <div className="absolute inset-0 overflow-hidden pointer-events-none">
+ {/* 缃戞牸搴曠汗 */}
+ <div className="absolute inset-0 opacity-5"
+ style={{
+ backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)',
+ backgroundSize: '20px 20px'
+ }}>
+ </div>
+
+ {/* 姘村钩鍏夌嚎 */}
+ <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent transform -translate-y-1/2"></div>
+
+ {/* 鍨傜洿鍏夌嚎 */}
+ <div className="absolute left-1/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#5E72EB]/30 to-transparent"></div>
+ <div className="absolute left-3/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent"></div>
+
+ {/* 閲忓瓙绮掑瓙鐐� - 浣跨敤鏉′欢娓叉煋 */}
+ {isClient && (
+ <>
+ <div className="absolute top-[20%] left-[10%] w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-pulse"></div>
+ <div className="absolute top-[70%] left-[90%] w-1.5 h-1.5 rounded-full bg-[#FF6A88]/60 animate-pulse" style={{animationDelay: '1.5s'}}></div>
+ <div className="absolute top-[40%] left-[60%] w-1 h-1 rounded-full bg-[#5E72EB]/60 animate-pulse" style={{animationDelay: '0.8s'}}></div>
+ </>
+ )}
+
+ {/* 搴曢儴娉㈡氮绾� */}
+ <div className="absolute bottom-0 w-full h-8 opacity-10">
+ <svg className="w-full h-full" viewBox="0 0 1200 30" preserveAspectRatio="none">
+ <path d="M0,10 Q150,20 300,10 T600,10 T900,10 T1200,10 V30 H0 Z" fill="url(#footerGradient)"></path>
+ <defs>
+ <linearGradient id="footerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#6ADBFF" />
+ <stop offset="50%" stopColor="#5E72EB" />
+ <stop offset="100%" stopColor="#6ADBFF" />
+ </linearGradient>
+ </defs>
+ </svg>
+ </div>
+ </div>
+
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+ <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#6ADBFF]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(106,219,255,0.2)]">
+ <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#F5A800]">鍏充簬鎴戜滑</h3>
+ <ul className="space-y-3">
+ <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
+ 鍏徃浠嬬粛
+ </li>
+ <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
+ 鑱旂郴鏂瑰紡
+ </li>
+ <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
+ 鍔犲叆鎴戜滑
+ </li>
+ </ul>
+ </div>
+
+ <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#5E72EB]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(94,114,235,0.2)]">
+ <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#5E72EB] to-[#F5A800]">浜у搧鏈嶅姟</h3>
+ <ul className="space-y-3">
+ <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
+ 鏁板瓧鍛樺伐
+ </li>
+ <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
+ 鏅鸿兘瀹㈡湇
+ </li>
+ <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
+ APS瑙ｅ喅鏂规
+ </li>
+ </ul>
+ </div>
+
+ <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#FF6A88]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(255,106,136,0.2)]">
+ <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#F5A800]">甯姪涓績</h3>
+ <ul className="space-y-3">
+ <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
+ 浣跨敤鎸囧崡
+ </li>
+ <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
+ 甯歌闂
+ </li>
+ <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
+ <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
+ 鎶�鏈敮鎸�
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div className="mt-10 pt-6 border-t border-[#6ADBFF]/10 text-center relative">
+ {/* 閲忓瓙杩炴帴鐗规晥 */}
+ <div className="absolute top-0 left-1/3 right-1/3 h-[1px]">
+ <div className="relative w-full h-full">
+ <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
+ <div className="absolute top-0 left-1/2 h-6 w-[1px] -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#6ADBFF] to-transparent opacity-70"></div>
+ </div>
+ </div>
+
+ {/* 搴曢儴鑴夊啿鎸囩ず鍣� - 浣跨敤鏉′欢娓叉煋 */}
+ {isClient ? (
+ <div className="flex items-center justify-center mb-4">
+ <span className="inline-block w-2 h-2 bg-[#6ADBFF] rounded-full mr-3 animate-pulse"></span>
+ <span className="inline-block w-2 h-2 bg-[#5E72EB] rounded-full mx-3 animate-pulse" style={{animationDelay: '0.3s'}}></span>
+ <span className="inline-block w-2 h-2 bg-[#FF6A88] rounded-full ml-3 animate-pulse" style={{animationDelay: '0.6s'}}></span>
+ </div>
+ ) : (
+ <div className="h-4 mb-4"></div>
+ )}
+ <p className="text-gray-300 text-sm">漏 2024 甯峰箘鍚涙垚. All rights reserved.</p>
+ </div>
+ </div>
+ </footer>
+ </div>
+ </div>
+ );
+ } catch (error) {
+ console.error("娓叉煋閿欒:", error);
+ return handleError();
+ }
+ };
+
+ return (
+ <>
+ {hasError ? handleError() : renderContent()}
</>
);
}
\ No newline at end of file
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index f8768cc..55f961f 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -154,14 +154,14 @@
{/* 瀵艰埅鑿滃崟 - 澧炲姞z-index纭繚鍦ㄥ姩鏁堜箣涓� */}
<div className="hidden md:flex items-center space-x-8 relative z-20">
<Link
- href="/platform"
+ href="/ai-scene"
className="relative px-3 py-2 text-sm font-medium"
- onMouseEnter={() => setActiveMenu('platform')}
+ onMouseEnter={() => setActiveMenu('ai-scene')}
onMouseLeave={() => setActiveMenu('')}
>
- <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>鏁板瓧鍛樺伐骞冲彴</span>
+ <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'ai-scene' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>AI鍦烘櫙妯℃嫙</span>
<span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
- transition-all duration-300 ${activeMenu === 'platform' ? 'w-full' : 'w-0'}`}></span>
+ transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
</Link>
<Link
@@ -242,11 +242,11 @@
<div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033]
border-t border-[#6ADBFF]/10">
<Link
- href="/platform"
+ href="/ai-scene"
className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF]
hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
>
- 鏁板瓧鍛樺伐骞冲彴
+ AI鍦烘櫙妯℃嫙
</Link>
<Link
--
Gitblit v1.9.3