Code chatgpt haut de page CONFIER VOTRE BIEN :

import React from “react”;
import { motion } from “framer-motion”;
import {
Sparkles,
CalendarCheck,
MessageSquare,
ShieldCheck,
ScrollText,
Wand2,
DollarSign,
BedDouble,
Shirt,
BaggageClaim,
Receipt,
Wrench,
Stars,
} from “lucide-react”;

const services = [
{
title: “Service Premises & Mise en valeur”,
desc:
“Shooting pro, home-staging léger et description vendeur pour booster le taux de réservation.”,
icon: Sparkles,
tag: “Essentiel”,
},
{
title: “Création & diffusion des annonces”,
desc:
“Rédaction optimisée + publication multi-plateformes (Airbnb, Booking, etc.).”,
icon: ScrollText,
tag: “Essentiel”,
},
{
title: “Optimisation dynamique des prix”,
desc:
“Yield management quotidien pour maximiser le revenu par nuit.”,
icon: DollarSign,
tag: “Essentiel”,
},
{
title: “Gestion des calendriers”,
desc:
“Synchronisation en temps réel et prévention du surbooking.”,
icon: CalendarCheck,
tag: “Essentiel”,
},
{
title: “Gestion des messages”,
desc:
“Service client 7j/7 avec scripts multi-langues et réponses sous 5 min.”,
icon: MessageSquare,
tag: “Premium”,
},
{
title: “Contrôle & vérification des clients”,
desc:
“Sélection, vérification d’identité et dépôt de garantie digital.”,
icon: ShieldCheck,
tag: “Premium”,
},
{
title: “Ménage hôtelier”,
desc:
“Procédures et checklists hôtelières + contrôle qualité.”,
icon: BedDouble,
tag: “Essentiel”,
},
{
title: “Check‑in & Check‑out assistés”,
desc:
“Arrivée autonome ou accueillie, avec guide digital personnalisé.”,
icon: BaggageClaim,
tag: “Essentiel”,
},
{
title: “Blanchisserie”,
desc:
“Linge premium, rotation optimisée et traçabilité par séjour.”,
icon: Shirt,
tag: “Essentiel”,
},
{
title: “Articles de toilette & consommables”,
desc:
“Approvisionnement intelligent pour une expérience 5★.”,
icon: Stars,
tag: “Confort”,
},
{
title: “Gestion des paiements & facturation”,
desc:
“Encaissement sécurisé, factures mensuelles et reporting clair.”,
icon: Receipt,
tag: “Essentiel”,
},
{
title: “Maintenance & petites réparations”,
desc:
“Interventions rapides, artisans partenaires et suivi des tickets.”,
icon: Wrench,
tag: “Premium”,
},
];

const SectionHeader = () => (
Découvrez la conciergerie Prokeys au Maroc Chaque détail est pensé pour générer plus de rentabilité et un taux d’occupation supérieur, tout en offrant à vos hôtes une expérience exceptionnelle qui fait la différence.

);

const Legend = () => (

Essentiel Premium Confort

);

const ServiceCard = ({ item, idx }: { item: (typeof services)[number]; idx: number }) => {
const Icon = item.icon as any;
const tagColor =
item.tag === “Essentiel”
? “bg-[#64e1ff]/10 text-[#0b4399] ring-[#64e1ff]”
: item.tag === “Premium”
? “bg-[#0b4399]/10 text-[#0b4399] ring-[#0b4399]/30”
: “bg-amber-500/10 text-amber-700 ring-amber-200”;

return (

  <div className="flex items-start gap-4">
    <div className="shrink-0 rounded-xl p-3 ring-1 ring-slate-200 bg-white text-[#0b4399]">
      <Icon className="h-6 w-6" aria-hidden="true" />
    </div>
    <div className="min-w-0">
      <h3 className="text-base md:text-lg font-semibold text-slate-900 leading-tight">
        {item.title}
      </h3>
      <p className="mt-1.5 text-sm text-slate-600">
        {item.desc}
      </p>
    </div>
  </div>

  <div className="mt-4 flex items-center justify-between">
    <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ring-1 ${tagColor}`}>
      {item.tag}
    </span>
    <button className="text-sm font-medium text-[#0b4399] hover:text-[#0b4399]/80">
      En savoir plus →
    </button>
  </div>
</motion.div>

);
};

const KPIBar = () => (

{[{k:”+18%”, l:”revenu / nuit”},{k:”+12%”, l:”taux d’occupation”},{k:”<5 min”, l:”temps de réponse”},{k:”4.9/5″, l:”note moyenne”}].map((x, i) => (

{x.k}

{x.l}

))}

);

export default function ServicesShowcase() {
return (

{/* Background */}

  <div className="px-4 md:px-6 mx-auto max-w-7xl">
    <SectionHeader />
    <Legend />

    {/* Grid */}
    <div className="mt-10 grid gap-4 md:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
      {services.map((s, i) => (
        <ServiceCard key={s.title} item={s} idx={i} />
      ))}
    </div>

    <KPIBar />

    {/* CTA bar */}
    <div className="mt-10 md:mt-14 flex flex-col md:flex-row items-center justify-between gap-4 rounded-2xl border border-slate-200 bg-white/80 p-5 md:p-6">
      <div>
        <p className="text-slate-900 font-semibold text-lg">Prêt à augmenter vos revenus ?</p>
        <p className="text-slate-600 text-sm mt-1">Recevez une estimation gratuite de vos gains potentiels en 24h.</p>
      </div>
      <div>
        <a href="#" className="inline-flex items-center justify-center rounded-xl px-6 py-3 text-sm font-semibold bg-gradient-to-r from-[#0b4399] to-[#64e1ff] text-white hover:opacity-90 transition-colors">CONSULTATION GRATUITE</a>
      </div>
    </div>
  </div>
</section>

);
}