lfirmin/site_assu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push video

Browse Source
This commit is contained in:
lfirmin
2026-02-28 01:06:16 +01:00
parent 5199d8883d
commit fc9f384b47
15 changed files with 213 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
img/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

img/hero-bg.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

img/ico-180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

img/ico.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

img/ico.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

index.html
+9 -2
View File
@@ -2,9 +2,16 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<!-- Favicon legacy (IE, Windows, Android) -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<!-- Favicon PNG (Chrome, Firefox, Edge, Safari desktop) -->
<link rel="icon" type="image/png" sizes="64x64" href="/img/ico.png" />
<!-- Favicon WebP (Chromium dernières versions) -->
<link rel="icon" type="image/webp" href="/img/ico.webp" />
<!-- Apple touch icon (iOS Safari, iPadOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/ico-180.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>amado-redesign</title>
<title>AssurezMoi — Comparateur de mutuelles santé</title>
</head>
<body>
<div id="root"></div>
public/config.json
+2 -1
View File
@@ -1,3 +1,4 @@
{
"heroVideo": "/video/home.webm"
"heroVideo": "/video/home.mp4",
"heroBg": "/img/hero-bg.webp"
}
public/video/home.mp4
BIN
View File
Binary file not shown.
src/components/ComparisonSection.jsx
+2 -2
View File
@@ -12,13 +12,13 @@ function TopCard({ mutuelle, index }) {
<div
className={`relative flex flex-col rounded-3xl border-2 p-6 transition-all hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
isFirst
? 'border-indigo-300 bg-gradient-to-b from-indigo-50 to-white shadow-lg shadow-indigo-100'
? 'border-[#9CCC8A]/50 bg-gradient-to-b from-[#9CCC8A]/5 to-white shadow-lg shadow-[#9CCC8A]/20'
: 'border-slate-100 bg-white hover:border-slate-200 shadow-sm'
}`}
>
{/* 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">
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-[#9CCC8A] text-white text-[11px] font-extrabold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
⭐ Meilleur Choix 2026
</div>
)}
src/components/Footer.jsx
+27 -26
View File
@@ -1,4 +1,3 @@
import { MdPets } from 'react-icons/md'
import {
FiFacebook,
FiTwitter,
@@ -27,16 +26,16 @@ const colLegal = [
]
const socials = [
{ Icon: FiFacebook, label: 'Facebook' },
{ Icon: FiTwitter, label: 'Twitter / X' },
{ Icon: FiInstagram, label: 'Instagram' },
{ Icon: FiLinkedin, label: 'LinkedIn' },
{ Icon: FiYoutube, label: 'YouTube' },
{ Icon: FiFacebook, label: 'Facebook' },
{ Icon: FiTwitter, label: 'Twitter / X' },
{ Icon: FiInstagram, label: 'Instagram' },
{ Icon: FiLinkedin, label: 'LinkedIn' },
{ Icon: FiYoutube, label: 'YouTube' },
]
export default function Footer() {
return (
<footer className="bg-slate-900 text-slate-400 relative z-10">
<footer className="bg-[#F2F8EE] text-slate-500 border-t border-[#9CCC8A]/20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Main grid */}
@@ -45,11 +44,13 @@ export default function Footer() {
{/* Brand */}
<div className="sm:col-span-2 lg:col-span-1">
<div className="flex items-center gap-2.5 mb-5">
<div className="w-9 h-9 bg-indigo-500 rounded-xl flex items-center justify-center shadow-md">
<MdPets className="text-white text-lg" />
</div>
<span className="font-extrabold text-xl text-white tracking-tight">
Assurez<span className="text-indigo-400">Moi</span>
<img
src="/img/ico.webp"
alt="AssurezMoi"
className="w-9 h-9 rounded-xl object-contain"
/>
<span className="font-extrabold text-xl text-slate-900 tracking-tight">
Assurez<span className="text-[#9CCC8A]">Moi</span>
</span>
</div>
<address className="not-italic text-sm text-slate-500 leading-relaxed mb-4">
@@ -58,15 +59,15 @@ export default function Footer() {
59100 Roubaix, France
</address>
<a
href="mailto:contact@mongaston.com"
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
href="mailto:contact@assurezmoi.com"
className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
>
contact@assurezmoi.com
</a>
<div className="mt-2">
<a
href="tel:+33180891030"
className="text-sm text-slate-500 hover:text-indigo-400 transition-colors"
className="text-sm text-slate-500 hover:text-[#9CCC8A] transition-colors"
>
01 02 03 04 05
</a>
@@ -75,7 +76,7 @@ export default function Footer() {
{/* Resources */}
<div>
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
Ressources
</h4>
<ul className="space-y-3">
@@ -83,7 +84,7 @@ export default function Footer() {
<li key={r}>
<a
href="#"
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
>
{r}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -95,7 +96,7 @@ export default function Footer() {
{/* Discover */}
<div>
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
Nous découvrir
</h4>
<ul className="space-y-3">
@@ -103,7 +104,7 @@ export default function Footer() {
<li key={d}>
<a
href="#"
className="text-sm text-slate-500 hover:text-white transition-colors flex items-center gap-1 group"
className="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 group"
>
{d}
<FiArrowUpRight size={11} className="opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -115,13 +116,13 @@ export default function Footer() {
{/* Legal */}
<div>
<h4 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
<h4 className="text-slate-700 font-bold text-sm uppercase tracking-widest mb-5">
Informations légales
</h4>
<ul className="space-y-3">
{colLegal.map((l) => (
<li key={l}>
<a href="#" className="text-sm text-slate-500 hover:text-white transition-colors">
<a href="#" className="text-sm text-slate-500 hover:text-slate-900 transition-colors">
{l}
</a>
</li>
@@ -131,10 +132,10 @@ export default function Footer() {
</div>
{/* 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">
<div className="border-t border-[#9CCC8A]/20 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-xs text-slate-400 text-center sm:text-left">
© 2026 AssurezMoi — Tous droits réservés.
<span className="mx-2 text-slate-700">·</span>
<span className="mx-2 text-[#9CCC8A]/50">·</span>
Comparateur de mutuelles santé & assurances
</p>
@@ -144,9 +145,9 @@ export default function Footer() {
key={label}
href="#"
aria-label={label}
className="w-8 h-8 rounded-lg bg-slate-800 hover:bg-indigo-600 flex items-center justify-center transition-all hover:-translate-y-0.5"
className="w-8 h-8 rounded-lg bg-[#9CCC8A]/15 hover:bg-[#9CCC8A] text-slate-500 hover:text-white flex items-center justify-center transition-all hover:-translate-y-0.5"
>
<Icon size={14} className="text-slate-400 hover:text-white" />
<Icon size={14} />
</a>
))}
</div>
src/components/GuideSection.jsx
+9 -9
View File
@@ -14,7 +14,7 @@ function FaqItem({ faq, index }) {
>
<span
className="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold mt-0.5 text-white"
style={{ backgroundColor: open ? '#4F46E5' : '#CBD5E1' }}
style={{ backgroundColor: open ? '#9CCC8A' : '#CBD5E1' }}
>
{index + 1}
</span>
@@ -24,7 +24,7 @@ function FaqItem({ faq, index }) {
transition={{ duration: 0.2 }}
className="flex-shrink-0 mt-0.5"
>
<FiChevronDown className={`text-lg transition-colors ${open ? 'text-indigo-500' : 'text-slate-400'}`} />
<FiChevronDown className={`text-lg transition-colors ${open ? 'text-[#9CCC8A]' : 'text-slate-400'}`} />
</motion.div>
</button>
@@ -88,8 +88,8 @@ export default function GuideSection() {
{/* Guides card */}
<div className="bg-slate-50 rounded-2xl border border-slate-100 p-6">
<div className="flex items-center gap-2 mb-5">
<div className="w-8 h-8 bg-indigo-100 rounded-xl flex items-center justify-center">
<FiBookOpen className="text-indigo-600 text-sm" />
<div className="w-8 h-8 bg-[#9CCC8A]/20 rounded-xl flex items-center justify-center">
<FiBookOpen className="text-[#9CCC8A] text-sm" />
</div>
<h3 className="font-bold text-slate-900">Tous nos guides</h3>
</div>
@@ -98,9 +98,9 @@ export default function GuideSection() {
<li key={i}>
<a
href="#"
className="flex items-start gap-2 text-sm text-slate-600 hover:text-indigo-600 transition-colors py-2 group"
className="flex items-start gap-2 text-sm text-slate-600 hover:text-[#9CCC8A] transition-colors py-2 group"
>
<FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-indigo-400 transition-colors" />
<FiChevronRight className="flex-shrink-0 mt-0.5 text-slate-300 group-hover:text-[#9CCC8A] transition-colors" />
{guide}
</a>
</li>
@@ -109,16 +109,16 @@ export default function GuideSection() {
</div>
{/* CTA card */}
<div className="bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-2xl p-6 text-white">
<div className="bg-gradient-to-br from-[#9CCC8A] to-[#74AB61] rounded-2xl p-6 text-white">
<div className="font-extrabold text-lg mb-2">
Besoin d'un conseil personnalisé ?
</div>
<p className="text-indigo-200 text-sm mb-5 leading-relaxed">
<p className="text-white/70 text-sm mb-5 leading-relaxed">
Nos experts répondent à toutes vos questions gratuitement, sans engagement.
</p>
<a
href="tel:+33180891030"
className="flex items-center justify-center gap-2 bg-white text-indigo-700 font-bold text-sm py-3 rounded-xl hover:bg-indigo-50 transition-colors"
className="flex items-center justify-center gap-2 bg-white text-[#74AB61] font-bold text-sm py-3 rounded-xl hover:bg-[#9CCC8A]/10 transition-colors"
>
📞 01 80 89 10 30
</a>
src/components/Hero.jsx
+150 -41
View File
@@ -1,84 +1,193 @@
import { useState, useEffect, useRef } from 'react'
import { motion } from 'framer-motion'
import { FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle } from 'react-icons/fi'
import {
FiArrowRight, FiShield, FiStar, FiUsers, FiCheckCircle,
FiPlay, FiPause, FiVolume2, FiVolumeX,
} from 'react-icons/fi'
const stats = [
{ value: '186', label: 'mutuelles analysées', icon: FiShield },
{ value: '4.9 / 5', label: 'note clients', icon: FiStar },
{ value: '250 000+', label: 'utilisateurs', icon: FiUsers },
{ value: '186', label: 'mutuelles analysées', icon: FiShield },
{ value: '4.9 / 5', label: 'note clients', icon: FiStar },
{ value: '250 000+', label: 'utilisateurs', icon: FiUsers },
]
export default function Hero() {
function VideoPlayer({ src }) {
const videoRef = useRef(null)
const [playing, setPlaying] = useState(true)
const [muted, setMuted] = useState(true)
const togglePlay = () => {
if (!videoRef.current) return
if (playing) videoRef.current.pause()
else videoRef.current.play()
setPlaying(p => !p)
}
const toggleMute = () => {
if (!videoRef.current) return
videoRef.current.muted = !muted
setMuted(m => !m)
}
return (
<section className="relative overflow-hidden bg-gradient-to-br from-slate-50 via-indigo-50/40 to-white pt-14 pb-10">
{/* Decorative blobs */}
<div className="relative rounded-2xl overflow-hidden shadow-2xl shadow-[#9CCC8A]/30 bg-slate-900 aspect-video w-full">
{src ? (
<video
ref={videoRef}
src={src}
autoPlay
muted
loop
playsInline
preload="metadata"
onClick={togglePlay}
className="w-full h-full object-cover cursor-pointer"
/>
) : (
/* Placeholder pendant le chargement de config.json */
<div className="w-full h-full flex items-center justify-center bg-slate-800 animate-pulse">
<FiPlay className="text-slate-600 text-5xl" />
</div>
)}
{/* Icône play/pause au centre au clic */}
{src && !playing && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center backdrop-blur-sm">
<FiPlay className="text-white text-2xl ml-1" />
</div>
</div>
)}
{/* Contrôles : pause + mute */}
{src && (
<div className="absolute bottom-3 right-3 flex gap-2">
<button
onClick={togglePlay}
aria-label={playing ? 'Pause' : 'Play'}
className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
>
{playing ? <FiPause size={14} /> : <FiPlay size={14} />}
</button>
<button
onClick={toggleMute}
aria-label={muted ? 'Activer le son' : 'Couper le son'}
className="w-9 h-9 flex items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 transition-colors"
>
{muted ? <FiVolumeX size={14} /> : <FiVolume2 size={14} />}
</button>
</div>
)}
</div>
)
}
export default function Hero() {
const [videoSrc, setVideoSrc] = useState(null)
const [bgSrc, setBgSrc] = useState(null)
useEffect(() => {
fetch('/config.json')
.then(r => r.json())
.then(data => {
setVideoSrc(data.heroVideo)
setBgSrc(data.heroBg ?? null)
})
.catch(() => {})
}, [])
return (
<section
className="relative overflow-hidden bg-cover bg-center pt-24 pb-20"
style={bgSrc ? { backgroundImage: `url(${bgSrc})` } : {}}
>
{/* Gradient overlay semi-transparent (couvre l'image de fond) */}
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/88 via-[#9CCC8A]/18 to-white/75" />
{/* Blobs décoratifs */}
<div className="pointer-events-none absolute inset-0 overflow-hidden">
<div className="absolute -top-48 -right-48 w-[600px] h-[600px] rounded-full bg-indigo-100/50 blur-3xl" />
<div className="absolute bottom-0 -left-32 w-[400px] h-[400px] rounded-full bg-sky-100/40 blur-3xl" />
<div className="absolute -top-48 -right-48 w-[600px] h-[600px] rounded-full bg-[#9CCC8A]/15 blur-3xl" />
<div className="absolute bottom-0 -left-32 w-[400px] h-[400px] rounded-full bg-[#9CCC8A]/10 blur-3xl" />
</div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
<motion.div
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55 }}
className="max-w-3xl"
>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
{/* ── Colonne gauche : texte ── */}
<motion.div
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55 }}
className="flex-1 flex flex-col"
>
<h1 className="text-5xl xl:text-6xl font-extrabold text-slate-900 leading-[1.08] tracking-tight mb-5">
Mutuelle santé{' '}
<span className="relative">
<span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-sky-500">
<span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-[#9CCC8A] to-[#5BAF7A]">
pour tous
</span>
<span className="absolute bottom-1 left-0 w-full h-3 bg-indigo-100/70 rounded-sm -z-0" />
<span className="absolute bottom-1 left-0 w-full h-3 bg-[#9CCC8A]/30 rounded-sm -z-0" />
</span>
</h1>
<p className="text-lg text-slate-500 leading-relaxed mb-8 max-w-lg mx-auto">
<p className="text-lg text-black leading-relaxed mb-8 max-w-lg">
Jeune actif, parent, senior — comparez les garanties utiles et trouvez
la couverture parfaite au meilleur prix, sans engagement.
</p>
{/* Trust points */}
<ul className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 mb-8">
{['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map((t) => (
<li key={t} className="flex items-center gap-1.5 text-sm text-slate-500">
<ul className="flex flex-wrap gap-x-6 gap-y-1.5 mb-8">
{['Comparaison 100% gratuite', 'Sans engagement', 'Réponse en 2 min'].map(t => (
<li key={t} className="flex items-center gap-1.5 text-sm text-black">
<FiCheckCircle className="text-emerald-500 flex-shrink-0" />
{t}
</li>
))}
</ul>
{/* CTA */}
<div className="flex flex-wrap justify-center gap-3">
{/* CTAs */}
<div className="flex flex-wrap gap-3 mb-14">
<motion.button
whileHover={{ scale: 1.025 }}
whileTap={{ scale: 0.97 }}
className="flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 text-white font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-indigo-300/50 transition-all"
className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] text-black font-bold text-base px-7 py-3.5 rounded-xl shadow-lg shadow-[#9CCC8A]/40 transition-all"
>
Comparer les mutuelles
<FiArrowRight />
</motion.button>
<button className="flex items-center gap-2 font-semibold text-slate-700 text-base px-7 py-3.5 rounded-xl border border-slate-200 bg-white hover:border-indigo-300 hover:text-indigo-600 transition-all">
<button className="flex items-center gap-2 font-semibold text-slate-700 text-base px-7 py-3.5 rounded-xl border border-slate-200 bg-white hover:border-[#9CCC8A] hover:text-[#9CCC8A] transition-all">
Voir le classement
</button>
</div>
{/* Stats bar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55, delay: 0.35 }}
className="grid grid-cols-3 gap-6 max-w-xs"
>
{stats.map(({ value, label, icon: Icon }) => (
<div key={label} className="flex flex-col gap-1">
<Icon className="text-white text-lg mb-0.5" />
<div className="text-2xl font-extrabold text-slate-900">{value}</div>
<div className="text-xs text-black font-medium">{label}</div>
</div>
))}
</motion.div>
</motion.div>
{/* Stats bar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55, delay: 0.35 }}
className="mt-16 grid grid-cols-3 gap-6 max-w-2xl"
>
{stats.map(({ value, label, icon: Icon }) => (
<div key={label} className="flex flex-col items-center gap-1">
<Icon className="text-indigo-400 text-lg mb-0.5" />
<div className="text-2xl font-extrabold text-slate-900">{value}</div>
<div className="text-xs text-slate-400 font-medium">{label}</div>
</div>
))}
</motion.div>
{/* ── Colonne droite : vidéo ── */}
<motion.div
initial={{ opacity: 0, x: 32 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.55, delay: 0.2 }}
className="w-full lg:w-[520px] xl:w-[580px] flex-shrink-0"
>
<VideoPlayer src={videoSrc} />
</motion.div>
</div>
</div>
</section>
)
src/components/MutuelleCard.jsx
+3 -3
View File
@@ -36,7 +36,7 @@ function FeatureDots({ count }) {
<div
key={i}
className={`w-2.5 h-2.5 rounded-full transition-colors ${
i <= count ? 'bg-indigo-500' : 'bg-slate-200'
i <= count ? 'bg-[#9CCC8A]' : 'bg-slate-200'
}`}
/>
))}
@@ -70,14 +70,14 @@ export default function MutuelleCard({ mutuelle }) {
<div
className={`bg-white rounded-2xl border transition-all hover:shadow-lg hover:-translate-y-0.5 p-5 flex items-center gap-4 ${
isFirst
? 'border-indigo-200 shadow-md ring-1 ring-indigo-100'
? 'border-[#9CCC8A]/40 shadow-md ring-1 ring-[#9CCC8A]/20'
: 'border-slate-100 hover:border-slate-200'
}`}
>
{/* 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'
isFirst ? 'bg-[#9CCC8A] text-white shadow-md shadow-[#9CCC8A]/40' : 'bg-slate-100 text-slate-500'
}`}
>
{mutuelle.rang}
src/components/Navbar.jsx
+10 -9
View File
@@ -1,7 +1,6 @@
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { FiPhone, FiMenu, FiX } from 'react-icons/fi'
import { MdPets } from 'react-icons/md'
const navLinks = [
{ label: 'Mutuelle santé', href: '#' },
@@ -21,11 +20,13 @@ export default function Navbar() {
<div className="flex items-center justify-between h-16">
{/* Logo */}
<a href="#" className="flex items-center gap-2.5">
<div className="w-9 h-9 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-xl flex items-center justify-center shadow-md shadow-indigo-200">
<MdPets className="text-white text-lg" />
</div>
<img
src="/img/ico.webp"
alt="AssurezMoi"
className="w-9 h-9 rounded-xl object-contain"
/>
<span className="font-extrabold text-xl tracking-tight text-slate-900">
Assurez<span className="text-indigo-600">Moi</span>
Assurez<span className="text-[#9CCC8A]">Moi</span>
</span>
</a>
@@ -35,7 +36,7 @@ export default function Navbar() {
<a
key={link.label}
href={link.href}
className="px-3 py-2 text-sm text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all font-medium"
className="px-3 py-2 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg transition-all font-medium"
>
{link.label}
</a>
@@ -46,7 +47,7 @@ export default function Navbar() {
<div className="hidden lg:flex items-center gap-3">
<a
href="tel:+33180891030"
className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-sm font-bold px-4 py-2.5 rounded-xl transition-all shadow-md shadow-indigo-200"
className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] active:bg-[#74AB61] text-white text-sm font-bold px-4 py-2.5 rounded-xl transition-all shadow-md shadow-[#9CCC8A]/40"
>
<FiPhone className="text-base" />
01 80 89 10 30
@@ -78,14 +79,14 @@ export default function Navbar() {
<a
key={link.label}
href={link.href}
className="block px-3 py-2.5 text-sm text-slate-600 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg font-medium transition-colors"
className="block px-3 py-2.5 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg font-medium transition-colors"
>
{link.label}
</a>
))}
<a
href="tel:+33180891030"
className="mt-3 flex items-center justify-center gap-2 bg-indigo-600 text-white text-sm font-bold px-4 py-3 rounded-xl w-full"
className="mt-3 flex items-center justify-center gap-2 bg-[#9CCC8A] text-white text-sm font-bold px-4 py-3 rounded-xl w-full"
>
<FiPhone />
01 80 89 10 30
src/components/Testimonials.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default function Testimonials() {
className="bg-white rounded-2xl border border-slate-100 p-6 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all"
>
{/* Quote mark */}
<div className="text-4xl font-serif text-indigo-100 leading-none mb-2 select-none">
<div className="text-4xl font-serif text-[#9CCC8A]/30 leading-none mb-2 select-none">
"
</div>