add html-validator + fix html ceo code

app.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
@@ -9,7 +9,7 @@
     <link
       href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
       rel="stylesheet"
-    />
+    /> -->
     <NuxtPage />
   </NuxtLayout>
 </template>

components/UiButton/UiButton.params.ts

@@ -1,13 +1,17 @@
 export const colorVariants = {
-  primary: ['bg-accent-50', 'text-primary', 'hover:bg-accent-100', 'active:bg-accent-150'],
+  primary: [
-  secondary: [
+    "bg-accent-50",
-    'bg-transparent',
+    "text-primary",
-    'text-primary',
+    "hover:bg-accent-100",
-    'hover:bg-accent-50',
+    "active:bg-accent-150",
-    'border-accent-50',
-    'border',
-    'hover:bg-accent-100',
-    'active:bg-accent-150',
-    'cursor-pointer',
   ],
-}
+  secondary: [
+    "bg-transparent",
+    "text-primary",
+    "hover:bg-accent-50",
+    "border-accent-50",
+    "border",
+    "hover:bg-accent-100",
+    "active:bg-accent-150",
+  ],
+};

components/UiButton/UiButton.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="tag"
+    :type="tag === 'button' ? 'button' : ''"
     class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
     :class="[baseStyle, size]"
     data-ui="ui-button"
@@ -10,36 +11,36 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { toRefs, computed } from "vue";
-import { colorVariants } from './UiButton.params.js'
+import { colorVariants } from "./UiButton.params.js";
 
 const props = defineProps({
   tag: {
     type: String,
-    default: 'button',
+    default: "button",
   },
   variants: {
-    type: String as () => 'primary' | 'secondary',
+    type: String as () => "primary" | "secondary",
-    default: 'primary',
+    default: "primary",
     validator: (value) => {
-      return ['primary', 'secondary'].includes(value as string)
+      return ["primary", "secondary"].includes(value as string);
     },
   },
   size: {
     type: String,
-    default: 'font-bold',
+    default: "font-bold",
   },
-})
+});
 
-const { tag, variants, size } = toRefs(props)
+const { tag, variants, size } = toRefs(props);
 
-const colorClasses: Record<'primary' | 'secondary', string[]> = {
+const colorClasses: Record<"primary" | "secondary", string[]> = {
   primary: colorVariants.primary,
   secondary: colorVariants.secondary,
-}
+};
 
 const baseStyle = computed(() => {
-  const variant = variants.value as 'primary' | 'secondary'
+  const variant = variants.value as "primary" | "secondary";
-  return colorClasses[variant]?.join(' ') || ''
+  return colorClasses[variant]?.join(" ") || "";
-})
+});
 </script>

config/head.ts

@@ -0,0 +1,28 @@
+export default {
+  meta: [
+    { charset: "utf-8" },
+    {
+      name: "viewport",
+      content:
+        "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
+    },
+  ],
+  link: [
+    {
+      rel: "preconnect",
+      href: "https://fonts.googleapis.com",
+    },
+    {
+      rel: "preconnect",
+      href: "https://fonts.gstatic.com",
+    },
+    {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap",
+    },
+    {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Russo+One&display=swap",
+    },
+  ],
+};

config/index.ts

@@ -1,5 +1,5 @@
-import modules from './modules'
+import modules from "./modules";
-import sitemap from './sitemap'
+import sitemap from "./sitemap";
 
 export default {
   modules,
@@ -8,4 +8,4 @@ export default {
     strict: true,
     typeCheck: true,
   },
-}
+};

config/modules.ts

@@ -7,6 +7,7 @@ export default [
   "@pinia/nuxt",
   "@nuxtjs/tailwindcss",
   "@pinia/nuxt",
+  "@nuxtjs/html-validator",
   //   '@nuxtjs/robots',
   //   '@nuxtjs/sitemap',
 ];

eslint.config.ts

@@ -26,5 +26,10 @@ export default defineConfigWithVueTs(
 
   pluginVue.configs["flat/essential"],
   vueTsConfigs.recommended,
-  skipFormatting
+  skipFormatting,
+  {
+    rules: {
+      "vue/multi-word-component-names": "off",
+    },
+  }
 );

nuxt.config.ts

@@ -1,6 +1,7 @@
 import config from "./config";
 
 import { fileURLToPath, URL } from "node:url";
+import head from "./config/head";
 // import sitemap from "./config/sitemap";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -17,9 +18,24 @@ export default defineNuxtConfig({
       dir: "./dist",
     },
   },
