|
<svg xmlns="http://www.w3.org/2000/svg" width="1180" height="760" viewBox="0 0 1180 760" font-family="Geist Sans, system-ui, Arial, sans-serif">
|
|
<defs>
|
|
<style>
|
|
.h2 { font-size: 30px; font-weight: 700; fill: #0f172a; }
|
|
.sub { font-size: 16px; fill: #475569; }
|
|
.quote { font-size: 16px; fill: #333333; }
|
|
.attr { font-size: 13px; font-weight: 600; fill: #0f172a; }
|
|
.role { font-size: 12px; fill: #94a3b8; }
|
|
.meta { font-size: 14px; fill: #475569; }
|
|
.big { font-size: 28px; font-weight: 700; fill: #0f172a; }
|
|
.link { font-size: 14px; font-weight: 600; fill: #50a7af; }
|
|
.label { font-size: 11px; fill: #94a3b8; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Page background -->
|
|
<rect width="1180" height="760" fill="#ffffff"/>
|
|
|
|
<!-- ===================== DESKTOP ===================== -->
|
|
<text x="40" y="34" class="label">DESKTOP (section between "Comment ça marche" and CTA "Rejoignez le groupe fondateur")</text>
|
|
|
|
<!-- Section band (light grey #F9F9F9) -->
|
|
<rect x="40" y="46" width="1100" height="420" rx="16" fill="#F9F9F9" stroke="#E5E5E5"/>
|
|
|
|
<!-- Header: rating + count -->
|
|
<g transform="translate(0,0)">
|
|
<text x="590" y="100" text-anchor="middle" class="h2">Ils nous font confiance</text>
|
|
<!-- Stars -->
|
|
<g transform="translate(470,118)" fill="#00B67A">
|
|
<path d="M11 0l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z"/>
|
|
<path d="M41 0l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z"/>
|
|
<path d="M71 0l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z"/>
|
|
<path d="M101 0l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z"/>
|
|
<path d="M131 0l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z"/>
|
|
</g>
|
|
<text x="640" y="138" class="big">4,9/5</text>
|
|
<text x="590" y="170" text-anchor="middle" class="meta">120 avis vérifiés</text>
|
|
</g>
|
|
|
|
<!-- Left arrow -->
|
|
<circle cx="80" cy="290" r="20" fill="#ffffff" stroke="#E5E5E5"/>
|
|
<path d="M85 282 l-7 8 7 8" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- Right arrow -->
|
|
<circle cx="1100" cy="290" r="20" fill="#ffffff" stroke="#E5E5E5"/>
|
|
<path d="M1095 282 l7 8 -7 8" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<!-- 3 testimonial cards (active triple on desktop) -->
|
|
<g>
|
|
<!-- Card 1 -->
|
|
<rect x="130" y="210" width="300" height="160" rx="12" fill="#FFFFFF" stroke="#E5E5E5"/>
|
|
<g transform="translate(150,234)" fill="#00B67A">
|
|
<path d="M8 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M30 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M52 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M74 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M96 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
</g>
|
|
<text x="150" y="272" class="quote">« J'ai trouvé un job en</text>
|
|
<text x="150" y="294" class="quote">2 semaines ! »</text>
|
|
<circle cx="160" cy="338" r="12" fill="#e4f4d7"/>
|
|
<text x="180" y="335" class="attr">Marie D.</text>
|
|
<text x="180" y="351" class="role">Lead React Developer</text>
|
|
|
|
<!-- Card 2 (center, emphasized) -->
|
|
<rect x="445" y="200" width="300" height="180" rx="12" fill="#FFFFFF" stroke="#50a7af" stroke-width="1.5"/>
|
|
<g transform="translate(465,228)" fill="#00B67A">
|
|
<path d="M8 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M30 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M52 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M74 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M96 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
</g>
|
|
<text x="465" y="270" class="quote">« Le matching IA m'a sorti</text>
|
|
<text x="465" y="292" class="quote">des offres que je n'aurais</text>
|
|
<text x="465" y="314" class="quote">jamais trouvées. »</text>
|
|
<circle cx="475" cy="350" r="12" fill="#dcedef"/>
|
|
<text x="495" y="347" class="attr">Karim B.</text>
|
|
<text x="495" y="363" class="role">Senior DevOps</text>
|
|
|
|
<!-- Card 3 -->
|
|
<rect x="760" y="210" width="300" height="160" rx="12" fill="#FFFFFF" stroke="#E5E5E5"/>
|
|
<g transform="translate(780,234)" fill="#00B67A">
|
|
<path d="M8 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M30 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M52 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M74 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
<path d="M96 0l2 5 5 1-4 4 1 5-4-3-4 3 1-5-4-4 5-1z"/>
|
|
</g>
|
|
<text x="780" y="272" class="quote">« Interface claire, alertes</text>
|
|
<text x="780" y="294" class="quote">email pertinentes. »</text>
|
|
<circle cx="790" cy="338" r="12" fill="#f8e8d3"/>
|
|
<text x="810" y="335" class="attr">Sophie L.</text>
|
|
<text x="810" y="351" class="role">Fullstack Engineer</text>
|
|
</g>
|
|
|
|
<!-- Dots -->
|
|
<g transform="translate(560,410)">
|
|
<rect x="0" y="0" width="24" height="6" rx="3" fill="#50a7af"/>
|
|
<circle cx="38" cy="3" r="3" fill="#cbd5e1"/>
|
|
<circle cx="54" cy="3" r="3" fill="#cbd5e1"/>
|
|
</g>
|
|
|
|
<!-- "Voir tous les avis" link -->
|
|
<text x="590" y="448" text-anchor="middle" class="link">Voir tous les avis ↗</text>
|
|
|
|
<!-- ===================== MOBILE ===================== -->
|
|
<text x="40" y="514" class="label">MOBILE (1 carte visible, swipe / flèches, auto-scroll 5s)</text>
|
|
|
|
<!-- Phone frame -->
|
|
<rect x="430" y="528" width="320" height="220" rx="18" fill="#F9F9F9" stroke="#E5E5E5"/>
|
|
|
|
<!-- Header -->
|
|
<text x="590" y="560" text-anchor="middle" class="attr">Ils nous font confiance</text>
|
|
<g transform="translate(530,572)" fill="#00B67A">
|
|
<path d="M6 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M24 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M42 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M60 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M78 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
</g>
|
|
<text x="630" y="582" class="meta" font-weight="700">4,9/5</text>
|
|
<text x="590" y="600" text-anchor="middle" class="role">120 avis vérifiés</text>
|
|
|
|
<!-- One card -->
|
|
<rect x="460" y="612" width="260" height="96" rx="12" fill="#FFFFFF" stroke="#E5E5E5"/>
|
|
<g transform="translate(478,630)" fill="#00B67A">
|
|
<path d="M6 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M24 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M42 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M60 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
<path d="M78 0l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1z"/>
|
|
</g>
|
|
<text x="478" y="664" class="quote" font-size="13">« J'ai trouvé un job en 2 sem. »</text>
|
|
<text x="478" y="692" class="attr" font-size="12">Marie D.</text>
|
|
|
|
<!-- Mobile arrows -->
|
|
<circle cx="448" cy="660" r="14" fill="#ffffff" stroke="#E5E5E5"/>
|
|
<path d="M451 654 l-5 6 5 6" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="732" cy="660" r="14" fill="#ffffff" stroke="#E5E5E5"/>
|
|
<path d="M729 654 l5 6 -5 6" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round"/>
|
|
|
|
<!-- Mobile dots + link -->
|
|
<g transform="translate(565,720)">
|
|
<rect x="0" y="0" width="18" height="5" rx="2.5" fill="#50a7af"/>
|
|
<circle cx="30" cy="2.5" r="2.5" fill="#cbd5e1"/>
|
|
<circle cx="44" cy="2.5" r="2.5" fill="#cbd5e1"/>
|
|
</g>
|
|
<text x="590" y="744" text-anchor="middle" class="link" font-size="13">Voir tous les avis ↗</text>
|
|
|
|
<!-- Legend (charter tokens) -->
|
|
<text x="820" y="556" class="label">Charte / tokens</text>
|
|
<rect x="820" y="566" width="14" height="14" rx="3" fill="#FFFFFF" stroke="#E5E5E5"/>
|
|
<text x="842" y="577" class="role">Carte #FFFFFF · bordure #E5E5E5</text>
|
|
<rect x="820" y="588" width="14" height="14" rx="3" fill="#F9F9F9" stroke="#E5E5E5"/>
|
|
<text x="842" y="599" class="role">Fond section #F9F9F9</text>
|
|
<rect x="820" y="610" width="14" height="14" rx="3" fill="#00B67A"/>
|
|
<text x="842" y="621" class="role">Étoiles #00B67A (vert Trustpilot)</text>
|
|
<rect x="820" y="632" width="14" height="14" rx="3" fill="#50a7af"/>
|
|
<text x="842" y="643" class="role">Lien / accent secondary #50a7af</text>
|
|
<rect x="820" y="654" width="14" height="14" rx="3" fill="#333333"/>
|
|
<text x="842" y="665" class="role">Texte citation #333333</text>
|
|
</svg>
|
