Главная страница + адаптив

2026-05-27 10:57:39 +05:00
parent 8bda936c4b
commit a566bab1ae
13 changed files with 174 additions and 93 deletions
@@ -62,7 +62,7 @@
 	}
 </script>

-<div class="w-full max-w-170 z-20" style="perspective: 1000px;">
+<div class="w-full max-w-170 z-20 mx-auto lg:mx-0" style="perspective: 1000px;">
 	<div
 		class="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950 shadow-[0_40px_100px_rgba(0,0,0,0.7),0_0_0_1px_rgba(255,255,255,0.04)] will-change-transform"
 		style="transform: perspective(1000px) rotateY(-6deg) rotateX(3deg); transform-style: preserve-3d;"
@@ -1,55 +1,42 @@
 <script lang="ts">
+	import Logo from '$lib/components/ui/Logo.svelte';
+
 	const yr = new Date().getFullYear();

 	const navLinks = [
-		{ href: '/dashboard', label: 'Дашборд' },
-		{ href: '/blog', label: 'Блог' },
-		{ href: '/about', label: 'О проекте' }
+		{ id: 0, href: '/dashboard', label: 'Дашборд' },
+		{ id: 1, href: '/blog', label: 'Блог' },
+		{ id: 2, href: '/about', label: 'О проекте' }
 	];
 </script>

 <footer class="mt-auto border-t border-white/6 bg-bg-e">
-	<div class="mx-auto max-w-400 px-5 py-14 sm:px-10">
+	<div class="mx-auto max-w-400 px-5 py-20 sm:px-10">

-		<div class="grid grid-cols-2 gap-10 sm:grid-cols-4">
+		<div class="grid grid-cols-2 gap-10 sm:grid-cols-4 sm:justify-between">
 			<div class="col-span-2 flex flex-col gap-4 sm:col-span-1">
-				<a href="/" class="flex items-center gap-2.5 no-underline">
-					<svg width="24" height="24" viewBox="0 0 26 26" fill="none">
-						<rect width="26" height="26" rx="6" fill="rgba(255,69,0,0.08)" />
-						<path
-							d="M7 20 C7 20 9.5 13 13 15.5 C16.5 18 17 10 20 7"
-							stroke="#fe4b07"
-							stroke-width="1.8"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							fill="none"
-						/>
-						<circle cx="20" cy="7" r="1.6" fill="#fe4b07" />
-					</svg>
-					<span class="font-display text-sm font-black tracking-tighter">
-						FLAMY<span class="text-primary">TRADE</span>
-					</span>
-				</a>
-				<p class="max-w-[200px] text-[0.8125rem] leading-relaxed text-zinc-600">
+				<Logo />
+
+				<p class="max-w-55 text-base leading-[1.2] text-zinc-600">
 					ML-прогнозы для рыночных инструментов. Только исследования.
 				</p>
 			</div>

