replace ElementPlus to PrimeVue, update TheWelcome

2024-11-14 15:26:44 +02:00
parent c17f39298c
commit 660f7e18d9
15 changed files with 1051 additions and 581 deletions
@@ -0,0 +1,70 @@
+<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="@/assets/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>