创建登录页面

hongjli

2025-04-05 4e578e95c886056bf43f132bd685c2f3c363cd9f

创建登录页面

 src/app/globals.css

@@ -535,66 +535,204 @@
  animation: circle-pulse 4s ease-in-out infinite;
}

/* çº¢æ¡†ä¸­ç§‘技感圆圈动画效果 - æ›´æŸ”和的版本 */
/* å…‰æ‰«ææ•ˆæžœåŠ¨ç”» */
@keyframes lightSweep {
  0% {
    transform: translateX(-100%) skewX(-45deg);
    opacity: 0;
  }
  20% {
    opacity: 0.3;
  }
  60% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(100%) skewX(-45deg);
    opacity: 0;
  }
}

/* æŠ€æœ¯åœ†åœˆæ•ˆæžœåŠ¨ç”» */
@keyframes tech-circle-pulse {
  0%, 100% {
  0% {
    opacity: 0.3;
    border-color: rgba(106, 219, 255, 0.2);
  }
  50% {
    opacity: 0.6;
    border-color: rgba(106, 219, 255, 0.5);
    border-color: rgba(106, 219, 255, 0.3);
  }
  100% {
    opacity: 0.3;
    border-color: rgba(106, 219, 255, 0.2);
  }
}

@keyframes tech-circle-rotate {
  0% {
    transform: rotate(0deg);
    background-color: rgba(19, 28, 65, 0.3);
    background: rgba(19, 28, 65, 0.3);
  }
  50% {
    background-color: rgba(19, 28, 65, 0.5);
    background: rgba(30, 43, 99, 0.3);
  }
  100% {
    transform: rotate(360deg);
    background-color: rgba(19, 28, 65, 0.3);
    background: rgba(19, 28, 65, 0.3);
  }
}

@keyframes tech-center-blink {
  0%, 100% {
    opacity: 0.1;
  0% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
    transform: scale(1);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
}

@keyframes tech-glow-pulse {
  0%, 100% {
  0% {
    opacity: 0.05;
    box-shadow: 0 0 3px rgba(106, 219, 255, 0.05);
    box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
  }
  50% {
    opacity: 0.15;
    box-shadow: 0 0 8px rgba(106, 219, 255, 0.15);
    box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.15);
  }
  100% {
    opacity: 0.05;
    box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
  }
}

.animate-tech-circle-pulse {
  animation: tech-circle-pulse 8s ease-in-out infinite;
  animation: tech-circle-pulse 8s infinite ease-in-out;
}

.animate-tech-circle-rotate {
  animation: tech-circle-rotate 30s linear infinite;
  animation: tech-circle-rotate 30s infinite linear;
}

.animate-tech-center-blink {
  animation: tech-center-blink 5s ease-in-out infinite;
  animation: tech-center-blink 5s infinite ease-in-out;
}

.animate-tech-glow-pulse {
  animation: tech-glow-pulse 8s ease-in-out infinite;
  animation: tech-glow-pulse 8s infinite ease-in-out;
}

/* é«˜äº®åˆ’过效果 - ç”¨äºŽç™»å½•é¡µé¢æŒ‰é’® */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* ç™»å½•é¡µé¢ç‰¹æ®ŠåŠ¨ç”» */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes tech-connect {
  0%, 100% {
    opacity: 0.2;
    transform: scaleX(0.7);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(1);
  }
}

.animate-tech-connect {
  animation: tech-connect 8s ease-in-out infinite;
}

/* è¾“入框聚焦动画 */
@keyframes focus-border {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.animate-focus-border {
  animation: focus-border 0.3s ease-out forwards;
}

/* é‡å­å…‰çº¿æ•ˆæžœåŠ¨ç”» - ç™»å½•æŒ‰é’®ä¸“用 */
@keyframes quantum-scan {
  0% {
    transform: translateX(-100%) skewX(-30deg);
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes quantum-glow {
  0%, 100% {
    box-shadow: 0 0 5px 2px rgba(106, 219, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.3);
  }
}

@keyframes quantum-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.quantum-button:hover .quantum-scan-line {
  animation: quantum-scan 3s ease-in-out infinite;
}

.quantum-button:hover {
  animation: quantum-glow 4s ease-in-out infinite;
}

.quantum-button:hover .quantum-pulse {
  animation: quantum-pulse 2s ease-in-out infinite;
}

 src/app/layout.tsx

@@ -1,14 +1,17 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/layout/Navbar";
import Image from 'next/image';
import ClientLayoutContent from '@/components/layout/ClientLayoutContent';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "帷幄君成 - æ•°å­—员工平台",
  description: "智能物流解决方案",
  icons: {
    icon: '/logo.svg',
    apple: '/logo.svg',
  },
};

export default function RootLayout({
@@ -19,62 +22,7 @@
  return (
    <html lang="zh">
      <body className={inter.className}>
        <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>
            </div>
          </div>
        </footer>
        <ClientLayoutContent>{children}</ClientLayoutContent>
      </body>
    </html>
  );

 src/app/login/page.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,475 @@
"use client";

import { useState, useEffect } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import Link from 'next/link';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [phone, setPhone] = useState('');
  const [verifyCode, setVerifyCode] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [loginMethod, setLoginMethod] = useState<'password' | 'sms'>('password');

  // ç¡®ä¿ç»„件挂载后再显示动画效果
  useEffect(() => {
    setMounted(true);
  }, []);
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // æ¨¡æ‹Ÿç™»å½•è¯·æ±‚
    setTimeout(() => {
      setIsLoading(false);
      // è¿™é‡Œåº”该添加实际登录逻辑
    }, 2000);
  };

  return (
    <div className="h-screen w-full flex items-center justify-center relative overflow-hidden">
      {/* èƒŒæ™¯æ•ˆæžœ */}
      <div className="fixed inset-0 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] z-0"></div>
      
      {/* ç¥žç»ç½‘络线条背景 */}
      <div className="fixed inset-0 z-0 opacity-30">
        <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
        <div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
        <div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
        
        {/* ç¥žç»ç½‘络连接点 - å‡å°‘数量 */}
        <div className="absolute top-[20%] left-[15%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse"></div>
        <div className="absolute top-[60%] left-[75%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse" style={{ animationDelay: '1.5s' }}></div>
        
        {/* è¿žæŽ¥çº¿ - å‡å°‘数量 */}
        <div className="absolute top-[20%] left-[15%] w-[70%] h-[1px] bg-gradient-to-r from-[#6ADBFF]/80 to-transparent animate-pulse"></div>
        
        {/* æ•°æ®ç‚¹èƒŒæ™¯ */}
        <div className="absolute inset-0" style={{ 
          backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)', 
          backgroundSize: '20px 20px' 
        }}></div>
        
        {/* æ‰«æçº¿ */}
        <div className="absolute inset-0">
          <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/5 to-transparent animate-scanline" style={{ animationDuration: '12s' }}></div>
        </div>
      </div>

      {/* ç™»å½•å¡ç‰‡ - å·¦å³ç»“æž„ */}
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: mounted ? 1 : 0, y: mounted ? 0 : 20 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="relative z-10 w-full max-w-3xl flex rounded-2xl backdrop-blur-lg bg-[#1E2B63]/40 border border-[#6ADBFF]/20 shadow-xl overflow-hidden"
      >
        {/* å¡ç‰‡å†…部装饰 */}
        <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
        <div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
        <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
        <div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
        
        {/* å·¦ä¾§Logo和公司名 - æ°´å¹³æŽ’列 */}
        <div className="w-2/5 bg-[#131C41]/60 p-8 flex flex-col items-center justify-between">
          {/* Logo和公司名部分 - ç¼©çŸ­ä¸ŽäºŒç»´ç çš„距离 */}
          <div className="w-full flex flex-col items-center justify-start">
            <div className="mb-4 relative overflow-visible">
              <Link href="/" className="group flex items-center relative">
                <div className="relative w-16 h-16 transition-all duration-500 overflow-visible" style={{ isolation: 'isolate' }}>
                  {/* åŸºç¡€èƒŒæ™¯åœ† */}
                  <div className="absolute inset-0 rounded-full bg-[#131C41] z-10"></div>
                  
                  {/* Logo背景光环 - é™åˆ¶èŒƒå›´ */}
                  <div className="absolute inset-0 rounded-full border-2 border-[#6ADBFF]/70 animate-logo-pulse z-10"></div>
                  
                  {/* åº•å±‚光晕效果 */}
                  <div className="absolute -inset-2 rounded-full bg-[#6ADBFF]/10 blur-lg animate-pulse z-0"></div>
                  
                  {/* Logo - æœ€é«˜å±‚级 */}
                  <Image
                    src="/images/logo.jpg"
                    alt="帷幄君成Logo"
                    width={64}
                    height={64}
                    className="rounded-full object-cover relative z-30"
                    style={{ display: 'block', objectFit: 'cover', width: '100%', height: '100%' }}
                    priority
                  />
                  
                  {/* æ‚¬åœç‰¹æ•ˆå®¹å™¨ - åœ¨Logo下层 */}
                  <div className="absolute inset-0 rounded-full z-20 overflow-hidden pointer-events-none">
                    {/* æ‚¬åœæ—¶çš„扫描线 - ç§‘技感 */}
                    <div className="absolute inset-0 rounded-full overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <div className="absolute top-0 -left-[100%] right-0 h-[2px] group-hover:left-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out"></div>
                      <div className="absolute bottom-0 left-full right-0 h-[2px] group-hover:left-[-100%] w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out delay-200"></div>
                    </div>
                    
                    {/* æ‚¬åœæ—¶çš„量子数据流效果 */}
                    <div className="absolute inset-0 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <div className="w-[1px] h-0 group-hover:h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-300"></div>
                      <div className="h-[1px] w-0 group-hover:w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-400"></div>
                    </div>
                  </div>
                  
                  {/* æ‚¬åœæ—¶å‡ºçŽ°åœ¨èƒŒæ™¯çš„扩散效果 - é™åˆ¶åœ¨Logo */}
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 z-0">
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 group-hover:w-[120%] group-hover:h-[120%] rounded-full bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 transition-all duration-1000 blur-md"></div>
                  </div>
                  
                  {/* é¢å¤–阴影效果增强视觉分离 */}
                  <div className="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-100 shadow-[0_0_15px_rgba(106,219,255,0.3)] transition-opacity duration-500 z-5"></div>
                </div>
                
                <div className="ml-4 relative z-0 transition-transform duration-500">
                  <h1 className="text-2xl font-bold text-white mb-1 relative inline-block group-hover:text-[#6ADBFF] transition-colors duration-500">
                    å¸·å¹„君成
                    <span className="absolute -bottom-1 left-0 w-full h-[2px] bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] group-hover:animate-pulse"></span>
                    
                    {/* æ‚¬åœæ—¶çš„字体光效 */}
                    <span className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 blur-sm"></span>
                  </h1>
                  
                  <p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">数字员工平台 Â· æ™ºæ…§èµ‹èƒ½æœªæ¥</p>
                  
                  {/* æ‚¬åœæ—¶å‡ºçŽ°çš„微粒子 - å‡åŒ€åˆ†å¸ƒåœ¨å‘¨å›´ */}
                  <div className="absolute -right-2 top-1/2 w-1 h-1 rounded-full bg-[#6ADBFF] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-300 group-hover:animate-float"></div>
                  <div className="absolute right-0 bottom-0 w-[3px] h-[3px] rounded-full bg-[#FF6A88] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-500 group-hover:animate-float"></div>
                  <div className="absolute -left-1 top-0 w-[2px] h-[2px] rounded-full bg-[#6ADBFF] opacity-0 group-hover:opacity-100 transition-all duration-700 delay-400 group-hover:animate-float"></div>
                  <div className="absolute left-1/2 -top-2 w-[1.5px] h-[1.5px] rounded-full bg-[#6ADBFF]/80 opacity-0 group-hover:opacity-100 transition-all duration-700 delay-200 group-hover:animate-float"></div>
                  <div className="absolute right-1/4 -bottom-1 w-[1px] h-[1px] rounded-full bg-[#FF6A88]/80 opacity-0 group-hover:opacity-100 transition-all duration-700 delay-350 group-hover:animate-float"></div>
                </div>
              </Link>
            </div>
            
            {/* åˆ†éš”线 - å‡å°ä¸Šä¸‹è¾¹è· */}
            <div className="w-full border-t border-[#6ADBFF]/20 my-3"></div>
          </div>
          
          {/* äºŒç»´ç ç™»å½•ç•Œé¢ - ç§»åŠ¨ä¸Šç§»ï¼Œä¸ŽLogo更加接近 */}
          <div className="w-full" style={{ position: 'relative', isolation: 'isolate' }}>
            <div className="relative" style={{ zIndex: 30 }}>
              <p className="text-center text-[#6ADBFF]/90 text-xs mb-3">扫码登录</p>
              <div className="border-4 border-[#6ADBFF]/30 rounded-md p-1 bg-white mx-auto" style={{ width: '140px', height: '140px', position: 'relative' }}>
                <div className="bg-white h-full w-full relative flex items-center justify-center">
                  <div className="text-xs absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center text-center text-black/60">
                    è¿™é‡Œå°†æ˜¾ç¤ºäºŒç»´ç <br/>请用APP扫描登录
                  </div>
                  {/* æ‰«æçº¿åŠ¨ç”» */}
                  <div className="absolute left-0 right-0 top-1/2 h-[2px] bg-[#6ADBFF]/70 rounded animate-scanline"></div>
                </div>
              </div>
              <p className="text-xs text-white/70 text-center mt-3">
                è¯·ä½¿ç”¨å¸·å¹„君成APP<br/>扫描二维码登录
              </p>
            </div>
          </div>
          
          {/* å·¦ä¾§è£…饰点 */}
          <div className="absolute bottom-4 left-4">
            <div className="relative w-2 h-2">
              <div className="absolute inset-0 rounded-full bg-[#6ADBFF]/30 animate-pulse"></div>
              <div className="absolute inset-[2px] rounded-full bg-[#6ADBFF]/50"></div>
            </div>
          </div>
        </div>
        
        {/* å³ä¾§ç™»å½•è¡¨å• */}
        <div className="w-3/5 p-8">
          <div className="mb-6">
            <div className="flex space-x-1 overflow-hidden bg-[#131C41]/40 p-1 rounded-full w-fit">
              <button 
                className={`text-xs px-5 py-1.5 rounded-full relative transition-all duration-300 ${
                  loginMethod === 'password' 
                    ? 'text-white' 
                    : 'text-[#6ADBFF]/60 hover:text-[#6ADBFF]/80'
                }`}
                onClick={() => setLoginMethod('password')}
              >
                å¯†ç ç™»å½•
                {loginMethod === 'password' && (
                  <motion.div 
                    layoutId="loginTab"
                    className="absolute inset-0 bg-gradient-to-r from-[#131C41] to-[#1E2B63] rounded-full border border-[#6ADBFF]/30 -z-10"
                    initial={false}
                    transition={{ type: "spring", duration: 0.5 }}
                  >
                    <div className="absolute inset-0 overflow-hidden rounded-full">
                      {/* ç§»é™¤æ¨ªçº¿ç©¿è¿‡æ•ˆæžœï¼Œæ·»åŠ è¾¹ç¼˜æµåŠ¨çš„辉光效果 */}
                      <div className="absolute inset-0 bg-[#6ADBFF]/5"></div>
                      <div className="absolute -inset-0.5 rounded-full opacity-60 blur-sm bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/30 to-[#6ADBFF]/0 animate-pulse"></div>
                      <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                      <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                    </div>
                  </motion.div>
                )}
              </button>
              <button 
                className={`text-xs px-5 py-1.5 rounded-full relative transition-all duration-300 ${
                  loginMethod === 'sms' 
                    ? 'text-white' 
                    : 'text-[#6ADBFF]/60 hover:text-[#6ADBFF]/80'
                }`}
                onClick={() => setLoginMethod('sms')}
              >
                çŸ­ä¿¡ç™»å½•
                {loginMethod === 'sms' && (
                  <motion.div 
                    layoutId="loginTab"
                    className="absolute inset-0 bg-gradient-to-r from-[#131C41] to-[#1E2B63] rounded-full border border-[#6ADBFF]/30 -z-10"
                    initial={false}
                    transition={{ type: "spring", duration: 0.5 }}
                  >
                    <div className="absolute inset-0 overflow-hidden rounded-full">
                      {/* ç§»é™¤æ¨ªçº¿ç©¿è¿‡æ•ˆæžœï¼Œæ·»åŠ è¾¹ç¼˜æµåŠ¨çš„辉光效果 */}
                      <div className="absolute inset-0 bg-[#6ADBFF]/5"></div>
                      <div className="absolute -inset-0.5 rounded-full opacity-60 blur-sm bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/30 to-[#6ADBFF]/0 animate-pulse"></div>
                      <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                      <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent"></div>
                    </div>
                  </motion.div>
                )}
              </button>
            </div>
          </div>
          
          {/* è´¦å·ç™»å½•è¡¨å• */}
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-3">
              {loginMethod === 'password' ? (
                <>
                  <motion.div 
                    className="relative group"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 20 }}
                    transition={{ duration: 0.3 }}
                  >
                    <input
                      id="email"
                      name="email"
                      type="text"
                      autoComplete="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
                      placeholder="账号名/手机号/邮箱"
                    />
                    
                    {/* è¾“入聚焦效果 */}
                    <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
                  </motion.div>
                  
                  <motion.div 
                    className="relative group"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 20 }}
                    transition={{ duration: 0.3, delay: 0.1 }}
                  >
                    <input
                      id="password"
                      name="password"
                      type="password"
                      autoComplete="current-password"
                      required
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
                      placeholder="密码"
                    />
                    
                    {/* è¾“入聚焦效果 */}
                    <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
                  </motion.div>
                </>
              ) : (
                <>
                  <motion.div 
                    className="relative group"
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    transition={{ duration: 0.3 }}
                  >
                    <input
                      id="phone"
                      name="phone"
                      type="text"
                      required
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
                      placeholder="手机号"
                    />
                    
                    {/* è¾“入聚焦效果 */}
                    <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
                  </motion.div>
                  
                  <motion.div 
                    className="relative group flex"
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    transition={{ duration: 0.3, delay: 0.1 }}
                  >
                    <input
                      id="verifyCode"
                      name="verifyCode"
                      type="text"
                      required
                      value={verifyCode}
                      onChange={(e) => setVerifyCode(e.target.value)}
                      className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
                      placeholder="验证码"
                    />
                    
                    <button 
                      type="button"
                      className="ml-2 px-3 py-2 text-xs text-[#6ADBFF] bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md hover:bg-[#131C41] hover:border-[#6ADBFF]/60 transition-all duration-300 whitespace-nowrap"
                    >
                      èŽ·å–验证码
                    </button>
                    
                    {/* è¾“入聚焦效果 */}
                    <div className="absolute bottom-0 left-0 w-[calc(100%-4rem)] h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
                  </motion.div>
                </>
              )}
            </div>
            
            <div className="flex items-center justify-between text-xs">
              <div className="flex items-center">
                <div className="relative">
                  <input
                    id="remember-me"
                    name="remember-me"
                    type="checkbox"
                    className="h-3 w-3 bg-[#131C41] border-[#6ADBFF]/50 rounded focus:ring-[#6ADBFF]/30 transition-all duration-200 cursor-pointer"
                  />
                  <div className="absolute inset-0 bg-[#6ADBFF]/10 rounded pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-200"></div>
                </div>
                <label htmlFor="remember-me" className="ml-2 block text-xs text-white/80 cursor-pointer select-none">
                  è®°ä½æˆ‘
                </label>
              </div>
              <div className="text-xs">
                <a href="#" className="text-[#6ADBFF] hover:text-[#6ADBFF]/80 transition-colors duration-200">
                  å¿˜è®°å¯†ç ?
                </a>
              </div>
            </div>
            
            <div>
              <button
                type="submit"
                disabled={isLoading}
                className="relative w-full py-2 px-4 rounded-full overflow-hidden border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button"
              >
                {/* ç™»å½•æŒ‰é’®å†…部结构 */}
                <div className="relative z-10 flex items-center justify-center quantum-pulse">
                  {isLoading ? (
                    <>
                      <div className="w-3 h-3 border-2 border-white/80 border-t-transparent rounded-full animate-spin"></div>
                      <span className="ml-2 text-xs text-white">登录中...</span>
                    </>
                  ) : (
                    <span className="text-xs text-white group-hover:text-[#6ADBFF] transition-colors duration-300">登录</span>
                  )}
                </div>
                
                {/* é‡å­å…‰çº¿æ•ˆæžœ */}
                <div className="absolute inset-0 overflow-hidden">
                  {/* åº•å±‚辉光效果 */}
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
                  
                  {/* é‡å­æ‰«æçº¿ */}
                  <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
                  
                  {/* é‡å­æ•°æ®æµ - ç®€åŒ– */}
                  <div className="absolute top-0 h-full w-full">
                    <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div>
                  </div>
                  
                  {/* é‡å­è¾¹ç¼˜æ•ˆæžœ */}
                  <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
                </div>
              </button>
            </div>
          </form>
          
          {/* åˆ†å‰²çº¿ */}
          <div className="mt-6 relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-[#6ADBFF]/20"></div>
            </div>
            <div className="relative flex justify-center text-xs">
              <span className="px-3 bg-[#1E2B63]/40 text-[#6ADBFF]/70">其他方式</span>
            </div>
          </div>
          
          {/* ç¤¾äº¤ç™»å½• - ç®€åŒ– */}
          <div className="mt-4 flex justify-center space-x-6">
            <button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
              <svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
              </svg>
            </button>
            <button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
              <svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.819-.26.819-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.332-1.756-1.332-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.418-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.468-2.38 1.235-3.22-.123-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.3 1.23A11.51 11.51 0 0112 5.803c1.02.005 2.046.138 3.005.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.91 1.235 3.22 0 4.61-2.805 5.625-5.475 5.92.43.372.824 1.102.824 2.222 0 1.605-.015 2.896-.015 3.286 0 .32.217.694.825.577C20.565 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12z" />
              </svg>
            </button>
            <button className="inline-flex justify-center items-center w-8 h-8 border border-[#6ADBFF]/30 rounded-full bg-[#131C41]/60 hover:bg-[#131C41] hover:border-[#6ADBFF]/60 hover:text-[#6ADBFF] transition-all duration-300 group">
              <svg className="w-4 h-4 text-[#6ADBFF]/70 group-hover:text-[#6ADBFF] transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21C9.5 20.77 9.5 20.14 9.5 19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26C14.5 19.6 14.5 20.68 14.5 21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 6.48 17.52 2 12 2Z" />
              </svg>
            </button>
          </div>
          
          {/* æ³¨å†Œé“¾æŽ¥ */}
          <div className="mt-4 text-center">
            <p className="text-xs text-white/70">
              è¿˜æ²¡æœ‰å¸å·? 
              <motion.a 
                href="#" 
                className="ml-1 text-[#6ADBFF] hover:text-[#6ADBFF] transition-colors duration-200 relative group"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
              >
                ç«‹å³æ³¨å†Œ
                <span className="absolute -bottom-0.5 left-0 w-0 h-[1px] bg-[#6ADBFF] group-hover:w-full transition-all duration-300 ease-out"></span>
              </motion.a>
            </p>
          </div>
        </div>
      </motion.div>
      
      {/* é‡å­æ³¢åŠ¨å±‚ - é«˜åº¦æŽ§åˆ¶ */}
      <div className="fixed inset-x-0 bottom-0 h-10 z-0 overflow-hidden">
        <svg className="absolute w-full h-20 animate-quantum-wave" viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,20 Q100,40 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient1)" strokeWidth="1" opacity="0.2" />
          <path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1" opacity="0.2" />
          <defs>
            <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0" />
              <stop offset="50%" stopColor="#6ADBFF" stopOpacity="1" />
              <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0" />
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#FF6A88" stopOpacity="0" />
              <stop offset="50%" stopColor="#FF6A88" stopOpacity="1" />
              <stop offset="100%" stopColor="#FF6A88" stopOpacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
} 

 src/components/layout/ClientLayoutContent.tsx

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
"use client";

