chore: visual rework (#188)

Author: hmbanan666

apps/webinar/app/app.config.ts

@@ -15,6 +15,7 @@ export default defineAppConfig({
         },
         color: {
           secondary: '!text-white disabled:!bg-inverted/25',
+          orange: '!bg-[#f57e20] hover:!bg-orange-500 !text-white disabled:!bg-inverted/25',
         },
       },
     },

apps/webinar/app/components/Countdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-accented">
+  <div class="bg-elevated">
     <UPageSection
       title="Получить готовый план"
       description="И ответы на все свои вопросы, от поиска помещения до первого заработка. Мероприятие будет доступно через:"
@@ -18,9 +18,13 @@
           <UButton
             to="https://t.me/SLFranchiseBot"
             variant="solid"
+            color="orange"
             size="xl"
             label="Зарегистрироваться"
             icon="i-lucide-calendar-plus"
+            :ui="{
+              base: 'bg-[#f57e20] text-white',
+            }"
             class="mt-12 w-full justify-center"
           />
           <p class="px-6 mt-2 text-center text-sm">

apps/webinar/app/components/CountdownTimerItem.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="px-2 md:px-5 py-4 min-w-18 md:min-w-24 bg-default rounded-lg flex flex-col items-center">
-    <h3 class="text-3xl font-bold">
+  <div class="px-2 md:px-5 py-4 min-w-18 md:min-w-24 bg-inverted rounded-lg flex flex-col items-center">
+    <h3 class="text-3xl font-bold text-inverted">
       {{ value }}
     </h3>
-    <span class="text-sm text-muted">
+    <span class="text-sm text-dimmed">
       {{ label }}
     </span>
   </div>

apps/webinar/app/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <UContainer class="mt-10 flex flex-col md:flex-row gap-y-6 items-center justify-between">
+  <UContainer class="mt-4 md:mt-10 flex flex-row gap-2 items-center justify-between">
     <Logo />
     <SocialButtons />
   </UContainer>

apps/webinar/app/components/HeroVideo.vue

@@ -1,9 +1,30 @@
 <template>
-  <video
-    controls
-    class="max-h-180 w-auto mx-auto rounded-xl motion-preset-slide-left"
-  >
-    <source src="https://storage.yandexcloud.net/sushi-love-test/telegram/files/BAACAgIAAxkBAAOFaMwda7U9ddiws5ZJ4oIbaeSlw0YAAvWDAAJt32BKU94XDWZ9cCg2BA.mp4" type="video/mp4">
-    Ваш браузер не поддерживает видео
-  </video>
+  <div class="w-full">
+    <div
+      v-if="!isVideoShown"
+      class="shrink-0 w-full h-full bg-muted rounded-lg aspect-square flex flex-col items-center justify-center hover:scale-98 active:scale-95 duration-200 cursor-pointer motion-preset-slide-left"
+      @click="isVideoShown = true"
+    >
+      <div class="py-4 px-6 flex flex-col gap-2 items-center justify-center text-muted bg-accented/25 rounded-lg">
+        <UIcon name="i-lucide-play" class="size-18" />
+        <h3 class="text-xl font-semibold">
+          Посмотреть видео
+        </h3>
+      </div>
+    </div>
+
+    <video
+      v-else
+      controls
+      autoplay
+      class="mx-auto max-h-140 rounded-xl motion-preset-slide-right"
+    >
+      <source src="https://storage.yandexcloud.net/sushi-love-test/telegram/files/BAACAgIAAxkBAAOFaMwda7U9ddiws5ZJ4oIbaeSlw0YAAvWDAAJt32BKU94XDWZ9cCg2BA.mp4" type="video/mp4">
+      Ваш браузер не поддерживает видео
+    </video>
+  </div>
 </template>
+
+<script setup lang="ts">
+const isVideoShown = ref(false)
+</script>

apps/webinar/app/components/SpeakerCard.vue

@@ -6,7 +6,7 @@
       class="w-full"
     > -->
 
-    <div class="shrink-0 p-4 w-full h-auto text-muted bg-accented rounded-lg aspect-square">
+    <div class="shrink-0 p-4 w-full h-auto text-muted bg-muted rounded-lg aspect-square">
       Фото?
     </div>
 

apps/webinar/app/pages/index.vue

@@ -10,7 +10,7 @@
     :reverse="true"
     :features="firstSectionItems"
   >
-    <div class="p-4 w-full h-full min-h-56 text-muted bg-accented rounded-lg motion-preset-slide-right">
+    <div class="p-4 w-full h-full min-h-56 text-muted bg-muted rounded-lg motion-preset-slide-right">
       Тут фото?
     </div>
   </UPageSection>
@@ -21,7 +21,7 @@
     orientation="horizontal"
     :features="secondSectionItems"
   >
-    <div class="p-4 w-full h-full min-h-56 text-muted bg-accented rounded-lg motion-preset-slide-left">
+    <div class="p-4 w-full h-full min-h-56 text-muted bg-muted rounded-lg motion-preset-slide-left">
       Тут фото?
     </div>
   </UPageSection>