ahmido
40039337d8
## Summary Implements Spec 216 for the public website homepage in `apps/website`. This reworks the homepage into the required narrative flow: - hero with one dominant CTA, one secondary CTA, product-near visual, and bounded trust subclaims - outcome framing section - grouped capability model section - explicit trust block before the final CTA - dated progress teaser backed by changelog entries - final CTA transition to contact It also adds the full spec-kit artifact set for `specs/216-homepage-structure` and updates the smoke suite to prove section order, CTA hierarchy, onward route reachability, and mobile readability. ## Validation - `corepack pnpm build:website` - `cd apps/website && corepack pnpm exec playwright test` ## Notes - Branch: `216-homepage-structure` - Commit: `097f8e70` - Remote branch has been pushed and is ready for review. Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #254
54 lines
1.8 KiB
Plaintext
54 lines
1.8 KiB
Plaintext
---
|
|
import Badge from '@/components/primitives/Badge.astro';
|
|
import Card from '@/components/primitives/Card.astro';
|
|
import Container from '@/components/primitives/Container.astro';
|
|
import Headline from '@/components/content/Headline.astro';
|
|
import Lead from '@/components/content/Lead.astro';
|
|
import PrimaryCTA from '@/components/content/PrimaryCTA.astro';
|
|
import Section from '@/components/primitives/Section.astro';
|
|
import SectionHeader from '@/components/primitives/SectionHeader.astro';
|
|
import type { ProgressTeaserContent } from '@/types/site';
|
|
|
|
interface Props {
|
|
content: ProgressTeaserContent;
|
|
}
|
|
|
|
const { content } = Astro.props;
|
|
|
|
function formatDate(date: Date): string {
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
---
|
|
|
|
<Section layer="2" data-section="progress">
|
|
<Container width="wide">
|
|
<div class="space-y-8">
|
|
<SectionHeader
|
|
eyebrow="Visible progress"
|
|
title={content.title}
|
|
description={content.description}
|
|
/>
|
|
<div class="space-y-4">
|
|
{content.entries.map((entry) => (
|
|
<Card class="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-6">
|
|
<Badge tone="signal">{formatDate(entry.date)}</Badge>
|
|
<div>
|
|
<Headline as="h3" size="card">
|
|
{entry.title}
|
|
</Headline>
|
|
<Lead class="mt-2" size="body">
|
|
{entry.description}
|
|
</Lead>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
<PrimaryCTA cta={content.cta} />
|
|
</div>
|
|
</Container>
|
|
</Section>
|