This is an automated email from the ASF dual-hosted git repository. visoar pushed a commit to branch clean-rebuild in repository https://gitbox.apache.org/repos/asf/bifromq-sites.git
commit 758ba12283469036d4f6c9231876d4027a60d813 Author: Visoar <[email protected]> AuthorDate: Mon Jan 12 16:04:38 2026 +0800 fix landing page deployment section docker tag and hover status --- src/pages/index.module.css | 79 ++++++++++++++++++++++++++++++++++++++++------ src/pages/index.tsx | 12 +++++-- 2 files changed, 80 insertions(+), 11 deletions(-) diff --git a/src/pages/index.module.css b/src/pages/index.module.css index da4d0538..d3004050 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -221,6 +221,7 @@ background: var(--color-bg); color: var(--color-text-primary); transform: translateY(-2px); + text-decoration: none !important; } .heroCtaSecondary { @@ -240,7 +241,9 @@ .heroCtaSecondary:hover { border-color: var(--color-text-primary); + color: var(--color-text-primary); transform: translateY(-2px); + text-decoration: none !important; } .heroVisual { @@ -430,8 +433,8 @@ html[data-theme='dark'] .bifrostCard:hover { .cardIcon { height: 32px; padding: 0 12px; - background: var(--color-bg); - border: 1px solid var(--color-border-strong); + background: var(--color-wash); + border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; @@ -443,11 +446,24 @@ html[data-theme='dark'] .bifrostCard:hover { margin-bottom: var(--space-md); transition: all 0.3s ease; width: fit-content; + color: var(--color-text-secondary); +} + +html[data-theme='dark'] .cardIcon { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); + color: var(--bifrost-blue); } .bifrostCard:hover .cardIcon { background: var(--color-text-primary); - color: #fff; + color: var(--color-bg); +} + +html[data-theme='dark'] .bifrostCard:hover .cardIcon { + background: var(--bifrost-blue); + color: white; + border-color: var(--bifrost-blue); } .cardTitle { @@ -481,18 +497,62 @@ html[data-theme='dark'] .bifrostCard:hover { /* --- TERMINAL --- */ .quickstart { - background: #000; - padding: var(--space-lg); + background: #0d1117; + padding: 0; position: relative; overflow: hidden; - box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2); + box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4); + border-radius: 8px; + border: 1px solid #30363d; +} + +.terminalHeader { + background: #161b22; + padding: 12px 16px; + display: flex; + align-items: center; + border-bottom: 1px solid #30363d; +} + +.terminalDots { + display: flex; + gap: 8px; +} + +.terminalDots span { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.terminalDots span:nth-child(1) { + background: #ff5f56; +} + +.terminalDots span:nth-child(2) { + background: #ffbd2e; +} + +.terminalDots span:nth-child(3) { + background: #27c93f; +} + +.terminalTitle { + flex: 1; + text-align: center; + font-family: var(--font-mono); + font-size: 12px; + color: #8b949e; + margin-right: 48px; + /* Offset for dots to center title */ } .terminalOutput { + padding: 24px; font-family: var(--font-mono); - font-size: 1.125rem; + font-size: 1rem; line-height: 1.8; - color: #fff; + color: #e6edf3; } .prompt { @@ -537,7 +597,7 @@ html[data-theme='dark'] .bifrostCard:hover { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; letter-spacing: -0.06em; - line-height: 1; + line-height: 1.2; margin-bottom: var(--space-lg); color: var(--color-text-primary); z-index: 10; @@ -566,6 +626,7 @@ html[data-theme='dark'] .bifrostCard:hover { background: var(--color-bg); color: var(--color-text-primary); transform: translateY(-4px); + text-decoration: none !important; } /* --- RESPONSIVE --- */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 21c96dc0..3b23e847 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,7 @@ import React, { type ReactNode, useEffect } from 'react'; import Link from '@docusaurus/Link'; import Layout from '@theme/Layout'; +import { releaseVersion } from '../../releaseInfo'; import styles from './index.module.css'; /** @@ -122,9 +123,16 @@ export default function Home(): ReactNode { <h2 className={styles.sectionTitle}>Launch in Seconds</h2> </div> <div className={styles.quickstart}> + <div className={styles.terminalHeader}> + <div className={styles.terminalDots}> + <span /> + <span /> + <span /> + </div> + <div className={styles.terminalTitle}>bash — 80×24</div> + </div> <div className={styles.terminalOutput}> - <div><span className={styles.prompt}>$</span> docker pull apache/bifromq:latest</div> - <div><span className={styles.prompt}>$</span> docker run -d --name bifromq -p 1883:1883 apache/bifromq:latest</div> + <div><span className={styles.prompt}>$</span> docker run -d --name bifromq -p 1883:1883 apache/bifromq:{releaseVersion}</div> <div style={{ opacity: 0.6, marginTop: '20px' }}># BifroMQ node starting up...</div> <div style={{ opacity: 0.6 }}># Cluster established. Ready for massive connectivity.</div> <div><span className={styles.prompt}>$</span> <span className={styles.cursor} /></div>
