feat: initial commit, draft frontend

src/lib/Projects.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Play } from '@lucide/svelte';
+	import { Button } from 'bits-ui';
+	import type { Project } from './types/project';
+	import { goto } from '$app/navigation';
+	import Image from './Image.svelte';
+
+	const mockProjects: Project[] = [
+		{
+			id: 1,
+			name: 'Uno',
+			description: 'Recreation of the classic card game',
+			thumbnail: 'https://picsum.photos/seed/uno/400/225',
+			url: '/game/index.html'
+		},
+		{
+			id: 2,
+			name: 'Space Invaders',
+			description: 'Retro arcade shooter',
+			thumbnail: 'https://picsum.photos/seed/space/400/225'
+		},
+		{
+			id: 3,
+			name: 'Tetris',
+			description: 'Block stacking puzzle game',
+			thumbnail: 'https://picsum.photos/seed/tetris/400/225'
+		},
+		{
+			id: 4,
+			name: 'Snake',
+			description: 'Classic snake game with power-ups',
+			thumbnail: 'https://picsum.photos/seed/snake/400/225'
+		},
+		{
+			id: 5,
+			name: 'Pong',
+			description: 'Two-player paddle game',
+			thumbnail: 'https://picsum.photos/seed/pong/400/225'
+		},
+		{
+			id: 6,
+			name: 'Breakout',
+			description: 'Brick-breaking arcade game',
+			thumbnail: 'https://picsum.photos/seed/breakout/400/225'
+		}
+	];
+</script>
+
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+	{#each mockProjects as project (project.id)}
+		<div
+			class="group relative overflow-hidden rounded-lg bg-gray-900 shadow-xl ring-1 ring-gray-800 transition-transform hover:scale-[1.02]"
+		>
+			<div class="relative aspect-video overflow-hidden">
+				<Image
+					src={project.thumbnail}
+					alt={project.name}
+					class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+				/>
+
+				<div
+					class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+				>
+					<Button.Root
+						class="flex h-10 w-14 items-center justify-center rounded-md bg-white/90 text-gray-900 shadow-lg transition-transform hover:scale-110 hover:bg-white"
+						onclick={() => {
+							goto(`/p/${project.id}`).catch((e) => {
+								console.warn(e);
+							});
+						}}
+					>
+						<Play />
+					</Button.Root>
+				</div>
+			</div>
+
+			<div class="p-4">
+				<h3 class="text-lg font-semibold text-white">{project.name}</h3>
+				<p class="mt-1 text-sm text-gray-400">{project.description}</p>
+			</div>
+		</div>
+	{/each}
+</div>