edit mutuel panel

2026-02-26 03:39:49 +01:00
parent 338c249e49
commit 63864a991b
7 changed files with 263 additions and 107 deletions
@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion'
 import { FiAward, FiArrowRight } from 'react-icons/fi'
-import { mutuelles } from '../data/mutuelles'
-import MutuelleCard from './MutuelleCard'
+import { useMutuelles } from '../hooks/useMutuelles'
+import MutuelleCard, { LogoMutuelle } from './MutuelleCard'

 const medals = ['🏆', '🥈', '🥉']

@@ -16,36 +16,31 @@ function TopCard({ mutuelle, index }) {
          : 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
      }`}
    >
-      {/* Badge */}
-      {isFirst && (
+      {/* Badge meilleur choix */}
+      {mutuelle.meilleurChoix && (
        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
          ⭐ Meilleur Choix 2026
        </div>
      )}

      <div className="flex items-start justify-between mb-5 mt-1">
-        {/* Logo */}
-        <div
-          className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-lg shadow-md"
-          style={{ backgroundColor: mutuelle.primaryColor }}
-        >
-          {mutuelle.initials}
-        </div>
+        {/* Logo (favicon ou initiales) */}
+        <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-lg" />

-        {/* Medal + rank */}
+        {/* Médaille */}
        <span className="text-2xl">{medals[index]}</span>
      </div>

-      <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.name}</div>
-      <div className="text-xs text-slate-500 mb-4">{mutuelle.tagline}</div>
+      <div className="font-extrabold text-slate-900 text-base mb-0.5">{mutuelle.nom}</div>
+      <div className="text-xs text-slate-500 mb-4">{mutuelle.slogan}</div>

      {/* Tags */}
      <div className="flex gap-1.5 flex-wrap mb-5">
-        {mutuelle.idealFor.map((tag) => (
+        {mutuelle.tags.map((tag) => (
          <span
            key={tag}
            className="text-[11px] font-medium px-2 py-0.5 rounded-full"
-            style={{ backgroundColor: mutuelle.lightBg, color: mutuelle.primaryColor }}
+            style={{ backgroundColor: `${mutuelle.couleur}18`, color: mutuelle.couleur }}
          >
            {tag}
          </span>
@@ -53,33 +48,55 @@ function TopCard({ mutuelle, index }) {
      </div>

      {/* Promo */}
-      {mutuelle.offer && (
+      {mutuelle.promo && (
        <div className="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold text-center py-2 rounded-xl">
-          🎁 {mutuelle.offer}
+          🎁 {mutuelle.promo}
        </div>
      )}

      {/* Score + CTA */}
      <div className="flex items-end justify-between mt-auto pt-4 border-t border-slate-100">
        <div>
-          <div className="text-3xl font-extrabold" style={{ color: mutuelle.primaryColor }}>
+          <div className="text-3xl font-extrabold" style={{ color: mutuelle.couleur }}>
            {mutuelle.score}
            <span className="text-sm font-medium text-slate-400"> /10</span>
          </div>
          <div className="text-[10px] text-slate-400 font-medium mt-0.5">Score Mon Gaston</div>
        </div>
-        <button
+        <a
+          href={mutuelle.lien}
+          target="_blank"
+          rel="noopener noreferrer"
          className="flex items-center gap-1.5 text-sm font-bold text-white px-4 py-2 rounded-xl hover:opacity-90 transition-opacity shadow-md"
-          style={{ backgroundColor: mutuelle.primaryColor }}
+          style={{ backgroundColor: mutuelle.couleur }}
        >
          Voir l'offre <FiArrowRight size={13} />
-        </button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="grid md:grid-cols-3 gap-6">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-64 bg-slate-100 rounded-3xl" />
+        ))}
+      </div>
+      <div className="space-y-3 mt-14">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className="h-20 bg-slate-100 rounded-2xl" />
+        ))}
      </div>
    </div>
  )
 }

 export default function ComparisonSection() {
+  const { mutuelles, loading, error } = useMutuelles()
+
  return (
    <section id="classement" className="pt-10 pb-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -99,44 +116,57 @@ export default function ComparisonSection() {
          </p>
        </div>

-        {/* Top 3 grid */}
-        <div className="grid md:grid-cols-3 gap-6 mb-14">
-          {mutuelles.slice(0, 3).map((m, i) => (
-            <motion.div
-              key={m.id}
-              initial={{ opacity: 0, y: 24 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.1, duration: 0.45 }}
-            >
-              <TopCard mutuelle={m} index={i} />
-            </motion.div>
-          ))}
-        </div>
+        {/* Erreur */}
+        {error && (
+          <div className="text-center text-red-500 py-10">{error}</div>
+        )}

-        {/* Divider */}
-        <div className="flex items-center gap-4 mb-8">
-          <div className="flex-1 h-px bg-slate-100" />
-          <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
-            Classement complet
-          </span>
-          <div className="flex-1 h-px bg-slate-100" />
-        </div>
+        {/* Chargement */}
+        {loading && !error && <LoadingSkeleton />}

-        {/* Full list */}
-        <div className="space-y-3">
-          {mutuelles.map((m, i) => (
-            <motion.div
-              key={m.id}
-              initial={{ opacity: 0, x: -16 }}
-              whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: i * 0.06, duration: 0.4 }}
-            >
-              <MutuelleCard mutuelle={m} />
-            </motion.div>
-          ))}
-        </div>
+        {/* Contenu */}
+        {!loading && !error && (
+          <>
+            {/* Top 3 */}
+            <div className="grid md:grid-cols-3 gap-6 mb-14">
+              {mutuelles.slice(0, 3).map((m, i) => (
+                <motion.div
+                  key={m.rang}
+                  initial={{ opacity: 0, y: 24 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.1, duration: 0.45 }}
+                >
+                  <TopCard mutuelle={m} index={i} />
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Séparateur */}
+            <div className="flex items-center gap-4 mb-8">
+              <div className="flex-1 h-px bg-slate-100" />
+              <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">
+                Classement complet
+              </span>
+              <div className="flex-1 h-px bg-slate-100" />
+            </div>
+
+            {/* Liste complète */}
+            <div className="space-y-3">
+              {mutuelles.map((m, i) => (
+                <motion.div
+                  key={m.rang}
+                  initial={{ opacity: 0, x: -16 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.06, duration: 0.4 }}
+                >
+                  <MutuelleCard mutuelle={m} />
+                </motion.div>
+              ))}
+            </div>
+          </>
+        )}
      </div>
    </section>
  )
@@ -36,7 +36,7 @@ const socials = [

 export default function Footer() {
  return (
-    <footer className="bg-slate-900 text-slate-400">
+    <footer className="bg-slate-900 text-slate-400 relative z-10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {/* Main grid */}
@@ -49,26 +49,26 @@ export default function Footer() {
                <MdPets className="text-white text-lg" />
              </div>
              <span className="font-extrabold text-xl text-white tracking-tight">
-                Mon <span className="text-indigo-400">Gaston</span>
+                Assurez<span className="text-indigo-400">Moi</span>
              </span>
            </div>
            <address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
              Votre comparateur d'assurances<br />
-              33 avenue Roger Salengro<br />
+              1 Rue john doe<br />
              59100 Roubaix, France
            </address>
            <a
              href="mailto:[email protected]"
              className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
            >
-              contact@mongaston.com
+              contact@assurezmoi.com
            </a>
            <div className="mt-2">
              <a
                href="tel:+33180891030"
                className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
              >
-                01 80 89 10 30
+                01 02 03 04 05
              </a>
            </div>
          </div>
@@ -133,7 +133,7 @@ export default function Footer() {
        {/* Bottom bar */}
        <div className="border-t border-slate-800 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-slate-600 text-center sm:text-left">
-            © 2026 Mon Gaston — Tous droits réservés.
+            © 2026 AssurezMoi — Tous droits réservés.
            <span className="mx-2 text-slate-700">·</span>
            Comparateur de mutuelles santé & assurances
          </p>
@@ -82,7 +82,7 @@ export default function GuideSection() {
          </div>

          {/* Sidebar */}
-          <div className="lg:col-span-1">
+          <div className="lg:col-span-1 self-start">
            <div className="sticky top-24 space-y-4">

              {/* Guides card */}
@@ -1,22 +1,32 @@
+import { useState } from 'react'
 import { FiArrowRight, FiActivity, FiEye, FiSmile } from 'react-icons/fi'
-import { MdLocalHospital } from 'react-icons/md'

-const hospConfig = {
-  orange: {
-    bg: 'bg-orange-50',
-    text: 'text-orange-700',
-    border: 'border-orange-200',
-  },
-  green: {
-    bg: 'bg-emerald-50',
-    text: 'text-emerald-700',
-    border: 'border-emerald-200',
-  },
-  teal: {
-    bg: 'bg-teal-50',
-    text: 'text-teal-700',
-    border: 'border-teal-200',
-  },
+// Favicon auto-chargé depuis le lien, fallback sur les initiales
+export function LogoMutuelle({ mutuelle, className = '' }) {
+  const [faviconError, setFaviconError] = useState(false)
+
+  const faviconUrl =
+    mutuelle.lien && !faviconError
+      ? `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(mutuelle.lien)}`
+      : null
+
+  return (
+    <div
+      className={`rounded-2xl flex items-center justify-center font-extrabold text-white flex-shrink-0 shadow-md overflow-hidden ${className}`}
+      style={{ backgroundColor: faviconUrl ? 'transparent' : mutuelle.couleur }}
+    >
+      {faviconUrl ? (
+        <img
+          src={faviconUrl}
+          alt=""
+          className="w-full h-full object-contain"
+          onError={() => setFaviconError(true)}
+        />
+      ) : (
+        <span>{mutuelle.initiales}</span>
+      )}
+    </div>
+  )
 }

 function FeatureDots({ count }) {
@@ -54,8 +64,7 @@ function ScoreBar({ score, color }) {
 }

 export default function MutuelleCard({ mutuelle }) {
-  const hosp = hospConfig[mutuelle.hospColor] || hospConfig.teal
-  const isFirst = mutuelle.rank === 1
+  const isFirst = mutuelle.rang === 1

  return (
    <div
@@ -65,35 +74,30 @@ export default function MutuelleCard({ mutuelle }) {
          : 'border-slate-100 hover:border-slate-200'
      }`}
    >
