feat(global): implement main phase

src/lib/components/PersonalityCards/PersonalityCards.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { getI18n } from '$lib/i18n';
+	import PersonalityCard from './PersonalityCard.svelte';
+	import GeminiGlow from './GeminiGlow.svelte';
+	import ClaudeGlow from './ClaudeGlow.svelte';
+
+	const i18n = getI18n();
+	const t = $derived(i18n.t);
+</script>
+
+<section class="section">
+	<GeminiGlow />
+	<ClaudeGlow />
+	<div class="container">
+		<header class="text-center mb-12">
+			<h2 class="section-title">{t.personalityCards.sectionTitle}</h2>
+			<p class="section-subtitle">{t.personalityCards.sectionSubtitle}</p>
+		</header>
+
+		<div class="cards-grid">
+			<PersonalityCard personality={t.personalityCards.gemini} side="left" />
+			<PersonalityCard personality={t.personalityCards.claude} side="right" />
+		</div>
+	</div>
+</section>
+
+<style>
+	.container {
+		max-width: 72rem;
+		margin: 0 auto;
+		padding: 0 2rem;
+	}
+
+	.cards-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 2rem;
+	}
+
+	.section {
+		position: relative;
+		overflow: visible;
+		clip-path: inset(-100% -100% 0 -100%);
+		isolation: isolate; /* contain blend modes */
+	}
+
+	@media (max-width: 640px) {
+		.cards-grid {
+			grid-template-columns: 1fr;
+			gap: 1.5rem;
+		}
+
+		.container {
+			padding: 0 1rem;
+		}
+	}
+</style>