|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GRC Site Pro - Créateur de Sites Web Professionnels</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.template-card:hover .template-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
.template-overlay { |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0; |
|
|
} |
|
|
.floating-animation { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.mobile-menu { |
|
|
display: none; |
|
|
} |
|
|
.mobile-menu.active { |
|
|
display: block; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-shield-alt text-blue-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-blue-600">GRC Site Pro</span> |
|
|
</div> |
|
|
<div class="hidden md:ml-10 md:flex md:space-x-8"> |
|
|
<a href="#home" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a> |
|
|
<a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Fonctionnalités</a> |
|
|
<a href="#templates" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a> |
|
|
<a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center"> |
|
|
<button id="free-trial-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Essai gratuit</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Accueil</a> |
|
|
<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Fonctionnalités</a> |
|
|
<a href="#templates" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Modèles</a> |
|
|
<a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Tarifs</a> |
|
|
<button id="mobile-free-trial-btn" class="w-full text-left px-3 py-2 rounded-md text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50">Essai gratuit</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="home" class="gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"> |
|
|
Créez votre site GRC professionnel en minutes |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg mx-auto text-xl text-blue-100"> |
|
|
Plus de 1 000 modèles, outils de conversion et e-commerce intégré. Hébergement gratuit inclus. |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4"> |
|
|
<button id="start-free-btn" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 md:py-4 md:text-lg md:px-10"> |
|
|
Commencer gratuitement |
|
|
</button> |
|
|
<button id="see-demo-btn" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 bg-opacity-60 hover:bg-opacity-80 md:py-4 md:text-lg md:px-10"> |
|
|
Voir la démo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Tout ce dont vous avez besoin pour réussir en ligne |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i class="fas fa-paint-brush text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">+1000 modèles professionnels</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Choisissez parmi plus de 1 000 modèles conçus par des experts pour tous les secteurs d'activité. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> |
|
|
<i class="fas fa-funnel-dollar text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Entonnoirs de conversion</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Optimisez vos taux de conversion avec nos entonnoirs pré-conçus et personnalisables. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i class="fas fa-store text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">E-commerce & Dropshipping</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Lancez votre boutique en ligne avec gestion des stocks, paiements et intégration dropshipping. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Créateur IA</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Notre IA génère automatiquement du contenu, des images et des designs optimisés pour votre secteur. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white"> |
|
|
<i class="fas fa-server text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">Hébergement gratuit</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Bénéficiez d'un hébergement haute performance et d'un nom de domaine gratuit pendant 1 an. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-6 rounded-lg shadow-md transition duration-300 ease-in-out"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
|
<i class="fas fa-shield-alt text-xl"></i> |
|
|
</div> |
|
|
<h3 class="mt-5 text-lg leading-6 font-medium text-gray-900">GRC intégré</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Outils de conformité, gestion des risques et tableau de bord de gouvernance intégrés. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="templates" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Modèles</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Parcourez nos modèles les plus populaires |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Template 1" class="w-full h-64 object-cover"> |
|
|
<div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center"> |
|
|
<button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="Corporate GRC">Utiliser ce modèle</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Corporate GRC</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Parfait pour les grandes entreprises</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Template 2" class="w-full h-64 object-cover"> |
|
|
<div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center"> |
|
|
<button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="E-commerce Sécurisé">Utiliser ce modèle</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">E-commerce Sécurisé</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Boutique en ligne avec paiements sécurisés</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="template-card group relative bg-white rounded-lg overflow-hidden shadow-md"> |
|
|
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Template 3" class="w-full h-64 object-cover"> |
|
|
<div class="template-overlay absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center"> |
|
|
<button class="use-template-btn text-white font-medium px-6 py-3 bg-blue-800 rounded-md hover:bg-blue-900" data-template="Consulting Professionnel">Utiliser ce modèle</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Consulting Professionnel</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Pour consultants et indépendants</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 text-center"> |
|
|
<button id="view-all-templates-btn" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> |
|
|
Voir tous les modèles <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> |
|
|
<div class="relative"> |
|
|
<div class="floating-animation"> |
|
|
<img class="mx-auto rounded-lg shadow-xl w-full" src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="AI Builder"> |
|
|
</div> |
|
|
<div class="absolute -bottom-8 -left-8 bg-blue-100 rounded-lg p-4 shadow-lg"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-magic text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-blue-900">Notre IA a généré ce design en 27 secondes</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 lg:mt-0"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Création de site automatisée par IA |
|
|
</h2> |
|
|
<p class="mt-3 text-lg text-gray-500"> |
|
|
Notre intelligence artificielle analyse votre secteur d'activité et crée automatiquement un site web optimisé pour vos besoins spécifiques. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<button id="try-ai-builder-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> |
|
|
Essayer le créateur IA <i class="fas fa-robot ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-200 font-semibold tracking-wide uppercase">Témoignages</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
Ce que nos clients disent |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 1"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Sophie Martin</h4> |
|
|
<p class="text-blue-600">Consultante en conformité</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600"> |
|
|
"J'ai pu créer un site professionnel pour mon cabinet en moins d'une heure. Les outils de conformité intégrés sont un vrai plus pour mon activité." |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 2"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Jean Dupont</h4> |
|
|
<p class="text-blue-600">Directeur GRC</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600"> |
|
|
"La gestion des risques intégrée au site a révolutionné notre façon de travailler. Plus besoin de multiples outils, tout est centralisé." |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Client 3"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Marie Leroy</h4> |
|
|
<p class="text-blue-600">Entrepreneure e-commerce</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600"> |
|
|
"Mon chiffre d'affaires a augmenté de 40% après avoir optimisé les entonnoirs de vente. L'intégration dropshipping est parfaite." |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star-half-alt text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="pricing" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Tarifs</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Des options pour chaque besoin |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto"> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-lg leading-6 font-medium text-gray-900">Basique</h2> |
|
|
<p class="mt-4 text-sm text-gray-500">Parfait pour les particuliers et petits projets</p> |
|
|
<p class="mt-8"> |
|
|
<span class="text-4xl font-extrabold text-gray-900">9€</span> |
|
|
<span class="text-base font-medium text-gray-500">/mois</span> |
|
|
</p> |
|
|
<button class="select-plan-btn mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900" data-plan="basique"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
<div class="pt-6 pb-8 px-6"> |
|
|
<h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3> |
|
|
<ul class="mt-6 space-y-4"> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">1 site web</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">100 modèles</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">5 pages maximum</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Hébergement basique</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-lg leading-6 font-medium text-gray-900">Professionnel</h2> |
|
|
<p class="mt-4 text-sm text-gray-500">Pour les professionnels et petites entreprises</p> |
|
|
<p class="mt-8"> |
|
|
<span class="text-4xl font-extrabold text-gray-900">29€</span> |
|
|
<span class="text-base font-medium text-gray-500">/mois</span> |
|
|
</p> |
|
|
<button class="select-plan-btn mt-8 block w-full bg-blue-600 border border-blue-600 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-blue-700" data-plan="professionnel"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
<div class="pt-6 pb-8 px-6"> |
|
|
<h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3> |
|
|
<ul class="mt-6 space-y-4"> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">3 sites web</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Tous les modèles</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Pages illimitées</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Hébergement premium</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Nom de domaine gratuit</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Outils GRC de base</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-lg leading-6 font-medium text-gray-900">Entreprise</h2> |
|
|
<p class="mt-4 text-sm text-gray-500">Pour les grandes entreprises et e-commerce</p> |
|
|
<p class="mt-8"> |
|
|
<span class="text-4xl font-extrabold text-gray-900">99€</span> |
|
|
<span class="text-base font-medium text-gray-500">/mois</span> |
|
|
</p> |
|
|
<button class="select-plan-btn mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900" data-plan="entreprise"> |
|
|
Choisir ce plan |
|
|
</button> |
|
|
</div> |
|
|
<div class="pt-6 pb-8 px-6"> |
|
|
<h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">Ce qui est inclus</h3> |
|
|
<ul class="mt-6 space-y-4"> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Sites web illimités</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Tous les modèles premium</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">E-commerce complet</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Hébergement enterprise</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Noms de domaine gratuits</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Suite GRC complète</span> |
|
|
</li> |
|
|
<li class="flex space-x-3"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
<span class="text-sm text-gray-500">Support prioritaire</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
<span class="block">Prêt à lancer votre site ?</span> |
|
|
<span class="block text-blue-600">Commencez gratuitement dès aujourd'hui.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<button id="create-site-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> |
|
|
Créer mon site <i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<button id="see-demo-cta-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50"> |
|
|
Voir la démo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Produit</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#features" class="text-base text-gray-300 hover:text-white">Fonctionnalités</a></li> |
|
|
<li><a href="#templates" class="text-base text-gray-300 hover:text-white">Modèles</a></li> |
|
|
<li><a href="#pricing" class="text-base text-gray-300 hover:text-white">Tarifs</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Presse</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Centre d'aide</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Sécurité</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Statut</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Légal</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Confidentialité</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Conditions</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Politique cookies</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> |
|
|
<div class="flex space-x-6 md:order-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">Facebook</span> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">Instagram</span> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">Twitter</span> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">LinkedIn</span> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
|
|
© 2023 GRC Site Pro. Tous droits réservés. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"> |
|
|
<div> |
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<div class="mt-3 text-center sm:mt-5"> |
|
|
<h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900"></h3> |
|
|
<div class="mt-2"> |
|
|
<p id="modal-content" class="text-sm text-gray-500"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-5 sm:mt-6"> |
|
|
<button id="modal-close-btn" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm"> |
|
|
Fermer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const modal = document.getElementById('modal'); |
|
|
const modalTitle = document.getElementById('modal-title'); |
|
|
const modalContent = document.getElementById('modal-content'); |
|
|
const modalCloseBtn = document.getElementById('modal-close-btn'); |
|
|
|
|
|
function showModal(title, content) { |
|
|
modalTitle.textContent = title; |
|
|
modalContent.textContent = content; |
|
|
modal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
function hideModal() { |
|
|
modal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
|
|
|
modalCloseBtn.addEventListener('click', hideModal); |
|
|
|
|
|
|
|
|
document.getElementById('free-trial-btn').addEventListener('click', () => { |
|
|
showModal('Essai gratuit', 'Vous allez être redirigé vers la page d\'inscription pour votre essai gratuit de 14 jours.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('mobile-free-trial-btn').addEventListener('click', () => { |
|
|
showModal('Essai gratuit', 'Vous allez être redirigé vers la page d\'inscription pour votre essai gratuit de 14 jours.'); |
|
|
mobileMenu.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('start-free-btn').addEventListener('click', () => { |
|
|
showModal('Commencer gratuitement', 'Créez votre compte maintenant et commencez à construire votre site GRC professionnel en quelques minutes.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('see-demo-btn').addEventListener('click', () => { |
|
|
showModal('Démo en direct', 'Découvrez notre plateforme avec une démonstration interactive de toutes les fonctionnalités.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('see-demo-cta-btn').addEventListener('click', () => { |
|
|
showModal('Démo en direct', 'Découvrez notre plateforme avec une démonstration interactive de toutes les fonctionnalités.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('try-ai-builder-btn').addEventListener('click', () => { |
|
|
showModal('Créateur IA', 'Notre intelligence artificielle va vous poser quelques questions pour générer un site parfaitement adapté à vos besoins.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('view-all-templates-btn').addEventListener('click', () => { |
|
|
showModal('Tous les modèles', 'Parcourez notre bibliothèque complète de plus de 1000 modèles professionnels pour tous les secteurs.'); |
|
|
}); |
|
|
|
|
|
document.getElementById('create-site-btn').addEventListener('click', () => { |
|
|
showModal('Création de site', 'Choisissez un modèle ou laissez notre IA créer un site personnalisé pour vous.'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.use-template-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const templateName = e.target.getAttribute('data-template'); |
|
|
showModal('Utiliser un modèle', `Vous avez sélectionné le modèle "${templateName}". Nous allons maintenant personnaliser ce modèle pour votre activité.`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.select-plan-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
const plan = e.target.getAttribute('data-plan'); |
|
|
showModal('Souscription', `Vous avez choisi le plan ${plan}. Vous allez être redirigé vers notre formulaire de paiement sécurisé.`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/grc-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
