71 lines
2.6 KiB
Vue
71 lines
2.6 KiB
Vue
<template>
|
|
<div class="max-w-screen-sm mx-auto px-4 md:px-0 font-sans text-gray-800">
|
|
<!-- Hero Section -->
|
|
<section class="text-center py-12">
|
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
|
<RouterLink to="/">
|
|
<img
|
|
src="/images/qr-code-logo-200x200.jpg"
|
|
width="200"
|
|
height="200"
|
|
alt="QR‑код логотип"
|
|
class="mx-auto"
|
|
/>
|
|
</RouterLink>
|
|
<div>
|
|
<h1 class="text-3xl font-bold">Создайте уникальный QR‑код для связи</h1>
|
|
<p class="mt-2 text-lg text-gray-600 text-justify">
|
|
Люди смогут отправлять вам сообщения, сканируя этот QR‑код, без необходимости раскрывать
|
|
ваши контактные данные.
|
|
</p>
|
|
<Button
|
|
icon="pi pi-qrcode"
|
|
label="Создать QR‑код"
|
|
to="/create"
|
|
as="router-link"
|
|
class="p-button-lg mt-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<!-- Where to Use Section -->
|
|
<section id="setup" class="py-8 text-center">
|
|
<h2 class="text-2xl font-semibold">Где использовать?</h2>
|
|
<p class="mt-2 text-lg text-gray-600 text-justify">
|
|
QR‑код можно будет разместить на вашем автомобиле, на входной двери или на ошейнике вашего
|
|
питомца — это позволит окружающим легко связаться с вами в случае необходимости, при этом
|
|
ваши контактные данные останутся конфиденциальными.
|
|
</p>
|
|
</section>
|
|
|
|
<ExamplesSection id="examples" />
|
|
|
|
<!-- Simple Setup Section -->
|
|
<section id="settings" class="py-8 text-center">
|
|
<h2 class="text-2xl font-semibold">Легкость настройки</h2>
|
|
<p class="mt-2 text-lg text-gray-600 text-justify">
|
|
Создайте QR‑код, выберите доступные действия и начните использовать.
|
|
</p>
|
|
<div class="flex justify-center mt-6">
|
|
<Button
|
|
icon="pi pi-qrcode"
|
|
label="Создать QR‑код"
|
|
to="/create"
|
|
as="router-link"
|
|
class="p-button-lg"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-4 border-t text-center">
|
|
<p>НаСвязи © 2024</p>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts"></script>
|