import { usePathname } from 'next/navigation';
import Navbar from './Navbar';
import Image from 'next/image';

export default function ClientLayoutContent({ children }: { children: React.ReactNode }) {
  // ä½¿ç”¨å®¢æˆ·ç«¯é’©å­æ£€æŸ¥è·¯å¾„
  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>
          </div>
        </div>
      </footer>
    </>
  );
} 

 src/components/layout/Navbar.tsx

@@ -188,13 +188,28 @@
            
            {/* ç™»å½•æŒ‰é’® */}
            <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>
              <Link href="/login" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
                <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">登录</span>
                
                {/* é‡å­å…‰çº¿æ•ˆæžœ */}
                <div className="absolute inset-0 overflow-hidden">
                  {/* åº•å±‚辉光效果 */}
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
                  
                  {/* é‡å­æ‰«æçº¿ */}
                  <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
                  
                  {/* é‡å­æ•°æ®æµ */}
                  <div className="absolute top-0 h-full w-full">
                    <div className="absolute left-[20%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.1s'}}></div>
                    <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.2s'}}></div>
                    <div className="absolute left-[80%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.3s'}}></div>
                  </div>
                  
                  {/* é‡å­è¾¹ç¼˜æ•ˆæžœ */}
                  <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
                </div>
              </Link>
            </div>
          </div>

@@ -251,10 +266,15 @@
          </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>
            <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group">
              <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">登录</span>
              
              {/* ç®€åŒ–版量子效果 - é€‚合移动端 */}
              <div className="absolute inset-0 overflow-hidden">
                <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
                <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
              </div>
            </Link>
          </div>
        </div>
      </div>