replace ElementPlus to PrimeVue, update TheWelcome

components.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Button: typeof import('primevue/button')['default']
+    ExamplesSection: typeof import('./src/components/TheWelcome/ExamplesSection.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
+    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
+    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
+    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
+    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TheWelcome: typeof import('./src/components/TheWelcome/TheWelcome.vue')['default']
+    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
+  }
+}

package.json

@@ -19,15 +19,20 @@
     "pnpm": ">=8.15.0"
   },
   "dependencies": {
-    "element-plus": "^2.8.7",
+    "@primevue/forms": "^4.2.1",
+    "@primevue/themes": "^4.2.1",
     "events": "^3.3.0",
     "pinia": "^2.2.6",
     "pouchdb-browser": "^9.0.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.2.1",
+    "tailwindcss-primeui": "^0.3.4",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.2",
+    "@primevue/auto-import-resolver": "^4.2.1",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.17.6",
@@ -38,13 +43,17 @@
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.14.0",
     "eslint-plugin-playwright": "^2.0.0",
     "eslint-plugin-vue": "^9.30.0",
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.1",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.6.3",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.5.4",
     "vitest": "^2.1.4",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/TheWelcome.vue

@@ -1,138 +0,0 @@
-<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/qr-code-logo-200x200.jpg"
-              width="200"
-              height="200"
-              alt="QR-код логотип"
-            />
-          </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>
-      <div class="examples-container">
-        <div class="example-block">
-          <p>Автомобиль: получайте уведомления о проблемах с парковкой или фарами.</p>
-          <img src="@/assets/examples/car-200x200.jpg" width="150" height="150" alt="Автомобиль" />
-        </div>
-        <div class="example-block">
-          <p>Питомец: помогите вернуть потерявшегося питомца.</p>
-          <img src="@/assets/examples/dog-200x200.jpg" width="150" height="150" alt="Питомец" />
-        </div>
-        <div class="example-block">
-          <p>Квартира: оставляйте инструкции для курьеров или соседей.</p>
-          <img src="@/assets/examples/door-200x200.jpg" width="150" height="150" alt="Квартира" />
-        </div>
-      </div>
-    </el-main>
-
-    <!-- Простота настройки -->
-    <el-main id="settings" class="setup-section">
-      <h2>Простота настройки</h2>
-      <p>Создайте QR-код, выберите доступные действия и начните использовать.</p>
-
-      <div class="centered-button-container">
-        <el-button tag="RouterLink" to="/create" type="primary" size="large" class="large-button"
-          >Создать QR-код</el-button
-        >
-      </div>
-    </el-main>
-
-    <!-- Подвал -->
-    <el-footer class="footer">
-      <p>НаСвязи © 2024</p>
-    </el-footer>
-  </el-container>
-</template>
-
-<style scoped>
-.landing-container {
-  font-family: Arial, sans-serif;
-  max-width: 950px;
-  margin: 0 auto;
-}
-
-.hero-section {
-  text-align: center;
-  padding: 50px 20px;
-  background-color: #f5f5f5;
-}
-
-.setup-section {
-  padding: 30px 20px;
-}
-
-.examples-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.example-block {
-  text-align: center;
-  padding: 10px 0;
-}
-
-.example-block img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-
-/* Центрирование кнопки */
-.centered-button-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-  margin-bottom: 40px;
-}
-
-.large-button {
-  font-size: 18px;
-  padding: 15px 40px;
-}
-
-/* Стили для десктопной версии */
-@media (min-width: 768px) {
-  .examples-container {
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: flex-start;
-  }
-}
-
-.footer {
-  text-align: center;
-  padding: 10px;
-  border-top: 1px solid #333;
-}
-</style>
-<script setup lang="ts"></script>

src/components/TheWelcome/ExamplesSection.vue

@@ -0,0 +1,44 @@
+<template>
+  <section class="py-8 text-center">
+    <h2 class="text-2xl font-semibold">Примеры использования</h2>
+    <div class="grid gap-6 mt-6 md:grid-cols-3 md:gap-8">
+      <!-- Пример 1 -->
+      <div class="grid items-center grid-rows-[auto,1fr] md:subgrid">
+        <p class="row-start-1 mb-2">
+          Автомобиль: получайте уведомления о проблемах с парковкой или фарами.
+        </p>
+        <img
+          src="@/assets/examples/car-200x200.jpg"
+          width="200"
+          height="200"
+          alt="Автомобиль"
+          class="mx-auto rounded-lg row-start-2"
+        />
+      </div>
+      <!-- Пример 2 -->
+      <div class="grid items-center grid-rows-[auto,1fr] md:subgrid">
+        <p class="row-start-1 mb-2">Питомец: помогите вернуть потерявшегося питомца.</p>
+        <img
+          src="@/assets/examples/dog-200x200.jpg"
+          width="200"
+          height="200"
+          alt="Питомец"
+          class="mx-auto rounded-lg row-start-2"
+        />
+      </div>
+      <!-- Пример 3 -->
+      <div class="grid items-center grid-rows-[auto,1fr] md:subgrid">
+        <p class="row-start-1 mb-2">Квартира: оставляйте инструкции для курьеров или соседей.</p>
+        <img
+          src="@/assets/examples/door-200x200.jpg"
+          width="200"
+          height="200"
+          alt="Квартира"
+          class="mx-auto rounded-lg row-start-2"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts"></script>

src/components/TheWelcome/TheWelcome.vue

@@ -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>

src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/main.ts

@@ -2,8 +2,29 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PouchDB from 'pouchdb-browser'
 
-import ElementPlus from 'element-plus'
+import PrimeVue from 'primevue/config'
-import 'element-plus/dist/index.css'
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+import './style.css'
+import 'primeicons/primeicons.css'
+
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{rose.50}',
+      100: '{rose.100}',
+      200: '{rose.200}',
+      300: '{rose.300}',
+      400: '{rose.400}',
+      500: '{rose.500}',
+      600: '{rose.600}',
+      700: '{rose.700}',
+      800: '{rose.800}',
+      900: '{rose.900}',
+      950: '{rose.950}',
+    },
+  },
+})
 
 import App from './App.vue'
 import router from './router'
@@ -12,7 +33,14 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(ElementPlus)
+app.use(PrimeVue, {
+  theme: {
+    preset: MyPreset,
+    options: {
+      darkModeSelector: false,
+    },
+  },
+})
 
 app.mount('#app')
 

src/style.css

@@ -0,0 +1,10 @@
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}

src/views/HomeView.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
 
 <template>
   <main>

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('tailwindcss-primeui')],
+}

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "files": [],
+  "files": ["./components.d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"

vite.config.ts

@@ -3,19 +3,24 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import Components from 'unplugin-vue-components/vite'
+import { PrimeVueResolver } from '@primevue/auto-import-resolver'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    Components({
+      resolvers: [PrimeVueResolver()],
+    }),
     vueDevTools(),
   ],
   define: {
-    global: 'window' // it is needed for PouchDB
+    global: 'window', // it is needed for PouchDB
   },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
 })