| | |
| | | const [verifyCode, setVerifyCode] = useState(''); |
| | | const [isLoading, setIsLoading] = useState(false); |
| | | const [mounted, setMounted] = useState(false); |
| | | const [particles, setParticles] = useState<Array<{x: number, y: number}>>([]); |
| | | |
| | | // 确保组件挂载后再显示动画效果 |
| | | // 确保组件挂载后再显示动画效果和生成粒子 |
| | | useEffect(() => { |
| | | setMounted(true); |
| | | // 生成固定的粒子位置 |
| | | const newParticles = Array(15).fill(null).map(() => ({ |
| | | x: Math.random() * 100, |
| | | y: Math.random() * 100 |
| | | })); |
| | | setParticles(newParticles); |
| | | }, []); |
| | | |
| | | // 如果组件未挂载,返回一个加载状态或者空的占位符 |
| | | if (!mounted) { |
| | | 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> |
| | | ); |
| | | } |
| | | |
| | | const handleSubmit = (e: React.FormEvent) => { |
| | | e.preventDefault(); |
| | |
| | | <p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">数字员工平台 · 智慧赋能未来</p> |
| | | </div> |
| | | </Link> |
| | | |
| | | {/* 优势说明 - 放在Logo和公司名称下方,添加科技感样式 */} |
| | | <div className="mt-6 p-4 rounded-lg bg-[#131C41]/40 border border-[#6ADBFF]/20 backdrop-blur-sm relative overflow-hidden"> |
| | | <h3 className="text-sm font-medium text-[#6ADBFF] mb-3 flex items-center relative"> |
| | | <span className="w-1.5 h-1.5 rounded-full bg-[#6ADBFF] mr-2 animate-pulse"></span> |
| | | <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88]">平台优势</span> |
| | | </h3> |
| | | |
| | | <div className="space-y-2.5 text-[#6ADBFF]/90 text-sm relative"> |
| | | <div className="flex items-start"> |
| | | <span className="text-[#FF6A88] mr-2 mt-0.5">✦</span> |
| | | <p>智能助手,<span className="text-white font-medium">24/7</span>全天候服务</p> |
| | | </div> |
| | | <div className="flex items-start"> |
| | | <span className="text-[#FF6A88] mr-2 mt-0.5">✦</span> |
| | | <p>多场景应用,<span className="text-white font-medium">提升工作效率</span></p> |
| | | </div> |
| | | <div className="flex items-start"> |
| | | <span className="text-[#FF6A88] mr-2 mt-0.5">✦</span> |
| | | <p>安全可靠,<span className="text-white font-medium">数据加密保护</span></p> |
| | | </div> |
| | | <div className="flex items-start"> |
| | | <span className="text-[#FF6A88] mr-2 mt-0.5">✦</span> |
| | | <p>持续学习进化,<span className="text-white font-medium">不断优化体验</span></p> |
| | | </div> |
| | | </div> |
| | | |
| | | <div className="mt-3 pt-2 border-t border-[#6ADBFF]/20 text-[#6ADBFF]/70 text-xs relative"> |
| | | <p className="flex items-center"> |
| | | <span className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 mr-1.5 animate-pulse"></span> |
| | | <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#6ADBFF]/80 via-[#FF6A88]/80 to-[#6ADBFF]/80">AI驱动 · 智能交互 · 数据安全</span> |
| | | </p> |
| | | </div> |
| | | |
| | | {/* 原创动态背景效果 - 科技感和神秘感 */} |
| | | <div className="absolute inset-0 pointer-events-none overflow-hidden"> |
| | | {/* 粒子效果 */} |
| | | <div className="absolute inset-0"> |
| | | {particles.map((particle, i) => ( |
| | | <motion.div |
| | | key={i} |
| | | className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]/40" |
| | | initial={{ |
| | | x: `${particle.x}%`, |
| | | y: `${particle.y}%`, |
| | | opacity: 0 |
| | | }} |
| | | animate={{ |
| | | x: `${particle.x}%`, |
| | | y: `${particle.y}%`, |
| | | opacity: [0, 0.8, 0], |
| | | scale: [0, 1, 0] |
| | | }} |
| | | transition={{ |
| | | duration: 3, |
| | | repeat: Infinity, |
| | | repeatType: "reverse", |
| | | ease: "easeInOut", |
| | | delay: i * 0.2 |
| | | }} |
| | | /> |
| | | ))} |
| | | </div> |
| | | |
| | | {/* 能量波纹效果 */} |
| | | <motion.div |
| | | className="absolute top-1/2 left-1/2 w-24 h-24 rounded-full border border-[#6ADBFF]/30" |
| | | initial={{ scale: 0.5, opacity: 0 }} |
| | | animate={{ |
| | | scale: [0.5, 1.2, 0.5], |
| | | opacity: [0, 0.3, 0] |
| | | }} |
| | | transition={{ |
| | | duration: 4, |
| | | repeat: Infinity, |
| | | ease: "easeInOut" |
| | | }} |
| | | /> |
| | | |
| | | {/* 数据流效果 */} |
| | | <div className="absolute inset-0"> |
| | | {[...Array(3)].map((_, i) => ( |
| | | <motion.div |
| | | key={i} |
| | | className="absolute h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent" |
| | | style={{ |
| | | top: `${30 + i * 30}%`, |
| | | left: 0, |
| | | right: 0 |
| | | }} |
| | | initial={{ opacity: 0, scaleX: 0 }} |
| | | animate={{ |
| | | opacity: [0, 0.5, 0], |
| | | scaleX: [0, 1, 0] |
| | | }} |
| | | transition={{ |
| | | duration: 3, |
| | | repeat: Infinity, |
| | | repeatDelay: i * 1, |
| | | ease: "easeInOut" |
| | | }} |
| | | /> |
| | | ))} |
| | | </div> |
| | | |
| | | {/* 神秘符号效果 */} |
| | | <div className="absolute inset-0"> |
| | | {[...Array(5)].map((_, i) => ( |
| | | <motion.div |
| | | key={i} |
| | | className="absolute text-[#6ADBFF]/20 text-xs font-mono" |
| | | style={{ |
| | | top: `${Math.random() * 100}%`, |
| | | left: `${Math.random() * 100}%`, |
| | | }} |
| | | initial={{ opacity: 0 }} |
| | | animate={{ |
| | | opacity: [0, 0.5, 0], |
| | | }} |
| | | transition={{ |
| | | duration: 5 + Math.random() * 3, |
| | | repeat: Infinity, |
| | | repeatDelay: i * 2, |
| | | ease: "easeInOut" |
| | | }} |
| | | > |
| | | {['01', '10', 'AI', '∞', '⚡'][i]} |
| | | </motion.div> |
| | | ))} |
| | | </div> |
| | | |
| | | {/* 能量场效果 */} |
| | | <motion.div |
| | | className="absolute inset-0 bg-gradient-radial from-[#6ADBFF]/5 to-transparent" |
| | | initial={{ opacity: 0 }} |
| | | animate={{ |
| | | opacity: [0.1, 0.3, 0.1], |
| | | }} |
| | | transition={{ |
| | | duration: 5, |
| | | repeat: Infinity, |
| | | ease: "easeInOut" |
| | | }} |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |