Merge pull request #2 from wirenboard/feature/additions

fix template, add ya metrics
wirenboard · Dec 25, 2024 · 500dd6e · 500dd6e
2 parents 81a01e8 + 9af44d5
commit 500dd6e
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,23 @@
+# wb-wbce
+
+WBCE exhibition website
+
+## Requirements
+
+- [Node.js 18+](https://nodejs.org/en/download/package-manager)
+- [pnpm](https://pnpm.io/installation)
+
+## Quickstart
+
+1. Install dependencies `pnpm install`
+2. Start watch server `pnpm run dev`. It'll rebuild frontend on file change
+3. Open your browser, navigate to [localhost:3000](https://localhost:3000/)
+
+## Deployment
+
+Just merge code to `main` branch.
+
+## Additional info
+
+- Code is written in Vue 3 and Typescript, Composition API is widely used
 
diff --git a/app.vue b/app.vue
@@ -13,7 +13,7 @@ import Place from '~/src/place.vue';
 
 <template>
   <Head>
-    <Title>WBCE 2025</Title>
+    <Title>Конференция WBCE 2025</Title>
   </Head>
   <main>
     <Navigation />

diff --git a/assets/css/globals.css b/assets/css/globals.css
@@ -12,7 +12,6 @@ main {
   max-width: 1280px;
   margin: 0 auto;
   font-size: 18px;
-  line-height: 24px;
   font-family: 'Ubuntu', sans-serif;
 
   @media (max-width: 1024px) {
@@ -35,7 +34,7 @@ a:hover {
 
 h2 {
   font-size: 60px;
-  margin-bottom: 76px;
+  margin: 40px 0 68px;
   color: #fff;
 
   @media (max-width: 1024px) {
@@ -49,7 +48,6 @@ h2 {
 
   @media (max-width: 620px) {
     text-align: left;
-    line-height: 38px;
   }
 }
 
@@ -73,6 +71,11 @@ button:hover {
   background: linear-gradient(103.91deg, #6AC40B 21.01%, #186F20 100%);
 }
 
+details summary::marker,
+details summary::-webkit-details-marker {
+  display: none !important;
+}
+
 .spotlight {
   background: #6AC40B;
   filter: blur(70px);

diff --git a/assets/img/map.png b/assets/img/map.png
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -5,19 +5,31 @@ export default defineNuxtConfig({
       link: [
         {
           rel: 'icon',
-          type: 'image/webp',
-          href: '/favicon.webp',
+          type: 'image/svg+xml',
+          href: '/favicon.svg',
         }
       ],
       meta: [
         {
           property: 'og:title',
           content: 'Выставка WBCE 2025'
         },
+        {
+          property: 'og:site_name',
+          content: 'Wiren Board WBCE'
+        },
+        {
+          property: 'description',
+          content: 'Выставка и конференция по домашней и промышленной автоматизации'
+        },
         {
           property: 'og:description',
           content: 'Выставка и конференция по домашней и промышленной автоматизации'
         },
+        {
+          property: 'keywords',
+          content: 'Конференция умный дом, выставка автоматизация, выставка промышленной автоматизации'
+        },
         {
           property: 'og:image',
           content: '/og_image.png'
@@ -29,7 +41,11 @@ export default defineNuxtConfig({
     '~/assets/css/variables.css',
     '~/assets/css/globals.css',
   ],
-  modules: ['@nuxtjs/google-fonts', 'vue-yandex-maps/nuxt'],
+  modules: [
+    '@nuxtjs/google-fonts',
+    'vue-yandex-maps/nuxt',
+    'yandex-metrika-module-nuxt3',
+  ],
   googleFonts: {
     families: {
       Ubuntu: true,
@@ -39,4 +55,10 @@ export default defineNuxtConfig({
   yandexMaps: {
     apikey: '1614c77e-4da5-4e31-b9e1-9dbaf4d4c80e',
   },
+  yandexMetrika: {
+    id: '99316061',
+    trackLinks: true,
+    accurateTrackBounce: true,
+    webvisor: true,
+  }
 })
diff --git a/package.json b/package.json
@@ -14,10 +14,12 @@
     "gsap": "3.12.5",
     "nuxt": "3.14.1592",
     "vue": "3.5.13",
-    "vue-yandex-maps": "2.1.4"
+    "vue-yandex-maps": "2.1.4",
+    "yandex-metrika-module-nuxt3": "1.5.3"
   },
   "devDependencies": {
-    "@yandex/ymaps3-types": "1.0.15505218"
+    "@yandex/ymaps3-types": "1.0.15505218",
+    "postcss": "8.4.35"
   },
   "packageManager": "[email protected]+sha512.67f5879916a9293e5cf059c23853d571beaf4f753c707f40cb22bed5fb1578c6aad3b6c4107ccb3ba0b35be003eb621a16471ac836c87beb53f9d54bb4612724"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      browsers: ['last 4 versions', 'iOS >= 8']
+    }
+  },
+};
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/favicon.webp b/public/favicon.webp
diff --git a/public/timepad.css b/public/timepad.css
@@ -41,6 +41,10 @@ body {
     font-size: 24px !important;
     font-weight: 100 !important;
     color: #fff !important;
+
+    @media (max-width: 600px) {
+        font-size: 18px !important;
+    }
 }
 
 .tpwf-loader-caption,

diff --git a/src/about.vue b/src/about.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { onMounted, ref } from 'vue';
 
 gsap.registerPlugin(ScrollTrigger);
 const list = ref();
@@ -56,19 +55,19 @@ onMounted(() => {
     <ul class="about-list" ref="list">
       <li class="about-item">
         <div class="about-item-title">Решения автоматизации</div>
-        <div>От разработчиков ПО, производителей устройств для умных домов, ЖК, коммерческих и промышленных объектов, интеграторов умных домов.</div>
+        <div class="about-item-description">От разработчиков ПО, производителей устройств для умных домов, ЖК, коммерческих и промышленных объектов, интеграторов умных домов.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Выступления экспертов</div>
-        <div>На актуальные темы: сочетание проводных и беспроводных технологий, диспетчеризация и мониторинг, новинки оборудования на рынке автоматизации.</div>
+        <div class="about-item-description">На актуальные темы: сочетание проводных и беспроводных технологий, диспетчеризация и мониторинг, новинки оборудования на рынке автоматизации.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Экскурсия на производство</div>
-        <div>Вы увидите, как собирают контроллеры и другие устройства для автоматизации.<br />Будет организован бесплатный транспорт каждые 15 минут.</div>
+        <div class="about-item-description">Вы увидите, как собирают контроллеры и другие устройства для автоматизации.<br />Будет организован бесплатный транспорт каждые 15 минут.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Подарки и розыгрыш призов</div>
-        <div>В 2024 году каждый 12 участник получил подарок от Wiren Board и партнеров: различные устройства и сертификаты.<br />Главным призом стал <a href="https://wirenboard.com/ru/product/wiren-board-8_5/" target="_blank">контроллер Wiren Board 8</a>.</div>
+        <div class="about-item-description">В 2024 году каждый 12 участник получил подарок от Wiren Board и партнеров: различные устройства и сертификаты.<br />Главным призом стал <a href="https://wirenboard.com/ru/product/wiren-board-8_5/" target="_blank">контроллер Wiren Board 8</a>.</div>
       </li>
     </ul>
     <div class="spotlight" />
@@ -142,4 +141,10 @@ onMounted(() => {
     font-size: 22px;
   }
 }
+
+.about-item-description {
+  @media (max-width: 700px) {
+    line-height: 28px;
+  }
+}
 </style>
diff --git a/src/faq.vue b/src/faq.vue
@@ -48,6 +48,7 @@
 }
 
 .faq-question {
+  display: flex;
   color: #6AC40B;
   padding: 24px 32px;
   font-size: 24px;

diff --git a/src/main.vue b/src/main.vue
@@ -30,6 +30,7 @@
 
   @media (max-width: 550px) {
     padding: 24px;
+    background: url("/assets/img/video_poster.jpg");
   }
 }
 
@@ -40,6 +41,11 @@
   min-height: 100%;
   position: absolute;
   z-index: -2;
+  border-radius: 36px;
+
+  @media (max-width: 550px) {
+    display: none;
+  }
 }
 
 .main-video-bg {
@@ -49,10 +55,15 @@
   z-index: -1;
   top: 0;
   left: 0;
-  background: #7ba500;
   filter: saturate(0.8);
   mix-blend-mode: color;
+  background: rgb(123 165 0);
+  background-size: 100% 100%;
   opacity: 0.4;
+
+  @media (max-width: 550px) {
+    z-index: 1;
+  }
 }
 
 .main-date {
@@ -81,6 +92,7 @@
   font-weight: 900;
   line-height: 135px;
   max-width: 640px;
+  text-shadow: 0 1px 22px #000;
 
   @media (max-width: 1300px) {
     font-size: 100px;
@@ -107,6 +119,7 @@
   font-size: 24px;
   margin-bottom: 18px;
   line-height: 34px;
+  text-shadow: 0 1px 2px #000;
 
   @media (max-width: 1300px) {
     font-size: 18px;