hereconnect/src/components/TheWelcome.vue

<template>
  <el-container class="landing-container">
    <el-main class="hero-section">
      <el-row :gutter="20" class="header-row">
        <el-col>
          <RouterLink to="/">
            <img src="@/assets/logo.jpeg" width="200" height="200" alt="" />
          </RouterLink>
        </el-col>
        <el-col>
          <h1>Создайте уникальный QR-код для связи</h1>
          <p>
            Люди смогут отправлять вам сообщения, сканируя этот QR-код, без необходимости раскрывать
            ваши контактные данные.
          </p>
          <el-button tag="RouterLink" to="/create" type="primary" size="large"
            >Создать QR-код</el-button
          >
        </el-col>
      </el-row>
    </el-main>

    <!-- Где использовать? -->
    <el-main id="setup" class="setup-section">
      <h2>Где использовать?</h2>
      <p>
        QR-код можно будет разместить на вашем автомобиле, на входной двери или на ошейнике вашего
        питомца — это позволит окружающим легко связаться с вами в случае необходимости, при этом
        ваши контактные данные останутся конфиденциальными.
      </p>
    </el-main>

    <!-- Примеры использования -->
    <el-main id="examples" class="examples-section">
      <h2>Примеры использования</h2>
      <el-carousel height="100px">
        <el-carousel-item>
          <p>Автомобиль: получайте уведомления о проблемах с парковкой или фарами.</p>
        </el-carousel-item>
        <el-carousel-item>
          <p>Питомец: помогите вернуть потерявшегося питомца.</p>
        </el-carousel-item>
        <el-carousel-item>
          <p>Квартира: оставляйте инструкции для курьеров или соседей.</p>
        </el-carousel-item>
      </el-carousel>
    </el-main>

    <!-- Простота настройки -->
    <el-main id="setup" class="setup-section">
      <h2>Простота настройки</h2>
      <p>Создайте QR-код, выберите доступные действия и начните использовать.</p>
    </el-main>

    <!-- Подвал -->
    <el-footer class="footer">
      <p>НаСвязи © 2024. Свяжитесь с нами в социальных сетях.</p>
    </el-footer>
  </el-container>
</template>

<style scoped>
.landing-container {
  font-family: Arial, sans-serif;
}

.hero-section {
  text-align: center;
  padding: 100px 20px;
  background-color: #f5f5f5;
}

.features-section,
.examples-section,
.setup-section,
.qr-form-section {
  padding: 50px 20px;
}

.footer {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #333;
}
</style>
<script setup lang="ts"></script>