549 lines
20 KiB
Plaintext
549 lines
20 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-review-board.avif';
|
|
import { SITE } from '@data/constants';
|
|
import { siteCopy } from '@data/site-copy';
|
|
import {
|
|
localeHtmlLang,
|
|
localizeHref,
|
|
localizedPath,
|
|
type Locale,
|
|
} from '@/i18n';
|
|
|
|
const { locale } = Astro.props;
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
|
|
const copy = siteCopy[locale].reviewPacks;
|
|
const siteDescription = siteCopy[locale].site.description;
|
|
const canonicalPath = localizedPath('/platform/review-packs', 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.problemTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.problemSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
|
|
{
|
|
copy.problemCards.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="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-linear-to-br from-neutral-100 to-neutral-200/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.anatomyTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.anatomySubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{
|
|
copy.reviewPackCards.map((card: any) => (
|
|
<article class="flex flex-col rounded-3xl border border-neutral-200/50 bg-white p-6 shadow-xs transition-shadow hover:shadow-sm dark:border-neutral-800/50 dark:bg-neutral-950/80">
|
|
<div class="mb-4 flex flex-wrap items-start justify-between gap-3">
|
|
<span
|
|
class:list={[
|
|
'inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-1 text-[11px] font-semibold tracking-[0.16em] uppercase',
|
|
card.availabilityTone === 'soft-availability'
|
|
? 'border border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400'
|
|
: 'border border-yellow-200/50 bg-yellow-100/50 text-yellow-800 dark:border-yellow-900/30 dark:bg-yellow-500/10 dark:text-yellow-500',
|
|
]}
|
|
>
|
|
{card.availabilityTone === 'soft-availability'
|
|
? copy.softAvailabilityLabel
|
|
: copy.availableNowLabel}
|
|
</span>
|
|
</div>
|
|
<h3 class="mb-2 text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="text-sm leading-relaxed 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="grid gap-8 lg:grid-cols-2">
|
|
<div>
|
|
<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.evidenceTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.evidenceSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4">
|
|
{
|
|
copy.evidenceCards.map((card: any) => (
|
|
<article class="flex gap-4 rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 dark:border-neutral-700 dark:bg-white/[0.04]">
|
|
<div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-800 text-white dark:bg-neutral-200 dark:text-neutral-900">
|
|
<svg
|
|
class="h-3 w-3"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<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.decisionTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.decisionSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<figure
|
|
class="mt-8 overflow-hidden rounded-3xl border border-neutral-300 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-950/80"
|
|
>
|
|
<figcaption
|
|
class="flex flex-wrap items-center justify-between gap-3 border-b border-neutral-200 bg-neutral-50 px-6 py-4 dark:border-neutral-800 dark:bg-neutral-900/70"
|
|
>
|
|
<span
|
|
class="text-[11px] font-semibold tracking-[0.16em] text-neutral-500 uppercase dark:text-neutral-400"
|
|
>
|
|
{copy.decisionSampleBadge}
|
|
</span>
|
|
<span
|
|
class="inline-flex items-center gap-2 rounded-full border border-yellow-200/60 bg-yellow-100/70 px-3 py-1 text-xs font-semibold text-yellow-800 dark:border-yellow-900/40 dark:bg-yellow-500/10 dark:text-yellow-300"
|
|
>
|
|
<span
|
|
class="h-1.5 w-1.5 rounded-full bg-yellow-500 dark:bg-yellow-400"
|
|
></span>
|
|
{copy.decisionSampleStatusValue}
|
|
</span>
|
|
</figcaption>
|
|
<div class="px-6 py-5">
|
|
<h3
|
|
class="text-base font-semibold text-balance text-neutral-800 dark:text-neutral-200"
|
|
>
|
|
{copy.decisionSampleTitle}
|
|
</h3>
|
|
<dl class="mt-4 grid gap-3">
|
|
{
|
|
copy.decisionSampleRows.map((row: any) => (
|
|
<div class="grid gap-1 border-t border-neutral-100 pt-3 first:border-0 first:pt-0 sm:grid-cols-[7rem_1fr] sm:gap-4 dark:border-neutral-800">
|
|
<dt class="text-xs font-semibold tracking-[0.14em] text-neutral-500 uppercase dark:text-neutral-400">
|
|
{row.label}
|
|
</dt>
|
|
<dd class="text-sm leading-6 text-neutral-700 dark:text-neutral-300">
|
|
{row.value}
|
|
</dd>
|
|
</div>
|
|
))
|
|
}
|
|
</dl>
|
|
</div>
|
|
</figure>
|
|
|
|
<div class="mt-8 grid gap-4 sm:grid-cols-2">
|
|
{
|
|
copy.decisionCards.map((card: any) => (
|
|
<article class="flex gap-4 rounded-3xl border border-neutral-300 bg-neutral-100/70 p-6 dark:border-neutral-700 dark:bg-white/[0.04]">
|
|
<div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
|
|
<svg
|
|
class="h-3 w-3"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-2 text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{card.content}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
))
|
|
}
|
|
</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="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.boundaryTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.boundarySubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-4 lg:grid-cols-2">
|
|
{
|
|
copy.boundaryColumns.map((column: any) => (
|
|
<article class="rounded-3xl bg-neutral-200/80 p-6 dark:bg-neutral-900/70">
|
|
<h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">
|
|
{column.title}
|
|
</h3>
|
|
<ul class="mt-4 grid gap-3">
|
|
{column.items.map((item: string) => (
|
|
<li class="rounded-2xl border border-neutral-300 bg-white/70 px-4 py-3 text-sm leading-6 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-950/50 dark:text-neutral-300">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<p
|
|
class="mt-6 max-w-3xl text-sm leading-6 text-neutral-600 dark:text-neutral-400"
|
|
>
|
|
{copy.boundaryNote}
|
|
</p>
|
|
</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.audienceTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.audienceSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 lg:grid-cols-2">
|
|
{
|
|
copy.audienceCards.map((card: any) => (
|
|
<article class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-neutral-200/70 p-6 shadow-xs dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800">
|
|
<h3 class="text-2xl font-semibold text-balance text-neutral-800 dark:text-neutral-200">
|
|
{card.title}
|
|
</h3>
|
|
<p class="mt-4 max-w-prose 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] bg-linear-to-br from-neutral-900 to-neutral-700 p-6 md:p-10 dark:from-neutral-950 dark:to-neutral-800"
|
|
>
|
|
<div class="max-w-(--breakpoint-md)">
|
|
<h2 class="text-2xl font-bold text-balance text-neutral-50 md:text-3xl">
|
|
{copy.comparisonTitle}
|
|
</h2>
|
|
<p class="mt-3 max-w-prose text-pretty text-neutral-300 md:text-lg">
|
|
{copy.comparisonSubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 hidden gap-4 px-2 md:grid md:grid-cols-[9rem_1fr_1fr]">
|
|
<span></span>
|
|
<span
|
|
class="text-xs font-semibold tracking-[0.18em] text-neutral-400 uppercase"
|
|
>
|
|
{copy.comparisonRawLabel}
|
|
</span>
|
|
<span
|
|
class="text-xs font-semibold tracking-[0.18em] text-yellow-300 uppercase"
|
|
>
|
|
{copy.comparisonStoryLabel}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-3 grid gap-3">
|
|
{
|
|
copy.comparisonRows.map((row: any) => (
|
|
<article class="grid gap-3 rounded-3xl border border-white/10 bg-white/[0.03] p-4 md:grid-cols-[9rem_1fr_1fr] md:items-stretch">
|
|
<h3 class="self-center text-sm font-semibold text-neutral-100">
|
|
{row.title}
|
|
</h3>
|
|
<div class="rounded-2xl bg-white/[0.04] p-4">
|
|
<p class="text-[11px] font-semibold tracking-[0.18em] text-neutral-400 uppercase md:hidden">
|
|
{copy.comparisonRawLabel}
|
|
</p>
|
|
<p class="mt-2 text-sm leading-6 text-neutral-400 md:mt-0">
|
|
{row.rawExport}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-yellow-400/30 bg-yellow-500/10 p-4">
|
|
<p class="text-[11px] font-semibold tracking-[0.18em] text-yellow-300 uppercase md:hidden">
|
|
{copy.comparisonStoryLabel}
|
|
</p>
|
|
<div class="flex gap-2.5 md:items-start">
|
|
<span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-yellow-400 text-neutral-900">
|
|
<svg
|
|
class="h-3 w-3"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="3"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
</span>
|
|
<p class="text-sm leading-6 text-neutral-100">
|
|
{row.reviewStory}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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="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>
|