重构应用程序界面,添加动态光晕、数据流动和扫描线效果

This commit is contained in:
“dongming”
2025-12-06 17:18:04 +08:00
parent ab9e9ea9fd
commit ec7e29a004
3 changed files with 3246 additions and 4 deletions

View File

@@ -3,10 +3,56 @@ import "./App.css";
function App() {
return (
<div className="flex items-center justify-center flex-col min-h-screen bg-gray-100">
<a href="https://vite.dev" target="_blank">
<img src={freestyleLogo} alt="Vite logo" className="opacity-10 w-48" />
</a>
<div className="relative min-h-screen overflow-hidden grid-pattern">
{/* 动态光晕背景 */}
<div className="glow-orb glow-orb-1" />
<div className="glow-orb glow-orb-2" />
<div className="glow-orb glow-orb-3" />
{/* 数据流动效果 */}
<div className="data-stream" />
{/* 扫描线效果 */}
<div className="scanline" />
{/* 主内容区域 */}
<div className="relative z-10 flex items-center justify-center flex-col min-h-screen px-6">
{/* Logo 区域 */}
<div className="glass-card px-6 py-4 mb-8 transition-all duration-300">
<a href="https://turingflow.ai" target="_blank" rel="noopener noreferrer">
<img
src={freestyleLogo}
alt="TuringFlow logo"
className="h-12 w-auto object-contain filter drop-shadow-[0_0_20px_rgba(0,212,255,0.3)]
hover:drop-shadow-[0_0_30px_rgba(0,212,255,0.5)] transition-all duration-300"
/>
</a>
</div>
{/* 标题 */}
<h1 className="text-4xl md:text-6xl font-bold mb-4 text-gradient">
TuringFlow
</h1>
{/* 副标题 */}
<p className="text-lg md:text-xl mb-8 text-center max-w-2xl"
style={{ color: 'var(--sa-text-secondary)' }}>
</p>
{/* 按钮组 */}
<div className="flex gap-4 flex-wrap justify-center">
<button className="glow-button">
使
</button>
<button className="glass-card px-8 py-3 font-semibold transition-all duration-300
hover:border-[var(--sa-border-glow)] cursor-pointer"
style={{ color: 'var(--sa-text-primary)' }}>
</button>
</div>
</div>
</div>
);
}