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 SecondaryCTA from '@components/ui/buttons/SecondaryCTA.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>

  <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="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.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 class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {
          copy.useCases.map((useCase: 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">
                {useCase.title}
              </h3>
              <p class="mt-3 text-sm leading-6 text-neutral-600 dark:text-neutral-400">
                {useCase.content}
              </p>
              <div class="mt-5">
                <SecondaryCTA
                  title={useCase.cta}
                  url={localizeHref(useCase.href, locale)}
                />
              </div>
            </article>
          ))
        }
      </div>
    </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}
  />

  <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"
        >
          {siteCopy[locale].evaluation.discovery.platformTitle}
        </h2>
        <p
          class="mt-3 max-w-prose text-pretty text-neutral-600 md:text-lg dark:text-neutral-400"
        >
          {siteCopy[locale].evaluation.discovery.platformContent}
        </p>
        <div class="mt-6">
          <SecondaryCTA
            title={siteCopy[locale].evaluation.discovery.platformCta}
            url={localizeHref(siteCopy[locale].evaluation.routePath, locale)}
          />
        </div>
      </div>
    </div>
  </section>
</MainLayout>