192 lines
8.7 KiB
TypeScript
192 lines
8.7 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, 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
|
|
variant="dark"
|
|
showAuth={false}
|
|
showBackButton={true}
|
|
backHref="/"
|
|
backText="Retour à l'accueil"
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<section className="py-16 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h1 className="text-5xl font-bold text-gray-100 mb-6">
|
|
Formations <span className="text-blue-400">Souveraineté Numérique</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
|
|
Développez vos compétences en cybersécurité, hygiène numérique et développement d'applications souveraines
|
|
avec nos formations expertes dispensées par 4NK.
|
|
</p>
|
|
<div className="flex flex-wrap justify-center gap-4 mb-6">
|
|
<Badge variant="outline" className="text-lg px-4 py-2 bg-green-800 border-green-600 text-green-200">
|
|
<Award className="h-4 w-4 mr-2" />
|
|
Centre de formation agréé
|
|
</Badge>
|
|
<Badge variant="outline" className="text-lg px-4 py-2 bg-blue-800 border-blue-600 text-blue-200">
|
|
<Award className="h-4 w-4 mr-2" />
|
|
Titre RNCP Niveau 6 "Développeur Blockchain"
|
|
</Badge>
|
|
<Badge variant="outline" className="text-lg px-4 py-2 bg-purple-800 border-purple-600 text-purple-200">
|
|
<Award className="h-4 w-4 mr-2" />
|
|
Seul établissement en France
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<Badge variant="outline" className="text-lg px-4 py-2 border-gray-600 text-gray-200">
|
|
<BookOpen className="h-4 w-4 mr-2" />
|
|
Formations certifiantes
|
|
</Badge>
|
|
<Badge variant="outline" className="text-lg px-4 py-2 border-gray-600 text-gray-200">
|
|
<Users className="h-4 w-4 mr-2" />
|
|
Formateurs experts
|
|
</Badge>
|
|
<Badge variant="outline" className="text-lg px-4 py-2 border-gray-600 text-gray-200">
|
|
<BookOpen className="h-4 w-4 mr-2" />
|
|
Pratique intensive
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Formations Section */}
|
|
<section className="py-16 px-4">
|
|
<div className="container mx-auto grid lg:grid-cols-3 gap-8">
|
|
<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}
|
|
/>
|
|
|
|
<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}
|
|
/>
|
|
|
|
<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>
|
|
|
|
{/* Parcours Complet Section */}
|
|
<section className="py-16 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h2 className="text-4xl font-bold mb-8 text-gray-100">Parcours Complet de Souveraineté Numérique</h2>
|
|
<Card className="border-2 border-blue-700 bg-gray-800 p-6">
|
|
<CardHeader>
|
|
<CardTitle className="text-3xl text-blue-300">Formation Intégrée 4NK</CardTitle>
|
|
<CardDescription className="text-xl text-gray-300">
|
|
Maîtrisez l'écosystème complet de la souveraineté numérique
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6 text-gray-300">
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="text-center">
|
|
<Shield className="h-12 w-12 text-red-400 mx-auto mb-2" />
|
|
<h4 className="font-semibold">Cybersécurité</h4>
|
|
<p className="text-sm text-gray-400">Fondamentaux sécuritaires</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Monitor className="h-12 w-12 text-green-400 mx-auto mb-2" />
|
|
<h4 className="font-semibold">Hygiène Numérique</h4>
|
|
<p className="text-sm text-gray-400">Bonnes pratiques</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Code className="h-12 w-12 text-blue-400 mx-auto mb-2" />
|
|
<h4 className="font-semibold">Développement</h4>
|
|
<p className="text-sm text-gray-400">Applications souveraines</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-700 p-6 rounded-lg border border-gray-600">
|
|
<div className="text-center mb-4">
|
|
<h4 className="font-semibold text-lg mb-2">🏆 4NK - Centre de formation agréé</h4>
|
|
<p className="text-gray-300 mb-3">
|
|
Seul établissement en France à disposer du titre RNCP de niveau 6 :
|
|
<span className="font-semibold text-blue-300"> "Développeur Blockchain"</span>
|
|
</p>
|
|
<div className="flex justify-center gap-2">
|
|
<Badge className="bg-green-600 text-white">Agréé centre de formation</Badge>
|
|
<Badge className="bg-blue-600 text-white">RNCP Niveau 6</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link href="/formation/devis">
|
|
<Button size="lg" className="text-lg px-8">
|
|
Parcours Complet (15 jours)
|
|
</Button>
|
|
</Link>
|
|
<Link href="/formation/devis">
|
|
<Button variant="outline" size="lg" className="text-lg px-8 border-gray-400 text-gray-300">
|
|
Demander un devis
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact Section */}
|
|
<section className="py-16 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h2 className="text-3xl font-bold mb-8 text-gray-100">Besoin d'informations ?</h2>
|
|
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
Nos experts sont à votre disposition pour vous conseiller sur le parcours de formation
|
|
le plus adapté à vos besoins.
|
|
</p>
|
|
<div className="space-y-4 text-gray-300">
|
|
<p className="text-lg">
|
|
<strong>Contact formations :</strong>{" "}
|
|
<a href="mailto:contact@docv.fr" className="text-blue-400 hover:text-blue-500">
|
|
contact@docv.fr
|
|
</a>
|
|
</p>
|
|
<p>
|
|
Formations disponibles en présentiel, distanciel ou format hybride
|
|
</p>
|
|
<div className="pt-4">
|
|
<Link href="/formation/devis">
|
|
<Button size="lg" className="text-lg px-8">
|
|
Demander un devis personnalisé
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer variant="dark" showNavigation={false} />
|
|
</div>
|
|
)
|
|
}
|