update logo

src/components/BaseLogo.vue

@@ -1,38 +1,76 @@
 <template>
-  <div 
-    class="flex row items-center no-wrap logo-component"
-    >
-    <img
-      src="src/assets/logo.svg"
-      style="height: 24px; max-width: 24px; padding-right: 4px;"
+  <div class="flex row items-center no-wrap logo-component">
+    <LogoIcon
+      v-bind="$attrs"
+      class="logo-svg" 
+      :class="{ 
+        'is-animated': animated, 
+        'hide-bg': !withBackground
+      }"
+      :style="{ color: iconColor }"
     />
 
-    <span
-      class="text-brand"
-      style="margin-right: 0.05em;"
+    <div
+      :class="'text-' + textColor"
+      class="logo-text"
+      style="margin-left: 0.05em;"
       >
-      tg
-    </span>
-
-    <span class="text-brand text-bold">
-      Crew
-    </span>
+      <span>tg</span>
+      <span class="text-bold">Crew</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+  import LogoIcon from 'components/BaseLogoSvg.vue'
+  interface Props {
+    textColor?: string
+    iconColor?: string
+    withBackground?: boolean
+    animated?: boolean
+  }
+
+  withDefaults(defineProps<Props>(), {
+    textColor: 'primary',
+    iconColor: 'white',
+    withBackground: true,
+    animated: true
+  })
 </script>
 
 <style lang="scss" scoped>
-  .logo-component {
-    svg {
-      width: 1em;
-      height: 1em;
-      margin-right: 0.125em;
+  .logo-svg {
+    height: 1em;
+    width: 1em;
+
+    :deep(.logo-bg) {
+      transition: opacity 0.3s;
     }
 
-    span {
-      line-height: 1;
+    &.hide-bg :deep(.logo-bg) {
+      display: none;
+    }
+
+    :deep(.x), :deep(.c) { 
+      transform-box: fill-box; 
+    }
+    
+    &.is-animated {
+      :deep(.x) { animation: expand-r 6s ease-in-out infinite; }
+      :deep(.c) { animation: o 6s ease-in-out infinite; }
+      :deep(.l) {
+        stroke-dasharray: 1; 
+        stroke-dashoffset: 1;
+        stroke-width: 1.5;
+        animation: draw 6s ease-in-out infinite;
+      }
     }
   }
+
+  @keyframes expand-r { 50% { r: 8px; } }
+  @keyframes o { 50% { transform: var(--t); } }
+  @keyframes draw {
+    0%, 100% { stroke-dashoffset: 0; }
+    50% { stroke-dashoffset: 1; }
+  }
 </style>

src/components/BaseLogoSvg.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg 
+    viewBox="0 0 32 32" 
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <defs>
+      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-gradient">
+        <stop stop-color="#2AABEE" offset="0%"></stop>
+        <stop stop-color="#229ED9" offset="100%"></stop>
+      </linearGradient>
+    </defs>
+
+    <rect class="logo-bg" width="32" height="32" rx="4" ry="4" fill="url(#logo-gradient)" />
+    
+    <circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)" fill="currentColor" />
+    <circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)" fill="currentColor" />
+    <circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)" fill="currentColor" />
+    <circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)" fill="currentColor" />
+    <circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)" fill="currentColor" />
+    
+    <line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1" stroke="currentColor" />
+    <line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1" stroke="currentColor" />
+    <line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1" stroke="currentColor" />
+    <line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1" stroke="currentColor" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+  defineOptions({
+    inheritAttrs: false
+  })
+</script>

src/components/FAQSectionItem.vue

@@ -49,5 +49,4 @@
     transition: transform 0.3s ease;
     transform: rotate(0deg);
   }
-
 </style>

src/components/HeroBanner.vue

@@ -23,7 +23,7 @@
         @canplay="$event.target.playbackRate = 0.5"
       />
       <div
-        class="column items-center"
+        class="column items-center no-wrap"
         style="max-width: 75%; height: 100%; z-index: 10;" >
         <div
           class="column justify-end text-grey-4 text-center edge-block"

src/css/app.scss

@@ -16,6 +16,7 @@ body, html, #q-app {
   font-family: $typography-font-family;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 * {