Законченный MVP

2026-05-28 21:03:35 +05:00
parent a566bab1ae
commit 55583e2101
30 changed files with 1883 additions and 143 deletions
@@ -0,0 +1,77 @@
+<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 xl:max-w-180 lg:text-2xl lg:leading-[1.1]"
+		>
+			Исторические свечи, прогнозная зона, уровни входа и выхода — всё на одном интерактивном
+			графике. Горизонт 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="w-full mx-auto xl:mx-0 z-20">
+		<DashboardMockup />
+	</div>
+
+	<!-- Визуальные элементы -->
+	<span
+		class="absolute -top-60 left-0 z-0 h-80 w-full rotate-3 rounded-full bg-primary opacity-30 blur-[200px]"
+	></span>
+	<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>