feat: add ReassuranceSection with 4 benefit cards

2026-08-11 09:01:01 +02:00
parent 29547d1acd
commit f3da96ee15
1 changed files with 75 additions and 0 deletions
@@ -0,0 +1,75 @@
+import { getTranslations } from 'next-intl/server'
+
+function GiftIcon() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M20 12v10H4V12"/>
+      <path d="M2 7h20v5H2z"/>
+      <path d="M12 22V7"/>
+      <path d="M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z"/>
+      <path d="M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"/>
+    </svg>
+  )
+}
+
+function BoltIcon() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+    </svg>
+  )
+}
+
+function LockIcon() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+      <path d="M7 11V7a5 5 0 0110 0v4"/>
+    </svg>
+  )
+}
+
+function FilmIcon() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
+      <line x1="7" y1="2" x2="7" y2="22"/>
+      <line x1="17" y1="2" x2="17" y2="22"/>
+      <line x1="2" y1="12" x2="22" y2="12"/>
+      <line x1="2" y1="7" x2="7" y2="7"/>
+      <line x1="2" y1="17" x2="7" y2="17"/>
+      <line x1="17" y1="17" x2="22" y2="17"/>
+      <line x1="17" y1="7" x2="22" y2="7"/>
+    </svg>
+  )
+}
+
+export async function ReassuranceSection({ locale }: { locale: string }) {
+  const t = await getTranslations({ locale, namespace: 'reassurance' })
+
+  const items = [
+    { title: t('free'), desc: t('freeDesc'), Icon: GiftIcon },
+    { title: t('fast'), desc: t('fastDesc'), Icon: BoltIcon },
+    { title: t('private'), desc: t('privateDesc'), Icon: LockIcon },
+    { title: t('formats'), desc: t('formatsDesc'), Icon: FilmIcon },
+  ]
+
+  return (
+    <section className="py-16 px-6" aria-label="Avantages">
+      <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
+        {items.map(({ title, desc, Icon }) => (
+          <div
+            key={title}
+            className="rounded-xl border border-gray-100 dark:border-slate-800 bg-gray-50 dark:bg-slate-900 p-5 text-center"
+          >
+            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 mb-3">
+              <Icon />
+            </div>
+            <p className="font-semibold text-sm text-gray-900 dark:text-gray-50">{title}</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}