<template>
  <div class="shop">
    <ui-title>
      <h1>{{ t('shop.title') }}</h1>
      <p>{{ t('shop.text') }}</p>
    </ui-title>
    <div class="shop__main">
      <div class="container">
        <div class="shop__main-wrapper">
          <store />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {usePageTitle} from '@composables/utils';

const { t, locale } = useI18n();

const { setPageTitle } = usePageTitle();

setPageTitle(t('breadcrumbs.shop'));
</script>

<style lang="scss" scoped>
.shop {
  &__main {
    background-color: $main;
    padding-block: 70px;
    border-top: 1px solid $border;
  }
}
</style>