+
   alias: {
     "@": fileURLToPath(new URL("./", import.meta.url)),
   },
+
   css: ["@/assets/css/tailwind.css"],
   ...config,
+  htmlValidator: {
+    usePrettier: true,
+    logLevel: "warning",
+    failOnError: false,
+  },
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: "ru",
+      },
+      ...head,
+    },
+  },
 });

package-lock.json

@@ -11,6 +11,7 @@
         "@nuxt/fonts": "^0.11.4",
         "@nuxt/icon": "^1.13.0",
         "@nuxt/image": "^1.10.0",
+        "@nuxtjs/html-validator": "^2.1.0",
         "@nuxtjs/robots": "^5.2.10",
         "@nuxtjs/sitemap": "^7.4.0",
         "@pinia/nuxt": "^0.5.5",
@@ -1455,6 +1456,27 @@
       "integrity": "sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw==",
       "license": "MIT"
     },
+    "node_modules/@html-validate/stylish": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@html-validate/stylish/-/stylish-4.2.0.tgz",
+      "integrity": "sha512-Nl8HCv0hGRSLQ+n1OD4Hk3a+Urwk9HH0vQkAzzCarT4KlA7bRl+6xEiS5PZVwOmjtC7XiH/oNe3as9Fxcr2A1w==",
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/@html-validate/stylish/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2624,6 +2646,21 @@
         "vue": "^3.3.4"
       }
     },
+    "node_modules/@nuxtjs/html-validator": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/html-validator/-/html-validator-2.1.0.tgz",
+      "integrity": "sha512-ldo8ioSsH3OEumtgwDMokTxlhjgO9FxjJWViAxisq5l/wjvaVX8SYTQ02wjtQcQQPSvS6BwgypAp400RlyFHng==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.15.4",
+        "consola": "^3.4.0",
+        "html-validate": "~9.4.0",
+        "knitwork": "^1.2.0",
+        "pathe": "^2.0.3",
+        "prettier": "^3.5.2",
+        "std-env": "^3.8.0"
+      }
+    },
     "node_modules/@nuxtjs/mdc": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/mdc/-/mdc-0.17.0.tgz",
@@ -4050,6 +4087,30 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
+    "node_modules/@sidvind/better-ajv-errors": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sidvind/better-ajv-errors/-/better-ajv-errors-3.0.1.tgz",
+      "integrity": "sha512-++1mEYIeozfnwWI9P1ECvOPoacy+CgDASrmGvXPMCcqgx0YUzB01vZ78uHdQ443V6sTY+e9MzHqmN9DOls02aw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "kleur": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 16.14"
+      },
+      "peerDependencies": {
+        "ajv": "^6.12.3 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@sidvind/better-ajv-errors/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.0.2.tgz",
@@ -5649,7 +5710,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -9054,7 +9114,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
@@ -9073,6 +9132,22 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -10130,6 +10205,85 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/html-validate": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-9.4.2.tgz",
+      "integrity": "sha512-lvorU3Q320MMD6ryh0FupMJ5DOKsNKxwdKba+ig4cUYEBQ3SUnANBMCv5OaxwKqd2VCKQPlveXb3K1zqJsfV0Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/html-validate"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@html-validate/stylish": "^4.1.0",
+        "@sidvind/better-ajv-errors": "3.0.1",
+        "ajv": "^8.0.0",
+        "glob": "^10.0.0",
+        "kleur": "^4.1.0",
+        "minimist": "^1.2.0",
+        "prompts": "^2.0.0",
+        "semver": "^7.0.0"
+      },
+      "bin": {
+        "html-validate": "bin/html-validate.mjs"
+      },
+      "engines": {
+        "node": "^18.19.0 || >= 20.6.0"
+      },
+      "peerDependencies": {
+        "jest": "^27.1 || ^28.1.3 || ^29.0.3",
+        "jest-diff": "^27.1 || ^28.1.3 || ^29.0.3",
+        "jest-snapshot": "^27.1 || ^28.1.3 || ^29.0.3",
+        "vitest": "^0.34.0 || ^1.0.0 || ^2.0.0 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "jest": {
+          "optional": true
+        },
+        "jest-diff": {
+          "optional": true
+        },
+        "jest-snapshot": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/html-validate/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/html-validate/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/html-validate/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/html-void-elements": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -10955,7 +11109,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
@@ -15117,7 +15270,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -15744,6 +15896,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-package-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
@@ -18230,7 +18391,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"

package.json

@@ -17,6 +17,7 @@
     "@nuxt/fonts": "^0.11.4",
     "@nuxt/icon": "^1.13.0",
     "@nuxt/image": "^1.10.0",
