move * to apps/frontend

2024-11-21 01:15:06 +02:00
parent 3ac451e5f3
commit 11bba7a275
89 changed files with 35 additions and 23 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="/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>