v1 production
This commit is contained in:
290
app/quereinsteiger/kurse/page.tsx
Executable file → Normal file
290
app/quereinsteiger/kurse/page.tsx
Executable file → Normal file
@@ -1,244 +1,46 @@
|
||||
'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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function Kurse() {
|
||||
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">
|
||||
Hier entsteht gerade etwas Neues.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<h2>Coming Soon</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user