+    "@nuxtjs/html-validator": "^2.1.0",
     "@nuxtjs/robots": "^5.2.10",
     "@nuxtjs/sitemap": "^7.4.0",
     "@pinia/nuxt": "^0.5.5",

pages/books/[slug].vue

@@ -9,12 +9,7 @@
           <!--левый блок контента-->
           <section class="relative top-[-20px] min-w-[570px]">
             <div class="flex flex-col items-center">
-              <img
+              <img :src="book.img" :alt="book.buttonText" />
-                :src="book.img"
-                :alt="book.buttonText"
-                width="100%"
-                height="100%"
-              />
             </div>
           </section>
           <!--правый блок контента-->
@@ -68,12 +63,7 @@
                 class="flex flex-row mr-14 items-center justify-between lg:whitespace-nowrap"
               >
                 <li class="flex flex-row mr-14 gap-3 items-center">
-                  <img
+                  <img src="/img/svg/books/book-pages.svg" alt="страниц" />
-                    src="/img/svg/books/book-pages.svg"
-                    alt="страниц"
-                    width="100%"
-                    height="100%"
-                  />
                   <UiParagraph size="250" as="span">
                     {{ book.pages }}
                   </UiParagraph>
@@ -82,20 +72,13 @@
                   <img
                     src="/img/svg/books/book-illustrations.svg"
                     alt="иллюстраций"
-                    width="100%"
-                    height="100%"
                   />
                   <UiParagraph size="250" as="span">
                     {{ book.illust }}
                   </UiParagraph>
                 </li>
                 <li class="flex flex-row mr-14 gap-3 items-center">
-                  <img
+                  <img src="/img/svg/books/book-formats.svg" alt="формат" />
-                    src="/img/svg/books/book-formats.svg"
-                    alt="формат"
-                    width="100%"
-                    height="100%"
-                  />
                   <UiParagraph size="250" as="span">
                     {{ book.format }}
                   </UiParagraph>
@@ -170,7 +153,7 @@
         <!--нижний блок-->
         <section class="ml-20 mt-32">
           <div>
-            <UiHeading tag="H2" size="300" class="text-three">
+            <UiHeading tag="h2" size="300" class="text-three">
               Что ты узнаешь
             </UiHeading>
             <ul class="flex mt-20 flex-row items-center justify-between">

pages/books/[titlesSlug]/[titlesSlug].vue

@@ -16,7 +16,7 @@
           class="flex flex-col gap-4"
         >
           <!-- Main section title -->
-          <UiHeading tag="H2" size="300" class="text-three [&]:font-normal">
+          <UiHeading tag="h2" size="300" class="text-three [&]:font-normal">
             {{ section.title }}
           </UiHeading>
 

pages/index/_ui/feedbackSection/feedbackSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="feedback-section">
-    <UiHeading tag="H2" size="300" class="text-three mb-4 pl-16 pr-24">
+    <UiHeading tag="h2" size="300" class="text-three mb-4 pl-16 pr-24">
       Что говорят читатели
     </UiHeading>
 
@@ -18,7 +18,9 @@
           class="swiper-slide feedback-slide !w-[356px] !h-[325px]"
         >
           <div class="feedback-card !w-full !h-full">
-            <UiParagraph size="250" class="card-text">{{ feedback.text }}</UiParagraph>
+            <UiParagraph size="250" class="card-text">{{
+              feedback.text
+            }}</UiParagraph>
           </div>
         </div>
       </div>
@@ -36,34 +38,34 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'  
+import { onMounted } from "vue";
-import Swiper from 'swiper'
+import Swiper from "swiper";
-import { Pagination, Autoplay } from 'swiper/modules'
+import { Pagination, Autoplay } from "swiper/modules";
-import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiHeading from "@/components/Typography/UiHeading.vue";
-import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiParagraph from "@/components/Typography/UiParagraph.vue";
-import feedbackData from './_data/feedback.data'
+import feedbackData from "./_data/feedback.data";
 
-import 'swiper/css'
+import "swiper/css";
-import 'swiper/css/pagination'
+import "swiper/css/pagination";
-import UiButton from '@/components/UiButton/UiButton.vue'
+import UiButton from "@/components/UiButton/UiButton.vue";
 
 onMounted(() => {
-  new Swiper('.feedback-swiper', {
+  new Swiper(".feedback-swiper", {
     modules: [Pagination, Autoplay],
-    direction: 'horizontal',
+    direction: "horizontal",
     loop: true,
     autoplay: {
       delay: 3000,
       disableOnInteraction: false,
     },
-    slidesPerView: 'auto',
+    slidesPerView: "auto",
     spaceBetween: 72,
     pagination: {
-      el: '.swiper-pagination',
+      el: ".swiper-pagination",
       clickable: false,
     },
-  })
+  });
-})
+});
 </script>
 
 <style lang="css" scoped>

