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
60 lines
2.5 KiB
Plaintext
60 lines
2.5 KiB
Plaintext
---
|
|
import Badge from '@/components/primitives/Badge.astro';
|
|
import Card from '@/components/primitives/Card.astro';
|
|
import Container from '@/components/primitives/Container.astro';
|
|
import Grid from '@/components/primitives/Grid.astro';
|
|
import Headline from '@/components/content/Headline.astro';
|
|
import Lead from '@/components/content/Lead.astro';
|
|
import Section from '@/components/primitives/Section.astro';
|
|
import SectionHeader from '@/components/primitives/SectionHeader.astro';
|
|
import type { CapabilityClusterContent } from '@/types/site';
|
|
|
|
interface Props {
|
|
description?: string;
|
|
eyebrow?: string;
|
|
items: CapabilityClusterContent[];
|
|
title: string;
|
|
}
|
|
|
|
const { description, eyebrow, items, title } = Astro.props;
|
|
---
|
|
|
|
<Section layer="2" data-section="capability">
|
|
<Container width="wide">
|
|
<div class="space-y-8">
|
|
<SectionHeader eyebrow={eyebrow} title={title} description={description} />
|
|
<Grid cols="2" gap="lg">
|
|
{items.map((cluster) => (
|
|
<Card class="h-full">
|
|
<div class="space-y-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<Headline as="h3" size="card">
|
|
{cluster.title}
|
|
</Headline>
|
|
{cluster.meta && (
|
|
<Badge tone="signal">{cluster.meta}</Badge>
|
|
)}
|
|
</div>
|
|
<Lead size="body">
|
|
{cluster.description}
|
|
</Lead>
|
|
<ul class="flex flex-wrap gap-2 p-0">
|
|
{cluster.capabilities.map((cap) => (
|
|
<li class="list-none rounded-full border border-[color:var(--color-line)] bg-white/60 px-3 py-1.5 text-sm text-[var(--color-ink-800)]">
|
|
{cap}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{cluster.href && (
|
|
<a class="text-link mt-2 inline-block text-sm font-semibold" href={cluster.href}>
|
|
Learn more →
|
|
</a>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</Grid>
|
|
</div>
|
|
</Container>
|
|
</Section>
|