Ceci est un exemple de page. À la différence des articles, qui sont affichés sur la page d’accueil de votre blog dans leur ordre de publication, les pages sont plutôt destinées à du contenu dont vous souhaitez qu’il soit toujours facilement accessible, comme votre présentation ou vos coordonnées. Cliquez sur le lien de modification pour modifier cette page ou ajouter une autre page.
import React, { useMemo, useState } from "react";import { Activity, ArrowRight, Baby, Brain, CalendarDays, CheckCircle2, ChevronRight, CircleDot, Clock3, Cross, HeartPulse, Link2, Mail, MapPin, Menu, Newspaper, Phone, ScanLine, Send, ShieldCheck, Sparkles, Stethoscope, Users, X, Building2, BadgeCheck,} from "lucide-react";import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import { Input } from "@/components/ui/input";import { Textarea } from "@/components/ui/textarea";import { motion } from "framer-motion";const brand = { name: "MSP Flammarion", tagline: "Maison de Santé Pluriprofessionnelle à Marseille", logoMark: "MF+", colors: { primary: "#0F766E", secondary: "#10B981", accent: "#0284C7", page: "#F8FFFE", soft: "#F0FDFA", title: "#0F172A", text: "#475569", }, fonts: { family: "Inter, ui-sans-serif, system-ui, sans-serif", h1: "text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-slate-900", h2: "text-3xl sm:text-4xl font-semibold tracking-tight text-slate-900", h3: "text-xl sm:text-2xl font-semibold text-slate-900", body: "text-base sm:text-lg leading-relaxed text-slate-600", paragraph: "text-sm sm:text-base leading-relaxed text-slate-600", },};const pages = [ { key: "accueil", label: "Accueil" }, { key: "maison", label: "La MSP" }, { key: "equipe", label: "Équipe & spécialités" }, { key: "parcours", label: "Parcours patient" }, { key: "actualites", label: "Actualités" }, { key: "newsletter", label: "Newsletter" }, { key: "contact", label: "Contact" },];const specialties = [ { icon: Stethoscope, title: "Médecine générale", text: "Un suivi de premier recours structuré, coordonné et ancré dans le quartier Flammarion.", }, { icon: Activity, title: "Kinésithérapie & rééducation", text: "Prise en charge fonctionnelle, rééducation et accompagnement du mouvement dans un parcours coordonné.", }, { icon: HeartPulse, title: "Cardiologie", text: "Prévention, suivi cardiovasculaire et coopération avec les autres professionnels de santé.", }, { icon: Brain, title: "Psychologie & prévention", text: "Approche globale de la santé, écoute, accompagnement et prévention en santé durable.", }, { icon: Baby, title: "Santé de la femme", text: "Suivi, accompagnement et prévention dans une logique de proximité et d'accessibilité.", }, { icon: ScanLine, title: "Imagerie légère", text: "Un accès facilité à des examens ciblés pour fluidifier le parcours du patient et l'orientation médicale.", },];const values = [ "Coordination pluriprofessionnelle", "Accès aux soins de proximité", "Prévention et parcours structurés", "Qualité, sécurité et continuité",];const carePath = [ { step: "1", title: "Prise de contact", text: "Le patient identifie facilement la bonne entrée grâce à une information claire et un accès simplifié.", }, { step: "2", title: "Accueil & orientation", text: "L'accueil oriente vers le bon professionnel ou le bon pôle selon le besoin exprimé.", }, { step: "3", title: "Consultation coordonnée", text: "Les professionnels coopèrent pour rendre le parcours plus lisible, plus efficace et plus rassurant.", }, { step: "4", title: "Suivi & prévention", text: "Le patient bénéficie d'un suivi dans la durée avec prévention, réévaluation et continuité des soins.", },];const newsItems = [ { title: "MSP Flammarion : un projet de santé de proximité à Marseille", category: "Vie du projet", date: "Avril 2026", excerpt: "La future MSP Flammarion se structure autour d'une ambition claire : améliorer l'accès aux soins, la coordination et la prévention à Marseille.", }, { title: "Pourquoi la coordination pluriprofessionnelle change le parcours patient", category: "Parcours patient", date: "Avril 2026", excerpt: "La maison de santé facilite l'orientation, renforce la coopération entre praticiens et rend la prise en charge plus fluide pour les patients.", }, { title: "Prévention, santé publique et ancrage territorial : la vision de MSP Flammarion", category: "Santé territoriale", date: "Avril 2026", excerpt: "Le projet met l'accent sur la proximité, la lisibilité de l'offre de soins et le lien avec les besoins du territoire marseillais.", },];const backlinks = [ "Annuaire santé Marseille", "Réseaux médicaux locaux", "Partenaires de prévention territoriale", "Pages institutionnelles et CPTS",];const seoKeywords = [ "maison de santé Marseille", "MSP Flammarion", "maison de santé pluriprofessionnelle Marseille", "coordination soins Marseille", "prise de rendez-vous santé Marseille", "professionnels de santé Flammarion",];function Logo() { return ( <div className="flex items-center gap-3"> <div className="relative flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-teal-700 to-emerald-500 text-white shadow-md"> <span className="text-sm font-semibold tracking-[0.12em]">{brand.logoMark}</span> <div className="absolute inset-x-2 bottom-2 h-px bg-white/40" /> </div> <div className="min-w-0"> <div className="truncate text-base font-semibold text-slate-900 sm:text-lg">{brand.name}</div> <div className="truncate text-xs text-slate-500 sm:text-sm">{brand.tagline}</div> </div> </div> );}function SectionTitle({ eyebrow, title, text }) { return ( <div className="max-w-3xl space-y-3"> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-teal-700">{eyebrow}</div> <h2 className={brand.fonts.h2}>{title}</h2> <p className={brand.fonts.body}>{text}</p> </div> );}function Header({ currentPage, setCurrentPage }) { const [open, setOpen] = useState(false); return ( <header className="sticky top-0 z-40 border-b border-emerald-100 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/75"> <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-4 sm:px-6 lg:px-8"> <button onClick={() => { setCurrentPage("accueil"); setOpen(false); }} className="min-w-0 text-left" > <Logo /> </button> <nav className="hidden items-center gap-2 xl:flex"> {pages.map((page) => ( <button key={page.key} onClick={() => setCurrentPage(page.key)} className={`rounded-xl px-4 py-2 text-sm font-medium transition ${ currentPage === page.key ? "bg-teal-700 text-white shadow-sm" : "text-slate-600 hover:bg-emerald-50 hover:text-slate-900" }`} > {page.label} </button> ))} </nav> <div className="hidden md:block"> <Button onClick={() => setCurrentPage("contact")} className="rounded-2xl bg-teal-700 text-white hover:bg-teal-800" > Nous contacter </Button> </div> <button className="rounded-xl border border-emerald-200 p-2 text-slate-700 xl:hidden" onClick={() => setOpen((v) => !v)} aria-label="Ouvrir le menu" > {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />} </button> </div> {open && ( <div className="border-t border-emerald-100 bg-white px-4 py-4 xl:hidden"> <div className="flex flex-col gap-2"> {pages.map((page) => ( <button key={page.key} onClick={() => { setCurrentPage(page.key); setOpen(false); }} className={`rounded-xl px-4 py-3 text-left text-sm font-medium ${ currentPage === page.key ? "bg-teal-700 text-white" : "bg-emerald-50 text-slate-700" }`} > {page.label} </button> ))} </div> </div> )} </header> );}function Hero({ setCurrentPage }) { return ( <section className="relative overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-sky-50"> <div className="pointer-events-none absolute inset-0"> <div className="absolute -left-16 top-10 h-44 w-44 rounded-full bg-emerald-100/70 blur-3xl sm:h-64 sm:w-64" /> <div className="absolute right-0 top-0 h-48 w-48 rounded-full bg-sky-100/70 blur-3xl sm:h-72 sm:w-72" /> </div> <div className="relative mx-auto grid max-w-7xl gap-8 px-4 py-14 sm:px-6 sm:py-16 lg:grid-cols-2 lg:items-center lg:gap-10 lg:px-8 lg:py-24"> <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex flex-col justify-center" > <Badge className="mb-4 w-fit rounded-full bg-emerald-100 px-4 py-1 text-teal-800 hover:bg-emerald-100"> Marseille • Flammarion • Santé de proximité </Badge> <h1 className={`max-w-3xl ${brand.fonts.h1}`}> Un site vitrine premium pour porter l'image santé et territoriale de la MSP Flammarion. </h1> <p className={`mt-6 max-w-2xl ${brand.fonts.body}`}> La V4 met en avant une identité plus réaliste, une présence éditoriale crédible et une base SEO locale pensée pour Marseille, le quartier Flammarion et les parcours patients. </p> <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap"> <Button size="lg" className="rounded-2xl bg-teal-700 text-white hover:bg-teal-800" onClick={() => setCurrentPage("contact")} > Demander des informations </Button> <Button size="lg" variant="outline" className="rounded-2xl border-emerald-200 text-teal-800 hover:bg-emerald-50" onClick={() => setCurrentPage("actualites")} > Voir les actualités </Button> </div> <div className="mt-8 grid gap-3 text-sm text-slate-600 sm:grid-cols-2 xl:grid-cols-3"> <div className="flex items-center gap-2 rounded-full bg-white px-4 py-2 shadow-sm ring-1 ring-emerald-100"> <BadgeCheck className="h-4 w-4 text-teal-700" /> Identité premium santé </div> <div className="flex items-center gap-2 rounded-full bg-white px-4 py-2 shadow-sm ring-1 ring-emerald-100"> <Building2 className="h-4 w-4 text-teal-700" /> Ancrage local Marseille </div> <div className="flex items-center gap-2 rounded-full bg-white px-4 py-2 shadow-sm ring-1 ring-emerald-100 sm:col-span-2 xl:col-span-1"> <Link2 className="h-4 w-4 text-teal-700" /> Base SEO locale </div> </div> </motion.div> <motion.div initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.55 }} className="grid gap-4" > <Card className="rounded-[28px] border border-emerald-100 bg-white/95 shadow-xl shadow-emerald-100/60"> <CardHeader> <CardTitle className="text-xl">Positionnement du site</CardTitle> </CardHeader> <CardContent className="grid gap-4 sm:grid-cols-2"> {[ "Palette santé rassurante", "Logo textuel premium intégré", "Pages Actualités et Newsletter", "SEO local Marseille / Flammarion", ].map((value) => ( <div key={value} className="flex items-start gap-3 rounded-2xl bg-emerald-50 p-4"> <CheckCircle2 className="mt-0.5 h-5 w-5 text-teal-700" /> <span className="text-sm leading-relaxed text-slate-700">{value}</span> </div> ))} </CardContent> </Card> <div className="grid gap-4 sm:grid-cols-3"> <Card className="rounded-[24px] border border-emerald-100 shadow-md"> <CardContent className="p-6"> <div className="text-sm text-slate-500">Police</div> <div className="mt-2 text-xl font-semibold text-slate-900 sm:text-2xl">Inter</div> </CardContent> </Card> <Card className="rounded-[24px] border border-emerald-100 shadow-md"> <CardContent className="p-6"> <div className="text-sm text-slate-500">Couleurs</div> <div className="mt-2 text-xl font-semibold text-slate-900 sm:text-2xl">Vert & bleu santé</div> </CardContent> </Card> <Card className="rounded-[24px] border border-emerald-100 shadow-md"> <CardContent className="p-6"> <div className="text-sm text-slate-500">Objectif</div> <div className="mt-2 text-xl font-semibold text-slate-900 sm:text-2xl">Crédibilité locale</div> </CardContent> </Card> </div> </motion.div> </div> </section> );}function PageAccueil({ setCurrentPage }) { return ( <div> <Hero setCurrentPage={setCurrentPage} /> <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Image & contenu" title="Une base prête pour un vrai site de maison de santé" text="Le site combine désormais identité visuelle, hiérarchie des contenus, pages éditoriales utiles et signaux de référencement local cohérents avec un projet santé à Marseille." /> <div className="mt-10 grid gap-6 md:grid-cols-3"> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardHeader> <CardTitle>Logo & identité</CardTitle> </CardHeader> <CardContent className={brand.fonts.paragraph}> Un logo textuel premium MF+ sert de base. Il pourra ensuite être décliné en version SVG ou imprimable pour le site, les documents et la signalétique. </CardContent> </Card> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardHeader> <CardTitle>Typographie</CardTitle> </CardHeader> <CardContent className={brand.fonts.paragraph}> Inter est retenue pour sa clarté, sa modernité et son excellent rendu sur mobile, tablette et ordinateur. </CardContent> </Card> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardHeader> <CardTitle>Référencement local</CardTitle> </CardHeader> <CardContent className={brand.fonts.paragraph}> Les contenus intègrent une logique locale Marseille / Flammarion pour mieux préparer le référencement naturel du projet. </CardContent> </Card> </div> <div className="mt-10 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]"> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-8"> <div className="flex items-start gap-4"> <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-emerald-100 text-teal-700"> <Sparkles className="h-6 w-6" /> </div> <div> <h3 className={brand.fonts.h3}>Ce que raconte le site</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Il présente la maison de santé comme un lieu de soins coordonné, lisible, rassurant et utile pour le territoire, avec une communication qui parle à la fois aux patients, partenaires et professionnels. </p> </div> </div> </CardContent> </Card> <Card className="rounded-[28px] border-0 bg-teal-700 text-white shadow-xl"> <CardContent className="p-8"> <div className="text-sm uppercase tracking-[0.2em] text-emerald-100">Pages ajoutées</div> <div className="mt-5 space-y-3"> {[ "Actualités pour le contenu vivant", "Newsletter pour capter les contacts", "Bloc SEO local et backlinks", ].map((item) => ( <div key={item} className="flex items-start gap-3 rounded-2xl bg-white/10 p-4"> <ArrowRight className="mt-0.5 h-5 w-5 text-teal-100" /> <span>{item}</span> </div> ))} </div> </CardContent> </Card> </div> </section> </div> );}function PageMaison() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="La MSP" title="Un projet de santé structuré autour de la coordination" text="La MSP Flammarion repose sur une logique pluriprofessionnelle : prévention, suivi, orientation, coopération entre praticiens et amélioration de l'accès aux soins à Marseille." /> <div className="mt-10 grid gap-6 lg:grid-cols-[1.2fr_0.8fr]"> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-6 sm:p-8"> <div className="grid gap-6 md:grid-cols-2"> <div> <h3 className={brand.fonts.h3}>Notre mission</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Offrir un lieu de soins moderne et cohérent, dans lequel les professionnels coopèrent au bénéfice du patient et du territoire. </p> </div> <div> <h3 className={brand.fonts.h3}>Notre méthode</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Coordination des prises en charge, partage d'information, prévention, qualité organisationnelle et suivi des parcours. </p> </div> <div> <h3 className={brand.fonts.h3}>Notre engagement</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Développer une offre de santé utile, crédible et pérenne, avec une organisation orientée patient. </p> </div> <div> <h3 className={brand.fonts.h3}>Notre ancrage local</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Une implantation à Marseille, dans une logique de proximité, de lisibilité et de complémentarité avec les besoins du territoire. </p> </div> </div> </CardContent> </Card> <Card className="rounded-[28px] border-0 bg-emerald-800 text-white shadow-xl"> <CardContent className="p-8"> <div className="text-sm uppercase tracking-[0.2em] text-emerald-100">Principes clés</div> <div className="mt-6 space-y-4"> {values.map((item) => ( <div key={item} className="flex items-start gap-3 rounded-2xl bg-white/10 p-4"> <ChevronRight className="mt-0.5 h-5 w-5 text-teal-100" /> <span>{item}</span> </div> ))} </div> </CardContent> </Card> </div> </section> );}function PageEquipe() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Équipe & spécialités" title="Une offre de soins complémentaire" text="La MSP Flammarion fédère des compétences médicales et paramédicales afin de répondre de façon plus complète aux besoins des patients et de fluidifier les parcours." /> <div className="mt-10 grid gap-6 sm:grid-cols-2 xl:grid-cols-3"> {specialties.map((item) => { const Icon = item.icon; return ( <Card key={item.title} className="rounded-[28px] border border-emerald-100 shadow-sm transition hover:-translate-y-1 hover:shadow-lg" > <CardContent className="p-7"> <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-100 text-teal-700"> <Icon className="h-6 w-6" /> </div> <h3 className={brand.fonts.h3}>{item.title}</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base">{item.text}</p> </CardContent> </Card> ); })} </div> </section> );}function PageParcours() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Parcours patient" title="Un parcours plus simple, plus lisible et mieux coordonné" text="De la prise de contact au suivi, chaque étape est pensée pour fluidifier l'expérience patient et renforcer la continuité des soins." /> <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"> {carePath.map((item) => ( <Card key={item.step} className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-7"> <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-teal-700 text-lg font-semibold text-white"> {item.step} </div> <h3 className="text-lg font-semibold text-slate-900">{item.title}</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base">{item.text}</p> </CardContent> </Card> ))} </div> <Card className="mt-10 rounded-[28px] border border-emerald-100 bg-emerald-50 shadow-sm"> <CardContent className="grid gap-6 p-6 sm:p-8 md:grid-cols-3"> <div className="flex items-start gap-3"> <CalendarDays className="mt-1 h-5 w-5 text-teal-700" /> <div> <div className="font-semibold text-slate-900">Information claire</div> <div className="text-sm leading-relaxed text-slate-600">Le site explique les accès, les services et les points de contact utiles.</div> </div> </div> <div className="flex items-start gap-3"> <Users className="mt-1 h-5 w-5 text-teal-700" /> <div> <div className="font-semibold text-slate-900">Coordination interne</div> <div className="text-sm leading-relaxed text-slate-600">Le parcours patient devient plus lisible grâce à la coopération entre professionnels.</div> </div> </div> <div className="flex items-start gap-3"> <ShieldCheck className="mt-1 h-5 w-5 text-teal-700" /> <div> <div className="font-semibold text-slate-900">Suivi de qualité</div> <div className="text-sm leading-relaxed text-slate-600">Prévention, continuité et prise en charge structurée dans le temps.</div> </div> </div> </CardContent> </Card> </section> );}function PageActualites() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Actualités" title="Une page éditoriale pour faire vivre le projet" text="La page Actualités améliore le référencement naturel, rassure les patients et montre que la MSP Flammarion est active, structurée et ancrée à Marseille." /> <div className="mt-10 grid gap-6 lg:grid-cols-3"> {newsItems.map((item) => ( <Card key={item.title} className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-7"> <div className="mb-4 flex items-center gap-2 text-sm text-teal-700"> <Newspaper className="h-4 w-4" /> {item.category} </div> <h3 className={brand.fonts.h3}>{item.title}</h3> <div className="mt-2 text-sm text-slate-500">{item.date}</div> <p className="mt-4 text-sm leading-relaxed text-slate-600 sm:text-base">{item.excerpt}</p> <button className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-teal-700 hover:text-teal-800"> Lire l'article <ArrowRight className="h-4 w-4" /> </button> </CardContent> </Card> ))} </div> </section> );}function PageNewsletter() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Newsletter" title="Une page dédiée pour capter et fidéliser l'audience" text="Cette page permet de recueillir les emails des patients, partenaires et professionnels intéressés par l'ouverture, les services et les actualités de la MSP Flammarion." /> <div className="mt-10 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]"> <Card className="rounded-[28px] border-0 bg-teal-700 text-white shadow-xl"> <CardContent className="space-y-5 p-8"> <div className="flex items-start gap-3"> <Send className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Objectif</div> <div className="text-sm text-emerald-100">Créer une base de contacts utile pour le lancement, la communication et la visibilité locale.</div> </div> </div> <div className="flex items-start gap-3"> <Mail className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Contenus</div> <div className="text-sm text-emerald-100">Ouverture, nouveaux praticiens, actions de prévention, informations utiles et vie du projet.</div> </div> </div> <div className="flex items-start gap-3"> <Link2 className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Effet SEO</div> <div className="text-sm text-emerald-100">Davantage de récurrence éditoriale et plus de trafic qualifié autour du site et de la marque MSP Flammarion.</div> </div> </div> </CardContent> </Card> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-6 sm:p-8"> <div className="space-y-2"> <label className="text-sm font-medium text-slate-700">Nom</label> <Input placeholder="Votre nom" className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="mt-4 space-y-2"> <label className="text-sm font-medium text-slate-700">Email</label> <Input placeholder="votre@email.fr" className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="mt-4 space-y-2"> <label className="text-sm font-medium text-slate-700">Centre d'intérêt</label> <Input placeholder="Patients, partenaires, professionnels de santé..." className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="mt-6"> <Button className="rounded-2xl bg-teal-700 text-white hover:bg-teal-800"> S'abonner à la newsletter </Button> </div> </CardContent> </Card> </div> </section> );}function PageContact() { return ( <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-16 lg:px-8"> <SectionTitle eyebrow="Contact" title="Échanger avec la MSP Flammarion" text="Une page de contact simple pour présenter le projet, recueillir les demandes et préparer l'ouverture ou les prises de contact partenaires et patients." /> <div className="mt-10 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]"> <Card className="rounded-[28px] border-0 bg-emerald-800 text-white shadow-xl"> <CardContent className="space-y-5 p-8"> <div className="flex items-start gap-3"> <MapPin className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Adresse</div> <div className="text-sm text-emerald-100">MSP Flammarion — Marseille</div> </div> </div> <div className="flex items-start gap-3"> <Phone className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Téléphone</div> <div className="text-sm text-emerald-100">04 00 00 00 00</div> </div> </div> <div className="flex items-start gap-3"> <Mail className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Email</div> <div className="text-sm text-emerald-100">contact@mspflammarion.fr</div> </div> </div> <div className="flex items-start gap-3"> <Clock3 className="mt-1 h-5 w-5 text-teal-100" /> <div> <div className="font-semibold">Horaires</div> <div className="text-sm text-emerald-100">Du lundi au vendredi — 8h30 à 18h30</div> </div> </div> </CardContent> </Card> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-6 sm:p-8"> <div className="grid gap-4 md:grid-cols-2"> <div className="space-y-2"> <label className="text-sm font-medium text-slate-700">Nom</label> <Input placeholder="Votre nom" className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="space-y-2"> <label className="text-sm font-medium text-slate-700">Email</label> <Input placeholder="votre@email.fr" className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> </div> <div className="mt-4 space-y-2"> <label className="text-sm font-medium text-slate-700">Sujet</label> <Input placeholder="Objet de votre demande" className="rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="mt-4 space-y-2"> <label className="text-sm font-medium text-slate-700">Message</label> <Textarea placeholder="Votre message" className="min-h-[160px] rounded-2xl border-emerald-200 focus-visible:ring-emerald-200" /> </div> <div className="mt-6"> <Button className="rounded-2xl bg-teal-700 text-white hover:bg-teal-800"> Envoyer la demande </Button> </div> </CardContent> </Card> </div> </section> );}function SeoBlock() { return ( <section className="mx-auto max-w-7xl px-4 pb-14 sm:px-6 sm:pb-16 lg:px-8"> <div className="grid gap-6 lg:grid-cols-[1fr_1fr]"> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-6 sm:p-8"> <h3 className={brand.fonts.h3}>Bloc backlinks à développer</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Les backlinks ne se créent pas comme un simple décor. Ils doivent être obtenus depuis des sites de qualité. Cette zone sert de guide pour la future stratégie SEO de la MSP Flammarion. </p> <div className="mt-6 grid gap-3 sm:grid-cols-2"> {backlinks.map((item) => ( <div key={item} className="flex items-start gap-3 rounded-2xl bg-emerald-50 p-4 text-sm text-slate-700"> <Link2 className="mt-0.5 h-4 w-4 text-teal-700" /> <span>{item}</span> </div> ))} </div> </CardContent> </Card> <Card className="rounded-[28px] border border-emerald-100 shadow-sm"> <CardContent className="p-6 sm:p-8"> <h3 className={brand.fonts.h3}>SEO local : expressions cibles</h3> <p className="mt-3 text-sm leading-relaxed text-slate-600 sm:text-base"> Ces expressions servent de base pour les futurs textes de pages, titres SEO, articles d'actualités et maillage interne du site. </p> <div className="mt-6 grid gap-3"> {seoKeywords.map((item) => ( <div key={item} className="flex items-start gap-3 rounded-2xl bg-sky-50 p-4 text-sm text-slate-700"> <CircleDot className="mt-0.5 h-4 w-4 text-sky-700" /> <span>{item}</span> </div> ))} </div> </CardContent> </Card> </div> </section> );}function Footer({ setCurrentPage }) { return ( <footer className="border-t border-emerald-100 bg-white"> <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 sm:px-6 md:grid-cols-3 lg:px-8"> <div> <Logo /> <p className="mt-3 max-w-sm text-sm leading-relaxed text-slate-600"> Une maison de santé pluriprofessionnelle pensée pour la coordination, la proximité et la prévention à Marseille. </p> </div> <div> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Navigation</div> <div className="mt-4 flex flex-col gap-2 text-sm text-slate-600"> {pages.map((page) => ( <button key={page.key} className="text-left hover:text-teal-700" onClick={() => setCurrentPage(page.key)} > {page.label} </button> ))} </div> </div> <div> <div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">Charte fixée</div> <div className="mt-4 space-y-2 text-sm text-slate-600"> <div>Police : Inter</div> <div>Palette : vert santé + bleu médical</div> <div>Fond : clair, doux et rassurant</div> </div> </div> </div> </footer> );}export default function MSPFlammarionWebsite() { const [currentPage, setCurrentPage] = useState("accueil"); const CurrentView = useMemo(() => { switch (currentPage) { case "maison": return <PageMaison />; case "equipe": return <PageEquipe />; case "parcours": return <PageParcours />; case "actualites": return <PageActualites />; case "newsletter": return <PageNewsletter />; case "contact": return <PageContact />; case "accueil": default: return <PageAccueil setCurrentPage={setCurrentPage} />; } }, [currentPage]); return ( <div className="min-h-screen bg-[#F8FFFE] text-slate-900" style={{ fontFamily: brand.fonts.family }}> <Header currentPage={currentPage} setCurrentPage={setCurrentPage} /> {CurrentView} <SeoBlock /> <Footer setCurrentPage={setCurrentPage} /> </div> );}
MSP Flammarion 