2026-07-21 08:00:16 -04:00
|
|
|
<script lang="ts">
|
2026-07-21 08:41:55 -04:00
|
|
|
// {@html} sur contenu first-party (JSON i18n du dépôt), aucune donnée utilisateur.
|
2026-07-21 08:00:16 -04:00
|
|
|
import KineticText from '$lib/components/motion/KineticText.svelte';
|
|
|
|
|
import ResponsiveImage from '$lib/components/ResponsiveImage.svelte';
|
|
|
|
|
import type { Bundle, Locale } from '$lib/i18n';
|
|
|
|
|
import { pictoFor } from './pictos';
|
|
|
|
|
|
|
|
|
|
import portrait from '$lib/assets/images/djangokam-portrait.webp?format=avif;webp&w=480;960&as=picture';
|
|
|
|
|
import sheToldMe from '$lib/assets/images/djangokam-she-told-me.webp?format=avif;webp&w=320;640&as=picture';
|
|
|
|
|
import iWantYouGirl from '$lib/assets/images/djangokam-i-want-you-girl.webp?format=avif;webp&w=320;640&as=picture';
|
|
|
|
|
import ishMwenKute from '$lib/assets/images/djangokam-ish-mwen-kute.jpg?format=avif;webp;jpg&w=320;640&as=picture';
|
|
|
|
|
|
|
|
|
|
let { t }: { t: Bundle; locale?: Locale } = $props();
|
|
|
|
|
|
|
|
|
|
const POCHETTES: Record<string, typeof portrait> = {
|
|
|
|
|
'/assets/images/djangokam-she-told-me.webp': sheToldMe,
|
|
|
|
|
'/assets/images/djangokam-i-want-you-girl.webp': iWantYouGirl,
|
|
|
|
|
'/assets/images/djangokam-ish-mwen-kute.jpg': ishMwenKute
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<section id="djangokam" class="section">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<p class="djangokam-surtitre">{t.djangokam.surtitre}</p>
|
|
|
|
|
<h2 class="section-title">
|
2026-07-21 08:41:55 -04:00
|
|
|
<KineticText as="span" text={t.djangokam.titre} /> 
|
2026-07-21 08:00:16 -04:00
|
|
|
<span class="accent-text"
|
|
|
|
|
><KineticText as="span" text={t.djangokam.titreAccent} /></span
|
|
|
|
|
>
|
|
|
|
|
</h2>
|
|
|
|
|
<p class="section-subtitle">{t.djangokam.accroche}</p>
|
|
|
|
|
|
|
|
|
|
<ResponsiveImage
|
|
|
|
|
picture={portrait}
|
|
|
|
|
alt="Portrait officiel de DJANGOKAM"
|
|
|
|
|
sizes="220px"
|
|
|
|
|
class="djangokam-portrait"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<blockquote class="djangokam-highlight">
|
|
|
|
|
{t.djangokam.message_cle}
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
|
|
|
|
<div class="djangokam-histoire-wrapper">
|
|
|
|
|
<div class="djangokam-histoire">
|
|
|
|
|
{#each t.djangokam.histoire as paragraphe (paragraphe)}
|
|
|
|
|
<p>{paragraphe}</p>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<figure class="djangokam-duo">
|
2026-07-21 08:41:55 -04:00
|
|
|
<a href={t.djangokam.duo.url} target="_blank" rel="external noopener noreferrer">
|
2026-07-21 08:00:16 -04:00
|
|
|
<ResponsiveImage
|
|
|
|
|
picture={POCHETTES[t.djangokam.duo.image]}
|
|
|
|
|
alt={t.djangokam.duo.alt}
|
|
|
|
|
sizes="(max-width: 768px) 220px, 280px"
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
<figcaption>{t.djangokam.duo.legende}</figcaption>
|
|
|
|
|
</figure>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="djangokam-facts">
|
|
|
|
|
{#each t.djangokam.faits as fait (fait.chiffre)}
|
|
|
|
|
<div class="djangokam-fact-card">
|
|
|
|
|
<div class="djangokam-fact-icon">
|
|
|
|
|
<svg class="icon" aria-hidden="true"
|
|
|
|
|
><use href="/icons.svg#{pictoFor(fait.icon)}" /></svg
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>{fait.chiffre}</h3>
|
|
|
|
|
<!-- Contenu éditorial du bundle i18n (liens internes balisés). -->
|
|
|
|
|
<p>{@html fait.texte}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="djangokam-clips">
|
|
|
|
|
{#each t.djangokam.clips as clip (clip.titre)}
|
|
|
|
|
<figure class="djangokam-clip">
|
2026-07-21 08:41:55 -04:00
|
|
|
<a href={clip.url} target="_blank" rel="external noopener noreferrer">
|
2026-07-21 08:00:16 -04:00
|
|
|
<ResponsiveImage
|
|
|
|
|
picture={POCHETTES[clip.image]}
|
|
|
|
|
alt={clip.alt}
|
|
|
|
|
sizes="(max-width: 768px) 220px, 280px"
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
<figcaption>{clip.titre}</figcaption>
|
|
|
|
|
</figure>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Contenu éditorial du bundle i18n (liens internes balisés). -->
|
|
|
|
|
<p class="djangokam-instrument">{@html t.djangokam.ia_instrument}</p>
|
|
|
|
|
|
|
|
|
|
<div class="cta-buttons djangokam-buttons">
|
|
|
|
|
{#each t.djangokam.boutons as bouton (bouton.url)}
|
|
|
|
|
<a
|
|
|
|
|
href={bouton.url}
|
|
|
|
|
target="_blank"
|
2026-07-21 08:41:55 -04:00
|
|
|
rel="external noopener noreferrer"
|
2026-07-21 08:00:16 -04:00
|
|
|
class="btn"
|
|
|
|
|
class:btn-solid={bouton.primary}
|
|
|
|
|
>
|
|
|
|
|
{bouton.text} →
|
|
|
|
|
</a>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class="djangokam-presse">
|
|
|
|
|
{t.djangokam.presse.texte}
|
|
|
|
|
<a href="mailto:{t.djangokam.presse.email}">{t.djangokam.presse.email}</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
section {
|
|
|
|
|
background: var(--noir-profond);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-surtitre {
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.15em;
|
|
|
|
|
font-size: 0.85rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: var(--vert-oki);
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.accent-text {
|
|
|
|
|
color: var(--or-oki);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-subtitle {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.djangokam-portrait) {
|
|
|
|
|
width: 220px;
|
|
|
|
|
height: 220px;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
border: 3px solid var(--or-oki);
|
|
|
|
|
margin: 1rem auto 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-highlight {
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 2rem auto;
|
|
|
|
|
padding: 2rem;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
background: var(--card-bg);
|
|
|
|
|
border-left: 4px solid var(--or-oki);
|
|
|
|
|
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-histoire-wrapper {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 2fr 1fr;
|
|
|
|
|
gap: 2.5rem;
|
|
|
|
|
align-items: center;
|
|
|
|
|
max-width: 1000px;
|
|
|
|
|
margin: 0 auto 3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-histoire {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-histoire p {
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
margin-bottom: 1.5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo,
|
|
|
|
|
.djangokam-clip {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo a,
|
|
|
|
|
.djangokam-clip a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
transition: transform var(--dur-tanbou) var(--ease-ka);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo a:hover,
|
|
|
|
|
.djangokam-clip a:hover {
|
|
|
|
|
transform: translateY(-4px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo :global(picture),
|
|
|
|
|
.djangokam-clip :global(picture) {
|
|
|
|
|
display: contents;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo :global(img),
|
|
|
|
|
.djangokam-clip :global(img) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 280px;
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
border: 2px solid var(--or-oki);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo figcaption,
|
|
|
|
|
.djangokam-clip figcaption {
|
|
|
|
|
margin-top: 0.75rem;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo:hover figcaption,
|
|
|
|
|
.djangokam-clip:hover figcaption {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
color: var(--or-oki);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-clips {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
gap: 2.5rem;
|
|
|
|
|
margin-bottom: 3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-facts {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
|
|
gap: 1.5rem;
|
|
|
|
|
margin-bottom: 3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-card {
|
|
|
|
|
background: var(--card-bg);
|
|
|
|
|
border: var(--border-card);
|
|
|
|
|
border-left: 3px solid var(--vert-oki);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
padding: 2rem;
|
|
|
|
|
transition: transform var(--dur-tanbou) var(--ease-ka);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-card:nth-child(2n) {
|
|
|
|
|
border-left-color: var(--rouge-oki);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-card:hover {
|
|
|
|
|
transform: translateY(-4px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-icon {
|
|
|
|
|
color: var(--or-oki);
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-icon .icon {
|
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-fact-card h3 {
|
|
|
|
|
color: var(--or-oki);
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-instrument {
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto 3rem;
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
opacity: 0.85;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-instrument :global(a),
|
|
|
|
|
.djangokam-fact-card :global(a) {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-instrument :global(a:hover),
|
|
|
|
|
.djangokam-fact-card :global(a:hover) {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-presse {
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-presse a:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
:global(.djangokam-portrait) {
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 160px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-histoire-wrapper {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-duo :global(img),
|
|
|
|
|
.djangokam-clip :global(img) {
|
|
|
|
|
max-width: 220px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-facts {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.djangokam-buttons {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
