Skip to content

Commit 36c4639

Browse files
haxgunhaxgun
committed
feat(frontend): rework header, content scroll
1 parent 0a7929c commit 36c4639

File tree

10 files changed

+92
-27
lines changed

10 files changed

+92
-27
lines changed

‎frontend/src/components/HomePage/Features.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { hidden } from '@/utils.js'
33
</script>
44

55
<template>
6-
<section id="features" class="container flex flex-col items-center justify-center gap-10">
6+
<section id="features" class="container mb-20 flex flex-col items-center justify-center gap-12">
77
<div class="flex flex-col items-center gap-6">
8-
<span class="inline-block text-xs font-bold uppercase text-[#5AB2F7]">
8+
<span class="inline-block text-sm font-bold uppercase text-[#5AB2F7]">
99
{{ $t('features.category') }}
1010
</span>
1111
<span class="text-center text-2xl font-bold uppercase">

‎frontend/src/components/HomePage/FreeUse.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
33
</script>
44

55
<template>
6-
<section class="container relative flex flex-col items-center">
6+
<section class="container relative mb-20 flex flex-col items-center">
77
<div
88
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]"
99
>
@@ -13,7 +13,7 @@ import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
1313
<br />of their broadcasts with using our tools.
1414
</span>
1515
<InteractiveHoverButton text="Let's start!" size="lg" class="w-[11rem] text-base" />
16-
<div class="absolute -bottom-32 rounded-full bg-blue-400 px-96 py-20 blur-[160px]"></div>
16+
<div class="bg-gradient absolute left-0 rounded-full p-64 blur-[160px]"></div>
1717
</div>
1818
<div
1919
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'
2323
></div>
2424
</section>
2525
</template>
26+
27+
<style scoped>
28+
.bg-gradient {
29+
background-color: rgb(122, 175, 255);
30+
background-image:
31+
radial-gradient(at 0% 0%, rgb(122, 175, 255) 0px, transparent 50%),
32+
radial-gradient(at 68% 47%, rgb(98, 80, 255) 0px, transparent 50%),
33+
radial-gradient(at 10% 67%, rgb(54, 255, 174) 0px, transparent 50%),
34+
radial-gradient(at 62% 19%, rgb(153, 98, 255) 0px, transparent 50%),
35+
radial-gradient(at 70% 29%, rgb(36, 255, 167) 0px, transparent 50%),
36+
radial-gradient(at 67% 5%, rgb(255, 128, 113) 0px, transparent 50%);
37+
}
38+
</style>

