sucupira
a6f359559b
- IntroLoader : cérémonie d'entrée (flag-bar, monogramme, titrage), 1re visite, skippable - Lenis au layout (ticker GSAP, imports dynamiques) + ancres interceptées - Hero : titrage oversized en masques, filets drapeau en parallaxe, sortie scrubée (scroll-driven CSS) - Reveal syncopé gwoka (use:reveal) sur 83 éléments, flag chips, icônes pop - Marquee kréyòl (tagline + valeurs), pause au survol - Hover craft : boutons à balayage or, nav soulignée + section active, pochettes DJANGOKAM en wipe clip-path + tilt 3D (use:tilt) avec reflet or - Gate unique prefers-reduced-motion partout ; contenu complet sans JS - Lighthouse mobile 91/100/100/100 — JS initial 69 Ko gzip (budget 170 Ko)
168 lines
4.0 KiB
Svelte
168 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import FlagChip from '$lib/components/motion/FlagChip.svelte';
|
|
import KineticText from '$lib/components/motion/KineticText.svelte';
|
|
import ResponsiveImage from '$lib/components/ResponsiveImage.svelte';
|
|
import type { Bundle, Locale } from '$lib/i18n';
|
|
import { reveal } from '$lib/motion/reveal';
|
|
|
|
import joukawouve from '$lib/assets/images/joukawouve.png?format=avif;webp;png&w=320;640&as=picture';
|
|
import akv from '$lib/assets/images/akv.png?format=avif;webp;png&w=320;640&as=picture';
|
|
import cyberMawonaj from '$lib/assets/images/cyber_mawonaj.jpg?format=avif;webp;jpg&w=320;640&as=picture';
|
|
|
|
let { t }: { t: Bundle; locale?: Locale } = $props();
|
|
|
|
const LOGOS: Record<string, typeof joukawouve> = {
|
|
'/assets/images/joukawouve.png': joukawouve,
|
|
'/assets/images/akv.png': akv,
|
|
'/assets/images/cyber_mawonaj.jpg': cyberMawonaj
|
|
};
|
|
</script>
|
|
|
|
<section id="partenaires" class="section">
|
|
<div class="container">
|
|
<FlagChip />
|
|
<h2 class="section-title">
|
|
<KineticText as="span" text={t.partners.section_title} /> 
|
|
<span class="accent-text"
|
|
><KineticText as="span" text={t.partners.section_title_accent} /></span
|
|
>
|
|
</h2>
|
|
<p class="section-subtitle">{t.partners.section_subtitle}</p>
|
|
|
|
<div class="partners-grid">
|
|
{#each t.partners.items as partner, i (partner.name)}
|
|
<div class="partner-card" use:reveal={i}>
|
|
<div class="partner-logo-container">
|
|
<ResponsiveImage
|
|
picture={LOGOS[partner.logo]}
|
|
alt="Logo {partner.name}"
|
|
sizes="130px"
|
|
class="partner-logo"
|
|
/>
|
|
</div>
|
|
<h3>{partner.name}</h3>
|
|
<p class="partner-description">{partner.description}</p>
|
|
<div class="partner-links">
|
|
{#each partner.links as link (link.url)}
|
|
<a href={link.url} target="_blank" rel="external noopener noreferrer" class="partner-link">
|
|
{link.text} →
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
section {
|
|
background: var(--noir-profond);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.accent-text {
|
|
color: var(--or-oki);
|
|
}
|
|
|
|
.section-subtitle {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.partners-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
max-width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.partner-card {
|
|
background: var(--card-bg);
|
|
border: var(--border-card);
|
|
border-top: 4px solid var(--turquoise-caraibes);
|
|
border-radius: var(--radius-md);
|
|
padding: 2.5rem;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
transition:
|
|
transform var(--dur-tanbou) var(--ease-ka),
|
|
border-color var(--dur-tanbou) var(--ease-ka);
|
|
}
|
|
|
|
.partner-card:hover {
|
|
transform: translateY(-4px);
|
|
border-top-color: var(--or-oki);
|
|
}
|
|
|
|
.partner-logo-container {
|
|
width: 130px;
|
|
height: 130px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
background: color-mix(in srgb, var(--blanc-creme) 4%, transparent);
|
|
border-radius: var(--radius-md);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.partner-logo-container :global(picture) {
|
|
display: contents;
|
|
}
|
|
|
|
.partner-logo-container :global(.partner-logo) {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.partner-card h3 {
|
|
color: var(--or-oki);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.partner-description {
|
|
line-height: 1.6;
|
|
margin-bottom: 1.5rem;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.partner-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.partner-link {
|
|
color: var(--or-oki);
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.95rem;
|
|
padding: 0.4rem 0.9rem;
|
|
border: 1px solid var(--or-oki);
|
|
border-radius: var(--radius-sm);
|
|
transition:
|
|
background var(--dur-tanbou) var(--ease-ka),
|
|
gap var(--dur-tanbou) var(--ease-ka);
|
|
}
|
|
|
|
.partner-link:hover {
|
|
background: color-mix(in srgb, var(--or-oki) 12%, transparent);
|
|
gap: 0.6rem;
|
|
}
|
|
</style>
|