-			<div class="flex flex-col gap-3">
-				<span class="font-mono text-[0.6rem] tracking-widest text-zinc-600 uppercase">Навигация</span>
-				{#each navLinks as link}
+			<div class="flex flex-col gap-1">
+				<span class="font-mono text-base tracking-widest text-zinc-600 uppercase mb-1">Навигация</span>
+				{#each navLinks as link (link.id)}
 					<a
 						href={link.href}
-						class="text-[0.8125rem] text-desc no-underline transition-colors duration-150 hover:text-zinc-100"
+						class="text-base text-desc no-underline transition-colors duration-150 hover:text-zinc-100"
 					>
 						{link.label}
 					</a>
 				{/each}
 			</div>

-			<div class="col-span-2 flex flex-col gap-3 sm:col-span-2">
-				<span class="font-mono text-[0.6rem] tracking-widest text-zinc-600 uppercase">Дисклеймер</span>
-				<p class="max-w-[380px] text-xs leading-relaxed text-zinc-600">
+			<div class="col-span-2 flex flex-col gap-1.5 sm:col-span-2 ml-auto">
+				<span class="font-mono text-base tracking-widest text-zinc-600 uppercase">Дисклеймер</span>
+				<p class="max-w-85 text-sm leading-relaxed text-zinc-600">
 					Материалы являются результатом работы исследовательской ML-модели и используются в
 					демонстрационных целях. Не являются индивидуальной инвестиционной рекомендацией.
 				</p>
@@ -57,11 +44,11 @@
 		</div>

 		<div
-			class="mt-10 flex flex-col items-start justify-between gap-2 border-t border-white/6 pt-8 sm:flex-row sm:items-center"
+			class="mt-20 flex flex-col items-start justify-between gap-2 border-t border-white/6 pt-12 sm:flex-row sm:items-center"
 		>
-			<span class="text-xs text-zinc-600">© {yr} Flamy Trade</span>
-			<span class="text-xs text-zinc-600">
-				implemented in
+			<span class="text-base text-zinc-600">© {yr} Flamy Trade</span>
+			<span class="text-base text-zinc-600">
+				Разработано
 				<a
 					href="https://flamy.studio"
 					target="_blank"
@@ -1,6 +1,6 @@
 <script lang="ts">
-	// Ссылки
 	import { cn } from '$lib/utils';
+	import Logo from '$lib/components/ui/Logo.svelte';

 	const menuLinks = [
 		{ id: 0, href: 'reg', text: 'Главная' },
@@ -8,13 +8,16 @@
 		{ id: 2, href: 'reg', text: 'Блог' },
 		{ id: 3, href: 'reg', text: 'Открыть дашборд', isButton: true }
 	];
+
+	let mobileOpen = $state(false);
 </script>

-<header class="fixed right-0 left-0 border-b border-b-bg-h bg-bg-e py-5 z-9999">
-	<div class="mx-auto flex max-w-400 items-center justify-between">
-		<a href="/" class="font-display text-lg font-semibold uppercase">Flamy Trade</a>
+<header class="fixed right-0 left-0 border-b border-b-bg-h bg-bg-e z-9999">
+	<div class="mx-auto flex max-w-400 items-center justify-between px-5 py-5 sm:px-10 lg:px-0">
+		<Logo />

-		<nav>
+		<!-- Десктопная навигация -->
+		<nav class="hidden lg:block">
 			<ul class="flex items-center justify-center gap-5.5 transition-colors duration-300">
 				{#each menuLinks as link (link.id)}
 					<li>
@@ -28,5 +31,61 @@
 				{/each}
 			</ul>
 		</nav>
+
+		<!-- Мобильная кнопка гамбургера -->
+		<button
+			class="flex flex-col justify-center gap-1.5 p-1 lg:hidden"
+			onclick={() => (mobileOpen = !mobileOpen)}
+			aria-label={mobileOpen ? 'Закрыть меню' : 'Открыть меню'}
+			aria-expanded={mobileOpen}
+		>
+			<span
+				class={cn(
+					'block h-0.5 w-6 bg-title transition-all duration-200',
+					mobileOpen && 'translate-y-2 rotate-45'
+				)}
+			></span>
+			<span
+				class={cn(
+					'block h-0.5 w-6 bg-title transition-all duration-200',
+					mobileOpen && 'opacity-0 scale-x-0'
+				)}
+			></span>
+			<span
+				class={cn(
+					'block h-0.5 w-6 bg-title transition-all duration-200',
+					mobileOpen && '-translate-y-2 -rotate-45'
+				)}
+			></span>
+		</button>
 	</div>
+
+	<!-- Мобильное выпадающее меню -->
+	{#if mobileOpen}
+		<nav class="border-t border-white/6 px-5 pb-4 sm:px-10 lg:hidden">
+			<ul class="flex flex-col">
+				{#each menuLinks as link (link.id)}
+					<li>
+						{#if link.isButton}
+							<a
+								href={link.href}
+								class="nav-btn mt-3 block text-center"
+								onclick={() => (mobileOpen = false)}
+							>
+								{link.text}
+							</a>
+						{:else}
+							<a
+								href={link.href}
+								class="nav-link block border-b border-white/6 py-3.5 last:border-0"
+								onclick={() => (mobileOpen = false)}
+							>
+								{link.text}
+							</a>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		</nav>
+	{/if}
 </header>
@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<a href="/" class="flex items-center gap-2.5 no-underline max-w-fit">
+	<img src="images/icons/logo.svg" alt="Логотип" class="w-8 h-8" />
+	<span class="font-display text-xl font-black tracking-tighter">
+		FLAMY<span class="text-primary">TRADE</span>
+	</span>
+</a>