Revamp homepage content and styling
- Updated the navigation bar to include a link to the project's GitHub page, enhancing accessibility. - Redesigned the hero section with a new title and description, emphasizing the capabilities of MiroFish. - Improved text styling and layout for better readability and visual appeal, including adjustments to font sizes and weights. - Added new CSS classes for enhanced styling of elements, including highlights and animations, to create a more engaging user experience.
This commit is contained in:
parent
6226cbac16
commit
81b3fb3195
1 changed files with 100 additions and 36 deletions
|
|
@ -4,10 +4,9 @@
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="nav-brand">MIROFISH</div>
|
<div class="nav-brand">MIROFISH</div>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="#">文档</a>
|
<a href="https://github.com/your-repo/MiroFish" target="_blank" class="github-link">
|
||||||
<a href="#">运行时</a>
|
访问我们的Github主页 <span class="arrow">↗</span>
|
||||||
<a href="#">价格</a>
|
</a>
|
||||||
<a href="#" class="login-btn">登录</a>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
@ -16,18 +15,23 @@
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="hero-left">
|
<div class="hero-left">
|
||||||
<div class="tag-row">
|
<div class="tag-row">
|
||||||
<span class="orange-tag">#1 预测引擎</span>
|
<span class="orange-tag">简洁通用的群体智能引擎</span>
|
||||||
<span class="version-text">/ V3.0-预览版</span>
|
<span class="version-text">/ V1.0-预览版</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="main-title">
|
<h1 class="main-title">
|
||||||
预测性智能<br>
|
上传任意报告<br>
|
||||||
基础设施
|
<span class="gradient-text">即刻推演未来</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class="hero-desc">
|
<div class="hero-desc">
|
||||||
在任意文档结构上部署预测模型。MiroFish 提供即时分析、风险模拟和未来场景生成,为高风险决策提供支持。
|
<p>
|
||||||
</p>
|
即使只有一段文字,<span class="highlight-bold">MiroFish</span> 也能基于其中的现实种子,全自动生成与之对应的至多<span class="highlight-orange">百万级Agent</span>构成的平行世界。通过上帝视角注入变量,在复杂的群体交互中寻找动态环境下的<span class="highlight-code">“局部最优解”</span>。
|
||||||
|
</p>
|
||||||
|
<p class="slogan-text">
|
||||||
|
让未来在 Agent 群中预演,让决策在百战后胜出<span class="blinking-cursor">_</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="decoration-square"></div>
|
<div class="decoration-square"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -336,27 +340,27 @@ const startSimulation = async () => {
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a {
|
.github-link {
|
||||||
color: #888;
|
|
||||||
text-decoration: none;
|
|
||||||
font-family: var(--font-mono); /* 导航链接也使用代码字体,增加科技感 */
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn {
|
.github-link:hover {
|
||||||
background: var(--white);
|
opacity: 0.8;
|
||||||
color: var(--black) !important;
|
}
|
||||||
padding: 6px 16px;
|
|
||||||
font-weight: 700 !important;
|
.arrow {
|
||||||
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主要内容区 */
|
/* 主要内容区 */
|
||||||
|
|
@ -391,28 +395,88 @@ const startSimulation = async () => {
|
||||||
.orange-tag {
|
.orange-tag {
|
||||||
background: var(--orange);
|
background: var(--orange);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
padding: 4px 8px;
|
padding: 4px 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.version-text {
|
.version-text {
|
||||||
color: #999;
|
color: #999;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-title {
|
.main-title {
|
||||||
font-size: 4.5rem;
|
font-size: 4.5rem;
|
||||||
line-height: 1.1;
|
line-height: 1.2;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 40px 0;
|
||||||
letter-spacing: -1.5px;
|
letter-spacing: -2px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(90deg, #000000 0%, #444444 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-desc {
|
.hero-desc {
|
||||||
font-size: 1.1rem;
|
font-size: 1.05rem;
|
||||||
line-height: 1.6;
|
line-height: 1.8;
|
||||||
color: var(--gray-text);
|
color: var(--gray-text);
|
||||||
max-width: 600px;
|
max-width: 640px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 50px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-desc p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-bold {
|
||||||
|
color: var(--black);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-orange {
|
||||||
|
color: var(--orange);
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-code {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: var(--black);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slogan-text {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--black);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
border-left: 3px solid var(--orange);
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinking-cursor {
|
||||||
|
color: var(--orange);
|
||||||
|
animation: blink 1s step-end infinite;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-square {
|
.decoration-square {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue