58 lines
1.2 KiB
Svelte
58 lines
1.2 KiB
Svelte
<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>
|