Merge pull request #7 from wirenboard/feature/carousel

add carousel

assets/css/globals.css

@@ -6,6 +6,11 @@ body {
   overflow-x: hidden;
 }
 
+*:focus {
+  outline: solid 1px #58B308;
+  outline-offset: 6px;
+}
+
 main {
   text-align: center;
   padding: 0 40px;

assets/css/variables.css

@@ -3,4 +3,12 @@
   --block-bg: #00000033;
   --gradient: linear-gradient(104deg, #58B308 21%, #186F20 100%);
   --border: 1px solid #4d9f0c;
+
+  /* Стилизация слайдера */
+  --vc-nav-background: var(--gradient);
+  --vc-nav-border-radius: 6px;
+  --vc-nav-color: #fff;
+  --vc-nav-color-hover: #fff;
+  --vc-nav-width: 40px;
+  --vc-nav-height: 40px;
 }

nuxt.config.ts

@@ -50,6 +50,7 @@ export default defineNuxtConfig({
   },
   modules: [
     '@nuxtjs/google-fonts',
+    'vue3-carousel-nuxt',
     'vue-yandex-maps/nuxt',
     'yandex-metrika-module-nuxt3',
   ],

package.json

@@ -15,6 +15,7 @@
     "nuxt": "3.14.1592",
     "vue": "3.5.13",
     "vue-yandex-maps": "2.1.4",
+    "vue3-carousel-nuxt": "1.1.5",
     "yandex-metrika-module-nuxt3": "1.5.3"
   },
   "devDependencies": {

src/about.vue

@@ -55,19 +55,19 @@ onMounted(() => {
     <ul class="about-list" ref="list">
       <li class="about-item">
         <div class="about-item-title">Решения автоматизации</div>
-        <div class="about-item-description">От разработчиков ПО, производителей устройств для умных домов, ЖК, коммерческих и промышленных объектов, интеграторов умных домов.</div>
+        <div class="about-item-description">Будут представлены стенды разработчиков ПО, производителей устройств для умных домов, ЖК, коммерческих и промышленных объектов, интеграторов умных домов.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Выступления экспертов</div>
-        <div class="about-item-description">На актуальные темы: сочетание проводных и беспроводных технологий, диспетчеризация и мониторинг, новинки оборудования на рынке автоматизации.</div>
+        <div class="about-item-description">Вместе с Партнерами расскажем о&nbsp;сочетании проводных и&nbsp;беспроводных технологий, диспетчеризации и мониторинге систем и&nbsp;новинках оборудования на&nbsp;рынке автоматизации.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Экскурсия на производство</div>
-        <div class="about-item-description">Вы увидите, как собирают контроллеры и другие устройства для автоматизации.<br />Будет организован бесплатный транспорт каждые 15 минут.</div>
+        <div class="about-item-description">Вы увидите, как собирают контроллеры и&nbsp;другие устройства для автоматизации.<br />Будет организован бесплатный транспорт каждые 15 минут.</div>
       </li>
       <li class="about-item">
         <div class="about-item-title">Подарки и розыгрыш призов</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>
+        <div class="about-item-description">В 2024 году каждый 12 участник получил подарок от Wiren Board и партнеров: различные устройства и&nbsp;сертификаты.<br />Главным призом стал <a href="https://wirenboard.com/ru/product/wiren-board-8_5/" target="_blank">контроллер Wiren Board 8</a>.</div>
       </li>
     </ul>
     <div class="spotlight spotlight-about spotlight-right spotlight-top" />

src/faq.vue

@@ -51,6 +51,7 @@
 }
 
 .faq-question {
+  border-radius: 25px;
   display: flex;
   color: #6AC40B;
   padding: 24px 32px;

src/howitwas.vue

@@ -1,34 +1,71 @@
+<script lang="ts" setup>
+// @ts-ignore
+import { Carousel, Slide, Navigation } from 'vue3-carousel';
+import 'vue3-carousel/carousel.css'
+
+
+const images = Array.from({ length: 9 }, (_, index) => ({
+  id: index + 1,
+  url: `/photo/${index + 1}.jpg`,
+}));
+</script>
+
 <template>
   <article id="howitwas">
     <h2>Как это было в 2024</h2>
 
-    <iframe
-      src="https://peertube.wirenboard.com/videos/embed/7d61e2fd-c522-4abb-9957-257d21ff91e6?title=0&amp;warningTitle=0&amp;p2p=0"
-      class="howitwas-video"
-      frameborder="0"
-      allowfullscreen
-      sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-      title="Как это было: конференция и выставка WBCE 2024"
-      width="560"
-      height="570"
-    />
+    <Carousel class="howitwas-carousel" :transition="800" :gap="24" itemsToShow="auto" wrapAround>
+      <Slide v-for="slide in images" :key="slide">
+        <img :src="slide.url" alt="" class="howitwas-carouselSlide" />
+      </Slide>
+
+      <template #addons>
+        <Navigation />
+      </template>
+    </Carousel>
   </article>
 </template>
 
-<style scoped>
-.howitwas-video {
-  width: 100%;
-  max-width: 813px;
-  border-radius: 40px;
+<style>
+.howitwas-carousel {
+  height: 600px;
 
   @media (max-width: 800px) {
-    height: 500px;
+    height: 400px;
   }
 
   @media (max-width: 500px) {
     height: 300px;
   }
 }
+
+.howitwas-carouselSlide {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 25px;
+
+
+  @media (max-width: 500px) {
+    max-width: 100%;
+    height: 250px;
+  }
+}
+
+.carousel__slide {
+  transition: opacity ease-in 600ms;
+
+  @media (max-width: 500px) {
+    max-width: 100%;
+  }
+}
+
+.carousel__slide--prev,
+.carousel__slide--next {
+  opacity: 0.2;
+
+  @media (max-width: 500px) {
+    opacity: 0;
+  }
+}
 </style>
-<script setup lang="ts">
-</script>

src/main.vue

@@ -5,14 +5,24 @@
       <h1 class="main-title">WBCE 2025</h1>
       <p class="main-subtitle">Выставка и конференция по домашней<br /> и промышленной автоматизации</p>
       <button class="main-register" @click="scrollToElementById('register')">Зарегистрироваться</button>
+
       <p class="main-link">
         <img src="/assets/img/tg.svg" alt="">
         <a href="https://t.me/wbce2025" target="_blank">Подписывайтесь на Telegram-канал WBCE</a>
       </p>
     </div>
-    <div class="main-imageContainer">
-      <img src="/assets/img/main.jpg" class="main-image" alt="WBCE" />
-      <div class="main-imageBg" />
+
+    <div class="main-videoContainer">
+      <iframe
+        title="Как это было: конференция и выставка WBCE 2024"
+        class="main-video"
+        src="https://peertube.wirenboard.com/videos/embed/7d61e2fd-c522-4abb-9957-257d21ff91e6?autoplay=1&amp;muted=1&amp;title=0&amp;warningTitle=0&amp;p2p=0"
+        frameborder="0"
+        allowfullscreen
+        width="100%"
+        height="340"
+        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+      />
     </div>
     <div class="spotlight main-spotlight" />
   </div>
@@ -134,38 +144,23 @@
   }
 }
 
-.main-imageContainer {
+.main-videoContainer {
+  width: 100%;
+  max-width: 600px;
   border-radius: 25px;
   border: var(--border);
   padding: 20px;
   position: relative;
   height: fit-content;
+  margin-top: 70px;
 
   @media (max-width: 900px) {
     display: none;
   }
 }
 
-.main-imageBg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  filter: blur(110px);
-  z-index: -1;
-}
-
-.main-image {
-  border-radius: 14px;
-
-  @media (max-width: 1300px) {
-    max-width: 500px;
-  }
-
-  @media (max-width: 1120px) {
-    max-width: 400px;
-  }
+.main-video {
+  border-radius: 25px;
 }
 
 .main-spotlight {

src/members.vue

@@ -14,12 +14,15 @@
       <img class="members-logo" src="/assets/logo/comfort_life.svg" alt="Comfort life">
       <img class="members-logo" src="/assets/logo/onokom.svg" alt="Onokom">
     </div>
+
     <h2>Отраслевой партнер</h2>
     <div class="members members-one">
       <a href="https://hitechbuilding.ru/" target="_blank">
         <img class="members-logo" src="/assets/logo/htb.svg" alt="HI-TECH Building">
       </a>
     </div>
+
+    <div class="members-contact">Если вы хотите участвовать со стендом или докладом, напишите&nbsp;<a href="https://wirenboard.com/ru/pages/contacts/" target="_blank">нам</a>.</div>
   </article>
   <div class="spotlight" />
 </template>
@@ -69,4 +72,11 @@
     max-width: 160px;
   }
 }
+
+.members-contact {
+  color: #fff;
+  margin-top: 72px;
+  font-size: 24px;
+  line-height: 34px;
+}
 </style>