pages/index/_ui/forYouSection/forYouSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <UiHeading tag="H2" size="300" class="text-three">
+    <UiHeading tag="h1" size="300" class="text-three">
       Книги для тебя, если ты не знаешь...
     </UiHeading>
     <ul class="flex mt-20 flex-row items-center justify-between">
@@ -19,36 +19,36 @@
 </template>
 
 <script setup lang="ts">
-import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiHeading from "@/components/Typography/UiHeading.vue";
-import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiParagraph from "@/components/Typography/UiParagraph.vue";
-import { reactive } from 'vue'
+import { reactive } from "vue";
 
 const questions = reactive({
   data: [
     {
-      img: '/img/svg/ellipse1.svg',
+      img: "/img/svg/ellipse1.svg",
       text: 'Что делать, если у тебя ноги не "от ушей" и ты далеко не Мисс Мира?',
     },
     {
-      img: '/img/svg/ellipse2.svg',
+      img: "/img/svg/ellipse2.svg",
-      text: 'Как начать легко общаться с противоположным полом и о чем надо помолчать?',
+      text: "Как начать легко общаться с противоположным полом и о чем надо помолчать?",
     },
     {
-      img: '/img/svg/ellipse3.svg',
+      img: "/img/svg/ellipse3.svg",
-      text: 'Как относиться к сексу и на сколько важна девичья невинность?',
+      text: "Как относиться к сексу и на сколько важна девичья невинность?",
     },
     {
-      img: '/img/svg/ellipse4.svg',
+      img: "/img/svg/ellipse4.svg",
-      text: 'Сколько нужно заниматься, чтобы обрести НОВУЮ себя?',
+      text: "Сколько нужно заниматься, чтобы обрести НОВУЮ себя?",
     },
     {
-      img: '/img/svg/ellipse5.svg',
+      img: "/img/svg/ellipse5.svg",
-      text: 'Как выработать стратегию долгосрочных отношений?',
+      text: "Как выработать стратегию долгосрочных отношений?",
     },
     {
-      img: '/img/svg/ellipse6.svg',
+      img: "/img/svg/ellipse6.svg",
-      text: 'Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?',
+      text: "Как добиться того, чтоб парень делал так, как ты хочешь, но думал, что он сам так решил?",
     },
   ],
-})
+});
 </script>

pages/index/_ui/heroBanner/heroBanner.vue

@@ -1,12 +1,7 @@
 <template>
   <section>
     <div class="relative z-50">
-      <img
+      <img src="/assets/img/webp/hero-banner-content.webp" alt="Книги" />
-        src="/assets/img/webp/hero-banner-content.webp"
-        alt="Книги"
-        width="100%"
-        height="100%"
-      />
     </div>
     <div class="flex flex-row justify-between pl-16 pr-24">
       <BuyContent />
@@ -14,5 +9,5 @@
   </section>
 </template>
 <script setup lang="ts">
-import BuyContent from './_ui/buyContent.vue'
+import BuyContent from "./_ui/buyContent.vue";
 </script>

pages/index/_ui/youNotAloneSection/youNotAloneSection.vue

@@ -1,38 +1,37 @@
 <template>
   <section class="flex flex-row">
-    <div class="lg:w-5/12 pl-5 pr-5 shadow-md bg-[url('/assets/img/png/shadow.png')]">
+    <div
-      <UiHeading tag="H2" size="300" class="text-three mb-4 mt-5">
+      class="lg:w-5/12 pl-5 pr-5 shadow-md bg-[url('/assets/img/png/shadow.png')]"
+    >
+      <UiHeading tag="h2" size="300" class="text-three mb-4 mt-5">
         💔 Ты не одна.
         <br />Я знаю, через что ты<br />
         проходишь.
       </UiHeading>
       <UiParagraph size="250" class="xl:max-w-[392px] mb-5"
-        >Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это ранит. Я знаю это
+        >Когда ты снова и снова отдаёшь сердце, а в ответ — тишина или игра, это
-        чувство. Я был по ту сторону: манипулировал, очаровывал, уходил.
+        ранит. Я знаю это чувство. Я был по ту сторону: манипулировал,
+        очаровывал, уходил.
 
         <br /><br />Я — бывший Казанова. И однажды я понял: больше так нельзя.
 
