<script setup lang="ts">
useSeoLinking()
const { l } = useContentInjected()

useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})
</script>

<template>
  <XScaffoldGridPage>
    <AppSection mode="flat">
      <XContainerPair fractions="1/2" break="2xl" :ux="{ left: 'flex items-center' }">
        <template #left>
          <AppShowcase />
        </template>

        <template #right>
          <AppHighlights />
        </template>
      </XContainerPair>
    </AppSection>

    <AppSection mode="card" v-for="(apartment, index) in l.list" :key="index">
      <AppApartment :apartment="apartment" :index="index" />
    </AppSection>
  </XScaffoldGridPage>
</template>
