03fe98c163
Implement the full landing page for atlas.atomstorm.ai per the PRD at Docs/Execution/Landing-Page-PRD-2026-03-14.md. Includes design spec, bilingual Astro site, CI pipeline, and all assets. Key deliverables: - DESIGN.md: 7-section Atom Web Design specification - Astro 5.x static site with 15 components and 11 page sections - Bilingual i18n (zh/en) with path-based routing - Build-time GitHub release manifest integration - Release channel state machine (Stable/Prerelease/Coming Soon) - CSS design tokens mapped from AtlasBrand.swift - Self-hosted fonts (Space Grotesk, Instrument Sans, IBM Plex Mono) - OG social sharing images for both locales - GitHub Actions workflow for GitHub Pages deployment - Zero client JS, 227KB page weight, 17/17 quality checks passed Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
83 lines
1.9 KiB
Plaintext
83 lines
1.9 KiB
Plaintext
---
|
|
import { t, type Locale } from '../i18n/utils';
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
|
|
const { locale } = Astro.props;
|
|
const copy = t(locale);
|
|
---
|
|
|
|
<section class="dev section band--surface fade-in" id="developers">
|
|
<div class="dev__inner container">
|
|
<div class="dev__header">
|
|
<h2 class="dev__title">{copy.developer.sectionTitle}</h2>
|
|
<p class="dev__subtitle">{copy.developer.subtitle}</p>
|
|
</div>
|
|
|
|
<div class="dev__grid">
|
|
{copy.developer.items.map((item) => (
|
|
<div class="dev__card">
|
|
<h3 class="dev__card-title">{item.title}</h3>
|
|
<p class="dev__card-desc">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.dev__header {
|
|
text-align: center;
|
|
margin-bottom: var(--atlas-space-section-gap);
|
|
}
|
|
|
|
.dev__title {
|
|
font-size: var(--atlas-text-section);
|
|
font-weight: var(--atlas-text-section-weight);
|
|
margin-bottom: var(--atlas-space-md);
|
|
}
|
|
|
|
.dev__subtitle {
|
|
font-size: clamp(1rem, 2vw, 1.125rem);
|
|
color: var(--atlas-color-text-secondary);
|
|
max-width: 600px;
|
|
margin-inline: auto;
|
|
line-height: var(--atlas-leading-normal);
|
|
}
|
|
|
|
.dev__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: var(--atlas-space-xl);
|
|
}
|
|
|
|
@media (min-width: 860px) {
|
|
.dev__grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.dev__card {
|
|
padding: var(--atlas-space-xl);
|
|
background: var(--atlas-color-bg-base);
|
|
border: 1px solid var(--atlas-color-border);
|
|
border-radius: var(--atlas-radius-lg);
|
|
}
|
|
|
|
.dev__card-title {
|
|
font-family: var(--atlas-font-mono);
|
|
font-size: var(--atlas-text-body-small);
|
|
font-weight: 500;
|
|
color: var(--atlas-color-accent);
|
|
margin-bottom: var(--atlas-space-sm);
|
|
}
|
|
|
|
.dev__card-desc {
|
|
font-size: var(--atlas-text-body-small);
|
|
color: var(--atlas-color-text-secondary);
|
|
line-height: var(--atlas-leading-normal);
|
|
}
|
|
</style>
|