76 lines
3.0 KiB
Svelte
76 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { gsap } from 'gsap';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import DashboardMockup from '$lib/components/home/DashboardMockup.svelte';
|
|
|
|
let section: HTMLElement;
|
|
|
|
onMount(() => {
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
const words = section.querySelectorAll<HTMLElement>('[data-hero-word]');
|
|
const desc = section.querySelector<HTMLElement>('[data-hero-desc]');
|
|
const cta = section.querySelector<HTMLElement>('[data-hero-cta]');
|
|
const mock = section.querySelector<HTMLElement>('[data-hero-mockup]');
|
|
|
|
gsap.set(words, { opacity: 0, y: 44, skewX: -6 });
|
|
gsap.set(desc, { opacity: 0, y: 24 });
|
|
gsap.set(cta, { opacity: 0, y: 16 });
|
|
gsap.set(mock, { opacity: 0, x: 48 });
|
|
|
|
const tl = gsap.timeline({
|
|
defaults: { ease: 'power3.out' },
|
|
onComplete: () => gsap.set([words, desc, cta, mock], { clearProps: 'all' })
|
|
});
|
|
|
|
words.forEach((w, i) =>
|
|
tl.to(w, { opacity: 1, y: 0, skewX: 0, duration: 0.75 }, 0.05 + i * 0.1)
|
|
);
|
|
tl.to(desc, { opacity: 1, y: 0, duration: 0.65, ease: 'power2.out' }, 0.42);
|
|
tl.to(cta, { opacity: 1, y: 0, duration: 0.55, ease: 'expo.out' }, 0.58);
|
|
tl.to(mock, { opacity: 1, x: 0, duration: 0.9, ease: 'power2.out' }, 0.18);
|
|
}, section);
|
|
|
|
return () => ctx.revert();
|
|
});
|
|
</script>
|
|
|
|
<section
|
|
bind:this={section}
|
|
class="flex min-h-screen flex-col gap-10 px-5 pt-24 pb-14
|
|
sm:px-10 sm:pt-28
|
|
xl:h-screen xl:min-h-0 xl:flex-row xl:items-center xl:justify-between xl:gap-0 xl:px-5 xl:pt-16 xl:pb-0"
|
|
>
|
|
<div class="z-20 xl:transform-[perspective(1000px)_rotateY(6deg)_rotateX(3deg)]">
|
|
<h1 class="flex flex-col font-display leading-[0.95] font-black uppercase">
|
|
<span data-hero-word class="text-[clamp(2.5rem,10vw,6.25rem)]">Рыночный</span>
|
|
<span data-hero-word class="text-[clamp(3rem,13vw,8rem)]">прогноз</span>
|
|
<span data-hero-word class="text-[clamp(1.5rem,6.5vw,4rem)] leading-none text-primary"
|
|
>от ML-модели</span
|
|
>
|
|
</h1>
|
|
|
|
<p
|
|
data-hero-desc
|
|
class="mt-6 max-w-full text-base leading-[1.3] text-desc sm:mt-8 sm:text-xl lg:mt-10 lg:text-2xl lg:leading-[1.1] xl:max-w-180"
|
|
>
|
|
Исторические свечи, прогнозная зона, уровни входа и выхода — всё на одном интерактивном
|
|
графике. Горизонт 19 свечей, таймфрейм 5M.
|
|
</p>
|
|
|
|
<div data-hero-cta class="mt-8 flex items-center justify-start gap-4 lg:mt-10">
|
|
<Button href="/dashboard">Открыть дашборд</Button>
|
|
<Button href="/about" variant="secondary">Как работает</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-hero-mockup class="z-20 mx-auto w-full xl:mx-0">
|
|
<DashboardMockup />
|
|
</div>
|
|
|
|
<span class="absolute bottom-35 left-0 z-0 hidden h-px w-full bg-bg-h xl:block"></span>
|
|
<span class="absolute top-55 left-0 z-0 hidden h-px w-full bg-bg-h xl:block"></span>
|
|
</section>
|