<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PIXEL PIXEL | Impression Textile Sur Mesure</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Hanken+Grotesk:wght@400;600;800;900&family=Poppins:wght@400;800;900&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
/* Neo-Brutalist Palette */
--nb-ivory: #F4F3EF;
--nb-yellow: #FFDE59;
--nb-pink: #FF90E8;
--nb-blue: #54C1FF;
--nb-green: #00E092;
--nb-ink: #1a1a1a;
}
/* Font Mappings */
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-hanken { font-family: 'Hanken Grotesk', sans-serif; }
.font-melody { font-family: 'Dela Gothic One', cursive; letter-spacing: -0.02em; }
/* Custom Utilities for that "Hard" look */
.nb-card {
border: 3px solid black;
box-shadow: 5px 5px 0px 0px black;
transition: all 0.2s ease;
}
.nb-btn {
border: 3px solid black;
box-shadow: 4px 4px 0px 0px black;
transition: all 0.1s ease;
cursor: pointer;
display: inline-block;
text-align: center;
}
.nb-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px 0px black;
}
.nb-btn:hover {
transform: translate(-1px, -1px);
box-shadow: 6px 6px 0px 0px black;
}
.nb-tag {
border: 2px solid black;
box-shadow: 2px 2px 0px 0px black;
}
/* Background Patterns */
.nb-dot {
background-image: radial-gradient(black 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.1;
}
.nb-stripes {
background: repeating-linear-gradient(
45deg,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 10px,
transparent 10px,
transparent 20px
);
}
/* Mobile Menu Animation */
#mobile-menu {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: top;
}
.menu-hidden {
transform: scaleY(0);
height: 0;
opacity: 0;
}
.menu-visible {
transform: scaleY(1);
height: auto;
opacity: 1;
}
</style>
<!-- Header -->
<header class="sticky top-0 z-40 border-b-4 border-black bg-[var(--nb-ivory)]">
<div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3">
<!-- Logo -->
<div class="flex items-center">
<div class="flex flex-col leading-[0.75]">
<span class="font-poppins text-3xl font-black tracking-tight">PIXEL</span>
<span class="font-poppins text-3xl font-black tracking-tight">PIXEL</span>
</div>
</div>
<!-- Desktop Nav -->
<nav class="hidden items-center gap-4 md:flex">
<a href="#work" class="nb-tag rounded-xl bg-white px-4 py-2 font-hanken text-sm font-extrabold hover:rotate-[-1deg] transition-transform">Réalisations</a>
<a href="#pricing" class="nb-tag rounded-xl bg-white px-4 py-2 font-hanken text-sm font-extrabold hover:rotate-[-1deg] transition-transform">Tarifs</a>
<a href="#faq" class="nb-tag rounded-xl bg-white px-4 py-2 font-hanken text-sm font-extrabold hover:rotate-[-1deg] transition-transform">FAQ</a>
<a href="#contact" class="nb-tag rounded-xl bg-white px-4 py-2 font-hanken text-sm font-extrabold hover:rotate-[-1deg] transition-transform">Contact</a>
</nav>
<!-- CTA & Mobile Menu Button -->
<div class="flex items-center gap-3">
<a href="#quote" class="hidden sm:block nb-btn rounded-xl bg-[var(--nb-pink)] px-4 py-2 font-poppins text-sm font-black uppercase">Soumission</a>
<!-- Mobile Hamburger -->
<button id="menu-btn" class="md:hidden nb-btn rounded-xl bg-white p-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Nav Dropdown -->
<div id="mobile-menu" class="menu-hidden overflow-hidden border-t-4 border-black bg-white md:hidden">
<nav class="flex flex-col p-4 gap-3">
<a href="#work" class="nb-btn w-full rounded-xl bg-[var(--nb-ivory)] px-4 py-3 font-hanken font-extrabold text-left">Réalisations</a>
<a href="#pricing" class="nb-btn w-full rounded-xl bg-[var(--nb-ivory)] px-4 py-3 font-hanken font-extrabold text-left">Tarifs</a>
<a href="#faq" class="nb-btn w-full rounded-xl bg-[var(--nb-ivory)] px-4 py-3 font-hanken font-extrabold text-left">FAQ</a>
<a href="#contact" class="nb-btn w-full rounded-xl bg-[var(--nb-ivory)] px-4 py-3 font-hanken font-extrabold text-left">Contact</a>
<a href="#quote" class="nb-btn w-full rounded-xl bg-[var(--nb-pink)] px-4 py-3 font-poppins font-black uppercase text-center mt-2">Demander une soumission</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="relative overflow-hidden border-b-4 border-black">
<div class="pointer-events-none absolute inset-0 nb-dot"></div>
<div class="mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-5 py-16 md:grid-cols-2">
<div class="relative z-10">
<h1 class="font-poppins text-5xl font-black leading-[0.95] tracking-[-.02em] md:text-7xl">
Propulsez votre <span class="inline-block -rotate-2 rounded-xl border-4 border-black bg-[var(--nb-yellow)] px-3 shadow-[4px_4px_0px_0px_black]">MARQUE</span>, unifiez votre
<span class="block font-melody mt-2 text-5xl md:text-8xl text-[var(--nb-blue)]" style="-webkit-text-stroke: 3px black; paint-order: stroke fill;">ÉQUIPE</span>
</h1>
<p class="mt-6 max-w-prose font-hanken text-lg font-bold border-l-4 border-black pl-4">
Le vêtement comme outil de communication et de team building. Impression DTF, DTG et sérigraphie corporative pour vos événements, uniformes et promotions.
</p>
<div class="mt-8 flex flex-wrap items-center gap-4">
<a href="#quote" class="nb-btn rounded-2xl bg-[var(--nb-blue)] px-6 py-4 font-poppins text-lg font-black uppercase hover:bg-[var(--nb-yellow)]">Obtenir une soumission</a>
<a href="#work" class="nb-btn rounded-2xl bg-white px-6 py-4 font-poppins text-lg font-black">Nos services</a>
<div class="nb-tag rounded-2xl bg-[var(--nb-green)] px-4 py-2 font-hanken text-xs font-extrabold uppercase tracking-wide">Rush 48h disponible</div>
</div>
<div class="mt-8 flex flex-wrap gap-3 font-hanken text-xs font-extrabold">
<span class="nb-tag rounded-xl bg-white px-3 py-2">Respect de votre charte graphique</span>
<span class="nb-tag rounded-xl bg-white px-3 py-2">Commandes de volume</span>
<span class="nb-tag rounded-xl bg-white px-3 py-2">Grandeurs XS–5XL</span>
<span class="nb-tag rounded-xl bg-white px-3 py-2">Livraison bureaux & événements</span>
</div>
</div>
<!-- Hero Graphic -->
<div class="relative mt-8 md:mt-0">
<div class="absolute -inset-6 -z-10 rotate-2 rounded-3xl border-4 border-black bg-[var(--nb-pink)] shadow-[8px_8px_0px_0px_black]"></div>
<div class="nb-card rounded-3xl bg-white p-4 relative">
<!-- Replacement: Single Image Placeholder -->
<div class="nb-card aspect-[4/3] w-full rounded-xl bg-gray-200 overflow-hidden relative group cursor-pointer">
<!-- Placeholder Image (Fashion/Printing Vibe) -->
<img src="https://images.unsplash.com/photo-1562157873-818bc0726f68?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="T-shirt Printing Hero" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
<!-- Overlay Tag -->
<div class="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition-colors">
<span class="nb-tag bg-white px-4 py-2 font-hanken text-sm font-extrabold rotate-[-2deg] group-hover:rotate-0 transition-transform shadow-[4px_4px_0px_0px_black]">Nouvelle Collection</span>
</div>
</div>
<!-- Modification: Split space into DTG and DTF -->
<div class="mt-4 grid grid-cols-2 gap-4">
<div class="nb-card rounded-xl bg-[var(--nb-ink)] p-4 text-white">
<p class="font-poppins text-lg font-black">DTG</p>
<p class="font-hanken text-sm font-semibold opacity-80">Impression Numérique</p>
</div>
<div class="nb-card rounded-xl bg-[var(--nb-green)] p-4">
<p class="font-poppins text-lg font-black">DTF</p>
<p class="font-hanken text-sm font-semibold">Impression sur Film</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Proof Strip -->
<section class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 py-10">
<div class="nb-card rounded-3xl bg-[var(--nb-yellow)] p-8 text-center">
<p class="font-hanken text-sm font-extrabold uppercase tracking-widest mb-6">Ils nous font confiance : artistes, marques et festivals</p>
<div class="grid grid-cols-2 items-center gap-6 md:grid-cols-6">
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:-rotate-3 transition-transform">NOISE</div>
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:rotate-3 transition-transform">VAULT</div>
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:-rotate-3 transition-transform">SYNTH</div>
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:rotate-3 transition-transform">GALLERY</div>
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:-rotate-3 transition-transform">ATLAS</div>
<div class="nb-card rounded-xl bg-white p-3 text-center font-poppins text-lg font-black hover:rotate-3 transition-transform">NOVA</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="work" class="border-b-4 border-black bg-[#fafafa]">
<div class="mx-auto max-w-7xl px-5 py-20">
<div class="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-4">
<h2 class="font-poppins text-5xl font-black leading-none md:text-6xl">Des services qui <span class="inline-block -rotate-1 rounded-xl border-4 border-black bg-[var(--nb-blue)] px-3 text-white shadow-[4px_4px_0px_0px_black]">FLASHENT</span></h2>
<span class="nb-tag rounded-xl bg-white px-4 py-2 font-hanken text-sm font-extrabold">Techniques mixtes & sur mesure</span>
</div>
<div class="grid gap-8 md:grid-cols-3">
<!-- Service 1 -->
<div class="nb-card rounded-3xl bg-white p-6 hover:-translate-y-2 transition-transform">
<div class="nb-tag inline-block rounded-xl px-3 py-1 font-hanken text-[10px] font-extrabold uppercase tracking-wider mb-2" style="background:var(--nb-pink);">Sérigraphie</div>
<h3 class="mt-2 font-poppins text-3xl font-black">Sérigraphie</h3>
<p class="mt-3 font-hanken text-base font-semibold leading-relaxed">Couleurs éclatantes (spot colors), demi-tons et encres métalliques. La référence pour le volume.</p>
<a href="#quote" class="mt-6 w-full text-center inline-block nb-btn rounded-xl bg-black px-4 py-3 font-poppins text-sm font-black text-white hover:bg-[var(--nb-yellow)] hover:text-black">Choisir</a></div>
<!-- Service 2 -->
<div class="nb-card rounded-3xl bg-white p-6 hover:-translate-y-2 transition-transform">
<div class="nb-tag inline-block rounded-xl px-3 py-1 font-hanken text-[10px] font-extrabold uppercase tracking-wider mb-2" style="background:var(--nb-yellow);">Numérique</div>
<h3 class="mt-2 font-poppins text-3xl font-black">Impression DTG</h3>
<p class="mt-3 font-hanken text-base font-semibold leading-relaxed">Qualité photo, couleur illimitée, sur demande. Idéal pour les petits lots et les dégradés complexes.</p>
<a href="#quote" class="mt-6 w-full text-center inline-block nb-btn rounded-xl bg-black px-4 py-3 font-poppins text-sm font-black text-white hover:bg-[var(--nb-yellow)] hover:text-black">Choisir</a></div>
<!-- Service 3 -->
<div class="nb-card rounded-3xl bg-white p-6 hover:-translate-y-2 transition-transform">
<div class="nb-tag inline-block rounded-xl px-3 py-1 font-hanken text-[10px] font-extrabold uppercase tracking-wider mb-2" style="background:var(--nb-green);">Fils</div>
<h3 class="mt-2 font-poppins text-3xl font-black">Broderie</h3>
<p class="mt-3 font-hanken text-base font-semibold leading-relaxed">Fils premium, effets 3D "puff" et satinés. Le top pour les casquettes, toques et hoodies épais.</p>
<a href="#quote" class="mt-6 w-full text-center inline-block nb-btn rounded-xl bg-black px-4 py-3 font-poppins text-sm font-black text-white hover:bg-[var(--nb-yellow)] hover:text-black">Choisir</a></div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 py-20">
<h2 class="font-poppins text-5xl font-black md:text-6xl text-center md:text-left mb-12">Prix simples et <span class="inline-block rotate-1 rounded-xl border-4 border-black bg-[var(--nb-yellow)] px-3 shadow-[4px_4px_0px_0px_black]">transparents</span></h2>
<div class="grid gap-8 md:grid-cols-3 items-start">
<!-- Starter Tier -->
<div class="nb-card rounded-3xl p-6 bg-[var(--nb-ivory)] relative mt-4">
<div class="flex items-baseline justify-between">
<h3 class="font-poppins text-2xl font-black">Démarrage</h3>
</div>
<div class="mt-4 flex items-end gap-1 border-b-4 border-black pb-4">
<span class="font-melody text-5xl" style="font-variation-settings:'wght' 900;">$</span>
<span class="font-poppins text-xl font-black">/t-shirt</span>
</div>
<p class="mt-4 font-hanken text-sm font-extrabold uppercase text-gray-500">Parfait pour tester</p>
<ul class="mt-4 space-y-2 font-hanken text-sm font-bold">
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-[var(--nb-green)] border-2 border-black rounded-full"></div> DTG jusqu'à 12x16"</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-[var(--nb-green)] border-2 border-black rounded-full"></div> Pas de frais de setup</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-[var(--nb-green)] border-2 border-black rounded-full"></div> 1–20 morceaux</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-[var(--nb-green)] border-2 border-black rounded-full"></div> 2–3 jours délai</li>
</ul>
<a href="#quote" class="mt-8 block w-full nb-btn rounded-xl bg-white px-4 py-3 font-poppins text-sm font-black uppercase">Choisir Démarrage</a>
</div>
<!-- Merch Drop Tier (Highlighted) -->
<div class="nb-card rounded-3xl p-6 bg-[var(--nb-blue)] scale-105 z-10 shadow-[8px_8px_0px_0px_black]">
<div class="absolute -top-5 left-1/2 -translate-x-1/2 nb-tag bg-[var(--nb-pink)] px-4 py-1 font-black text-xs uppercase rotate-2">Populaire</div>
<div class="flex items-baseline justify-between">
<h3 class="font-poppins text-3xl font-black">Collection</h3>
</div>
<div class="mt-4 flex items-end gap-1 border-b-4 border-black pb-4">
<span class="font-melody text-6xl" style="font-variation-settings:'wght' 900;">$</span>
<span class="font-poppins text-2xl font-black">/t-shirt</span>
</div>
<p class="mt-4 font-hanken text-sm font-extrabold uppercase opacity-80">Idéal pour 50 unités</p>
<ul class="mt-4 space-y-2 font-hanken text-sm font-bold">
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> Sérigraphie 1–3 couleurs</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> Setup films inclus</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> 50–250 morceaux</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> 5–7 jours délai</li>
</ul>
<a href="#quote" class="mt-8 block w-full nb-btn rounded-xl bg-black text-white px-4 py-3 font-poppins text-sm font-black uppercase hover:bg-white hover:text-black">Choisir Collection</a>
</div>
<!-- Pro Tier -->
<div class="nb-card rounded-3xl p-6 bg-[var(--nb-green)] mt-4">
<div class="flex items-baseline justify-between">
<h3 class="font-poppins text-2xl font-black">Pro</h3>
</div>
<div class="mt-4 flex items-end gap-1 border-b-4 border-black pb-4">
<span class="font-melody text-5xl" style="font-variation-settings:'wght' 900;">$</span>
<span class="font-poppins text-xl font-black">/t-shirt</span>
</div>
<p class="mt-4 font-hanken text-sm font-extrabold uppercase opacity-70">Volume & économies</p>
<ul class="mt-4 space-y-2 font-hanken text-sm font-bold">
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> Sérigraphie 4–6 couleurs</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> Match Pantone inclus</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> 250+ morceaux</li>
<li class="flex items-center gap-2"><div class="w-3 h-3 bg-white border-2 border-black rounded-full"></div> 7–10 jours délai</li>
</ul>
<a href="#quote" class="mt-8 block w-full nb-btn rounded-xl bg-white px-4 py-3 font-poppins text-sm font-black uppercase">Choisir Pro</a>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="border-b-4 border-black overflow-hidden">
<div class="mx-auto max-w-7xl px-5 py-16">
<div class="mb-8 flex items-end justify-between">
<h2 class="font-poppins text-4xl font-black">Quelques <span class="inline-block -rotate-2 rounded-xl border-4 border-black bg-[var(--nb-pink)] px-2 shadow-[4px_4px_0px_0px_black]">réalisations</span></h2>
<a href="#quote" class="nb-btn rounded-xl bg-white px-4 py-2 font-poppins text-sm font-black">Imprimez les vôtres</a>
</div>
<!-- Modified Grid: Changed from md:grid-cols-4 to md:grid-cols-3 for better layout of 6 items -->
<div class="grid grid-cols-2 gap-6 md:grid-cols-3">
<!-- Gallery Item 1 (Updated with Photo) -->
<div class="group relative">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<!-- Replace the src below with your local file path: 'photo 1.jpg' -->
<img src="https://images.unsplash.com/photo-1529139574466-a302d2d3f524?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Custom Cat Print Sweatshirt" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer z-10">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative mt-8 md:mt-0">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center opacity-20 font-melody text-6xl">2</div>
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center opacity-20 font-melody text-6xl">3</div>
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative mt-8 md:mt-0">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center opacity-20 font-melody text-6xl">4</div>
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center opacity-20 font-melody text-6xl">5</div>
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="group relative mt-8 md:mt-0">
<div class="nb-card aspect-[3/4] w-full rounded-2xl bg-white p-2">
<div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden relative">
<div class="absolute inset-0 flex items-center justify-center opacity-20 font-melody text-6xl">6</div>
</div>
</div>
<div class="absolute inset-0 hidden items-center justify-center rounded-2xl bg-black/80 text-white group-hover:flex transition-all cursor-pointer">
<span class="nb-tag rounded-lg bg-[var(--nb-yellow)] text-black border-2 border-white px-4 py-2 font-hanken text-sm font-extrabold shadow-[4px_4px_0px_0px_white]">Voir</span>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="border-b-4 border-black bg-[var(--nb-yellow)]">
<div class="mx-auto max-w-7xl px-5 py-20">
<h2 class="font-poppins text-4xl font-black text-center mb-10">Ceux qui <span class="inline-block -rotate-2 rounded-xl border-4 border-black bg-white px-3 shadow-[4px_4px_0px_0px_black]">jase</span> de nous</h2>
<div class="grid gap-8 md:grid-cols-3">
<!-- 1. Local Coffee (Moved to first) -->
<div class="nb-card rounded-3xl bg-white p-6 relative hover:-translate-y-1 transition-transform">
<div class="absolute -top-4 -right-4 text-6xl">❝</div>
<p class="font-melody text-2xl leading-tight pt-4">“La broderie 3D est vraiment 3D, pas juste à peu près. Malade.”</p>
<div class="mt-6 border-t-2 border-black pt-4">
<p class="font-hanken text-sm font-extrabold uppercase">Local Coffee</p>
<p class="font-hanken text-xs font-semibold text-gray-500">100 Casquettes</p>
</div>
</div>
<!-- 2. NOVA BAND (Middle) -->
<div class="nb-card rounded-3xl bg-white p-6 relative mt-6 md:mt-0 hover:-translate-y-1 transition-transform">
<div class="absolute -top-4 -right-4 text-6xl">❝</div>
<p class="font-melody text-2xl leading-tight pt-4">“Les couleurs *claquent*. Le délai était fou raide. Nos t-shirts sont sold out.”</p>
<div class="mt-6 border-t-2 border-black pt-4">
<p class="font-hanken text-sm font-extrabold uppercase">NOVA BAND</p>
<p class="font-hanken text-xs font-semibold text-gray-500">500 t-shirts • 6 couleurs</p>
</div>
</div>
<!-- 3. Streetwear Co. (Moved to last) -->
<div class="nb-card rounded-3xl bg-white p-6 relative hover:-translate-y-1 transition-transform">
<div class="absolute -top-4 -right-4 text-6xl">❝</div>
<p class="font-melody text-2xl leading-tight pt-4">“D'habitude les shops d'impression c'est l'enfer. Eux autres sont juste... efficaces.”</p>
<div class="mt-6 border-t-2 border-black pt-4">
<p class="font-hanken text-sm font-extrabold uppercase">Streetwear Co.</p>
<p class="font-hanken text-xs font-semibold text-gray-500">50 échantillons DTG</p>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section (Translated for consistency) -->
<section id="faq" class="border-b-4 border-black bg-white">
<div class="mx-auto max-w-7xl px-5 py-20">
<h2 class="font-poppins text-4xl font-black mb-8">FAQ, mais <span class="inline-block rotate-1 rounded-xl border-4 border-black bg-[var(--nb-blue)] px-2 shadow-[4px_4px_0px_0px_black] text-white">brutale</span></h2>
<div class="grid gap-6 md:grid-cols-2">
<div class="nb-card rounded-2xl bg-[var(--nb-green)] p-6">
<p class="font-poppins text-xl font-black mb-2">C'est quoi les fichiers?</p>
<p class="font-hanken text-sm font-bold">Vectoriel (AI/PDF/SVG) ou PNG 300DPI à la taille d'impression. On aide si besoin.</p>
</div>
<div class="nb-card rounded-2xl bg-white p-6">
<p class="font-poppins text-xl font-black mb-2">Match de couleurs?</p>
<p class="font-hanken text-sm font-bold">Oui. Pantone Solid Coated inclus avec le forfait Pro, dispo pour les autres.</p>
</div>
<div class="nb-card rounded-2xl bg-white p-6">
<p class="font-poppins text-xl font-black mb-2">Commande minimum?</p>
<p class="font-hanken text-sm font-bold">DTG : <span class="bg-[var(--nb-yellow)] px-1 border border-black">aucun minimum</span>. Sérigraphie commence à 25 morceaux.</p>
</div>
<div class="nb-card rounded-2xl bg-[var(--nb-green)] p-6">
<p class="font-poppins text-xl font-black mb-2">Délais?</p>
<p class="font-hanken text-sm font-bold">Standard 5–7 jours ouvrables. Rush 48h dispo si le linge est en stock.</p>
</div>
</div>
</div>
</section>
<!-- Quote / Contact Section -->
<section id="quote" class="border-b-4 border-black bg-[#fafafa]">
<div class="mx-auto max-w-7xl px-5 py-20">
<div class="grid gap-12 md:grid-cols-2">
<!-- Form -->
<div>
<h2 class="font-poppins text-5xl font-black mb-2">Soumission gratuite</h2>
<p class="font-hanken text-base font-bold text-gray-600 mb-8">Dites-nous ce que vous voulez imprimer. On répond à la vitesse de l'éclair.</p>
<form class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Nom</span>
<input class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold placeholder:font-normal focus:bg-[var(--nb-ivory)] outline-none" placeholder="Votre nom">
</label>
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Courriel</span>
<input type="email" class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold placeholder:font-normal focus:bg-[var(--nb-ivory)] outline-none" placeholder="Courriel">
</label>
</div>
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Quantité</span>
<input type="number" class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold placeholder:font-normal focus:bg-[var(--nb-ivory)] outline-none" placeholder="ex. 50">
</label>
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Méthode</span>
<select class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold focus:bg-[var(--nb-ivory)] outline-none appearance-none">
<option>DTG (Numérique)</option>
<option>Sérigraphie</option>
<option>Broderie</option>
<option>Je ne sais pas</option>
</select>
</label>
</div>
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Vêtement / Marque</span>
<input class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold placeholder:font-normal focus:bg-[var(--nb-ivory)] outline-none" placeholder="ex. Gildan Hammer, Comfort Colors...">
</label>
<label class="block">
<span class="mb-1 inline-block font-hanken text-xs font-extrabold uppercase">Lien Artwork / Notes</span>
<textarea rows="4" class="nb-card w-full rounded-xl bg-white p-3 font-hanken text-sm font-bold placeholder:font-normal focus:bg-[var(--nb-ivory)] outline-none" placeholder="Lien vers vos fichiers ou description du projet"></textarea>
</label>
<button class="nb-btn w-full rounded-2xl bg-[var(--nb-ink)] px-6 py-4 font-poppins text-lg font-black text-white hover:bg-[var(--nb-blue)] hover:text-black uppercase tracking-wide">Demander une soumission</button>
<p class="font-hanken text-xs font-extrabold text-center text-gray-500">En cliquant, vous acceptez nos termes. On respecte votre boîte de réception.</p>
</form>
</div>
<!-- Info Box -->
<div class="relative mt-8 md:mt-0">
<div class="absolute -inset-4 -z-10 rotate-[-1.5deg] rounded-3xl border-4 border-black bg-[var(--nb-yellow)] shadow-[8px_8px_0px_0px_black]"></div>
<div class="nb-card rounded-3xl bg-white p-8">
<p class="font-poppins text-2xl font-black">Pourquoi PIXEL PIXEL ?</p>
<ul class="mt-6 space-y-4 font-hanken text-sm font-extrabold">
<li class="flex items-center gap-3">
<span class="nb-tag flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--nb-blue)] text-white">✓</span>
Test presse gratuit (commandes 250+)
</li>
<li class="flex items-center gap-3">
<span class="nb-tag flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--nb-blue)] text-white">✓</span>
Maquettes numériques en 24h
</li>
<li class="flex items-center gap-3">
<span class="nb-tag flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--nb-blue)] text-white">✓</span>
Vêtements éthiques sur demande
</li>
<li class="flex items-center gap-3">
<span class="nb-tag flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--nb-blue)] text-white">✓</span>
Livraison mondiale avec suivi
</li>
</ul>
<div class="mt-8 grid grid-cols-3 gap-4">
<div class="nb-card rounded-2xl bg-[var(--nb-green)] p-3 text-center">
<p class="font-poppins text-xs font-black uppercase">Délai moy.</p>
<p class="font-melody text-2xl mt-1">5-7j</p>
</div>
<div class="nb-card rounded-2xl bg-[var(--nb-green)] p-3 text-center">
<p class="font-poppins text-xs font-black uppercase">Livrées</p>
<p class="font-melody text-2xl mt-1">12k+</p>
</div>
<div class="nb-card rounded-2xl bg-[var(--nb-green)] p-3 text-center">
<p class="font-poppins text-xs font-black uppercase">Clients</p>
<p class="font-melody text-2xl mt-1">72%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="bg-black text-white">
<div class="mx-auto max-w-7xl px-5 py-12">
<div class="grid gap-8 md:grid-cols-4">
<div class="md:col-span-2">
<div class="flex items-center gap-2 mb-4">
<p class="font-poppins text-2xl font-black">PIXEL PIXEL</p>
</div>
<p class="font-hanken text-sm font-semibold text-gray-400">Atelier d'impression textile sur mesure.<br>Mascouche • Monde entier</p>
</div>
<div class="space-y-3 font-hanken text-sm font-bold">
<a class="block hover:text-[var(--nb-pink)] transition-colors" href="#work">Réalisations</a>
<a class="block hover:text-[var(--nb-pink)] transition-colors" href="#pricing">Tarifs</a>
<a class="block hover:text-[var(--nb-pink)] transition-colors" href="#faq">FAQ</a>
</div>
<div class="space-y-3 font-hanken text-sm font-bold">
<a class="block hover:text-[var(--nb-blue)] transition-colors" href="mailto:hello@pixelpixel.xyz">hello@pixelpixel.xyz</a>
<a class="block hover:text-[var(--nb-blue)] transition-colors" href="tel:+14165550123">+1 (416) 555‑0123</a>
<a class="block hover:text-[var(--nb-blue)] transition-colors" href="#quote">Obtenir une soumission</a>
</div>
</div>
<p class="mt-12 border-t border-white/20 pt-6 text-center font-hanken text-xs text-gray-500">© 2026 PIXEL PIXEL — Tous droits réservés.</p>
</div>
</footer>
<!-- Scripts -->
<script>
// Mobile Menu Toggle
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
if (mobileMenu.classList.contains('menu-hidden')) {
mobileMenu.classList.remove('menu-hidden');
mobileMenu.classList.add('menu-visible');
} else {
mobileMenu.classList.add('menu-hidden');
mobileMenu.classList.remove('menu-visible');
}
});
// Close menu when a link is clicked
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('menu-hidden');
mobileMenu.classList.remove('menu-visible');
});
});
</script>