Skip to content

Commit 1acc7cc

Browse files
haxgunhaxgun
committed
feat(frontend): update main section and add free use section
1 parent c167a83 commit 1acc7cc

File tree

11 files changed

+472
-33
lines changed

11 files changed

+472
-33
lines changed

‎frontend/public/images/linear.webp‎

315 KB
Loading

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
import InteractiveHoverButton from '@/components/ui/InteractiveHoverButton.vue'
3+
</script>
4+
5+
<template>
6+
<section class="container relative flex flex-col items-center">
7+
<div
8+
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]"
9+
>
10+
<span class="text-center text-4xl font-bold"> Are you ready? </span>
11+
<span class="text-center text-xl font-normal">
12+
Join thousands of content creators who have improved the quality
13+
<br />of their broadcasts with using our tools.
14+
</span>
15+
<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>
17+
</div>
18+
<div
19+
class="bg-white/2 absolute -bottom-6 w-[80%] rounded-2xl border border-white/10 px-12 py-5 backdrop-blur-[8px]"
20+
></div>
21+
<div
22+
class="bg-white/2 absolute -bottom-3 w-[90%] rounded-2xl border border-white/15 px-12 py-5 backdrop-blur-[8px]"
23+
></div>
24+
</section>
25+
</template>

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

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Stars02 } from 'untitledui-js/vue'
33
44
import Discord from '@/components/icons/Socials/Discord.vue'
5+
import ParticlesBg from '@/components/ui/ParticlesBg.vue'
56
import Sparkles from '@/components/ui/Sparkles.vue'
67
import { Button } from '@/components/ui/button'
78
import useConfetti from '@/composables/useConfetti'
@@ -37,58 +38,54 @@ const triggerConfetti = () => {
3738
</script>
3839

3940
<template>
40-
<section id="main" class="relative mt-[-5rem] flex h-dvh items-center justify-between">
41-
<div
42-
class="relative flex flex-col items-start justify-center gap-9"
43-
:class="[hidden ? 'w-full' : '']"
44-
>
41+
<section id="main" class="relative mt-[-5rem] flex h-dvh items-center justify-center">
42+
<div class="relative flex flex-col items-center justify-center gap-9">
4543
<Sparkles
4644
:colors="{ first: '#ffffff', second: '#ffffff' }"
4745
:sparkles-count="5"
48-
:class="[hidden ? 'relative m-auto' : '']"
46+
:class="hidden ? 'relative m-auto' : ''"
4947
>
5048
<span
5149
@click="triggerConfetti()"
52-
class="flex cursor-pointer items-center gap-2 rounded-xl border border-white/10 bg-[#7289DA]/25 py-1 pl-2 pr-3 text-xs font-semibold drop-shadow-[0_0_20px_rgba(0,59,255,1)] transition duration-150 hover:bg-[#7289DA]/40"
50+
class="flex cursor-pointer items-center gap-2 rounded-full border border-white/10 bg-[#7289DA]/25 py-1 pl-3 pr-4 text-sm font-semibold drop-shadow-[0_0_20px_rgba(0,59,255,1)] transition duration-150 hover:bg-[#7289DA]/40"
5351
v-wave
5452
>
55-
<Discord :size="16" />
53+
<Discord :size="20" />
5654
{{ $t('main.discord') }}
5755
</span>
5856
</Sparkles>
59-
<span
60-
class="whitespace-pre-line text-5xl font-black uppercase"
61-
:class="[hidden ? 'w-full text-center' : '']"
62-
>
57+
<span class="whitespace-pre-line text-center text-5xl text-[100px] font-black uppercase">
6358
{{ $t('main.title') }}
6459
</span>
65-
<span
66-
class="whitespace-pre-line text-[#CECECE]"
67-
:class="[hidden ? 'w-full text-center text-lg' : 'text-base']"
68-
>
60+
<span class="whitespace-pre-line text-center text-xl font-light">
6961
{{ $t('main.subtitle') }}
7062
</span>
71-
<span class="flex w-full flex-col gap-3 lg:flex-row">
72-
<Button @click="$router.push('/dashboard')" :class="[hidden ? 'h-12 text-lg' : 'text-sm']">
63+
<span class="flex w-full flex-col items-center justify-center gap-3 lg:flex-row">
64+
<Button @click="$router.push('/dashboard')" class="h-14 min-w-[240px] rounded-xl text-lg">
7365
{{ $t('main.buttons.first') }}
7466
</Button>
75-
<Button variant="ghost" :class="[hidden ? 'h-12 text-lg' : 'text-sm']">
67+
<Button variant="ghost" class="h-14 min-w-[240px] rounded-xl text-lg">
7668
{{ $t('main.buttons.second') }}
7769
<Stars02 :size="16" />
7870
</Button>
7971
</span>
8072
</div>
8173
<div
82-
v-if="!hidden"
83-
class="before:pointer-events-none before:absolute before:bottom-[18rem] before:right-[-30px] before:-z-10 before:h-[400px] before:w-[400px] before:rounded-full before:bg-[#A80026]/40 before:blur-[200px] before:content-['']"
84-
>
85-
<img
86-
src="/images/ValoryLogo3D.webp"
87-
height="321"
88-
width="314"
89-
alt="Valory 3D"
90-
fetchpriority="high"
91-
/>
92-
</div>
74+
class="absolute -bottom-96 -z-10 h-[90dvh] w-[80dvw] rounded-full bg-[#0046ff]/50 blur-[160px]"
75+
></div>
76+
<div
77+
class="absolute -bottom-96 -z-10 h-[500px] w-full rounded-full bg-[#2e3e75] blur-[160px]"
78+
></div>
79+
<div
80+
class="absolute -bottom-96 -z-10 h-[300px] w-[70dvw] rounded-full bg-[#f2f2f2]/20 blur-[160px]"
81+
></div>
82+
<ParticlesBg
83+
class="absolute inset-0 -z-10"
84+
:quantity="100"
85+
:ease="100"
86+
color="#FFF"
87+
:staticity="10"
88+
refresh
89+
/>
9390
</section>
9491
</template>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import ContainerScroll from '@/components/ui/ContainerScroll/ContainerScroll.vue'
3+
</script>
4+
5+
<template>
6+
<section>
7+
<div class="flex flex-col">
8+
<ContainerScroll>
9+
<template #card>
10+
<img
11+
src="/images/linear.webp"
12+
class="mx-auto h-full rounded-2xl object-cover object-left-top"
13+
alt="hero"
14+
height="3104"
15+
width="5480"
16+
/>
17+
</template>
18+
</ContainerScroll>
19+
</div>
20+
</section>
21+
</template>

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div ref="containerRef" class="relative flex items-center justify-center">
3+
<div class="relative flex w-full flex-col gap-32" style="perspective: 1000px">
4+
<ContainerScrollCard :rotate="rotate" :scale="scale">
5+
<slot name="card" />
6+
</ContainerScrollCard>
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script setup lang="ts">
12+
import { useElementBounding, useScroll, useWindowSize } from '@vueuse/core'
13+
import { computed, onMounted, onUnmounted, ref } from 'vue'
14+
15+
import ContainerScrollCard from '@/components/ui/ContainerScroll/ContainerScrollCard.vue'
16+
17+
const containerRef = ref(null)
18+
const isMobile = ref(false)
19+
20+
function updateIsMobile() {
21+
isMobile.value = window.innerWidth <= 768
22+
}
23+
24+
onMounted(() => {
25+
updateIsMobile()
26+
window.addEventListener('resize', updateIsMobile)
27+
})
28+
29+
onUnmounted(() => {
30+
window.removeEventListener('resize', updateIsMobile)
31+
})
32+
33+
const { height } = useWindowSize()
34+
const { y: scrollY } = useScroll(window)
35+
const { bottom } = useElementBounding(containerRef)
36+
37+
const scrollYProgress = computed(() => {
38+
if (!bottom.value) return 0
39+
return 1 - Math.max(0, bottom.value - scrollY.value) / height.value
40+
})
41+
42+
const scaleDimensions = computed(() => (isMobile.value ? [0.7, 0.9] : [1.05, 1]))
43+
44+
const rotate = computed(() => 20 * (1 - scrollYProgress.value))
45+
const scale = computed(() => {
46+
const [start, end] = scaleDimensions.value
47+
return start + (end - start) * scrollYProgress.value
48+
})
49+
</script>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div
3+
:style="{
4+
transform: `rotateX(${rotate}deg) scale(${scale})`,
5+
boxShadow:
6+
'0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003',
7+
}"
8+
class="mx-auto -mt-48 h-[30rem] w-full max-w-5xl rounded-[15px] border border-[#f2f2f2]/10 shadow-2xl md:h-[40rem]"
9+
>
10+
<div class="size-full overflow-hidden rounded-[15px]">
11+
<slot></slot>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
const props = defineProps({
18+
rotate: Number,
19+
scale: Number,
20+
})
21+
</script>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div :style="{ transform: `translateY(${translate}px)` }" class="mx-auto max-w-5xl text-center">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
const props = defineProps({
9+
translate: Number,
10+
})
11+
</script>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { Hearts } from 'untitledui-js/vue'
3+
34
import Discord from '@/components/icons/Socials/Discord.vue'
45
import Github from '@/components/icons/Socials/Github.vue'
56
import Telegram from '@/components/icons/Socials/Telegram.vue'
@@ -10,7 +11,7 @@ import { FOOTER_NAV_PRODUCT_DATA } from '@/data/FooterNav.data'
1011
import { hidden, moveTo, openLink } from '@/utils'
1112
</script>
1213
<template>
13-
<footer class="container m-auto flex flex-col gap-10 py-16">
14+
<footer class="container m-auto mt-10 flex flex-col gap-10 py-16">
1415
<div class="flex justify-between gap-8">
1516
<div class="flex flex-col gap-4" :class="[hidden ? 'max-w-52' : '']">
1617
<div @click="moveTo('main')" class="flex flex-row items-center gap-3">
@@ -67,7 +68,14 @@ import { hidden, moveTo, openLink } from '@/utils'
6768
<Hearts color="#FA4454" :size="20" />
6869
</Button>
6970
</div>
70-
<iframe src="https://status.valory.su/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
71+
<iframe
72+
src="https://status.valory.su/badge?theme=dark"
73+
width="250"
74+
height="30"
75+
frameborder="0"
76+
scrolling="no"
77+
style="color-scheme: normal"
78+
></iframe>
7179
</div>
7280
<div
7381
class="flex"

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<button
3+
ref="buttonRef"
4+
:class="
5+
cn(
6+
'group relative w-32 cursor-pointer overflow-hidden rounded-full border bg-background p-2 text-center font-semibold',
7+
props.class,
8+
)
9+
"
10+
>
11+
<span
12+
class="inline-block translate-x-1 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0"
13+
>
14+
{{ text }}
15+
</span>
16+
17+
<div
18+
class="absolute top-0 z-10 flex size-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-1 group-hover:opacity-100"
19+
>
20+
<span>{{ text }}</span>
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
width="24"
24+
height="24"
25+
viewBox="0 0 24 24"
26+
fill="none"
27+
stroke="currentColor"
28+
stroke-width="2"
29+
stroke-linecap="round"
30+
stroke-linejoin="round"
31+
class="lucide lucide-arrow-right"
32+
>
33+
<path d="M5 12h14" />
34+
<path d="m12 5 7 7-7 7" />
35+
</svg>
36+
</div>
37+
<div
38+
class="absolute left-[18%] top-[40%] size-2 scale-100 rounded-lg bg-primary transition-all duration-300 group-hover:left-0 group-hover:top-0 group-hover:size-full group-hover:scale-[1.8] group-hover:bg-primary"
39+
></div>
40+
</button>
41+
</template>
42+
43+
<script lang="ts" setup>
44+
import { ref } from 'vue'
45+
46+
import { cn } from '@/utils'
47+
48+
interface Props {
49+
text?: string
50+
class?: string
51+
}
52+
const props = withDefaults(defineProps<Props>(), {
53+
text: 'Button',
54+
})
55+
56+
const buttonRef = ref<HTMLButtonElement>()
57+
</script>

0 commit comments

Comments
 (0)