‎frontend/src/components/HomePage/Main.vue‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const triggerConfetti = () => {
3838
</script>
3939

4040
<template>
41-
<section id="main" class="relative mt-[-5rem] flex h-dvh items-center justify-center">
41+
<section id="main" class="relative flex h-dvh items-center justify-center">
4242
<div class="relative flex flex-col items-center justify-center gap-9">
4343
<Sparkles
4444
:colors="{ first: '#ffffff', second: '#ffffff' }"
@@ -54,7 +54,7 @@ const triggerConfetti = () => {
5454
{{ $t('main.discord') }}
5555
</span>
5656
</Sparkles>
57-
<span class="whitespace-pre-line text-center text-5xl text-[100px] font-black uppercase">
57+
<span class="whitespace-pre-line text-center text-5xl text-[90px] font-black uppercase">
5858
{{ $t('main.title') }}
5959
</span>
6060
<span class="whitespace-pre-line text-center text-xl font-light">
@@ -64,20 +64,20 @@ const triggerConfetti = () => {
6464
<Button @click="$router.push('/dashboard')" class="h-14 min-w-[240px] rounded-xl text-lg">
6565
{{ $t('main.buttons.first') }}
6666
</Button>
67-
<Button variant="ghost" class="h-14 min-w-[240px] rounded-xl text-lg">
67+
<Button variant="alternative" class="h-14 min-w-[240px] rounded-xl text-lg">
6868
{{ $t('main.buttons.second') }}
6969
<Stars02 :size="16" />
7070
</Button>
7171
</span>
7272
</div>
7373
<div
74-
class="absolute -bottom-96 -z-10 h-[90dvh] w-[80dvw] rounded-full bg-[#0046ff]/50 blur-[160px]"
74+
class="animate-fade absolute -bottom-96 -z-10 h-[90dvh] w-[80dvw] rounded-full bg-[#0046ff] opacity-50 blur-[160px]"
7575
></div>
7676
<div
77-
class="absolute -bottom-96 -z-10 h-[500px] w-full rounded-full bg-[#2e3e75] blur-[160px]"
77+
class="animate-fade-2 absolute -bottom-96 -z-10 h-[500px] w-full rounded-full bg-[#2e3e75] opacity-50 blur-[160px]"
7878
></div>
7979
<div
80-
class="absolute -bottom-96 -z-10 h-[300px] w-[70dvw] rounded-full bg-[#f2f2f2]/20 blur-[160px]"
80+
class="animate-fade-2 absolute -bottom-96 -z-10 h-[300px] w-[70dvw] rounded-full bg-[#f2f2f2]/20 blur-[160px]"
8181
></div>
8282
<ParticlesBg
8383
class="absolute inset-0 -z-10"
@@ -89,3 +89,40 @@ const triggerConfetti = () => {
8989
/>
9090
</section>
9191
</template>
92+
93+
<style scoped>
94+
.animate-fade {
95+
animation: fade 10s infinite;
96+
}
97+
98+
.animate-fade-2 {
99+
animation: fade-2 5s infinite;
100+
}
101+
102+
@keyframes fade {
103+
0% {
104+
--tw-blur: blur(160px);
105+
opacity: 0.6;
106+
}
107+
50% {
108+
--tw-blur: blur(100px);
109+
opacity: 0.4;
110+
}
111+
100% {
112+
--tw-blur: blur(160px);
113+
opacity: 0.6;
114+
}
115+
}
116+
117+
@keyframes fade-2 {
118+
0% {
119+
opacity: 0.5;
120+
}
121+
50% {
122+
opacity: 0.8;
123+
}
124+
100% {
125+
opacity: 0.5;
126+
}
127+
}
128+
</style>

‎frontend/src/components/HomePage/OpenSource.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { openLink } from '@/utils'
99
<template>
1010
<section id="source" class="flex flex-col items-center justify-center gap-9 py-16">
1111
<Github :size="60" class="drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]" />
12-
<span class="text-center text-6xl font-extrabold drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]">
12+
<span class="text-center text-5xl font-extrabold drop-shadow-[0_0_20px_rgba(255,255,255,0.4)]">
1313
{{ $t('source.title') }}
1414
</span>
1515
<span class="whitespace-pre-line text-center text-lg">

‎frontend/src/components/HomePage/Preview.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import ContainerScroll from '@/components/ui/ContainerScroll/ContainerScroll.vue
44

55
<template>
66
<section>
7-
<div class="flex flex-col">
7+
<div class="mb-16 flex flex-col">
88
<ContainerScroll>
9+
<template #title>
10+
<h1 class="text-6xl font-bold">Какой-то текст</h1>
11+
</template>
912
<template #card>
1013
<img
1114
src="/images/linear.webp"

‎frontend/src/components/HomePage/Streamers.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import StreamersMarquee from '@/components/HomePage/StreamersMarquee.vue'
55
<template>
66
<div id="streamers" class="container m-auto flex flex-col items-center gap-10">
77
<div class="flex flex-col items-center gap-6">
8-
<span class="inline-block text-xs font-bold uppercase text-[#FF930F]">
8+
<span class="inline-block text-sm font-bold uppercase text-[#FF930F]">
99
{{ $t('streamers.category') }}
1010
</span>
1111
<span class="text-center text-2xl font-bold uppercase">

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div ref="containerRef" class="relative flex items-center justify-center">
33
<div class="relative flex w-full flex-col gap-32" style="perspective: 1000px">
4-
<ContainerScrollCard :rotate="rotate" :scale="scale">
4+
<ContainerScrollTitle :translate="translateY">
5+
<slot name="title"></slot>
6+
</ContainerScrollTitle>
7+
<ContainerScrollCard :rotate="rotate" :scale="scale" :translate="translateCardY">
58
<slot name="card" />
69
</ContainerScrollCard>
710
</div>
@@ -13,6 +16,7 @@ import { useElementBounding, useScroll, useWindowSize } from '@vueuse/core'
1316
import { computed, onMounted, onUnmounted, ref } from 'vue'
1417
1518
import ContainerScrollCard from '@/components/ui/ContainerScroll/ContainerScrollCard.vue'
19+
import ContainerScrollTitle from '@/components/ui/ContainerScroll/ContainerScrollTitle.vue'
1620
1721
const containerRef = ref(null)
1822
const isMobile = ref(false)
@@ -46,4 +50,6 @@ const scale = computed(() => {
4650
const [start, end] = scaleDimensions.value
4751
return start + (end - start) * scrollYProgress.value
4852
})
53+
const translateY = computed(() => -100 * scrollYProgress.value)
54+
const translateCardY = computed(() => scrollYProgress.value * 30 - 30)
4955
</script>

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
:style="{
4-
transform: `rotateX(${props.rotate}deg) scale(${props.scale})`,
4+
transform: `rotateX(${props.rotate}deg) scale(${props.scale}) ${translate ? `translateY(${translate}%)` : ''}`,
55
boxShadow:
66
'0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
77
}"
@@ -14,8 +14,11 @@
1414
</template>
1515

1616
<script setup lang="ts">
17-
const props = defineProps({
18-
rotate: Number,
19-
scale: Number,
20-
})
17+
interface Props {
18+
rotate: number
19+
scale: number
20+
translate?: number
21+
}
22+
23+
const props = defineProps<Props>()
2124
</script>

‎frontend/src/components/ui/Header.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
22
<header
33
:class="[
4-
'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',
4+
'fixed left-0 right-0 z-10 flex h-16 w-full justify-center transition-all duration-700',
55
showHeader ? 'top-6' : 'top-[-600px]',
66
]"
77
>
8-
<div class="container m-auto flex items-center justify-between gap-48">
9-
<div class="logo">
10-
<Valory :size="30" />
11-
</div>
12-
<div class="left">
8+
<div
9+
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"
10+
>
11+
<div class="left flex flex-row gap-8">
12+
<div class="logo">
13+
<Valory :size="30" />
14+
</div>
1315
<ul v-if="!hidden" class="flex items-center justify-between gap-6">
1416
<li
1517
v-for="nav in NAV_DATA"
@@ -21,7 +23,7 @@
2123
</li>
2224
</ul>
2325
</div>
24-
<div class="right flex flex-row items-center gap-2">
26+
<div class="right flex flex-row items-center gap-1">
2527
<Button
2628
class="rounded-full border border-transparent bg-transparent text-white opacity-50 transition hover:border-white/10 hover:bg-white/10 hover:opacity-100"
2729
@click="openLink('https://github.com/ValoryApp/Valory')"
@@ -30,7 +32,7 @@
3032
{{ starsCount }}
3133
</Button>
3234
<LanguageSwitcher />
33-
<Button class="text-sm" size="sm" @click="router.push('/dashboard')">
35+
<Button class="rounded-full text-sm" @click="router.push('/dashboard')">
3436
{{ $t('nav.login') }}
3537
<Twitch :size="16" color="#000" />
3638
</Button>

‎frontend/src/components/ui/button/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const buttonVariants = cva(
99
variants: {
1010
variant: {
1111
default: 'bg-[#EEEEEE] text-primary-foreground shadow hover:bg-white h-10',
12+
alternative: 'bg-black text-[#f2f2f2] shadow hover:bg-[#131313] h-10',
1213
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
1314
outline:
1415
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',

0 commit comments

Comments
 (0)