471 lines
27 KiB
TypeScript
471 lines
27 KiB
TypeScript
"use client"
|
||
|
||
import { useCallback, useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { ArrowRight, Key, Zap, Users, Globe, Database, Code, CheckCircle, Shield } from "lucide-react"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import AuthModal from "@/components/4nk/AuthModal"
|
||
import { Header, Footer } from "@/components/layout"
|
||
import ProductCard from "@/components/ui/ProductCard"
|
||
import { EXTERNAL_URLS, COMPANY_INFO } from "@/lib/constants"
|
||
|
||
export const iframeUrl = EXTERNAL_URLS.iframe
|
||
|
||
export default function HomePage() {
|
||
const [showAuthModal, setShowAuthModal] = useState(false)
|
||
const [isConnected, setIsConnected] = useState(false)
|
||
const router = useRouter()
|
||
|
||
const handleAuthConnect = useCallback(() => {
|
||
setIsConnected(true);
|
||
setShowAuthModal(false);
|
||
router.push("/dashboard")
|
||
}, []);
|
||
|
||
const handleAuthClose = useCallback(() => {
|
||
setShowAuthModal(false);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
|
||
<Header onAuthClick={() => setShowAuthModal(true)} />
|
||
|
||
{/* Hero Section */}
|
||
<section className="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
|
||
<div className="container mx-auto text-center">
|
||
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-6">
|
||
Sécurisez votre entreprise avec la{" "}
|
||
<span className="text-blue-600 dark:text-blue-400">GED simple et souveraine</span>
|
||
</h1>
|
||
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||
{COMPANY_INFO.description}
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link href="">
|
||
<Button size="lg" onClick={() => setShowAuthModal(true)} className="text-lg px-8 py-3 bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition-colors duration-300">
|
||
Commencer maintenant
|
||
<ArrowRight className="ml-2 h-5 w-5" />
|
||
</Button>
|
||
</Link>
|
||
<Link href="/formation">
|
||
<Button variant="outline" size="lg" className="text-lg px-8 py-3 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 transition-colors duration-300">
|
||
Découvrir nos formations
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Auth Modal */}
|
||
{showAuthModal && (
|
||
<AuthModal
|
||
isOpen={showAuthModal}
|
||
onConnect={handleAuthConnect}
|
||
onClose={handleAuthClose}
|
||
iframeUrl={iframeUrl}
|
||
/>
|
||
)}
|
||
|
||
{/* Product Section */}
|
||
<section id="produit" className="py-16 px-4 bg-white dark:bg-gray-900 transition-colors duration-300">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900 dark:text-gray-100">Le produit</h2>
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||
<ProductCard
|
||
icon={Key}
|
||
title="Login cryptographique ultra-simplifié"
|
||
description={[
|
||
"Aucun mot de passe, aucun OTP, aucun mail, aucun code, aucune application.",
|
||
"Notifications transverses et temps réel sur l'avancement des traitements."
|
||
]}
|
||
/>
|
||
|
||
<ProductCard
|
||
icon={Zap}
|
||
title="IA embarquée"
|
||
description={[
|
||
"OCR, classification et extraction avec IA locale.",
|
||
"L'IA, ses données et ses traitements restent locaux.",
|
||
"Interface conversationnelle pour suivre les dossiers."
|
||
]}
|
||
/>
|
||
|
||
<ProductCard
|
||
icon={Users}
|
||
title="Facilite l'usage quotidien"
|
||
description={[
|
||
"• Réduction massive des emails",
|
||
"• Protection des identités et accès",
|
||
"• Traçabilité sur blockchain"
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
{/* Additional Features */}
|
||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 transition-colors duration-300">
|
||
<h3 className="text-2xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">⚙️ Facilite l'usage de la GED au quotidien</h3>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 className="font-semibold mb-3 text-gray-900 dark:text-gray-100">Clés cryptographiques locales :</h4>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
|
||
<li>• Utilisées pour signer, chiffrer, authentifier, prouver</li>
|
||
<li>• Synchroniser ou chiffrer les traitements IA</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-semibold mb-3 text-gray-900 dark:text-gray-100">Gestion des rôles et autorisations :</h4>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-300">
|
||
<li>• Tracée, versionnée, et vérifiable</li>
|
||
<li>• Normes : OWASP, ISO/IEC 27001, SecNumCloud, RGPD</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Security Section */}
|
||
<section id="securite" className="py-16 px-4 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
|
||
<div className="container mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">🔐 Sécurité de bout en bout, par conception</h2>
|
||
<p className="text-xl text-gray-600 dark:text-gray-300">DocV intègre dès l'entrée : chiffrement, confidentialité, intégrité, authentification forte, décentralisation et preuves.</p>
|
||
</div>
|
||
{/* Cards security ... similaire à ce que tu avais */}
|
||
</div>
|
||
</section>
|
||
|
||
{/* References Section */}
|
||
<section className="py-16 px-4 bg-white dark:bg-gray-900 transition-colors">
|
||
<div className="container mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">
|
||
🤝 Références et Intégrations
|
||
</h2>
|
||
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||
DocV fait confiance aux plus grands éditeurs et sert d'infrastructure à des secteurs critiques
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-8">
|
||
<Card className="bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-800 dark:to-blue-900 border-2 border-blue-200 dark:border-blue-700 transition-colors">
|
||
<CardHeader>
|
||
<Globe className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
|
||
<CardTitle className="text-blue-700 dark:text-blue-300">🏢 Intégration Marque Blanche</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
||
DocV est intégrée en marque blanche par de grands éditeurs qui font confiance à notre technologie pour sécuriser leurs solutions documentaires.
|
||
</p>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
|
||
<li>• Infrastructure invisible mais essentielle</li>
|
||
<li>• Sécurisation des échanges documentaires</li>
|
||
<li>• Conformité réglementaire garantie</li>
|
||
<li>• Scalabilité pour les grands volumes</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-800 dark:to-emerald-900 border-2 border-green-200 dark:border-green-700 transition-colors">
|
||
<CardHeader>
|
||
<Shield className="h-12 w-12 text-green-600 dark:text-green-400 mb-4" />
|
||
<CardTitle className="text-green-700 dark:text-green-300">⚖️ Référence Notariale : lecoffre.io</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
||
DocV sert d'infrastructure au site <strong>lecoffre.io</strong>, plateforme de référence pour la gestion sécurisée des échanges documentaires notariaux.
|
||
</p>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
|
||
<li>• Échanges notaires ↔ clients sécurisés</li>
|
||
<li>• Communications inter-notaires chiffrées</li>
|
||
<li>• Partenariats bancaires sécurisés</li>
|
||
<li>• Conformité aux exigences notariales</li>
|
||
</ul>
|
||
<div className="mt-4 p-3 bg-white dark:bg-gray-800 rounded-lg border border-green-200 dark:border-green-700">
|
||
<p className="text-sm text-green-800 dark:text-green-300">
|
||
<strong>lecoffre.io</strong> : La confiance des notaires français pour leurs échanges documentaires les plus sensibles.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-800 dark:to-blue-900 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 transition-colors">
|
||
<h3 className="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">🔒 Une technologie éprouvée</h3>
|
||
<p className="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
|
||
Quand les secteurs les plus exigeants en matière de sécurité et de confidentialité choisissent DocV,
|
||
c'est la preuve de la robustesse et de la fiabilité de notre solution.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-16">
|
||
<Card className="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-800 dark:to-indigo-900 border-2 border-purple-200 dark:border-purple-700 transition-colors">
|
||
<CardHeader className="text-center">
|
||
<Code className="h-12 w-12 text-purple-600 dark:text-purple-400 mx-auto mb-4" />
|
||
<CardTitle className="text-purple-700 dark:text-purple-300 text-2xl">🔓 Solutions Open Source</CardTitle>
|
||
<CardDescription className="text-lg text-gray-700 dark:text-gray-300">
|
||
Développez vos solutions distribuées avec nos technologies ouvertes
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="text-center">
|
||
<p className="text-gray-700 dark:text-gray-300 mb-6 text-lg">
|
||
DocV met à disposition ses briques technologiques en open source pour permettre aux développeurs et organisations de créer leurs propres solutions distribuées et souveraines.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-purple-200 dark:border-purple-700">
|
||
<h4 className="font-semibold text-purple-800 dark:text-purple-300 mb-3">🛠️ Composants disponibles :</h4>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
|
||
<li>• Authentification cryptographique</li>
|
||
<li>• Gestion d'identité décentralisée</li>
|
||
<li>• Chiffrement de bout en bout</li>
|
||
<li>• Ancrage blockchain</li>
|
||
<li>• APIs souveraines</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-purple-200 dark:border-purple-700">
|
||
<h4 className="font-semibold text-purple-800 dark:text-purple-300 mb-3">🎯 Cas d'usage :</h4>
|
||
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
|
||
<li>• Applications métier distribuées</li>
|
||
<li>• Plateformes collaboratives sécurisées</li>
|
||
<li>• Solutions sectorielles sur-mesure</li>
|
||
<li>• Intégrations système existant</li>
|
||
<li>• Prototypes et POC</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-purple-900 dark:to-indigo-800 p-6 rounded-lg border border-purple-300 dark:border-purple-700 transition-colors">
|
||
<div className="text-center">
|
||
<h4 className="font-semibold text-purple-800 dark:text-purple-300 mb-3 text-lg">💡 Accompagnement personnalisé</h4>
|
||
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
||
Notre équipe d'experts vous accompagne dans l'intégration et le développement de vos solutions distribuées basées sur nos composants open source.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a href="https://git.4nkweb.com" target="_blank" rel="noopener noreferrer">
|
||
<Button className="bg-purple-600 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-600">
|
||
<Code className="h-4 w-4 mr-2" />
|
||
Accéder au code source
|
||
</Button>
|
||
</a>
|
||
<Link href="/contact">
|
||
<Button variant="outline" className="border-purple-300 text-purple-700 dark:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-800 bg-transparent">
|
||
Contactez-nous pour un projet
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
<strong>Licence :</strong> Solutions disponibles sous licence open source permissive. Support commercial et accompagnement disponibles.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Summary */}
|
||
<section className="py-16 px-4 bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900 text-white transition-colors">
|
||
<div className="container mx-auto text-center">
|
||
<h2 className="text-4xl font-bold mb-8">🔐 En résumé</h2>
|
||
<p className="text-xl mb-8 max-w-4xl mx-auto">
|
||
DocV transforme la GED : plus simple, plus sûre, plus souveraine, et parfaitement compatible avec vos outils existants.
|
||
</p>
|
||
<p className="text-lg mb-8">
|
||
C'est l'identité numérique que vous contrôlez, qui vous protège, et qui vous suit dans tous vos usages documentaires
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Pricing */}
|
||
<section id="tarifs" className="py-16 px-4 bg-white dark:bg-gray-900 transition-colors">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900 dark:text-white">
|
||
Tarification simple et universelle
|
||
</h2>
|
||
|
||
<div className="max-w-4xl mx-auto">
|
||
<Card className="border-2 border-blue-200 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 transition-colors">
|
||
<CardHeader className="text-center">
|
||
<CardTitle className="text-3xl font-bold text-blue-700 dark:text-blue-400">Offre Découverte</CardTitle>
|
||
<CardDescription className="text-2xl font-semibold text-blue-600 dark:text-blue-300">
|
||
2990 € HT / mois
|
||
</CardDescription>
|
||
<Badge className="bg-green-600 text-white text-lg px-4 py-2 mt-2 dark:bg-green-500">
|
||
1000 jetons inclus
|
||
</Badge>
|
||
</CardHeader>
|
||
|
||
<CardContent>
|
||
{/* Jetons détaillés */}
|
||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg mb-6 transition-colors">
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 text-center">
|
||
🎯 Que comprennent 1000 jetons ?
|
||
</h3>
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
<div className="text-center p-4 bg-blue-50 dark:bg-blue-800 rounded-lg transition-colors">
|
||
<Database className="h-8 w-8 mx-auto text-blue-600 dark:text-blue-300 mb-2" />
|
||
<h4 className="font-semibold text-blue-800 dark:text-blue-200">Stockage permanent</h4>
|
||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-300">1 To</p>
|
||
<p className="text-sm text-blue-700 dark:text-blue-200">Documents chiffrés et sécurisés</p>
|
||
</div>
|
||
<div className="text-center p-4 bg-green-50 dark:bg-green-800 rounded-lg transition-colors">
|
||
<Zap className="h-8 w-8 mx-auto text-green-600 dark:text-green-300 mb-2" />
|
||
<h4 className="font-semibold text-green-800 dark:text-green-200">Stockage temporaire</h4>
|
||
<p className="text-2xl font-bold text-green-600 dark:text-green-300">100 Go</p>
|
||
<p className="text-sm text-green-700 dark:text-green-200">Traitement IA et OCR</p>
|
||
</div>
|
||
<div className="text-center p-4 bg-purple-50 dark:bg-purple-800 rounded-lg transition-colors">
|
||
<Users className="h-8 w-8 mx-auto text-purple-600 dark:text-purple-300 mb-2" />
|
||
<h4 className="font-semibold text-purple-800 dark:text-purple-200">Nouveaux dossiers</h4>
|
||
<p className="text-2xl font-bold text-purple-600 dark:text-purple-300">75</p>
|
||
<p className="text-sm text-purple-700 dark:text-purple-200">Par mois maximum</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Architecture */}
|
||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-800 dark:to-blue-900 p-6 rounded-lg mb-6 transition-colors">
|
||
<h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">
|
||
🏗️ Architecture de stockage souveraine
|
||
</h4>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-700 transition-colors">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<Zap className="h-5 w-5 text-green-600 dark:text-green-300" />
|
||
<h5 className="font-semibold text-green-800 dark:text-green-200">Stockage Temporaire</h5>
|
||
</div>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200 mb-2">
|
||
<strong>Store chiffré local, distribué strictement en parties prenantes</strong>
|
||
</p>
|
||
<ul className="text-xs text-gray-600 dark:text-gray-300 space-y-1">
|
||
<li>• Accès rapide pour modifications</li>
|
||
<li>• Chiffrement bout en bout</li>
|
||
<li>• Distribution contrôlée</li>
|
||
<li>• Traitement IA local</li>
|
||
</ul>
|
||
</div>
|
||
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-blue-200 dark:border-blue-700 transition-colors">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<Database className="h-5 w-5 text-blue-600 dark:text-blue-300" />
|
||
<h5 className="font-semibold text-blue-800 dark:text-blue-200">Stockage Permanent</h5>
|
||
</div>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200 mb-2">
|
||
<strong>
|
||
Store chiffré d'archivage local, distribué strictement en parties prenantes et sur un serveur de backup
|
||
</strong>
|
||
</p>
|
||
<ul className="text-xs text-gray-600 dark:text-gray-300 space-y-1">
|
||
<li>• Conservation longue durée</li>
|
||
<li>• Lecture seule sécurisée</li>
|
||
<li>• Backup cold storage</li>
|
||
<li>• Extraction IA pour data room distribuée</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 p-3 bg-blue-100 dark:bg-blue-800 rounded-lg transition-colors">
|
||
<p className="text-sm text-blue-800 dark:text-blue-200 text-center">
|
||
<strong>🔐 Souveraineté totale :</strong> Vos données restent sous votre contrôle exclusif, même en backup
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Avantages */}
|
||
<div className="space-y-3 mb-6 text-gray-900 dark:text-gray-200">
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
|
||
<span>Pas de coût par utilisateur</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
|
||
<span>Pas de surcoût pour l'IA embarquée</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
|
||
<span>Pas de frais de licence à la signature ou au document</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 text-green-600 dark:text-green-300 mr-3" />
|
||
<span>Pas de facturation par API ou par traitement</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Jetons supplémentaires */}
|
||
<div className="bg-gradient-to-r from-orange-50 to-yellow-50 dark:from-orange-900 dark:to-yellow-800 p-6 rounded-lg border border-orange-200 dark:border-orange-700 mb-6 transition-colors">
|
||
<h4 className="font-semibold text-orange-800 dark:text-orange-300 mb-3 text-center">📦 Jetons supplémentaires</h4>
|
||
<div className="text-center mb-4">
|
||
<p className="text-lg font-semibold text-orange-700 dark:text-orange-200">Lots de 250 jetons</p>
|
||
<p className="text-2xl font-bold text-orange-600 dark:text-orange-300">+747,50 € HT/mois</p>
|
||
<p className="text-sm text-orange-600 dark:text-orange-200">(2990 € ÷ 4 = 747,50 € par lot de 250 jetons)</p>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-4 text-center">
|
||
<div className="bg-white dark:bg-gray-800 p-3 rounded border border-orange-200 dark:border-orange-700">
|
||
<p className="font-medium text-orange-800 dark:text-orange-300">+250 Go</p>
|
||
<p className="text-xs text-orange-600 dark:text-orange-200">Stockage permanent</p>
|
||
</div>
|
||
<div className="bg-white dark:bg-gray-800 p-3 rounded border border-orange-200 dark:border-orange-700">
|
||
<p className="font-medium text-orange-800 dark:text-orange-300">+25 Go</p>
|
||
<p className="text-xs text-orange-600 dark:text-orange-200">Stockage temporaire</p>
|
||
</div>
|
||
<div className="bg-white dark:bg-gray-800 p-3 rounded border border-orange-200 dark:border-orange-700">
|
||
<p className="font-medium text-orange-800 dark:text-orange-300">+18 dossiers</p>
|
||
<p className="text-xs text-orange-600 dark:text-orange-200">Nouveaux dossiers/mois</p>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-orange-600 dark:text-orange-200 mt-3 text-center font-medium">
|
||
💡 Achetez uniquement ce dont vous avez besoin, quand vous en avez besoin
|
||
</p>
|
||
</div>
|
||
|
||
{/* Setup */}
|
||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-800 dark:to-blue-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-6 transition-colors">
|
||
<h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">⚙️ Coût de setup initial</h4>
|
||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
||
Frais de mise en place unique, calculés selon vos contraintes spécifiques :
|
||
</p>
|
||
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||
<li>• Migration de données existantes</li>
|
||
<li>• Intégrations systèmes tiers</li>
|
||
<li>• Personnalisations interface</li>
|
||
<li>• Formation équipes techniques</li>
|
||
<li>• Accompagnement déploiement</li>
|
||
</ul>
|
||
<p className="text-xs text-gray-600 dark:text-gray-400 mt-2 font-medium">
|
||
💡 Devis personnalisé selon la complexité de votre environnement
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<p className="text-lg font-semibold text-blue-700 dark:text-blue-400 mb-4">
|
||
Tarification à la consommation + setup personnalisé
|
||
</p>
|
||
<Link href="/contact">
|
||
<Button size="lg" className="w-full">
|
||
Obtenir un devis complet
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<Footer onAuthClick={() => setShowAuthModal(true)} />
|
||
</div>
|
||
)
|
||
}
|