Refactor formation page
This commit is contained in:
Omar Oughriss
parent
5232f6ef70
commit
b52f17f2f2
@ -2,25 +2,21 @@ 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, Monitor, Code, ArrowLeft, Clock, Users, Award, BookOpen } from 'lucide-react'
|
||||
import { Shield, Monitor, Code, Clock, Users, Award, BookOpen } from 'lucide-react'
|
||||
import { Header, Footer } from "@/components/layout"
|
||||
import FormationCard from "@/components/ui/FormationCard"
|
||||
import { FORMATIONS } from "@/lib/constants"
|
||||
|
||||
export default function FormationPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-gray-100">
|
||||
{/* Header */}
|
||||
<header className="border-b border-gray-700 bg-gray-800/80 backdrop-blur-sm">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<Shield className="h-8 w-8 text-blue-400" />
|
||||
<span className="text-2xl font-bold text-gray-100">DocV</span>
|
||||
<Badge variant="secondary" className="ml-2 bg-gray-700 text-gray-200">By 4NK</Badge>
|
||||
</Link>
|
||||
<Link href="/" className="flex items-center text-blue-400 hover:text-blue-500">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<Header
|
||||
variant="dark"
|
||||
showAuth={false}
|
||||
showBackButton={true}
|
||||
backHref="/"
|
||||
backText="Retour à l'accueil"
|
||||
/>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-16 px-4">
|
||||
@ -66,149 +62,38 @@ export default function FormationPage() {
|
||||
{/* Formations Section */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="container mx-auto grid lg:grid-cols-3 gap-8">
|
||||
{/* Cybersécurité */}
|
||||
<Card className="border-2 border-gray-700 hover:border-red-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
|
||||
<CardHeader className="text-center">
|
||||
<Shield className="h-16 w-16 text-red-400 mx-auto mb-4" />
|
||||
<CardTitle className="text-2xl text-red-300">Cybersécurité</CardTitle>
|
||||
<CardDescription className="text-lg text-gray-300">
|
||||
Maîtrisez les fondamentaux de la sécurité informatique
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 text-gray-300">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Programme de formation :</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>• Analyse des menaces et vulnérabilités</li>
|
||||
<li>• Cryptographie appliquée et PKI</li>
|
||||
<li>• Sécurisation des infrastructures</li>
|
||||
<li>• Gestion des incidents de sécurité</li>
|
||||
<li>• Audit et conformité (ISO 27001, RGPD)</li>
|
||||
<li>• Tests d'intrusion et pentest</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-red-900 p-4 rounded-lg">
|
||||
<h5 className="font-semibold text-red-200 mb-2">Spécialisation DocV :</h5>
|
||||
<ul className="text-sm text-red-300 space-y-1">
|
||||
<li>• Authentification sans mot de passe</li>
|
||||
<li>• Chiffrement de bout en bout</li>
|
||||
<li>• Blockchain et preuves cryptographiques</li>
|
||||
<li>• Architecture zero-trust</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-4 w-4 mr-1" />
|
||||
5 jours
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 mr-1" />
|
||||
Max 12 pers.
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/formation/devis">
|
||||
<Button className="w-full bg-red-600 hover:bg-red-700 text-white">
|
||||
S'inscrire à la formation
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FormationCard
|
||||
icon={Shield}
|
||||
title={FORMATIONS.cybersecurity.title}
|
||||
description={FORMATIONS.cybersecurity.description}
|
||||
program={FORMATIONS.cybersecurity.program}
|
||||
specialization={FORMATIONS.cybersecurity.specialization}
|
||||
duration={FORMATIONS.cybersecurity.duration}
|
||||
maxParticipants={FORMATIONS.cybersecurity.maxParticipants}
|
||||
color={FORMATIONS.cybersecurity.color}
|
||||
/>
|
||||
|
||||
{/* Hygiène Numérique */}
|
||||
<Card className="border-2 border-gray-700 hover:border-green-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
|
||||
<CardHeader className="text-center">
|
||||
<Monitor className="h-16 w-16 text-green-400 mx-auto mb-4" />
|
||||
<CardTitle className="text-2xl text-green-300">Hygiène Numérique</CardTitle>
|
||||
<CardDescription className="text-lg text-gray-300">
|
||||
Adoptez les bonnes pratiques pour un environnement numérique sain
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 text-gray-300">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Programme de formation :</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>• Gestion sécurisée des mots de passe</li>
|
||||
<li>• Protection de la vie privée en ligne</li>
|
||||
<li>• Sécurisation des communications</li>
|
||||
<li>• Sauvegarde et archivage sécurisé</li>
|
||||
<li>• Sensibilisation aux risques numériques</li>
|
||||
<li>• RGPD et protection des données</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-green-900 p-4 rounded-lg">
|
||||
<h5 className="font-semibold text-green-200 mb-2">Approche DocV :</h5>
|
||||
<ul className="text-sm text-green-300 space-y-1">
|
||||
<li>• Identité numérique souveraine</li>
|
||||
<li>• Gestion documentaire sécurisée</li>
|
||||
<li>• Réduction de l'empreinte numérique</li>
|
||||
<li>• Autonomie technologique</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-4 w-4 mr-1" />
|
||||
3 jours
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 mr-1" />
|
||||
Max 15 pers.
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/formation/devis">
|
||||
<Button className="w-full bg-green-600 hover:bg-green-700 text-white">
|
||||
S'inscrire à la formation
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FormationCard
|
||||
icon={Monitor}
|
||||
title={FORMATIONS.digitalHygiene.title}
|
||||
description={FORMATIONS.digitalHygiene.description}
|
||||
program={FORMATIONS.digitalHygiene.program}
|
||||
specialization={FORMATIONS.digitalHygiene.specialization}
|
||||
duration={FORMATIONS.digitalHygiene.duration}
|
||||
maxParticipants={FORMATIONS.digitalHygiene.maxParticipants}
|
||||
color={FORMATIONS.digitalHygiene.color}
|
||||
/>
|
||||
|
||||
{/* Développement Souverain */}
|
||||
<Card className="border-2 border-gray-700 hover:border-blue-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
|
||||
<CardHeader className="text-center">
|
||||
<Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
|
||||
<CardTitle className="text-2xl text-blue-300">Développement Souverain</CardTitle>
|
||||
<CardDescription className="text-lg text-gray-300">
|
||||
Créez des applications indépendantes et sécurisées
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 text-gray-300">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Programme de formation :</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>• Architecture décentralisée</li>
|
||||
<li>• Développement sans dépendances cloud</li>
|
||||
<li>• Intégration blockchain et cryptographie</li>
|
||||
<li>• APIs souveraines et sécurisées</li>
|
||||
<li>• Déploiement on-premise</li>
|
||||
<li>• Maintenance et évolutivité</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-blue-900 p-4 rounded-lg">
|
||||
<h5 className="font-semibold text-blue-200 mb-2">Technologies DocV :</h5>
|
||||
<ul className="text-sm text-blue-300 space-y-1">
|
||||
<li>• Stack technologique souveraine</li>
|
||||
<li>• Intégration IA locale</li>
|
||||
<li>• Gestion d'identité décentralisée</li>
|
||||
<li>• Protocoles de communication sécurisés</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-4 w-4 mr-1" />
|
||||
7 jours
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 mr-1" />
|
||||
Max 8 pers.
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/formation/devis">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
|
||||
S'inscrire à la formation
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FormationCard
|
||||
icon={Code}
|
||||
title={FORMATIONS.sovereignDevelopment.title}
|
||||
description={FORMATIONS.sovereignDevelopment.description}
|
||||
program={FORMATIONS.sovereignDevelopment.program}
|
||||
specialization={FORMATIONS.sovereignDevelopment.specialization}
|
||||
duration={FORMATIONS.sovereignDevelopment.duration}
|
||||
maxParticipants={FORMATIONS.sovereignDevelopment.maxParticipants}
|
||||
color={FORMATIONS.sovereignDevelopment.color}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -300,19 +185,7 @@ export default function FormationPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-gray-300 py-8 px-4">
|
||||
<div className="container mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Shield className="h-6 w-6 text-blue-400" />
|
||||
<span className="text-xl font-bold text-gray-100">DocV</span>
|
||||
<Badge variant="secondary" className="bg-gray-700 text-gray-200">By 4NK</Badge>
|
||||
</div>
|
||||
<p className="text-gray-400">
|
||||
4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<Footer variant="dark" showNavigation={false} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user