-      {/* Rank badge */}
+      {/* Rang */}
      <div
        className={`w-8 h-8 rounded-xl flex items-center justify-center text-sm font-bold flex-shrink-0 ${
          isFirst ? 'bg-indigo-600 text-white shadow-md shadow-indigo-300' : 'bg-slate-100 text-slate-500'
        }`}
      >
-        {mutuelle.rank}
+        {mutuelle.rang}
      </div>

-      {/* Logo */}
-      <div
-        className="w-14 h-14 rounded-2xl flex items-center justify-center font-extrabold text-white text-sm flex-shrink-0 shadow-md"
-        style={{ backgroundColor: mutuelle.primaryColor }}
-      >
-        {mutuelle.initials}
-      </div>
+      {/* Logo (favicon ou initiales) */}
+      <LogoMutuelle mutuelle={mutuelle} className="w-14 h-14 text-sm" />

-      {/* Name + tags */}
+      {/* Nom + tags */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap mb-1">
-          <span className="font-bold text-slate-900 truncate">{mutuelle.name}</span>
-          {isFirst && (
+          <span className="font-bold text-slate-900 truncate">{mutuelle.nom}</span>
+          {mutuelle.meilleurChoix && (
            <span className="bg-amber-50 text-amber-600 border border-amber-200 text-[10px] font-extrabold px-2 py-0.5 rounded-full whitespace-nowrap">
              ⭐ Meilleur Choix
            </span>
          )}
        </div>
        <div className="flex items-center gap-1.5 flex-wrap">
-          {mutuelle.idealFor.map((tag) => (
+          {mutuelle.tags.map((tag) => (
            <span
              key={tag}
              className="text-[11px] font-medium bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
@@ -104,39 +108,41 @@ export default function MutuelleCard({ mutuelle }) {
        </div>
      </div>

-      {/* Features */}
+      {/* Points de couverture */}
      <div className="hidden md:flex flex-col gap-2 flex-shrink-0">
        <div className="flex items-center gap-2">
          <FiActivity className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Soins</span>
-          <FeatureDots count={mutuelle.soins} />
+          <FeatureDots count={mutuelle.couvertures.soins} />
        </div>
        <div className="flex items-center gap-2">
          <FiSmile className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Dentaire</span>
-          <FeatureDots count={mutuelle.dentaire} />
+          <FeatureDots count={mutuelle.couvertures.dentaire} />
        </div>
        <div className="flex items-center gap-2">
          <FiEye className="text-slate-300 text-xs flex-shrink-0" />
          <span className="text-[11px] text-slate-500 w-12">Optique</span>
-          <FeatureDots count={mutuelle.optique} />
+          <FeatureDots count={mutuelle.couvertures.optique} />
        </div>
      </div>

-
      {/* Score */}
      <div className="hidden lg:block flex-shrink-0">
-        <ScoreBar score={mutuelle.score} color={mutuelle.primaryColor} />
+        <ScoreBar score={mutuelle.score} color={mutuelle.couleur} />
      </div>

      {/* CTA */}
-      <button
+      <a
+        href={mutuelle.lien}
+        target="_blank"
+        rel="noopener noreferrer"
        className="flex items-center gap-2 text-white font-bold text-sm px-5 py-2.5 rounded-xl flex-shrink-0 hover:opacity-90 active:scale-95 transition-all shadow-md"
-        style={{ backgroundColor: mutuelle.primaryColor }}
+        style={{ backgroundColor: mutuelle.couleur }}
      >
        Voir l'offre
        <FiArrowRight />
-      </button>
+      </a>
    </div>
  )
 }
@@ -25,7 +25,7 @@ export default function Navbar() {
              <MdPets className="text-white text-lg" />
            </div>
            <span className="font-extrabold text-xl tracking-tight text-slate-900">
-              Mon <span className="text-indigo-600">Gaston</span>
+              Assurez<span className="text-indigo-600">Moi</span>
            </span>
          </a>