feat(frontend): rework header, content scroll

ValoryLabs · Mar 3, 2025 · 36c4639 · 36c4639
1 parent 0a7929c
commit 36c4639
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 27 deletions.
diff --git a/frontend/src/components/HomePage/Features.vue b/frontend/src/components/HomePage/Features.vue
@@ -3,9 +3,9 @@ import { hidden } from '@/utils.js'
 </script>
 
 <template>
-  <section id="features" class="container flex flex-col items-center justify-center gap-10">
+  <section id="features" class="container mb-20 flex flex-col items-center justify-center gap-12">
     <div class="flex flex-col items-center gap-6">
-      <span class="inline-block text-xs font-bold uppercase text-[#5AB2F7]">
+      <span class="inline-block text-sm font-bold uppercase text-[#5AB2F7]">
         {{ $t('features.category') }}
       </span>
       <span class="text-center text-2xl font-bold uppercase">

diff --git a/frontend/src/components/HomePage/FreeUse.vue b/frontend/src/components/HomePage/FreeUse.vue
@@ -3,7 +3,7 @@ import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
 </script>
 
 <template>
-  <section class="container relative flex flex-col items-center">
+  <section class="container relative mb-20 flex flex-col items-center">
     <div
       class="bg-white/2 container relative z-10 flex flex-col items-center gap-8 overflow-hidden rounded-2xl border border-white/20 px-12 py-24 backdrop-blur-[8px]"
     >
@@ -13,7 +13,7 @@ import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
         <br />of their broadcasts with using our tools.
       </span>
       <InteractiveHoverButton text="Let's start!" size="lg" class="w-[11rem] text-base" />
-      <div class="absolute -bottom-32 rounded-full bg-blue-400 px-96 py-20 blur-[160px]"></div>
+      <div class="bg-gradient absolute left-0 rounded-full p-64 blur-[160px]"></div>
     </div>
     <div
       class="bg-white/2 absolute -bottom-6 w-[80%] rounded-2xl border border-white/10 px-12 py-5 backdrop-blur-[8px]"
@@ -23,3 +23,16 @@ import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
     ></div>
   </section>
 </template>
