571 lines
29 KiB
TypeScript
571 lines
29 KiB
TypeScript
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Shield, Key, Database, Zap, Users, Globe, CheckCircle, ArrowRight, Code } from "lucide-react"
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||
{/* Header */}
|
||
<header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
|
||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||
<div className="flex items-center space-x-2">
|
||
<Shield className="h-8 w-8 text-blue-600" />
|
||
<span className="text-2xl font-bold text-gray-900">DocV</span>
|
||
<Badge variant="secondary" className="ml-2">
|
||
By 4NK
|
||
</Badge>
|
||
</div>
|
||
<nav className="hidden md:flex items-center space-x-6">
|
||
<Link href="#produit" className="text-gray-600 hover:text-blue-600 transition-colors">
|
||
Le produit
|
||
</Link>
|
||
<Link href="#securite" className="text-gray-600 hover:text-blue-600 transition-colors">
|
||
Sécurité
|
||
</Link>
|
||
<Link href="#tarifs" className="text-gray-600 hover:text-blue-600 transition-colors">
|
||
Tarifs
|
||
</Link>
|
||
<Link href="/formation">
|
||
<Button variant="outline">Formation</Button>
|
||
</Link>
|
||
<Link href="/login">
|
||
<Button>Connexion</Button>
|
||
</Link>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Hero Section */}
|
||
<section className="py-20 px-4">
|
||
<div className="container mx-auto text-center">
|
||
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
||
Sécurisez votre entreprise avec la <span className="text-blue-600">GED simple et souveraine</span>
|
||
</h1>
|
||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||
DocV propose une approche révolutionnaire de la gestion d'identité, garantissant sécurité, souveraineté et
|
||
conformité dans la gestion de vos documents et processus métier.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link href="/login">
|
||
<Button size="lg" className="text-lg px-8 py-3">
|
||
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 bg-transparent">
|
||
Découvrir nos formations
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Product Features */}
|
||
<section id="produit" className="py-16 px-4 bg-white">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900">Le produit</h2>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||
<Card className="border-2 hover:border-blue-200 transition-colors">
|
||
<CardHeader>
|
||
<Key className="h-12 w-12 text-blue-600 mb-4" />
|
||
<CardTitle>Login cryptographique ultra-simplifié</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">
|
||
Aucun mot de passe, aucun OTP, aucun mail, aucun code, aucune application.
|
||
</p>
|
||
<p className="text-gray-600">
|
||
Notifications transverses et temps réel sur l'avancement des traitements.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2 hover:border-blue-200 transition-colors">
|
||
<CardHeader>
|
||
<Zap className="h-12 w-12 text-blue-600 mb-4" />
|
||
<CardTitle>IA embarquée</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">OCR, classification et extraction avec IA locale.</p>
|
||
<p className="text-gray-600">L'IA, ses données et ses traitements restent locaux.</p>
|
||
<p className="text-gray-600 mt-2">Interface conversationnelle pour suivre les dossiers.</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2 hover:border-blue-200 transition-colors">
|
||
<CardHeader>
|
||
<Users className="h-12 w-12 text-blue-600 mb-4" />
|
||
<CardTitle>Facilite l'usage quotidien</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-2">• Réduction massive des emails</p>
|
||
<p className="text-gray-600 mb-2">• Protection des identités et accès</p>
|
||
<p className="text-gray-600">• Traçabilité sur blockchain</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8">
|
||
<h3 className="text-2xl font-bold mb-6 text-center">⚙️ 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">Clés cryptographiques locales :</h4>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<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">Gestion des rôles et autorisations :</h4>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<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">
|
||
<div className="container mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl font-bold mb-4 text-gray-900">🔐 Sécurité de bout en bout, par conception</h2>
|
||
<p className="text-xl text-gray-600">
|
||
DocV intègre dès l'entrée : chiffrement, confidentialité, intégrité, authentification forte,
|
||
décentralisation et preuves.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-8">
|
||
<Card className="bg-white border-2 hover:border-red-200 transition-colors">
|
||
<CardHeader>
|
||
<Shield className="h-12 w-12 text-red-600 mb-4" />
|
||
<CardTitle className="text-red-700">🛡️ Moins de failles, plus de confiance</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<li>• Aucune interface admin exposée</li>
|
||
<li>• Aucun mot de passe</li>
|
||
<li>• Aucun serveur d'identité</li>
|
||
<li>• Aucune dépendance cloud</li>
|
||
<li>• Aucune dépendance API</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-white border-2 hover:border-green-200 transition-colors">
|
||
<CardHeader>
|
||
<Globe className="h-12 w-12 text-green-600 mb-4" />
|
||
<CardTitle className="text-green-700">🌐 Une identité pour tout faire et tout vérifier</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">Identité auto-générée, auto-portée, vérifiable, privée :</p>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<li>• Accéder à l'interface GED sécurisée</li>
|
||
<li>• Signer les documents et les flux</li>
|
||
<li>• Ancrer les preuves sur Bitcoin</li>
|
||
<li>• Recevoir des notifications</li>
|
||
<li>• Reconnue par d'autres systèmes</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="bg-white border-2 hover:border-blue-200 transition-colors">
|
||
<CardHeader>
|
||
<Database className="h-12 w-12 text-blue-600 mb-4" />
|
||
<CardTitle className="text-blue-700">🔄 Migration simple et à forte valeur ajoutée</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<li>• Aucune infrastructure à déployer</li>
|
||
<li>• Migration automatisée avec indexation</li>
|
||
<li>• Compatible bases de données, clouds, API</li>
|
||
<li>• Base locale chiffrée et distribuée</li>
|
||
<li>• Accompagnement de vos prestataires</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* References Section */}
|
||
<section className="py-16 px-4 bg-white">
|
||
<div className="container mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl font-bold mb-4 text-gray-900">🤝 Références et Intégrations</h2>
|
||
<p className="text-xl text-gray-600">
|
||
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 border-2 border-blue-200">
|
||
<CardHeader>
|
||
<Globe className="h-12 w-12 text-blue-600 mb-4" />
|
||
<CardTitle className="text-blue-700">🏢 Intégration Marque Blanche</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-700 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">
|
||
<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 border-2 border-green-200">
|
||
<CardHeader>
|
||
<Shield className="h-12 w-12 text-green-600 mb-4" />
|
||
<CardTitle className="text-green-700">⚖️ Référence Notariale : lecoffre.io</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-700 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">
|
||
<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 rounded-lg border border-green-200">
|
||
<p className="text-sm text-green-800">
|
||
<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 p-8 rounded-2xl border border-gray-200">
|
||
<h3 className="text-2xl font-bold mb-4 text-gray-900">🔒 Une technologie éprouvée</h3>
|
||
<p className="text-lg text-gray-700 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 border-2 border-purple-200">
|
||
<CardHeader className="text-center">
|
||
<Code className="h-12 w-12 text-purple-600 mx-auto mb-4" />
|
||
<CardTitle className="text-purple-700 text-2xl">🔓 Solutions Open Source</CardTitle>
|
||
<CardDescription className="text-lg text-gray-700">
|
||
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 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 p-4 rounded-lg border border-purple-200">
|
||
<h4 className="font-semibold text-purple-800 mb-3">🛠️ Composants disponibles :</h4>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<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 p-4 rounded-lg border border-purple-200">
|
||
<h4 className="font-semibold text-purple-800 mb-3">🎯 Cas d'usage :</h4>
|
||
<ul className="space-y-2 text-gray-600">
|
||
<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 p-6 rounded-lg border border-purple-300">
|
||
<div className="text-center">
|
||
<h4 className="font-semibold text-purple-800 mb-3 text-lg">💡 Accompagnement personnalisé</h4>
|
||
<p className="text-gray-700 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 hover:bg-purple-700">
|
||
<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 hover:bg-purple-50 bg-transparent"
|
||
>
|
||
Contactez-nous pour un projet
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<p className="text-sm text-gray-600">
|
||
<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 text-white">
|
||
<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">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900">Tarification simple et universelle</h2>
|
||
|
||
<div className="max-w-4xl mx-auto">
|
||
<Card className="border-2 border-blue-200 bg-blue-50">
|
||
<CardHeader className="text-center">
|
||
<CardTitle className="text-3xl font-bold text-blue-700">Offre Découverte</CardTitle>
|
||
<CardDescription className="text-2xl font-semibold text-blue-600">2990 € HT / mois</CardDescription>
|
||
<Badge className="bg-green-600 text-white text-lg px-4 py-2 mt-2">1000 jetons inclus</Badge>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="bg-white p-6 rounded-lg mb-6">
|
||
<h3 className="text-xl font-bold text-gray-900 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 rounded-lg">
|
||
<Database className="h-8 w-8 mx-auto text-blue-600 mb-2" />
|
||
<h4 className="font-semibold text-blue-800">Stockage permanent</h4>
|
||
<p className="text-2xl font-bold text-blue-600">1 To</p>
|
||
<p className="text-sm text-blue-700">Documents chiffrés et sécurisés</p>
|
||
</div>
|
||
<div className="text-center p-4 bg-green-50 rounded-lg">
|
||
<Zap className="h-8 w-8 mx-auto text-green-600 mb-2" />
|
||
<h4 className="font-semibold text-green-800">Stockage temporaire</h4>
|
||
<p className="text-2xl font-bold text-green-600">100 Go</p>
|
||
<p className="text-sm text-green-700">Traitement IA et OCR</p>
|
||
</div>
|
||
<div className="text-center p-4 bg-purple-50 rounded-lg">
|
||
<Users className="h-8 w-8 mx-auto text-purple-600 mb-2" />
|
||
<h4 className="font-semibold text-purple-800">Nouveaux dossiers</h4>
|
||
<p className="text-2xl font-bold text-purple-600">75</p>
|
||
<p className="text-sm text-purple-700">Par mois maximum</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Architecture de stockage détaillée */}
|
||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 p-6 rounded-lg mb-6">
|
||
<h4 className="font-semibold text-gray-800 mb-4 text-center">
|
||
🏗️ Architecture de stockage souveraine
|
||
</h4>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<div className="bg-white p-4 rounded-lg border border-green-200">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<Zap className="h-5 w-5 text-green-600" />
|
||
<h5 className="font-semibold text-green-800">Stockage Temporaire</h5>
|
||
</div>
|
||
<p className="text-sm text-gray-700 mb-2">
|
||
<strong>Store chiffré local, distribué strictement en parties prenantes</strong>
|
||
</p>
|
||
<ul className="text-xs text-gray-600 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 p-4 rounded-lg border border-blue-200">
|
||
<div className="flex items-center space-x-2 mb-3">
|
||
<Database className="h-5 w-5 text-blue-600" />
|
||
<h5 className="font-semibold text-blue-800">Stockage Permanent</h5>
|
||
</div>
|
||
<p className="text-sm text-gray-700 mb-2">
|
||
<strong>
|
||
Store chiffré d'archivage local, distribué strictement en parties prenantes et sur un serveur
|
||
de backup sans accès aux données compatible avec du cold storage
|
||
</strong>
|
||
</p>
|
||
<ul className="text-xs text-gray-600 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 rounded-lg">
|
||
<p className="text-sm text-blue-800 text-center">
|
||
<strong>🔐 Souveraineté totale :</strong> Vos données restent sous votre contrôle exclusif, même
|
||
en backup
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3 mb-6">
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 text-green-600 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 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 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 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 p-6 rounded-lg border border-orange-200 mb-6">
|
||
<h4 className="font-semibold text-orange-800 mb-3 text-center">📦 Jetons supplémentaires</h4>
|
||
<div className="text-center mb-4">
|
||
<p className="text-lg font-semibold text-orange-700">Lots de 250 jetons</p>
|
||
<p className="text-2xl font-bold text-orange-600">+747,50 € HT/mois</p>
|
||
<p className="text-sm text-orange-600">(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 p-3 rounded border border-orange-200">
|
||
<p className="font-medium text-orange-800">+250 Go</p>
|
||
<p className="text-xs text-orange-600">Stockage permanent</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded border border-orange-200">
|
||
<p className="font-medium text-orange-800">+25 Go</p>
|
||
<p className="text-xs text-orange-600">Stockage temporaire</p>
|
||
</div>
|
||
<div className="bg-white p-3 rounded border border-orange-200">
|
||
<p className="font-medium text-orange-800">+18 dossiers</p>
|
||
<p className="text-xs text-orange-600">Nouveaux dossiers/mois</p>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-orange-600 mt-3 text-center font-medium">
|
||
💡 Achetez uniquement ce dont vous avez besoin, quand vous en avez besoin
|
||
</p>
|
||
</div>
|
||
|
||
{/* Coût de setup */}
|
||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 p-6 rounded-lg border border-gray-200 mb-6">
|
||
<h4 className="font-semibold text-gray-800 mb-2">⚙️ Coût de setup initial</h4>
|
||
<p className="text-sm text-gray-700 mb-3">
|
||
Frais de mise en place unique, calculés selon vos contraintes spécifiques :
|
||
</p>
|
||
<ul className="text-sm text-gray-600 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 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 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 */}
|
||
<footer className="bg-gray-900 text-white py-12 px-4">
|
||
<div className="container mx-auto">
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<div className="flex items-center space-x-2 mb-4">
|
||
<Shield className="h-8 w-8 text-blue-400" />
|
||
<span className="text-2xl font-bold">DocV</span>
|
||
<Badge variant="secondary" className="ml-2">
|
||
By 4NK
|
||
</Badge>
|
||
</div>
|
||
<p className="text-gray-400 mb-4">
|
||
4NK, pionnier du Web 5.0. Conçoit et développe des solutions de souveraineté.
|
||
</p>
|
||
<p className="text-gray-400">contact@docv.fr</p>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold mb-4">Navigation</h3>
|
||
<div className="space-y-2">
|
||
<Link href="#produit" className="block text-gray-400 hover:text-white transition-colors">
|
||
Le produit
|
||
</Link>
|
||
<Link href="#securite" className="block text-gray-400 hover:text-white transition-colors">
|
||
Sécurité
|
||
</Link>
|
||
<Link href="#tarifs" className="block text-gray-400 hover:text-white transition-colors">
|
||
Tarifs
|
||
</Link>
|
||
<Link href="/formation" className="block text-gray-400 hover:text-white transition-colors">
|
||
Formation
|
||
</Link>
|
||
<Link href="/login" className="block text-gray-400 hover:text-white transition-colors">
|
||
Connexion
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||
<p>© 2024 4NK. Tous droits réservés.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|