Merge pull request #4 from wirenboard/feature/styles

change styles

assets/css/globals.css

@@ -3,6 +3,7 @@ body {
   height: 100dvh;
   padding: 0;
   margin: 0;
+  overflow-x: hidden;
 }
 
 main {
@@ -105,3 +106,7 @@ details summary::-webkit-details-marker {
 .spotlight-right {
   right: 0;
 }
+
+.spotlight-top {
+  top: 450px;
+}

assets/css/variables.css

@@ -1,5 +1,5 @@
 :root {
-  --bg: #33313B;
+  --bg: #1A211C;
   --block-bg: #00000033;
   --gradient: linear-gradient(104deg, #58B308 21%, #186F20 100%);
   --border: 1px solid #4d9f0c;

public/timepad.css

@@ -147,7 +147,8 @@ input[type="text"] {
 }
 
 .b-input-block input[type="text"] {
-    background: #3c3a45 !important;
+    background: #161A16 !important;
+    border: 1px solid #4d9f0c !important;
 }
 
 .b-reg-row .b-unit__text {

src/about.vue

@@ -49,7 +49,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <article id="about">
+  <article id="about" class="about-container">
     <h2>Что будет на WBCE</h2>
 
     <ul class="about-list" ref="list">
@@ -70,11 +70,15 @@ onMounted(() => {
         <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" />
+    <div class="spotlight spotlight-about spotlight-right spotlight-top" />
   </article>
 </template>
 
 <style>
+.about-container {
+  position: relative;
+}
+
 .about-list {
   position: relative;
   padding: 0;
@@ -86,7 +90,7 @@ onMounted(() => {
 
 .about-item {
   border: var(--border);
-  background: #29272e;
+  background: #161A16;
   color: #fff;
   margin-bottom: 76px;
   border-radius: 25px;
@@ -147,4 +151,9 @@ onMounted(() => {
     line-height: 28px;
   }
 }
+
+.spotlight-about {
+  transform: scaleY(0.7);
+  right: -150px;
+}
 </style>

src/faq.vue

@@ -1,5 +1,5 @@
 <template>
-  <article id="faq">
+  <article id="faq" class="faq-container">
     <h2>Часто задаваемые вопросы</h2>
 
     <div class="faq-content">
@@ -33,12 +33,15 @@
         <div class="faq-answer">Да, есть бесплатная парковка.</div>
       </details>
     </div>
+    <div class="spotlight" />
   </article>
-
-  <div class="spotlight" />
 </template>
 
 <style scoped>
+.faq-container {
+  position: relative;
+}
+
 .faq-details {
   text-align: left;
   border-radius: 25px;

src/history.vue

@@ -5,7 +5,7 @@
     <div class="history-content">
       <img src="/assets/img/history.jpg" class="history-image" alt="Фото с конференции" />
       <div>
-        <p>В 2021 году компания Wiren Board провела камерное мероприятие для своих под названием WBCE, чтобы пообщаться с партнерами и клиентами вживую.</p>
+        <p>В 2022 году компания Wiren Board провела камерное мероприятие для своих под названием WBCE, чтобы пообщаться с партнерами и клиентами вживую.</p>
         <p>В итоге было больше 400 человек: приехали производители оборудования, разработчики ПО, интеграторы и энтузиасты умных домов из Екатеринбурга, Иркутска, Минска и даже Владивостока и Астаны.</p>
         <p>Тогда было решено масштабировать мероприятие, и за два года выставка превратилась в одну из крупнейших в России.</p>
         <button @click="scrollToElementById('register')">Зарегистрироваться</button>
@@ -16,7 +16,6 @@
       </div>
     </div>
   </article>
-  <div class="spotlight" />
 </template>
 
 <style scoped>

src/howitwas.vue

@@ -13,7 +13,6 @@
       height="570"
     />
   </article>
-  <div class="spotlight spotlight-right" />
 </template>
 
 <style scoped>

src/main.vue

@@ -1,75 +1,42 @@
 <template>
   <div class="main-container">
-    <time class="main-date" datetime="2025-17-04">17 – 18 апреля / Москва</time>
-    <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 class="main-video-bg"></div>
-    <video class="main-video" autoplay loop muted poster="/assets/img/video_poster.jpg">
-      <source src="/assets/video/main.mp4" type="video/mp4">
-    </video>
+    <div>
+      <time class="main-date" datetime="2025-17-04">17 – 18 апреля / Москва</time>
+      <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>
+    <div class="spotlight main-spotlight" />
   </div>
 </template>
 
 <style>
 .main-container {
+  position: relative;
   border-radius: 36px;
   color: #fff;
   text-align: left;
-  padding: 90px 52px;
-  position: relative;
-  overflow: hidden;
+  padding: 60px 0;
+  display: flex;
+  justify-content: space-between;
 
   @media (max-width: 1300px) {
-    padding: 40px;
-  }
-
-  @media (max-width: 550px) {
-    padding: 24px;
-    background: url("/assets/img/video_poster.jpg");
+    padding: 40px 18px;
   }
 
   @media (max-width: 290px) {
     padding: 24px 18px;
   }
 }
 
-.main-video {
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  min-height: 100%;
-  position: absolute;
-  z-index: -2;
-  border-radius: 36px;
-
-  @media (max-width: 550px) {
-    display: none;
-  }
-}
-
-.main-video-bg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  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 {
   background: var(--gradient);
   padding: 10px 24px;
@@ -100,7 +67,6 @@
   font-weight: 900;
   line-height: 135px;
   max-width: 640px;
-  text-shadow: 0 1px 22px #000;
 
   @media (max-width: 1300px) {
     font-size: 100px;
@@ -167,4 +133,44 @@
     padding: 4px 16px;
   }
 }
+
+.main-imageContainer {
+  border-radius: 25px;
+  border: var(--border);
+  padding: 20px;
+  position: relative;
+  height: fit-content;
+
+  @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-spotlight {
+  top: 210px;
+  left: 35%;
+  opacity: 0.25;
+}
 </style>

src/navigation.vue

@@ -18,7 +18,8 @@ const toggleMenu = () => {
       <li class="navigation-item"><a @click="scrollToElementById('place')">Место</a></li>
     </ul>
     <button class="navigation-menu" @click="toggleMenu">
-      <img src="/assets/img/menu.svg" alt="Меню">
+      <img src="/assets/img/close.svg" alt="Меню" v-if="isMenuOpened">
+      <img src="/assets/img/menu.svg" alt="Меню" v-else>
     </button>
     <div class="navigation-background"></div>
   </nav>
@@ -89,11 +90,30 @@ const toggleMenu = () => {
   align-items: center;
 }
 
+@media (max-width: 830px) {
+  .navigation-item {
+    margin-bottom: 12px;
+  }
+
+  .navigation-item:before {
+    background: #B9F28B;
+    width: 3px;
+    height: 18px;
+    content: '';
+    display: block;
+    margin-right: 12px;
+  }
+}
+
 .navigation-item {
   display: flex;
   align-items: center;
 }
 
+.isMenuOpened {
+  padding-top: 48px !important;
+}
+
 .navigation ul:not(.isMenuOpened) .navigation-item {
   @media (max-width: 830px) {
     display: none;

src/place.vue

@@ -51,7 +51,7 @@ const icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAB8CAYAAACbksWf
 
       <div>
         <div class="place-name">Отель «Виноградово»</div>
-        <a href="https://yandex.ru/maps/-/CHQZzVnI" target="_blank">г. Долгопрудный, Дмитровское&nbsp;шоссе,&nbsp;171</a>
+        <a href="https://yandex.ru/maps/-/CHQZzVnI" target="_blank">г. Москва, Дмитровское&nbsp;шоссе,&nbsp;171</a>
         <div class="place-description">
           <p>От метро Физтех: на бесплатной маршрутке с табличкой WBCE или на автобусе 763, 273, 302, или 572m до остановки «Виноградово».</p>
           <p>От метро Алтуфьево: на автобусе 586, 273, 352, 302 или 572 до остановки «Виноградово».</p>

src/themes.vue

@@ -1,5 +1,5 @@
 <template>
-  <article id="themes">
+  <article id="themes" class="themes-container">
     <h2>Тематика выступлений</h2>
 
     <ul class="themes-content">
@@ -30,11 +30,15 @@
         Автоматизация<br />многоквартирных домов
       </li>
     </ul>
+    <div class="spotlight spotlight-themes" />
   </article>
-  <div class="spotlight spotlight-right" />
 </template>
 
 <style scoped>
+.themes-container {
+  position: relative;
+}
+
 .themes-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -65,4 +69,9 @@
   gap: 24px;
   align-items: center;
 }
+
+.spotlight-themes {
+  bottom: -400px;
+  left: -150px
+}
 </style>