schon/storefront/app/pages/contact.vue

<template>
  <div class="contact">
    <div class="contact__top">
      <div class="container">
        <div class="contact__top-wrapper">
          <h1>{{ t('contact.title') }}</h1>
          <p>{{ t('contact.text') }}</p>
        </div>
      </div>
    </div>
    <div class="contact__main">
      <div class="container">
        <div class="contact__main-wrapper">
          <div class="contact__main-info">
            <h2 class="title">{{ t('contact.block.title') }}</h2>
            <p class="subtitle">{{ t('contact.block.text') }}</p>
            <div class="block">
              <div class="block__item">
                <div class="block__item-icon">
                  <icon name="material-symbols:mail" size="20" />
                </div>
                <div class="block__item-texts">
                  <h6>{{ t('contact.block.email') }}</h6>
                  <a :href="'mailto:' + companyInfo?.emailFrom">{{ companyInfo?.emailFrom }}</a>
                </div>
              </div>
              <div class="block__item">
                <div class="block__item-icon">
                  <icon name="material-symbols:call" size="20" />
                </div>
                <div class="block__item-texts">
                  <h6>{{ t('contact.block.call') }}</h6>
                  <a :href="'tel:' + companyInfo?.companyPhoneNumber">{{ companyInfo?.companyPhoneNumber }}</a>
                </div>
              </div>
<!--              <div class="block__item">-->
<!--                <div class="block__item-icon">-->
<!--                  <icon name="ic:baseline-access-time-filled" size="20" />-->
<!--                </div>-->
<!--                <div class="block__item-texts">-->
<!--                  <h6>{{ t('contact.block.hours') }}</h6>-->
<!--                  <p>{{  }}</p>-->
<!--                </div>-->
<!--              </div>-->
            </div>
          </div>
          <forms-contact />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {usePageTitle} from '@composables/utils';

const {t} = useI18n();
const companyStore = useCompanyStore();

const companyInfo = computed(() => companyStore.companyInfo);

const { setPageTitle } = usePageTitle();

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

<style lang="scss" scoped>
.contact {
  &__top {
    padding-block: 70px;
    background-color: #f8f8f8;

    &-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      & h1 {
        color: #1a1a1a;
        font-family: "Playfair Display", sans-serif;
        font-size: 48px;
        font-weight: 700;
        letter-spacing: -0.5px;
      }

      & p {
        max-width: 600px;
        text-align: center;
        color: #4b5563;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: -0.5px;
      }
    }
  }

  &__main {
    background-color: $white;
    padding-block: 70px;
    border-top: 1px solid #f3f4f6;

    &-wrapper {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 50px;
    }

    &-info {
      max-width: 550px;
      display: flex;
      flex-direction: column;
      gap: 40px;

      & .title {
        color: #1a1a1a;
        font-family: "Playfair Display", sans-serif;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -0.5px;
      }

      & .subtitle {
        color: #4b5563;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: -0.5px;
      }

      & .block {
        display: flex;
        flex-direction: column;
        gap: 20px;

        &__item {
          display: flex;
          align-items: flex-start;
          gap: 15px;

          &-icon {
            background-color: #1a1a1a;
            border-radius: 8px;
            padding: 14px;

            & span {
              color: $white;
              display: block;
            }
          }

          &-texts {
            display: flex;
            flex-direction: column;
            gap: 6px;

            & h6 {
              color: #1a1a1a;
              font-size: 16px;
              font-weight: 500;
              letter-spacing: -0.5px;
            }

            & a {
              transition: 0.2s;
              color: #4b5563;
              font-size: 16px;
              font-weight: 400;
              letter-spacing: -0.5px;

              @include hover {
                color: #1c2126;
              }
            }
          }
        }
      }
    }
  }
}
</style>