ahmido
0da1b38764
Some checks failed
Main Confidence / confidence (push) Failing after 43s
## Summary - implement the website-only core IA for Spec 215 with canonical Home, Product, Trust, Changelog, Contact, Privacy, and Imprint routes - reduce primary navigation to the core buyer journey, retain legal/supporting pages as secondary surfaces, and redirect `/security-trust` to `/trust` - add route metadata, sitemap/canonical handling, changelog publishing, and updated smoke coverage for the new IA contract ## Testing - `corepack pnpm build:website` - `cd apps/website && corepack pnpm exec playwright test` - integrated browser smoke validation for core routes, secondary routes, `/security-trust -> /trust`, hidden optional routes, mobile nav, and Trust/Changelog to Contact paths ## Notes - keeps all changes local to `apps/website` and the Spec 215 artifacts - preserves the website working contract with no `apps/platform` runtime coupling Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #252
109 lines
5.2 KiB
Plaintext
109 lines
5.2 KiB
Plaintext
---
|
|
import SecondaryCTA from '@/components/content/SecondaryCTA.astro';
|
|
import Container from '@/components/primitives/Container.astro';
|
|
import { getHeaderCta, getPrimaryNavigation, isActiveNavigationPath, siteMetadata } from '@/lib/site';
|
|
|
|
interface Props {
|
|
currentPath: string;
|
|
}
|
|
|
|
const { currentPath } = Astro.props;
|
|
const headerCta = getHeaderCta(currentPath);
|
|
const primaryNavigation = await getPrimaryNavigation();
|
|
---
|
|
|
|
<header class="sticky top-0 z-30 px-[var(--space-page-x)] pt-4 sm:pt-6">
|
|
<Container width="wide">
|
|
<div
|
|
class="shell-panel flex items-center justify-between gap-4 rounded-[var(--radius-panel)] px-4 py-3 sm:px-5"
|
|
data-shell-surface="header"
|
|
>
|
|
<a href="/" class="flex min-w-0 items-center gap-3 no-underline">
|
|
<span
|
|
class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--color-primary),#8eaed1)] font-[var(--font-display)] text-lg text-white shadow-[var(--shadow-inline)]"
|
|
>
|
|
TA
|
|
</span>
|
|
<span class="min-w-0">
|
|
<span class="block truncate text-sm font-semibold uppercase tracking-[0.16em] text-[var(--color-ink-900)]">
|
|
{siteMetadata.siteName}
|
|
</span>
|
|
<span class="block truncate text-sm text-[var(--color-copy)]">
|
|
{siteMetadata.siteTagline}
|
|
</span>
|
|
</span>
|
|
</a>
|
|
|
|
<nav class="hidden items-center gap-1 lg:flex" aria-label="Primary">
|
|
{
|
|
primaryNavigation.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
|
|
class:list={[
|
|
'rounded-full px-4 py-2 text-sm font-medium transition',
|
|
isActiveNavigationPath(currentPath, item.href)
|
|
? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
|
|
: 'text-[var(--color-ink-800)] hover:bg-white/70',
|
|
]}
|
|
data-nav-link="primary"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))
|
|
}
|
|
</nav>
|
|
|
|
<div class="hidden lg:block">
|
|
<SecondaryCTA cta={headerCta} size="sm" />
|
|
</div>
|
|
|
|
<details class="relative lg:hidden" data-mobile-nav>
|
|
<summary
|
|
aria-label="Open navigation menu"
|
|
class="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-full border border-[color:var(--color-line)] bg-white/85 text-[var(--color-ink-900)]"
|
|
data-mobile-nav-trigger
|
|
>
|
|
<span class="sr-only">Open navigation menu</span>
|
|
<span class="flex flex-col gap-1">
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
</span>
|
|
</summary>
|
|
<div
|
|
class="glass-panel absolute right-0 top-[calc(100%+0.75rem)] w-[min(18rem,88vw)] rounded-[1.5rem] border border-white/80 p-3"
|
|
>
|
|
<nav class="flex flex-col gap-1" aria-label="Mobile primary">
|
|
{
|
|
primaryNavigation.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
|
|
class:list={[
|
|
'rounded-[1rem] px-4 py-3 text-sm',
|
|
isActiveNavigationPath(currentPath, item.href)
|
|
? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
|
|
: 'text-[var(--color-ink-800)] hover:bg-white/75',
|
|
]}
|
|
data-nav-link="mobile-primary"
|
|
>
|
|
<span class="block font-semibold">{item.label}</span>
|
|
{item.description && (
|
|
<span class="mt-1 block text-xs text-[var(--color-copy)]">
|
|
{item.description}
|
|
</span>
|
|
)}
|
|
</a>
|
|
))
|
|
}
|
|
<div class="mt-2 rounded-[1rem] bg-[rgba(47,111,183,0.08)] p-3">
|
|
<SecondaryCTA cta={headerCta} size="sm" showHelper />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</Container>
|
|
</header>
|