feat(frontend): update preview and add localization

frontend/src/components/HomePage/Preview.vue

@@ -1,24 +1,46 @@
 <script setup lang="ts">
 import ContainerScroll from '@/components/ui/ContainerScroll/ContainerScroll.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { PREVIEW_TABS_DATA } from '@/data/PreviewTabs.data'
 </script>
 
 <template>
   <section>
-    <div class="mb-16 flex flex-col">
-      <ContainerScroll>
-        <template #title>
-          <h1 class="text-6xl font-bold">Какой-то текст</h1>
-        </template>
-        <template #card>
-          <img
-            src="/images/linear.webp"
-            class="mx-auto h-full rounded-2xl object-cover object-left-top"
-            alt="hero"
-            height="3104"
-            width="5480"
-          />
-        </template>
-      </ContainerScroll>
-    </div>
+    <Tabs default-value="home">
+      <div class="mb-16 flex flex-col">
+        <ContainerScroll>
+          <template #title>
+            <TabsList
+              class="flex w-full flex-row gap-1 border border-white/10 bg-black/5 backdrop-blur-sm"
+            >
+              <TabsTrigger
+                v-memo="tab"
+                v-for="tab in PREVIEW_TABS_DATA"
+                :key="tab.value"
+                :value="tab.value"
+              >
+                {{ $t(`previews.${tab.value}`) }}
+              </TabsTrigger>
+            </TabsList>
+          </template>
+          <template #card>
+            <TabsContent
+              v-memo="tab"
+              v-for="tab in PREVIEW_TABS_DATA"
+              :key="tab.value"
+              :value="tab.value"
+            >
+              <img
+                :src="tab.content"
+                class="mx-auto h-full rounded-2xl object-cover object-left-top"
+                alt="hero"
+                height="3104"
+                width="5480"
+              />
+            </TabsContent>
+          </template>
+        </ContainerScroll>
+      </div>
+    </Tabs>
   </section>
 </template>

frontend/src/components/ui/ContainerScroll/ContainerScrollCard.vue

@@ -5,9 +5,9 @@
       boxShadow:
         '0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
     }"
-    class="mx-auto -mt-48 h-[30rem] w-full max-w-5xl rounded-[15px] border border-[#f2f2f2]/10 shadow-2xl md:h-[40rem]"
+    class="mx-auto -mt-48 h-fit w-full max-w-5xl rounded-[15px] border border-[#f2f2f2]/10 shadow-2xl"
   >
-    <div class="size-full overflow-hidden rounded-[15px]">
+    <div class="size-fit overflow-hidden rounded-[15px]">
       <slot></slot>
     </div>
   </div>

frontend/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

frontend/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'radix-vue'
+import { TabsContent } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent :class="cn(props.class)" v-bind="delegatedProps">
+    <slot />
+  </TabsContent>
+</template>

frontend/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'radix-vue'
+import { TabsList } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

frontend/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'radix-vue'
+import { TabsTrigger, useForwardProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-base font-medium text-[#aaaaaa] ring-offset-background transition-all hover:bg-white/10 hover:text-[#f2f2f2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/20 data-[state=active]:text-[#f2f2f2] data-[state=active]:shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

frontend/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

frontend/src/data/PreviewTabs.data.ts

@@ -0,0 +1,27 @@
+export interface PreviewTabsData {
+  value: string
+  content: string
+}
+
+export const PREVIEW_TABS_DATA: PreviewTabsData[] = [
+  {
+    value: 'home',
+    content: '/images/screen.webp',
+  },
+  {
+    value: 'valorant',
+    content: '/images/screen.webp',
+  },
+  {
+    value: 'faceit',
+    content: '/images/screen.webp',
+  },
+  {
+    value: 'music',
+    content: '/images/screen.webp',
+  },
+  {
+    value: 'bot',
+    content: '/images/screen.webp',
+  },
+]

frontend/src/locales/en.json

@@ -16,6 +16,13 @@
       "second": "How does it work?"
     }
   },
+  "previews": {
+    "home": "Home",
+    "valorant": "Valorant",
+    "faceit": "Faceit",
+    "music": "Music",
+    "bot": "Twitch bot"
+  },
   "features": {
     "category": "Features",
     "title": "Everything You Need to Elevate Your Stream",

frontend/src/locales/ru.json

@@ -16,6 +16,13 @@
       "second": "Как это работает?"
     }
   },
+  "previews": {
+    "home": "Домашняя",
+    "valorant": "Valorant",
+    "faceit": "Faceit",
+    "music": "Музыка",
+    "bot": "Twitch бот"
+  },
   "features": {
     "category": "Особенности",
     "title": "Все, что Вам нужно для улучшения Вашего стрима",