From 846f92d2fe08ab9b8b14e8b949f00bb4529974d2 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 15:09:17 +0800
Subject: [PATCH] 导航栏优化
---
src/app/layout.tsx | 50 ++++-
public/images/logo.jpg | 0
src/components/Card.tsx | 14 +
src/app/globals.css | 167 ++++++++++++++++++++
src/app/page.tsx | 11 +
src/components/layout/Navbar.tsx | 214 +++++++++++++++++++++-----
6 files changed, 384 insertions(+), 72 deletions(-)
diff --git a/public/images/logo.jpg b/public/images/logo.jpg
new file mode 100644
index 0000000..a9924fd
--- /dev/null
+++ b/public/images/logo.jpg
Binary files differ
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..9144a3f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,8 +1,18 @@
@import "tailwindcss";
:root {
- --background: #ffffff;
- --foreground: #171717;
+ /* 鐜颁唬绉戞妧鎰熶富棰橀厤鑹� */
+ --ai-primary: #1E2B63; /* 娣辫摑鑹� - 涓昏鑳屾櫙鑹� */
+ --ai-secondary: #6ADBFF; /* 澶╄摑鑹� - 鐐圭紑鑹茶皟 */
+ --ai-accent: #5E72EB; /* 绱摑鑹� - 寮鸿皟鑹茶皟 */
+ --ai-highlight: #FF9190; /* 绮夌孩鑹� - 楂樹寒鑹茶皟 */
+ --ai-surface: #F7F9FF; /* 娣¤摑鐧借壊 - 鎻愪緵娓呮櫚瑙嗚绌洪棿 */
+ --ai-dark: #0A1033; /* 娣辫摑鑹� - 鏆楄壊璋� */
+ --ai-contrast: #FF6A88; /* 绮夌孩鑹� - 鐢ㄤ簬琛屽姩鐐瑰己璋� */
+
+ /* 鍩虹棰滆壊璁剧疆 */
+ --background: var(--ai-surface);
+ --foreground: #1E2B63;
}
@theme inline {
@@ -14,13 +24,160 @@
@media (prefers-color-scheme: dark) {
:root {
- --background: #0a0a0a;
- --foreground: #ededed;
+ --background: var(--ai-dark);
+ --foreground: #E9EFFD;
}
}
body {
background: var(--background);
color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+}
+
+/* 瀵艰埅鏍忕壒鏁堟牱寮� */
+.hover\:shadow-glow:hover {
+ box-shadow: 0 0 15px rgba(106, 219, 255, 0.5);
+}
+
+/* Logo鍦嗙幆鑴夊啿鍔ㄧ敾 */
+@keyframes logo-ring-pulse {
+ 0% {
+ opacity: 0.15;
+ box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
+ }
+ 25% {
+ opacity: 0.35;
+ box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
+ }
+ 50% {
+ opacity: 0.65;
+ box-shadow: 0 0 0 2px rgba(136, 219, 255, 0.25);
+ }
+ 75% {
+ opacity: 0.35;
+ box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
+ }
+ 100% {
+ opacity: 0.15;
+ box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
+ }
+}
+
+.animate-logo-pulse {
+ animation: logo-ring-pulse 6s ease-in-out infinite;
+}
+
+/* AI鏁版嵁娴佹晥鏋滃姩鐢� */
+@keyframes dataflowY {
+ 0% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+}
+
+@keyframes dataflowX {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+
+.animate-dataflowY {
+ animation: dataflowY 3s infinite;
+}
+
+.animate-dataflowX {
+ animation: dataflowX 4s infinite;
+}
+
+/* 鎸夐挳鍊炬枩鍔ㄧ敾 */
+@keyframes tilt {
+ 0%, 100% {
+ transform: rotate(0deg);
+ }
+ 25% {
+ transform: rotate(1deg);
+ }
+ 75% {
+ transform: rotate(-1deg);
+ }
+}
+
+.animate-tilt {
+ animation: tilt 10s ease-in-out infinite;
+}
+
+/* AI鍏冪礌鎵弿绾垮姩鐢� */
+@keyframes scanline {
+ 0% {
+ transform: translateY(-100%);
+ }
+ 100% {
+ transform: translateY(100%);
+ }
+}
+
+.animate-scanline {
+ animation: scanline 2s linear infinite;
+}
+
+/* 鍩虹娓愬彉鍔ㄧ敾 */
+@keyframes gradient-flow {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+.bg-gradient-animate {
+ background-size: 200% 200%;
+ animation: gradient-flow 8s ease infinite;
+}
+
+/* 鏂板楂樺厜鏁堟灉 */
+@keyframes shimmer {
+ 0% {
+ opacity: 0.5;
+ transform: translateX(-100%);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+}
+
+.shimmer-effect::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(
+ to right,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.3) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ animation: shimmer 2s infinite;
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8851288..0456c32 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/layout/Navbar";
+import Image from 'next/image';
const inter = Inter({ subsets: ["latin"] });
@@ -19,38 +20,57 @@
<html lang="zh">
<body className={inter.className}>
<Navbar />
- <main className="min-h-screen bg-gray-50 pt-16">
+ <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16">
{children}
</main>
- <footer className="bg-[#2F3C7E] text-white py-8">
+ <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">鍏充簬鎴戜滑</h3>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">鍏充簬鎴戜滑</h3>
<ul className="space-y-2">
- <li>鍏徃浠嬬粛</li>
- <li>鑱旂郴鏂瑰紡</li>
- <li>鍔犲叆鎴戜滑</li>
+ <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">浜у搧鏈嶅姟</h3>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">浜у搧鏈嶅姟</h3>
<ul className="space-y-2">
- <li>鏁板瓧鍛樺伐</li>
- <li>鏅鸿兘瀹㈡湇</li>
- <li>鐗╂祦瑙ｅ喅鏂规</li>
+ <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">甯姪涓績</h3>
+ <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">甯姪涓績</h3>
<ul className="space-y-2">
- <li>浣跨敤鎸囧崡</li>
- <li>甯歌闂</li>
- <li>鎶�鏈敮鎸�</li>
+ <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-gray-700 text-center">
+ <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>
</div>
</div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a9101b4..f7bbfb0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -46,9 +46,16 @@
return (
<div className="flex">
<Sidebar />
- <div className="flex-1 p-6 md:p-8">
+ <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">
- <h1 className="text-2xl font-bold text-[#2F3C7E] mb-6">鍦烘櫙妯℃嫙</h1>
+ <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
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index d20e32d..988aae5 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -13,23 +13,25 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
return (
<motion.div
- whileHover={{ scale: 1.02 }}
+ whileHover={{ scale: 1.02, boxShadow: '0 10px 25px -5px rgba(0, 184, 212, 0.1), 0 10px 10px -5px rgba(0, 184, 212, 0.05)' }}
whileTap={{ scale: 0.98 }}
- className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer"
+ className="bg-white backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all"
onClick={onClick}
>
- <div className="relative h-48">
+ <div className="relative h-48 overflow-hidden">
+ <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)] to-transparent opacity-10 z-0"></div>
<Image
src={imageUrl}
alt={title}
fill
- className="object-contain p-4"
+ className="object-contain p-4 z-10"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
- <div className="p-4">
- <h3 className="text-lg font-semibold text-[#2F3C7E] mb-2">{title}</h3>
+ <div className="p-5 border-t border-[var(--ai-secondary)] border-opacity-10">
+ <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2">{title}</h3>
<p className="text-gray-600 text-sm">{description}</p>
+ <div className="mt-4 h-1 w-16 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)]"></div>
</div>
</motion.div>
);
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index db6347c..b3cae67 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -2,77 +2,203 @@
import Link from 'next/link';
import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
+ const [activeMenu, setActiveMenu] = useState('');
+
+ // 鐩戝惉婊氬姩浜嬩欢锛屼负瀵艰埅鏍忔坊鍔犳粴鍔ㄦ晥鏋�
+ useEffect(() => {
+ const handleScroll = () => {
+ if (window.scrollY > 10) {
+ setScrolled(true);
+ } else {
+ setScrolled(false);
+ }
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
return (
- <nav className="fixed top-0 left-0 w-full bg-[#2F3C7E] text-white z-50">
- <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- <div className="flex items-center justify-between h-16">
- {/* Logo */}
- <div className="flex-shrink-0">
+ <nav
+ className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
+ scrolled
+ ? 'bg-gradient-to-r from-[#1E2B63]/95 to-[#0A1033]/95 backdrop-blur-md shadow-lg py-2'
+ : 'bg-gradient-to-r from-[#1E2B63] to-[#0A1033] py-2'
+ }`}
+ >
+ <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15">
+ <div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
+ <div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div>
+ </div>
+
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
+ <div className="flex items-center justify-between">
+ {/* Logo鍖哄煙 */}
+ <div className="flex-shrink-0 relative z-10 group">
<Link href="/" className="flex items-center">
- <div className="w-8 h-8 bg-[#e1c7f1] rounded-lg flex items-center justify-center">
- <span className="text-[#2F3C7E] text-sm font-bold">甯�</span>
+ {/* Logo涓讳綋 */}
+ <div className="flex items-center">
+ <div className="relative w-11 h-11">
+ {/* 鍩虹Logo鑳屾櫙 */}
+ <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-[#1E2B63] to-[#131C41] shadow-inner"></div>
+
+ {/* 鍙戝厜鍦嗙幆 - 闂儊鏁堟灉 */}
+ <div className="absolute inset-0 rounded-full border-[1.5px] border-[#88dbff] animate-logo-pulse"></div>
+
+ {/* Logo鍥剧墖 */}
+ <Image
+ src="/images/logo.jpg"
+ alt="甯峰箘鍚涙垚Logo"
+ width={44}
+ height={44}
+ className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] h-[85%] rounded-full object-cover z-10"
+ priority
+ />
+ </div>
+
+ {/* 鍏徃鍚嶇О */}
+ <div className="ml-3 relative">
+ <h1 className="text-xl font-bold text-white tracking-wide relative">
+ 甯峰箘鍚涙垚
+ <span className="absolute -bottom-0.5 left-0 w-full h-[2px] bg-gradient-to-r
+ from-[#FF6A88] to-[#6ADBFF]"></span>
+ </h1>
+ </div>
</div>
- <span className="ml-2 text-xl font-bold">甯峰箘鍚涙垚</span>
</Link>
</div>
- {/* Desktop Menu */}
+ {/* 涓ぎ瑁呴グ鍏冪礌 */}
+ <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
+ <div className="relative h-4 w-32">
+ <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+ <span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span>
+ </div>
+ <div className="absolute top-1/2 left-0 right-0 h-[1px]">
+ <div className="h-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
+ </div>
+ </div>
+ </div>
+
+ {/* 瀵艰埅鑿滃崟 */}
<div className="hidden md:flex items-center space-x-8">
- <Link href="/platform" className="hover:text-[#FBEAEB]">鏁板瓧鍛樺伐骞冲彴</Link>
- <Link href="/chat" className="hover:text-[#FBEAEB]">鑱婂ぉ瀹�</Link>
- <Link href="/training" className="hover:text-[#FBEAEB]">璁粌鍦�</Link>
+ <Link
+ href="/platform"
+ className="relative px-3 py-2 text-gray-100 text-sm font-medium"
+ onMouseEnter={() => setActiveMenu('platform')}
+ onMouseLeave={() => setActiveMenu('')}
+ >
+ <span className="relative z-10">鏁板瓧鍛樺伐骞冲彴</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>
+ </Link>
+
+ <Link
+ href="/chat"
+ className="relative px-3 py-2 text-gray-100 text-sm font-medium"
+ onMouseEnter={() => setActiveMenu('chat')}
+ onMouseLeave={() => setActiveMenu('')}
+ >
+ <span className="relative z-10">鑱婂ぉ瀹�</span>
+ <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
+ transition-all duration-300 ${activeMenu === 'chat' ? 'w-full' : 'w-0'}`}></span>
+ </Link>
+
+ <Link
+ href="/training"
+ className="relative px-3 py-2 text-gray-100 text-sm font-medium"
+ onMouseEnter={() => setActiveMenu('training')}
+ onMouseLeave={() => setActiveMenu('')}
+ >
+ <span className="relative z-10">璁粌鍦�</span>
+ <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
+ transition-all duration-300 ${activeMenu === 'training' ? 'w-full' : 'w-0'}`}></span>
+ </Link>
+
+ {/* 鐧诲綍鎸夐挳 */}
+ <div className="relative group ml-6">
+ <button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2
+ rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)]
+ hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300">
+ <span className="relative z-10">鐧诲綍</span>
+ <div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0
+ group-hover:opacity-100 transition-opacity duration-500"></div>
+ </button>
+ </div>
</div>
- {/* Login Button */}
- <div className="hidden md:flex items-center">
- <button className="bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
- 鐧诲綍
- </button>
- </div>
-
- {/* Mobile Menu Button */}
+ {/* 绉诲姩绔彍鍗曟寜閽� */}
<div className="md:hidden">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
- className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-[#FBEAEB]"
+ className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
+ aria-label="Toggle navigation menu"
>
- <svg
- className="h-6 w-6"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- {isMenuOpen ? (
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
- ) : (
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
- )}
- </svg>
+ <div className="relative">
+ <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
+ transform ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
+ <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
+ mt-1 ${isMenuOpen ? 'opacity-0' : ''}`}></span>
+ <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300
+ mt-1 transform ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
+ </div>
</button>
</div>
</div>
</div>
- {/* Mobile Menu */}
- {isMenuOpen && (
- <div className="md:hidden">
- <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
- <Link href="/platform" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">鏁板瓧鍛樺伐骞冲彴</Link>
- <Link href="/chat" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">鑱婂ぉ瀹�</Link>
- <Link href="/training" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">璁粌鍦�</Link>
- <button className="w-full mt-4 bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
+ {/* 绉诲姩绔彍鍗� */}
+ <div
+ className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
+ isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
+ }`}
+ >
+ <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033]
+ border-t border-[#6ADBFF]/10">
+ <Link
+ href="/platform"
+ 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"
+ >
+ 鏁板瓧鍛樺伐骞冲彴
+ </Link>
+
+ <Link
+ href="/chat"
+ 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"
+ >
+ 鑱婂ぉ瀹�
+ </Link>
+
+ <Link
+ href="/training"
+ 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"
+ >
+ 璁粌鍦�
+ </Link>
+
+ <div className="pt-3 pb-1">
+ <button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190]
+ text-white font-medium px-6 py-2 rounded-md">
鐧诲綍
</button>
</div>
</div>
- )}
+ </div>
</nav>
);
};
-export default Navbar;
\ No newline at end of file
+export default Navbar;
+
+// 娣诲姞鍒癈SS鏂囦欢涓殑鍏ㄥ眬鏍峰紡
+// .hover:shadow-glow:hover {
+// box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
+// }
\ No newline at end of file
--
Gitblit v1.9.3