245 lines
10 KiB
TypeScript
Executable File
245 lines
10 KiB
TypeScript
Executable File
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { useState } from 'react'
|
||
import Link from 'next/link'
|
||
import Navigation from '@/components/Navigation'
|
||
import Footer from '@/components/Footer'
|
||
|
||
export default function Kurse() {
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const [selectedLevel, setSelectedLevel] = useState<string>('all')
|
||
|
||
const courses = [
|
||
{
|
||
id: 1,
|
||
title: 'IT-Grundlagen für Einsteiger',
|
||
description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
|
||
duration: '4-6 Wochen',
|
||
level: 'Anfänger',
|
||
prerequisites: 'Keine Vorkenntnisse nötig',
|
||
certification: 'IT-Grundlagen Zertifikat',
|
||
modules: ['Computer-Grundlagen', 'Betriebssysteme', 'Netzwerke', 'IT-Sicherheit'],
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Python für Anfänger',
|
||
description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
|
||
duration: '6-8 Wochen',
|
||
level: 'Anfänger',
|
||
prerequisites: 'IT-Grundlagen empfohlen',
|
||
certification: 'Python Basics Zertifikat',
|
||
modules: ['Python-Grundlagen', 'Datenstrukturen', 'Funktionen & Module', 'Praxisprojekte'],
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'IT-Security Grundlagen',
|
||
description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
|
||
duration: '4-6 Wochen',
|
||
level: 'Anfänger',
|
||
prerequisites: 'IT-Grundlagen empfohlen',
|
||
certification: 'IT-Security Basics Zertifikat',
|
||
modules: ['Sicherheitsgrundlagen', 'Bedrohungen erkennen', 'Schutzmaßnahmen', 'Incident Response'],
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Webentwicklung für Einsteiger',
|
||
description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
|
||
duration: '8-10 Wochen',
|
||
level: 'Anfänger bis Fortgeschritten',
|
||
prerequisites: 'IT-Grundlagen empfohlen',
|
||
certification: 'Web Development Basics Zertifikat',
|
||
modules: ['HTML & CSS', 'JavaScript Grundlagen', 'Responsive Design', 'Projektarbeit'],
|
||
},
|
||
{
|
||
id: 5,
|
||
title: 'Linux für Anfänger',
|
||
description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
|
||
duration: '6-8 Wochen',
|
||
level: 'Anfänger bis Fortgeschritten',
|
||
prerequisites: 'IT-Grundlagen empfohlen',
|
||
certification: 'Linux Basics Zertifikat',
|
||
modules: ['Linux Installation', 'Command Line', 'Systemadministration', 'Netzwerk-Konfiguration'],
|
||
},
|
||
{
|
||
id: 6,
|
||
title: 'Datenbanken Grundlagen',
|
||
description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
|
||
duration: '5-7 Wochen',
|
||
level: 'Anfänger bis Fortgeschritten',
|
||
prerequisites: 'IT-Grundlagen empfohlen',
|
||
certification: 'Database Basics Zertifikat',
|
||
modules: ['Datenbank-Konzepte', 'SQL Grundlagen', 'Datenbankdesign', 'Praxisprojekte'],
|
||
},
|
||
{
|
||
id: 7,
|
||
title: 'KI & Machine Learning Grundlagen',
|
||
description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
|
||
duration: '8-10 Wochen',
|
||
level: 'Anfänger bis Fortgeschritten',
|
||
prerequisites: 'Python-Grundlagen empfohlen',
|
||
certification: 'AI & ML Basics Zertifikat',
|
||
modules: ['KI-Grundlagen', 'Machine Learning Basics', 'Neuronale Netze', 'Praktische Anwendungen'],
|
||
},
|
||
]
|
||
|
||
const filteredCourses = courses.filter(course => {
|
||
const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
course.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||
const matchesLevel = selectedLevel === 'all' || course.level.toLowerCase().includes(selectedLevel.toLowerCase())
|
||
return matchesSearch && matchesLevel
|
||
})
|
||
|
||
return (
|
||
<>
|
||
<Navigation />
|
||
<main>
|
||
<section className="page-hero">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="container"
|
||
>
|
||
<h1>Kurskatalog</h1>
|
||
<p className="page-hero-subtitle">
|
||
Finden Sie den passenden Kurs für Ihren Einstieg in die IT
|
||
</p>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="page-content">
|
||
<div className="container">
|
||
{/* Search and Filter */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
style={{ marginBottom: '60px' }}
|
||
>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
|
||
<input
|
||
type="text"
|
||
placeholder="Kurse durchsuchen..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
style={{
|
||
padding: '12px 16px',
|
||
fontSize: '17px',
|
||
background: 'rgba(255, 255, 255, 0.05)',
|
||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||
borderRadius: '10px',
|
||
color: 'var(--color-text)',
|
||
fontFamily: 'var(--font-primary)',
|
||
}}
|
||
/>
|
||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||
<button
|
||
onClick={() => setSelectedLevel('all')}
|
||
className={selectedLevel === 'all' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||
>
|
||
Alle
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedLevel('anfänger')}
|
||
className={selectedLevel === 'anfänger' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||
>
|
||
Anfänger
|
||
</button>
|
||
<button
|
||
onClick={() => setSelectedLevel('fortgeschritten')}
|
||
className={selectedLevel === 'fortgeschritten' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||
>
|
||
Fortgeschritten
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Course List */}
|
||
<div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px' }}>
|
||
{filteredCourses.map((course, index) => (
|
||
<motion.div
|
||
key={course.id}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
className="feature-card-large"
|
||
style={{ textAlign: 'left' }}
|
||
>
|
||
<h2 style={{ fontSize: '32px', marginBottom: '15px' }}>{course.title}</h2>
|
||
<p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '25px', color: 'var(--color-text-secondary)' }}>
|
||
{course.description}
|
||
</p>
|
||
|
||
<div style={{ marginBottom: '25px' }}>
|
||
<h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Kursdetails</h3>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
|
||
<div>
|
||
<strong>Dauer:</strong> {course.duration}
|
||
</div>
|
||
<div>
|
||
<strong>Niveau:</strong> {course.level}
|
||
</div>
|
||
<div>
|
||
<strong>Voraussetzungen:</strong> {course.prerequisites}
|
||
</div>
|
||
<div>
|
||
<strong>Zertifizierung:</strong> {course.certification}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '25px' }}>
|
||
<h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Modulplan</h3>
|
||
<ul style={{ fontSize: '15px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
|
||
{course.modules.map((module, i) => (
|
||
<li key={i} style={{ marginBottom: '8px' }}>{module}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<Link href={`/quereinsteiger/kurse/${course.id}`} className="btn btn-primary" style={{ display: 'inline-block' }}>
|
||
Mehr erfahren
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{filteredCourses.length === 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="content-block"
|
||
>
|
||
<p>Keine Kurse gefunden. Bitte passen Sie Ihre Suchkriterien an.</p>
|
||
</motion.div>
|
||
)}
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="cta-section"
|
||
>
|
||
<h2>Nicht den passenden Kurs gefunden?</h2>
|
||
<p>Kontaktieren Sie uns und wir finden gemeinsam den richtigen Weg für Sie</p>
|
||
<Link href="/kontakt" className="btn btn-primary">
|
||
Jetzt Kontakt aufnehmen
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
)
|
||
}
|
||
|