TenantAtlas/apps/website/src/components/pages/PlatformPage.astro

---
import MainLayout from '@/layouts/MainLayout.astro';
import MainSection from '@components/ui/blocks/MainSection.astro';
import LeftSection from '@components/ui/blocks/LeftSection.astro';
import RightSection from '@components/ui/blocks/RightSection.astro';
import FeaturesStats from '@components/sections/features/FeaturesStats.astro';
import dashboard from '@images/tenantial-dashboard.avif';
import evidenceImage from '@images/tenantial-evidence-panel.avif';
import reviewImage from '@images/tenantial-drift-workflow.avif';
import restoreImage from '@images/tenantial-rollout-plan.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].platform;
const siteDescription = siteCopy[locale].site.description;
const canonicalPath = localizedPath('/platform', 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],
  }}
>
  <MainSection
    title={copy.heading}
    subTitle={copy.subtitle}
    btnExists={true}
    btnTitle={siteCopy[locale].auth.walkthrough}
    btnURL={localizeHref('/contact', locale)}
  />

  <section class="mx-auto max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 lg:py-8 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.focusTitle}
      </h2>
      <p class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400">
        {copy.focusSubtitle}
      </p>
    </div>

    <div class="mt-8 grid gap-6 md:grid-cols-2">
      {
        copy.focusCards.map((card: 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">
              {card.title}
            </h3>
            <p class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400">
              {card.content}
            </p>
          </article>
        ))
      }
    </div>
  </section>

  <RightSection
    title={copy.backupTitle}
    subTitle={copy.backupSubtitle}
    single={false}
    imgOne={dashboard}
    imgOneAlt={copy.dashboardAlt}
    imgTwo={evidenceImage}
    imgTwoAlt={copy.evidenceAlt}
  />

  <LeftSection
    title={copy.driftTitle}
    subTitle={copy.driftSubtitle}
    img={reviewImage}
    imgAlt={copy.driftAlt}
    btnExists={true}
    btnTitle={copy.trustCta}
    btnURL={localizeHref('/trust', locale)}
  />

  <RightSection
    title={copy.restoreTitle}
    subTitle={copy.restoreSubtitle}
    single={true}
    imgOne={restoreImage}
    imgOneAlt={copy.restoreAlt}
    btnExists={true}
    btnTitle={copy.rolloutCta}
    btnURL={localizeHref('/contact', locale)}
  />

  <FeaturesStats
    title={copy.boundaryTitle}
    subTitle={copy.boundarySubtitle}
    mainStatTitle={copy.mainStatTitle}
    mainStatSubTitle={copy.mainStatSubTitle}
    stats={copy.stats}
  />
</MainLayout>