chore: webinar updates (#198)

Author: hmbanan666

apps/webinar/app/components/Countdown.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="bg-elevated bg-cover" style="background-image: url('/countdown-background.jpg');">
+  <div class="relative overflow-hidden bg-black/40">
+    <div class="-z-10 absolute inset-0 -left-4 w-11/10 h-full bg-cover blur-[5px]" style="background-image: url('/countdown-bg.jpg');" />
     <UPageSection
       title="Получить готовый план"
       description="И ответы на все свои вопросы, от поиска помещения до первого заработка. Мероприятие будет доступно через:"

apps/webinar/app/components/Footer.vue

@@ -1,12 +1,8 @@
 <template>
   <UFooter :ui="{ top: 'border-b border-muted/50' }">
     <template #top>
-      <UContainer>
-        <div class="w-full grid grid-cols-1 lg:grid-cols-3 gap-4 items-center justify-center">
-          <div class="mx-auto md:mx-0 mb-2 md:mb-0">
-            <Logo />
-          </div>
-
+      <UContainer class="max-w-2xl">
+        <div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-4 items-center justify-center">
           <UButton
             v-for="item in items"
             :key="item.to"

apps/webinar/app/components/Hero.vue

@@ -30,13 +30,13 @@
 <script setup lang="ts">
 const links = ref([
   {
-    label: 'Зарегистрироваться через Telegram',
+    label: 'Зарегистрироваться',
     to: 'https://t.me/SLFranchiseBot',
     target: '_blank',
     trailingIcon: 'simple-icons:telegram',
     color: 'secondary' as const,
     ui: {
-      base: 'px-6 md:text-xl w-full md:w-fit',
+      base: 'px-6 md:px-12 md:text-xl text-xl font-bold w-full md:w-fit justify-center',
     },
   },
 ])

apps/webinar/app/components/SpeakerCard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col gap-3.5 motion-preset-slide-up">
-    <div class="shrink-0 w-full h-auto text-muted bg-muted rounded-lg aspect-square">
-      <img
-        :src="speaker.image"
-        alt=""
-        class="w-full h-full object-cover rounded-lg"
-      >
+    <div class="shrink-0 relative w-full h-auto aspect-square">
+      <div class="w-full h-full bg-secondary mask-[url(/heart-fill.svg)] mask-origin-fill mask-cover mask-center -rotate-4" />
+      <div
+        class="absolute inset-0 shrink-0 w-9/12 mx-auto my-auto aspect-square bg-cover -rotate-2"
+        :style="`background-image: url(${speaker.image});`"
+      />
     </div>
 
     <div class="flex flex-col gap-2">

apps/webinar/app/components/Speakers.vue

@@ -25,19 +25,19 @@ const speakers = ref([
     name: 'Лидия Трошина',
     caption: 'Директор по маркетингу франшизы «Суши Love»',
     description: 'Покажет стратегии по привлечению гостей работающие в 2025 году',
-    image: '/speaker-1.jpg',
+    image: '/speaker-1.png',
   },
   {
     name: 'Татьяна Панасевич',
     caption: 'Основатель сети суши-баров «Суши Love»',
     description: 'Открыла более 100 заведений, ответит на все ваши вопросы',
-    image: '/speaker-2.jpg',
+    image: '/speaker-2.png',
   },
   {
     name: 'Анна Михалко',
     caption: 'Наставник партнеров и эксперт по открытию новых точек франшизы',
     description: 'Даст пошаговый план открытия, который используют все наши партнеры',
-    image: '/speaker-3.jpg',
+    image: '/speaker-3.png',
   },
 ])
 </script>

apps/webinar/app/pages/index.vue

@@ -11,20 +11,25 @@
     :reverse="true"
     :features="firstSectionItems"
   >
-    <div class="p-4 w-full h-full min-h-56 text-muted bg-muted rounded-lg motion-preset-slide-right">
-      Тут фото?
-    </div>
+    <div
+      class="w-full h-fit aspect-3/2 min-h-56 text-muted bg-cover rounded-lg motion-preset-slide-right"
+      style="background-image: url('/bg-1.jpg');"
+    />
   </UPageSection>
 
   <UPageSection
     title="Что вы узнаете на вебинаре?"
     description="За 1,5 часа вы получите готовый план действий"
     orientation="horizontal"
     :features="secondSectionItems"
+    :ui="{
+      container: 'lg:pt-0',
+    }"
   >
-    <div class="p-4 w-full h-full min-h-56 text-muted bg-muted rounded-lg motion-preset-slide-left">
-      Тут фото?
-    </div>
+    <div
+      class="w-full h-fit aspect-3/2 min-h-56 text-muted bg-cover rounded-lg motion-preset-slide-left"
+      style="background-image: url('/bg-2.jpg');"
+    />
   </UPageSection>
 
   <Countdown />
@@ -33,6 +38,8 @@
   <Results />
   <Questions />
 
+  <InfiniteTitlesDivider />
+
   <Footer />
 </template>