-        <br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена мужская психология,
+        <br /><br />Эти книги — не теория. Это ключ к пониманию, как устроена
-        чего на самом деле хочет мужчина, и как перестать теряться в отношениях.
+        мужская психология, чего на самом деле хочет мужчина, и как перестать
+        теряться в отношениях.
 
-        <br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не прогибаясь, не
+        <br /><br />Я написал их для тебя — чтобы ты могла быть счастливой, не
-        умоляя, не теряя себя. Если ты устала «играть», если хочешь любви по-настоящему — начни с
+        прогибаясь, не умоляя, не теряя себя. Если ты устала «играть», если
-        первой страницы. В этих книгах нет воды. Только правда.</UiParagraph
+        хочешь любви по-настоящему — начни с первой страницы. В этих книгах нет
+        воды. Только правда.</UiParagraph
       >
     </div>
     <div class="lg:w-7/12">
-      <NuxtImg
+      <NuxtImg src="/img/webp/meetingAlone.webp" alt="meeting" loading="lazy" />
-        src="/img/webp/meetingAlone.webp"
-        alt="meeting"
-        width="100%"
-        height="100%"
-        loading="lazy"
-      />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import UiHeading from '@/components/Typography/UiHeading.vue'
+import UiHeading from "@/components/Typography/UiHeading.vue";
-import UiParagraph from '@/components/Typography/UiParagraph.vue'
+import UiParagraph from "@/components/Typography/UiParagraph.vue";
 </script>

pages/privacy/index.vue

@@ -9,7 +9,7 @@
       предоставляют при использовании нашего сайта.</UiParagraph
     >
 
-    <UiHeading size="300" tag="H2">1. Сбор информации</UiHeading>
+    <UiHeading size="300" tag="h2">1. Сбор информации</UiHeading>
     <UiParagraph size="300"
       >При оформлении заказа на сайте вы предоставляете персональные данные,
       которые включают:</UiParagraph
@@ -19,7 +19,7 @@
       <li><UiParagraph size="300">Имя (по желанию)</UiParagraph></li>
     </ul>
 
-    <UiHeading size="300" tag="H2">2. Использование информации</UiHeading>
+    <UiHeading size="300" tag="h2">2. Использование информации</UiHeading>
     <UiParagraph size="300" class="mb-3"
       >Ваши личные данные используются исключительно для:</UiParagraph
     >
@@ -40,7 +40,7 @@
       </li>
     </ul>
 
-    <UiHeading size="300" tag="H2">3. Защита личных данных</UiHeading>
+    <UiHeading size="300" tag="h2">3. Защита личных данных</UiHeading>
     <UiParagraph size="300" class="mb-3">
       Мы предпринимаем необходимые меры для защиты ваших личных данных от
       несанкционированного доступа, изменения, разглашения или уничтожения.
@@ -48,7 +48,7 @@
       участвующие в обработке заказов.
     </UiParagraph>
 
-    <UiHeading size="300" tag="H2"
+    <UiHeading size="300" tag="h2"
       >4. Передача информации третьим лицам</UiHeading
     >
     <UiParagraph size="300" class="mb-3">
@@ -56,14 +56,14 @@
       предусмотренных законодательством Российской Федерации.
     </UiParagraph>
 
-    <UiHeading size="300" tag="H2">5. Cookies (Куки-файлы)</UiHeading>
+    <UiHeading size="300" tag="h2">5. Cookies (Куки-файлы)</UiHeading>
     <UiParagraph size="300" class="mb-3">
       Мы используем файлы cookie, чтобы улучшить ваш пользовательский опыт. Вы
       можете отключить файлы cookie в настройках вашего браузера, однако это
       может ограничить доступ к некоторым функциям сайта.
     </UiParagraph>
 
-    <UiHeading size="300" tag="H2"
+    <UiHeading size="300" tag="h2"
       >6. Изменения в политике конфиденциальности</UiHeading
     >
     <UiParagraph size="300" class="mb-3">
@@ -72,7 +72,7 @@
       странице.
     </UiParagraph>
 
-    <UiHeading size="300" tag="H2">7. Ваше согласие</UiHeading>
+    <UiHeading size="300" tag="h2">7. Ваше согласие</UiHeading>
     <UiParagraph size="300"
       >Используя наш сайт, вы соглашаетесь с условиями данной политики
       конфиденциальности.</UiParagraph