+
+<style scoped>
+.bg-gradient {
+  background-color: rgb(122, 175, 255);
+  background-image:
+    radial-gradient(at 0% 0%, rgb(122, 175, 255) 0px, transparent 50%),
+    radial-gradient(at 68% 47%, rgb(98, 80, 255) 0px, transparent 50%),
+    radial-gradient(at 10% 67%, rgb(54, 255, 174) 0px, transparent 50%),
+    radial-gradient(at 62% 19%, rgb(153, 98, 255) 0px, transparent 50%),
+    radial-gradient(at 70% 29%, rgb(36, 255, 167) 0px, transparent 50%),
+    radial-gradient(at 67% 5%, rgb(255, 128, 113) 0px, transparent 50%);
+}
+</style>
diff --git a/frontend/src/components/HomePage/Main.vue b/frontend/src/components/HomePage/Main.vue
@@ -38,7 +38,7 @@ const triggerConfetti = () => {
 </script>
 
 <template>
-  <section id="main" class="relative mt-[-5rem] flex h-dvh items-center justify-center">
+  <section id="main" class="relative flex h-dvh items-center justify-center">
     <div class="relative flex flex-col items-center justify-center gap-9">
       <Sparkles
         :colors="{ first: '#ffffff', second: '#ffffff' }"
@@ -54,7 +54,7 @@ const triggerConfetti = () => {
           {{ $t('main.discord') }}
         </span>
       </Sparkles>
-      <span class="whitespace-pre-line text-center text-5xl text-[100px] font-black uppercase">
+      <span class="whitespace-pre-line text-center text-5xl text-[90px] font-black uppercase">
         {{ $t('main.title') }}
       </span>
       <span class="whitespace-pre-line text-center text-xl font-light">
@@ -64,20 +64,20 @@ const triggerConfetti = () => {
         <Button @click="$router.push('/dashboard')" class="h-14 min-w-[240px] rounded-xl text-lg">
           {{ $t('main.buttons.first') }}
         </Button>
-        <Button variant="ghost" class="h-14 min-w-[240px] rounded-xl text-lg">
+        <Button variant="alternative" class="h-14 min-w-[240px] rounded-xl text-lg">
           {{ $t('main.buttons.second') }}
           <Stars02 :size="16" />
         </Button>
       </span>
     </div>
     <div
-      class="absolute -bottom-96 -z-10 h-[90dvh] w-[80dvw] rounded-full bg-[#0046ff]/50 blur-[160px]"
+      class="animate-fade absolute -bottom-96 -z-10 h-[90dvh] w-[80dvw] rounded-full bg-[#0046ff] opacity-50 blur-[160px]"
     ></div>
     <div
-      class="absolute -bottom-96 -z-10 h-[500px] w-full rounded-full bg-[#2e3e75] blur-[160px]"
+      class="animate-fade-2 absolute -bottom-96 -z-10 h-[500px] w-full rounded-full bg-[#2e3e75] opacity-50 blur-[160px]"
     ></div>
     <div
-      class="absolute -bottom-96 -z-10 h-[300px] w-[70dvw] rounded-full bg-[#f2f2f2]/20 blur-[160px]"
+      class="animate-fade-2 absolute -bottom-96 -z-10 h-[300px] w-[70dvw] rounded-full bg-[#f2f2f2]/20 blur-[160px]"
     ></div>
     <ParticlesBg
       class="absolute inset-0 -z-10"
@@ -89,3 +89,40 @@ const triggerConfetti = () => {
     />
   </section>
 </template>
+
+<style scoped>
+.animate-fade {
+  animation: fade 10s infinite;
+}
+
+.animate-fade-2 {
+  animation: fade-2 5s infinite;
+}
+
+@keyframes fade {
+  0% {
+    --tw-blur: blur(160px);
+    opacity: 0.6;
+  }
+  50% {
+    --tw-blur: blur(100px);
+    opacity: 0.4;
+  }
+  100% {
+    --tw-blur: blur(160px);
+    opacity: 0.6;
+  }
+}
+
+@keyframes fade-2 {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+</style>
diff --git a/frontend/src/components/HomePage/OpenSource.vue b/frontend/src/components/HomePage/OpenSource.vue
@@ -9,7 +9,7 @@ import { openLink } from '@/utils'
 <template>
   <section id="source" class="flex flex-col items-center justify-center gap-9 py-16">
     <Github :size="60" class="drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]" />
-    <span class="text-center text-6xl font-extrabold drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]">
+    <span class="text-center text-5xl font-extrabold drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]">
       {{ $t('source.title') }}
     </span>
     <span class="whitespace-pre-line text-center text-lg">

diff --git a/frontend/src/components/HomePage/Preview.vue b/frontend/src/components/HomePage/Preview.vue
@@ -4,8 +4,11 @@ import ContainerScroll from '@/components/ui/ContainerScroll/ContainerScroll.vue
 
 <template>
   <section>
-    <div class="flex flex-col">
+    <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"

diff --git a/frontend/src/components/HomePage/Streamers.vue b/frontend/src/components/HomePage/Streamers.vue
@@ -5,7 +5,7 @@ import StreamersMarquee from '@/components/HomePage/StreamersMarquee.vue'
 <template>
   <div id="streamers" class="container m-auto flex flex-col items-center gap-10">
     <div class="flex flex-col items-center gap-6">
-      <span class="inline-block text-xs font-bold uppercase text-[#FF930F]">
+      <span class="inline-block text-sm font-bold uppercase text-[#FF930F]">
         {{ $t('streamers.category') }}
       </span>
       <span class="text-center text-2xl font-bold uppercase">

diff --git a/frontend/src/components/ui/ContainerScroll/ContainerScroll.vue b/frontend/src/components/ui/ContainerScroll/ContainerScroll.vue
@@ -1,7 +1,10 @@
 <template>
   <div ref="containerRef" class="relative flex items-center justify-center">
     <div class="relative flex w-full flex-col gap-32" style="perspective: 1000px">
-      <ContainerScrollCard :rotate="rotate" :scale="scale">
+      <ContainerScrollTitle :translate="translateY">
+        <slot name="title"></slot>
+      </ContainerScrollTitle>
+      <ContainerScrollCard :rotate="rotate" :scale="scale" :translate="translateCardY">
         <slot name="card" />
       </ContainerScrollCard>
     </div>
@@ -13,6 +16,7 @@ import { useElementBounding, useScroll, useWindowSize } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import ContainerScrollCard from '@/components/ui/ContainerScroll/ContainerScrollCard.vue'
+import ContainerScrollTitle from '@/components/ui/ContainerScroll/ContainerScrollTitle.vue'
 
 const containerRef = ref(null)
 const isMobile = ref(false)
@@ -46,4 +50,6 @@ const scale = computed(() => {
   const [start, end] = scaleDimensions.value
   return start + (end - start) * scrollYProgress.value
 })
+const translateY = computed(() => -100 * scrollYProgress.value)
+const translateCardY = computed(() => scrollYProgress.value * 30 - 30)
 </script>
diff --git a/frontend/src/components/ui/ContainerScroll/ContainerScrollCard.vue b/frontend/src/components/ui/ContainerScroll/ContainerScrollCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :style="{
-      transform: `rotateX(${props.rotate}deg) scale(${props.scale})`,
+      transform: `rotateX(${props.rotate}deg) scale(${props.scale}) ${translate ? `translateY(${translate}%)` : ''}`,
       boxShadow:
         '0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
     }"
@@ -14,8 +14,11 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  rotate: Number,
-  scale: Number,
-})
+interface Props {
+  rotate: number
+  scale: number
+  translate?: number
+}
+
+const props = defineProps<Props>()
 </script>
diff --git a/frontend/src/components/ui/Header.vue b/frontend/src/components/ui/Header.vue
@@ -1,15 +1,17 @@
 <template>
   <header
     :class="[
-      'sticky z-10 m-auto flex h-16 w-fit justify-center rounded-full bg-black/30 px-3 text-sm backdrop-blur-sm transition-all duration-300',
+      'fixed left-0 right-0 z-10 flex h-16 w-full justify-center transition-all duration-700',
       showHeader ? 'top-6' : 'top-[-600px]',
     ]"
   >
-    <div class="container m-auto flex items-center justify-between gap-48">
-      <div class="logo">
-        <Valory :size="30" />
-      </div>
-      <div class="left">
+    <div
+      class="container flex max-w-[60dvw] items-center justify-between gap-48 rounded-full border border-white/10 bg-black/30 px-5 py-1 text-sm backdrop-blur-sm"
+    >
+      <div class="left flex flex-row gap-8">
+        <div class="logo">
+          <Valory :size="30" />
+        </div>
         <ul v-if="!hidden" class="flex items-center justify-between gap-6">
           <li
             v-for="nav in NAV_DATA"
@@ -21,7 +23,7 @@
           </li>
         </ul>
       </div>
-      <div class="right flex flex-row items-center gap-2">
+      <div class="right flex flex-row items-center gap-1">
         <Button
           class="rounded-full border border-transparent bg-transparent text-white opacity-50 transition hover:border-white/10 hover:bg-white/10 hover:opacity-100"
           @click="openLink('https://github.com/ValoryApp/Valory')"
@@ -30,7 +32,7 @@
           {{ starsCount }}
         </Button>
         <LanguageSwitcher />
-        <Button class="text-sm" size="sm" @click="router.push('/dashboard')">
+        <Button class="rounded-full text-sm" @click="router.push('/dashboard')">
           {{ $t('nav.login') }}
           <Twitch :size="16" color="#000" />
         </Button>

diff --git a/frontend/src/components/ui/button/index.ts b/frontend/src/components/ui/button/index.ts
@@ -9,6 +9,7 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-[#EEEEEE] text-primary-foreground shadow hover:bg-white h-10',
+        alternative: 'bg-black text-[#f2f2f2] shadow hover:bg-[#131313] h-10',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',