228 lines
7.2 KiB
Plaintext
228 lines
7.2 KiB
Plaintext
---
|
|
import MainLayout from '@/layouts/MainLayout.astro';
|
|
import HeroSection from '@components/sections/landing/HeroSection.astro';
|
|
import FeaturesGeneral from '@components/sections/features/FeaturesGeneral.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 featureImage from '@images/tenantial-review-board.avif';
|
|
import { featuresByLocale, siteCopy } from '@data/site-copy';
|
|
import { localizeHref, type Locale } from '@/i18n';
|
|
|
|
const { locale } = Astro.props;
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
|
|
const copy = siteCopy[locale].home;
|
|
---
|
|
|
|
<MainLayout
|
|
lang={locale}
|
|
title={copy.pageTitle}
|
|
customDescription={copy.metaDescription}
|
|
customOgTitle={copy.pageTitle}
|
|
>
|
|
<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}
|
|
/>
|
|
|
|
<FeaturesGeneral
|
|
title={copy.featureTitle}
|
|
subTitle={copy.featureSubtitle}
|
|
src={featureImage}
|
|
alt={copy.featureAlt}
|
|
features={featuresByLocale[locale]}
|
|
/>
|
|
|
|
<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-3">
|
|
{
|
|
copy.audiences.map((audience: any) => (
|
|
<article class="rounded-3xl border border-neutral-300 bg-neutral-100/70 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">
|
|
{audience.title}
|
|
</h3>
|
|
<p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{audience.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="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"
|
|
>
|
|
<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.useCasesTitle}
|
|
</h2>
|
|
<p
|
|
class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
|
|
>
|
|
{copy.useCasesSubtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
|
{
|
|
copy.useCases.map((useCase: any) => (
|
|
<article class="rounded-[2rem] border border-neutral-300 bg-linear-to-br from-neutral-100 to-yellow-100/60 p-6 shadow-xs dark:border-neutral-700 dark:from-neutral-900 dark:to-neutral-800">
|
|
<p class="text-xs font-semibold tracking-[0.22em] text-neutral-500 uppercase dark:text-neutral-400">
|
|
{useCase.eyebrow}
|
|
</p>
|
|
<h3 class="mt-4 text-2xl font-semibold text-balance text-neutral-800 dark:text-neutral-200">
|
|
{useCase.title}
|
|
</h3>
|
|
<p class="mt-4 max-w-prose text-pretty text-neutral-600 dark:text-neutral-400">
|
|
{useCase.content}
|
|
</p>
|
|
<div class="mt-6">
|
|
<SecondaryCTA
|
|
title={useCase.cta}
|
|
url={localizeHref(useCase.href, locale)}
|
|
/>
|
|
</div>
|
|
</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-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 md:grid-cols-3">
|
|
{
|
|
copy.boundaries.map((boundary: 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">
|
|
{boundary.title}
|
|
</h3>
|
|
<p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
|
|
{boundary.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 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>
|