// Testimonials section — "Ils ont simulé avant d'acheter." // Carousel avec focus central : 3 cartes visibles, celle du milieu en avant. function TestimonialsSection({ mobile = false }) { const [visible, setVisible] = React.useState(false); const [active, setActive] = React.useState(4); // milieu (0..8) const ref = React.useRef(null); React.useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) setVisible(true); }); }, { threshold: 0.15 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); const reveal = (i) => ({ opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(16px)', transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms`, }); // Palette des badges — on cycle dans 4 couleurs de marque. // Chaque témoignage utilise UNE accent : badge + initiales avatar identiques. const GREEN = { bg: TOKENS.green, fg: TOKENS.ink }; const BLUE = { bg: TOKENS.blue, fg: '#fff' }; const CORAL = { bg: TOKENS.coral, fg: '#fff' }; const DARK = { bg: TOKENS.ink, fg: '#fff' }; const PALETTES = [GREEN, BLUE, CORAL, DARK]; // 9 témoignages — l'accent couleur cycle automatiquement (index % 3) const items = [ { tag: '+140 € / MOIS', stars: 5, quote: "Après mon 1er bien, j'ai voulu optimiser le 2ème. Le simulateur m'a fait réaliser qu'un 3 pièces dans ce quartier serait plus rentable qu'un studio en hypercentre. Résultat : +140 €/mois de cashflow qui tombent vraiment dans ma poche.", name: 'Anaïs D.', city: 'Paris', initials: 'AD' }, { tag: '12 K€ ÉCONOMISÉS', stars: 5, quote: "Premier achat, donc forcément stressée. Les analyses m'ont donné des arguments concrets pour décider et négocier. J'ai gagné 12 K€ sur le prix en pointant les travaux nécessaires. Sans ça, j'aurais accepté le prix demandé.", name: 'Laura H.', city: 'Nantes', initials: 'LH' }, { tag: 'ERREUR ÉVITÉE', stars: 4, quote: "J'ai failli acheter un studio bien placé, mais les simulations ont montré que la renta ne serait pas celle annoncée. J'ai continué à chercher et trouvé mieux 2 mois après.", name: 'David G.', city: 'Paris', initials: 'DG' }, { tag: '+320 € / MOIS', stars: 5, quote: "Je gérais mes calculs sur Excel depuis des années, mais c'était chronophage et source d'erreurs. Là, en 10 minutes j'ai une vision complète : impôts, charges, vacance locative. Mon dernier T3 à Lyon tourne à +320 €/mois net.", name: 'Thomas B.', city: 'Lyon', initials: 'TB' }, { tag: 'MEILLEUR MONTAGE TROUVÉ', stars: 5, quote: "Le simulateur m'a permis de comparer location nue vs meublé sur le même bien. La différence fiscale était de 3 400 € par an. J'ai choisi le LMNP et ça change tout sur la durée.", name: 'Sophie M.', city: 'Bordeaux', initials: 'SM' }, { tag: 'DÉCISION RAPIDE', stars: 4, quote: "En visite, j'avais 48h pour me décider. J'ai lancé la simulation sur mobile pendant le trajet retour. Les chiffres étaient bons, j'ai fait une offre le soir même. Le bien est parti en 3 jours.", name: 'Romain C.', city: 'Toulouse', initials: 'RC' }, { tag: 'PORTFOLIO DE 4 BIENS', stars: 5, quote: "J'utilise Moneyshape pour chaque acquisition depuis 2 ans. Aujourd'hui j'ai 4 biens en portefeuille. La cohérence des simulations m'a évité de surpayer et m'a aidé à structurer mes financements.", name: 'Alexandre P.', city: 'Paris', initials: 'AP' }, { tag: '2 BIENS EN 14 MOIS', stars: 5, quote: "En 14 mois, j'ai acheté 2 biens locatifs. Le simulateur me permet de filtrer vite : si ça ne passe pas sur le papier, je ne perds pas de temps en visite.", name: 'Marc G.', city: 'Marseille', initials: 'MG' }, { tag: '8 K€ DE TRAVAUX ANTICIPÉS', stars: 4, quote: "En intégrant les travaux dans la simulation, j'ai vu que la rentabilité restait positive même avec 8 K€ de rénovation. Ça m'a donné confiance pour négocier en incluant les travaux dans le prix.", name: 'Camille R.', city: 'Strasbourg', initials: 'CR' }, ].map((it, i) => ({ ...it, pal: PALETTES[i % 4] })); const count = items.length; // Stars renderer const Stars = ({ n, mobile }) => (
{Array.from({ length: 5 }).map((_, i) => ( ))}
); // Card const Card = ({ it, focused, dim }) => (
{/* Top row: badge + stars */}
{it.tag}
{/* Quote */}

« {it.quote} »

{/* Author */}
{it.initials}
{it.name}
{it.city}
); const go = (delta) => setActive((a) => (a + delta + count) % count); // ── Render ────────────────────────────────────────────────────── const cardW = mobile ? 290 : 340; const gap = mobile ? 16 : 24; const step = cardW + gap; // Touch swipe support (mobile) const touchStart = React.useRef(null); const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchStart.current == null) return; const dx = e.changedTouches[0].clientX - touchStart.current; if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1); touchStart.current = null; }; return (
{/* Heading */}
Témoignages

Ils ont simulé avant d'acheter.

{/* Rating pill */}
{Array.from({ length: 5 }).map((_, i) => ( ))}
4.8/5
{/* Carousel track */}
{items.map((it, i) => ( ))}
{/* Controls */}
{/* Dots */}
{items.map((_, i) => (
); } window.TestimonialsSection = TestimonialsSection;