Законченный 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,80 @@
+<script lang="ts">
+	import { scrollFadeUp, scrollStagger } from '$lib/gsap/actions';
+
+	type Post = {
+		slug: string;
+		date: string;
+		title: string;
+		description: string;
+		tags?: string[];
+	};
+
+	let { posts = [] }: { posts: Post[] } = $props();
+
+	function fmtDate(d: string) {
+		try {
+			return new Intl.DateTimeFormat('ru', {
+				day: 'numeric',
+				month: 'short',
+				year: 'numeric'
+			}).format(new Date(d));
+		} catch {
+			return d;
+		}
+	}
+</script>
+
+{#if posts.length > 0}
+	<div class="border-b border-white/6">
+		<section class="px-5 py-24 sm:px-10 sm:py-32">
+			<div
+				use:scrollFadeUp={{ y: 20 }}
+				class="mb-12 flex items-end justify-between"
+			>
+				<h2 class="font-display text-4xl font-black tracking-tighter uppercase">БЛОГ</h2>
+				<a
+					href="/blog"
+					class="font-display text-[0.75rem] font-bold tracking-wider text-desc transition-colors duration-150 hover:text-white"
+				>
+					ВСЕ СТАТЬИ →
+				</a>
+			</div>
+
+			<div
+				use:scrollStagger={{ selector: 'a', stagger: 0.1, y: 32 }}
+				class="grid grid-cols-1 overflow-hidden rounded-xl border border-white/6 sm:grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]"
+			>
+				{#each posts as post, i}
+					<a
+						href="/blog/{post.slug}"
+						class="flex flex-col gap-5 p-10 no-underline transition-colors duration-150 hover:bg-white/2
+						       {i > 0 ? 'border-t border-white/6 sm:border-t-0 sm:border-l' : ''}"
+					>
+						<div class="flex items-center justify-between">
+							<time
+								datetime={post.date}
+								class="font-mono text-[0.6875rem] tracking-widest text-zinc-600"
+							>
+								{fmtDate(post.date)}
+							</time>
+							{#if post.tags?.length}
+								<span class="font-mono text-[0.625rem] tracking-widest text-zinc-600 uppercase">
+									{post.tags[0]}
+								</span>
+							{/if}
+						</div>
+						<h3
+							class="font-display text-[clamp(1.25rem,2.5vw,1.75rem)] leading-tight font-black tracking-tight"
+						>
+							{post.title}
+						</h3>
+						<p class="flex-1 text-sm leading-relaxed text-desc">{post.description}</p>
+						<span class="font-display text-[0.75rem] font-bold tracking-wider text-primary">
+							ЧИТАТЬ →
+						</span>
+					</a>
+				{/each}
+			</div>
+		</section>
+	</div>
+{/if}