ahmido
acdea41d92
## Summary - add the localized review-pack product story routes at `/platform/review-packs` and `/en/platform/review-packs` with shared page composition, evidence/decision framing, audience sections, trust handoff, and footer/use-case/home/platform discovery - extend `site-copy`, smoke coverage, and Spec Kit artifacts for feature 408 so the public website contract, tests, research, plan, quickstart, and checklist stay aligned - polish the public presentation with a cleaner review-pack comparison surface, a more opaque navbar to remove homepage logo bleed-through, a higher-contrast secondary CTA, unique homepage feature icons, and less repetitive homepage use-case copy ## Validation - `corepack pnpm --filter @tenantatlas/website build` - `corepack pnpm --filter @tenantatlas/website test tests/smoke/public-routes.spec.ts` - `corepack pnpm --filter @tenantatlas/website test tests/smoke/interaction.spec.ts` - source/dist claim scans plus manual browser comprehension checks are recorded in `specs/408-review-evidence-decision/checklists/requirements.md` - current touched website files are free of editor diagnostics; live browser console check on the homepage returned no errors ## Notes - trust/proof messaging remains intentionally honest; this PR does not add fabricated customer logos, certifications, or unsupported compliance claims - `origin/website-dev` is the review base for this PR Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #405
320 lines
10 KiB
Plaintext
320 lines
10 KiB
Plaintext
---
|
|
import MainLayout from '@/layouts/MainLayout.astro';
|
|
import HeroSection from '@components/sections/landing/HeroSection.astro';
|
|
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
|
import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.astro';
|
|
import heroImage from '@images/tenantial-dashboard.avif';
|
|
import { SITE } from '@data/constants';
|
|
import { siteCopy } from '@data/site-copy';
|
|
import { localeHtmlLang, localizeHref, localizedPath } from '@/i18n';
|
|
|
|
const locale = 'de' as const;
|
|
const copy = siteCopy[locale].useCases.mittelstand;
|
|
const siteDescription = siteCopy[locale].site.description;
|
|
const canonicalPath = localizedPath('/use-cases/mittelstand', locale);
|
|
---
|
|
|
|
<MainLayout
|
|
lang={locale}
|
|
title={copy.pageTitle}
|
|
customDescription={copy.metaDescription}
|
|
customOgTitle={copy.pageTitle}
|
|
structuredData={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebPage',
|
|
'@id': `${SITE.url}${canonicalPath}`,
|
|
url: `${SITE.url}${canonicalPath}`,
|
|
name: copy.pageTitle,
|
|
description: copy.metaDescription,
|
|
isPartOf: {
|
|
'@type': 'WebSite',
|
|
url: SITE.url,
|
|
name: SITE.title,
|
|
description: siteDescription,
|
|
},
|
|
inLanguage: localeHtmlLang[locale],
|
|
}}
|
|
>
|
|
<HeroSection
|
|
title={copy.heroTitle}
|
|
subTitle={copy.heroSubtitle}
|
|
primaryBtn={copy.primaryCta}
|
|
primaryBtnURL={localizeHref('/contact', locale)}
|
|
secondaryBtn={copy.secondaryCta}
|
|
secondaryBtnURL={localizeHref('/platform', locale)}
|
|
withReview={false}
|
|
supportingLine={copy.supportingLine}
|
|
src={heroImage}
|
|
alt={copy.heroAlt}
|
|
/>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.painTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.painSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
|
{
|
|
copy.painCards.map((card: any) => (
|
|
<article class="rounded-3xl border border-neutral-300 bg-neutral-100/80 p-6 shadow-xs dark:border-neutral-700 dark:bg-white/[0.04]">
|
|
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-yellow-100/70 p-6 md:p-10 dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.outcomeTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.outcomeSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4 md:grid-cols-2">
|
|
{
|
|
copy.outcomeCards.map((card: any) => (
|
|
<article class="rounded-2xl bg-white/80 p-5 dark:bg-neutral-950/60">
|
|
<h3 class="text-base font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.stakeholderTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.stakeholderSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
{
|
|
copy.stakeholderCards.map((card: any) => (
|
|
<article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 dark:border-neutral-700 dark:bg-white/[0.04]">
|
|
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="grid gap-8 lg:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)] lg:items-start"
|
|
>
|
|
<div>
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.workflowTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.workflowSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
{
|
|
copy.workflowSteps.map((step: any) => (
|
|
<article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 p-5 dark:border-neutral-700 dark:bg-white/[0.04]">
|
|
<span class="inline-flex rounded-full bg-yellow-400 px-3 py-1 text-xs font-semibold tracking-[0.18em] text-neutral-900 uppercase">
|
|
{step.step}
|
|
</span>
|
|
<h3 class="mt-4 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{step.title}
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
|
|
{step.content}
|
|
</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="rounded-[2rem] border border-neutral-300 bg-neutral-100/80 p-6 md:p-10 dark:border-neutral-700 dark:bg-white/[0.05]"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.differentiationTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.differentiationSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4 md:grid-cols-3">
|
|
{
|
|
copy.differentiationCards.map((card: any) => (
|
|
<article class="rounded-2xl bg-neutral-200/80 p-5 dark:bg-neutral-900/70">
|
|
<h3 class="text-base font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-yellow-100/60 p-6 md:p-10 dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.reviewPackTeaserTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.reviewPackTeaserSubtitle}
|
|
</p>
|
|
<div class="mt-6">
|
|
<SecondaryCTA
|
|
title={copy.reviewPackTeaserCta}
|
|
url={localizeHref('/platform/review-packs', locale)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="grid gap-8 border-y border-neutral-300 py-10 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-center lg:py-14 dark:border-neutral-700"
|
|
>
|
|
<div>
|
|
<h2
|
|
class="text-2xl font-bold text-balance text-neutral-800 md:text-3xl dark:text-neutral-200"
|
|
>
|
|
{copy.trustTeaserTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.trustTeaserSubtitle}
|
|
</p>
|
|
<div class="mt-6">
|
|
<SecondaryCTA
|
|
title={copy.trustTeaserCta}
|
|
url={localizeHref('/trust', locale)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="grid gap-3">
|
|
{
|
|
copy.trustPoints.map((point: string) => (
|
|
<li class="rounded-2xl border border-neutral-300 bg-neutral-100/70 px-5 py-4 text-sm font-medium text-neutral-700 dark:border-neutral-700 dark:bg-white/[0.04] dark:text-neutral-300">
|
|
{point}
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="mx-auto max-w-[85rem] px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14 2xl:max-w-full"
|
|
>
|
|
<div
|
|
class="rounded-[2rem] bg-linear-to-r from-neutral-900 to-neutral-700 px-6 py-8 text-neutral-50 md:px-10 md:py-12 dark:from-neutral-100 dark:to-neutral-300 dark:text-neutral-900"
|
|
>
|
|
<div class="max-w-(--breakpoint-lg)">
|
|
<h2 class="text-2xl font-bold text-balance md:text-3xl">
|
|
{copy.finalCtaTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-2xl text-pretty text-neutral-200 dark:text-neutral-700"
|
|
>
|
|
{copy.finalCtaSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-col gap-3 sm:flex-row">
|
|
<PrimaryCTA
|
|
title={copy.finalPrimaryCta}
|
|
url={localizeHref('/contact', locale)}
|
|
/>
|
|
<SecondaryCTA
|
|
title={copy.finalSecondaryCta}
|
|
url={localizeHref('/platform', locale)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MainLayout>
|