loepperts/doing-it-website
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
loepperts
2025-11-27 11:44:23 +01:00
commit 989253c72f
32 changed files with 4983 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
app/quereinsteiger/kurse/[id]/page.tsx Executable file
View File

@@ -0,0 +1,317 @@
'use client'
import { motion } from 'framer-motion'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'
export default function KursDetail() {
const params = useParams()
const courseId = parseInt(params.id as string)
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.',
longDescription: 'Dieser Kurs ist speziell für absolute Anfänger konzipiert, die noch keine Erfahrung mit IT haben. Sie lernen Schritt für Schritt die Grundlagen kennen und werden nicht überfordert. Unser niveaubasiertes System führt Sie sicher durch alle Module.',
duration: '4-6 Wochen',
level: 'Anfänger',
prerequisites: 'Keine Vorkenntnisse nötig',
certification: 'IT-Grundlagen Zertifikat',
modules: [
{ name: 'Computer-Grundlagen', description: 'Verstehen Sie, wie Computer funktionieren, Hardware-Komponenten und deren Zusammenwirken.' },
{ name: 'Betriebssysteme', description: 'Lernen Sie Windows, macOS und Linux kennen und verstehen Sie deren Unterschiede.' },
{ name: 'Netzwerke', description: 'Grundlagen der Netzwerktechnik, Internet, LAN, WLAN und Netzwerk-Sicherheit.' },
{ name: 'IT-Sicherheit', description: 'Grundlagen der IT-Sicherheit, Passwörter, Virenschutz und sichere Nutzung des Internets.' },
],
learningGoals: [
'Verständnis der grundlegenden IT-Konzepte',
'Sicherer Umgang mit Betriebssystemen',
'Grundkenntnisse in Netzwerktechnik',
'Bewusstsein für 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.',
longDescription: 'Python ist die ideale Programmiersprache für Einsteiger. In diesem Kurs lernen Sie von Grund auf, wie man programmiert. Sie schreiben Ihre ersten Programme, arbeiten mit Daten und erstellen praktische Anwendungen.',
duration: '6-8 Wochen',
level: 'Anfänger',
prerequisites: 'IT-Grundlagen empfohlen',
certification: 'Python Basics Zertifikat',
modules: [
{ name: 'Python-Grundlagen', description: 'Syntax, Variablen, Datentypen und erste Programme schreiben.' },
{ name: 'Datenstrukturen', description: 'Listen, Dictionaries, Tupel und Sets verstehen und anwenden.' },
{ name: 'Funktionen & Module', description: 'Eigene Funktionen erstellen, Module nutzen und Code organisieren.' },
{ name: 'Praxisprojekte', description: 'Anwendung des Gelernten in realen Projekten wie einem Taschenrechner oder einem einfachen Spiel.' },
],
learningGoals: [
'Grundlegende Python-Programmierung beherrschen',
'Eigene Programme entwickeln können',
'Code lesen und verstehen',
'Probleme algorithmisch lösen',
],
},
{
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.',
longDescription: 'IT-Sicherheit wird immer wichtiger. In diesem Kurs lernen Sie die Grundlagen der Cybersecurity kennen, erkennen Bedrohungen und wissen, wie Sie sich schützen können.',
duration: '4-6 Wochen',
level: 'Anfänger',
prerequisites: 'IT-Grundlagen empfohlen',
certification: 'IT-Security Basics Zertifikat',
modules: [
{ name: 'Sicherheitsgrundlagen', description: 'Grundlegende Konzepte der IT-Sicherheit, Bedrohungsmodelle und Sicherheitsprinzipien.' },
{ name: 'Bedrohungen erkennen', description: 'Phishing, Malware, Social Engineering und andere Bedrohungen erkennen und verstehen.' },
{ name: 'Schutzmaßnahmen', description: 'Firewalls, Antivirus, Verschlüsselung und andere Schutzmechanismen.' },
{ name: 'Incident Response', description: 'Was tun bei einem Sicherheitsvorfall? Grundlagen des Incident Managements.' },
],
learningGoals: [
'IT-Sicherheitsbedrohungen erkennen',
'Schutzmaßnahmen verstehen und anwenden',
'Sicherheitsbewusstsein entwickeln',
'Grundlagen des 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.',
longDescription: 'Webentwicklung ist einer der zugänglichsten Einstiege in die IT. In diesem Kurs erstellen Sie Ihre ersten Webseiten und lernen die drei Grundpfeiler der Webentwicklung kennen.',
duration: '8-10 Wochen',
level: 'Anfänger bis Fortgeschritten',
prerequisites: 'IT-Grundlagen empfohlen',
certification: 'Web Development Basics Zertifikat',
modules: [
{ name: 'HTML & CSS', description: 'Struktur und Styling von Webseiten, Layouts erstellen und responsive Design.' },
{ name: 'JavaScript Grundlagen', description: 'Programmierung im Browser, DOM-Manipulation und erste interaktive Elemente.' },
{ name: 'Responsive Design', description: 'Webseiten für alle Geräte optimieren, Mobile-First-Ansatz.' },
{ name: 'Projektarbeit', description: 'Erstellen Sie Ihre eigene Webseite als Abschlussprojekt.' },
],
learningGoals: [
'HTML, CSS und JavaScript beherrschen',
'Responsive Webseiten erstellen',
'Moderne Webentwicklung verstehen',
'Eigene Webprojekte umsetzen',
],
},
{
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.',
longDescription: 'Linux ist das Rückgrat vieler IT-Systeme. In diesem Kurs lernen Sie Linux von Grund auf kennen und werden fit für die Systemadministration.',
duration: '6-8 Wochen',
level: 'Anfänger bis Fortgeschritten',
prerequisites: 'IT-Grundlagen empfohlen',
certification: 'Linux Basics Zertifikat',
modules: [
{ name: 'Linux Installation', description: 'Linux installieren, verschiedene Distributionen kennenlernen und erste Schritte.' },
{ name: 'Command Line', description: 'Terminal beherrschen, wichtige Befehle und Shell-Scripting Grundlagen.' },
{ name: 'Systemadministration', description: 'Benutzerverwaltung, Berechtigungen, Prozesse und Dienste verwalten.' },
{ name: 'Netzwerk-Konfiguration', description: 'Netzwerke konfigurieren, Firewall einrichten und Netzwerk-Troubleshooting.' },
],
learningGoals: [
'Linux-Systeme verstehen und bedienen',
'Command Line sicher nutzen',
'Grundlagen der Systemadministration',
'Linux-Netzwerke konfigurieren',
],
},
{
id: 6,
title: 'Datenbanken Grundlagen',
description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
longDescription: 'Datenbanken sind das Herzstück vieler Anwendungen. In diesem Kurs lernen Sie, wie Datenbanken funktionieren und wie Sie mit SQL arbeiten.',
duration: '5-7 Wochen',
level: 'Anfänger bis Fortgeschritten',
prerequisites: 'IT-Grundlagen empfohlen',
certification: 'Database Basics Zertifikat',
modules: [
{ name: 'Datenbank-Konzepte', description: 'Relationale Datenbanken, Tabellen, Beziehungen und Normalisierung verstehen.' },
{ name: 'SQL Grundlagen', description: 'SELECT, INSERT, UPDATE, DELETE und weitere wichtige SQL-Befehle.' },
{ name: 'Datenbankdesign', description: 'Eigene Datenbanken entwerfen, ER-Modelle erstellen und optimieren.' },
{ name: 'Praxisprojekte', description: 'Anwendung des Gelernten in praktischen Projekten mit echten Datenbanken.' },
],
learningGoals: [
'Datenbanken verstehen und nutzen',
'SQL sicher beherrschen',
'Datenbanken entwerfen können',
'Praktische Datenbankprojekte umsetzen',
],
},
{
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.',
longDescription: 'Künstliche Intelligenz und Machine Learning sind die Zukunft der Technologie. In diesem Kurs lernen Sie die Grundlagen kennen und verstehen, wie moderne KI-Systeme funktionieren. Sie arbeiten mit praktischen Beispielen und erstellen Ihre ersten Machine-Learning-Modelle.',
duration: '8-10 Wochen',
level: 'Anfänger bis Fortgeschritten',
prerequisites: 'Python-Grundlagen empfohlen',
certification: 'AI & ML Basics Zertifikat',
modules: [
{ name: 'KI-Grundlagen', description: 'Was ist Künstliche Intelligenz? Geschichte, Konzepte und aktuelle Anwendungen der KI.' },
{ name: 'Machine Learning Basics', description: 'Supervised Learning, Unsupervised Learning, Regression und Klassifikation verstehen.' },
{ name: 'Neuronale Netze', description: 'Einführung in neuronale Netze, Deep Learning und moderne KI-Architekturen.' },
{ name: 'Praktische Anwendungen', description: 'Eigene Machine-Learning-Modelle erstellen, trainieren und evaluieren mit Python und TensorFlow.' },
],
learningGoals: [
'Grundlagen der KI und des Machine Learning verstehen',
'Machine-Learning-Modelle entwickeln können',
'Neuronale Netze und Deep Learning kennenlernen',
'Praktische KI-Anwendungen umsetzen',
],
},
]
const course = courses.find(c => c.id === courseId)
if (!course) {
return (
<>
<Navigation />
<main>
<section className="page-hero">
<div className="container">
<h1>Kurs nicht gefunden</h1>
<p className="page-hero-subtitle">Der angeforderte Kurs existiert nicht.</p>
</div>
</section>
<section className="page-content">
<div className="container">
<Link href="/quereinsteiger/kurse" className="btn btn-primary">
Zurück zum Kurskatalog
</Link>
</div>
</section>
</main>
<Footer />
</>
)
}
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>{course.title}</h1>
<p className="page-hero-subtitle">
{course.description}
</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"
style={{ textAlign: 'left', maxWidth: '100%' }}
>
<h2>Kursbeschreibung</h2>
<p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '40px' }}>
{course.longDescription}
</p>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '40px' }}>
<div className="feature-card" style={{ textAlign: 'left' }}>
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Dauer</h3>
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.duration}</p>
</div>
<div className="feature-card" style={{ textAlign: 'left' }}>
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Niveau</h3>
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.level}</p>
</div>
<div className="feature-card" style={{ textAlign: 'left' }}>
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Voraussetzungen</h3>
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.prerequisites}</p>
</div>
<div className="feature-card" style={{ textAlign: 'left' }}>
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Zertifizierung</h3>
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.certification}</p>
</div>
</div>
<h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Lernziele</h2>
<ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', marginBottom: '40px', color: 'var(--color-text-secondary)' }}>
{course.learningGoals.map((goal, i) => (
<li key={i} style={{ marginBottom: '10px' }}>{goal}</li>
))}
</ul>
<h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Modulplan</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '40px' }}>
{course.modules.map((module, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: i * 0.1 }}
className="feature-card"
style={{ textAlign: 'left' }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '10px' }}>
<div style={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: 'var(--color-accent)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontWeight: '600',
fontSize: '18px',
}}>
{i + 1}
</div>
<h3 style={{ fontSize: '24px', margin: 0 }}>{module.name}</h3>
</div>
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginLeft: '55px' }}>
{module.description}
</p>
</motion.div>
))}
</div>
</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>Bereit für diesen Kurs?</h2>
<p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
<div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
<Link href="/kontakt" className="btn btn-primary">
Jetzt anmelden
</Link>
<Link href="/quereinsteiger/kurse" className="btn btn-secondary">
Zurück zum Kurskatalog
</Link>
</div>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}

244
app/quereinsteiger/kurse/page.tsx Executable file
View File

@@ -0,0 +1,244 @@
'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 />
</>
)
}

235
app/quereinsteiger/lernpfad-finder/page.tsx Executable file
View File

@@ -0,0 +1,235 @@
'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 LernpfadFinder() {
const [currentStep, setCurrentStep] = useState(0)
const [answers, setAnswers] = useState<Record<number, string>>({})
const [recommendation, setRecommendation] = useState<string | null>(null)
const questions = [
{
question: 'Was ist Ihr Hauptziel?',
options: [
{ text: 'Karrierewechsel in die IT', value: 'career' },
{ text: 'IT-Kenntnisse für meinen aktuellen Job', value: 'current' },
{ text: 'Persönliches Interesse an IT', value: 'interest' },
{ text: 'Gründung eines IT-Unternehmens', value: 'startup' },
],
},
{
question: 'Welcher Bereich interessiert Sie am meisten?',
options: [
{ text: 'Programmierung & Softwareentwicklung', value: 'programming' },
{ text: 'IT-Sicherheit & Cybersecurity', value: 'security' },
{ text: 'Systemadministration & Netzwerke', value: 'admin' },
{ text: 'Webentwicklung', value: 'web' },
{ text: 'Noch unsicher', value: 'unsure' },
],
},
{
question: 'Wie viel Zeit können Sie pro Woche investieren?',
options: [
{ text: 'Weniger als 5 Stunden', value: 'low' },
{ text: '5-10 Stunden', value: 'medium' },
{ text: '10-20 Stunden', value: 'high' },
{ text: 'Mehr als 20 Stunden', value: 'very-high' },
],
},
{
question: 'Haben Sie bereits IT-Vorkenntnisse?',
options: [
{ text: 'Keine Vorkenntnisse', value: 'none' },
{ text: 'Grundkenntnisse (Computer, Internet)', value: 'basic' },
{ text: 'Einige Erfahrung mit IT', value: 'some' },
{ text: 'Fortgeschrittene Kenntnisse', value: 'advanced' },
],
},
]
const handleAnswer = (value: string) => {
setAnswers({ ...answers, [currentStep]: value })
if (currentStep < questions.length - 1) {
setCurrentStep(currentStep + 1)
} else {
calculateRecommendation()
}
}
const calculateRecommendation = () => {
const goal = answers[0]
const interest = answers[1]
const time = answers[2]
const experience = answers[3]
let recommendedCourse = 'IT-Grundlagen für Einsteiger'
if (experience === 'none' || experience === 'basic') {
recommendedCourse = 'IT-Grundlagen für Einsteiger'
} else if (interest === 'programming') {
recommendedCourse = 'Python für Anfänger'
} else if (interest === 'web') {
recommendedCourse = 'Webentwicklung für Einsteiger'
} else if (interest === 'security') {
recommendedCourse = 'IT-Security Grundlagen'
} else if (interest === 'admin') {
recommendedCourse = 'Linux für Anfänger'
}
setRecommendation(recommendedCourse)
}
const resetQuiz = () => {
setCurrentStep(0)
setAnswers({})
setRecommendation(null)
}
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>Lernpfad-Finder</h1>
<p className="page-hero-subtitle">
Finden Sie den passenden Kurs für Ihren Einstieg
</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>Ihr persönlicher Lernpfad</h2>
<p>
Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs
für Ihren Einstieg in die IT.
</p>
</motion.div>
<div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
{!recommendation ? (
<>
{/* Progress Bar */}
<div style={{ marginBottom: '40px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
<span>Frage {currentStep + 1} von {questions.length}</span>
<span>{Math.round(((currentStep + 1) / questions.length) * 100)}%</span>
</div>
<div style={{ width: '100%', height: '4px', background: 'rgba(255, 255, 255, 0.1)', borderRadius: '2px', overflow: 'hidden' }}>
<motion.div
initial={{ width: 0 }}
animate={{ width: `${((currentStep + 1) / questions.length) * 100}%` }}
transition={{ duration: 0.3 }}
style={{ height: '100%', background: 'var(--color-accent)', borderRadius: '2px' }}
/>
</div>
</div>
{/* Current Question */}
<motion.div
key={currentStep}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="feature-card-large"
style={{ textAlign: 'left' }}
>
<h2 style={{ marginBottom: '30px', fontSize: '28px' }}>
{questions[currentStep].question}
</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
{questions[currentStep].options.map((option) => (
<button
key={option.value}
onClick={() => handleAnswer(option.value)}
className="btn btn-secondary"
style={{
textAlign: 'left',
justifyContent: 'flex-start',
padding: '15px 20px',
fontSize: '17px',
}}
>
{option.text}
</button>
))}
</div>
{currentStep > 0 && (
<button
onClick={() => setCurrentStep(currentStep - 1)}
className="btn btn-secondary"
style={{ marginTop: '20px', width: '100%' }}
>
Zurück
</button>
)}
</motion.div>
</>
) : (
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
className="feature-card-large"
style={{ textAlign: 'left' }}
>
<h2 style={{ marginBottom: '30px' }}>Ihre Empfehlung</h2>
<div style={{ marginBottom: '30px' }}>
<h3 style={{ fontSize: '24px', marginBottom: '15px', color: 'var(--color-accent)' }}>
{recommendation}
</h3>
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
Basierend auf Ihren Antworten empfehlen wir Ihnen diesen Kurs als Einstieg.
Dieser Kurs ist speziell für Quereinsteiger konzipiert und führt Sie Schritt
für Schritt in die IT-Welt ein.
</p>
</div>
<div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
<p style={{ marginBottom: '20px', fontSize: '17px' }}>
Möchten Sie mehr über diesen Kurs erfahren oder haben Sie Fragen? Kontaktieren Sie uns!
</p>
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
<Link href="/quereinsteiger/kurse" className="btn btn-primary">
Zum Kurskatalog
</Link>
<Link href="/kontakt" className="btn btn-secondary">
Kontakt aufnehmen
</Link>
<button
onClick={resetQuiz}
className="btn btn-secondary"
>
Quiz erneut starten
</button>
</div>
</div>
</motion.div>
)}
</div>
</div>
</section>
</main>
<Footer />
</>
)
}

173
app/quereinsteiger/page.tsx Executable file
View File

@@ -0,0 +1,173 @@
'use client'
import { motion } from 'framer-motion'
import Link from 'next/link'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'
export default function Quereinsteiger() {
return (
<>
<Navigation />
<main>
{/* Hero Section */}
<section className="page-hero">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="container"
>
<h1>IT-Weiterbildung für Quereinsteiger</h1>
<p className="page-hero-subtitle">
Starten Sie Ihre Karriere in der IT – auch ohne Vorkenntnisse
</p>
</motion.div>
</section>
{/* Main Content */}
<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>Keine Vorkenntnisse nötig – Starten Sie jetzt!</h2>
<p>
Sie haben noch keine Ahnung von IT? Kein Problem! Unsere Schulungsplattform
ist speziell für komplette Neulinge entwickelt. Wir begleiten Sie Schritt
für Schritt auf Ihrem Weg in die IT-Welt. Stück für Stück zum Ziel – mit
unserem niveaubasierten Lernsystem.
</p>
</motion.div>
<div className="features-grid">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }}
className="feature-card-large"
>
<div className="feature-number">01</div>
<h3>Stufenweise Freischaltung</h3>
<p>
Alle Inhalte werden niveaubasiert freigeschaltet. Sie lernen in Ihrem
eigenen Tempo und werden nicht überfordert. Jeder Schritt baut auf dem
vorherigen auf. Unser System passt sich Ihrem Lernfortschritt an und
führt Sie sicher zum Ziel.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card-large"
>
<div className="feature-number">02</div>
<h3>Anschließende Zertifizierung</h3>
<p>
Nach erfolgreichem Abschluss erhalten Sie eine anerkannte Zertifizierung,
die Ihre neuen Fähigkeiten dokumentiert und Ihre Karrierechancen erhöht.
Diese Zertifizierungen sind Ihr Karriere-Boost und öffnen Türen in der IT-Branche.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
className="feature-card-large"
>
<div className="feature-number">03</div>
<h3>Livetrainings mit Experten</h3>
<p>
Bei Fragen stehen Ihnen unsere IT-Experten in Livetrainings zur Verfügung.
Lernen Sie nicht nur aus Materialien, sondern auch durch direkten Austausch
mit Profis. Diese interaktiven Sessions machen den Unterschied und helfen
Ihnen, komplexe Themen zu verstehen.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
className="feature-card-large"
>
<div className="feature-number">04</div>
<h3>Chat-Support</h3>
<p>
Haben Sie eine Frage? Nutzen Sie unseren Chat-Support und erhalten Sie
schnell Antworten von unseren Experten. Lernen Sie nie allein. Unser
umfassender Support durch Livetrainings und Experten-Chats begleitet Sie
auf jedem Schritt Ihrer Lernreise.
</p>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="content-block"
style={{ marginTop: '80px' }}
>
<h2>Finden Sie Ihren Weg</h2>
<p>
Nutzen Sie unseren interaktiven Lernpfad-Finder, um den passenden Kurs für Ihren Einstieg zu finden.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="feature-card-large"
style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }}
>
<div className="feature-icon" style={{ fontSize: '64px' }}>🎯</div>
<h3>Lernpfad-Finder</h3>
<p style={{ marginBottom: '30px' }}>
Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT.
</p>
<Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
Lernpfad finden
</Link>
</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>Bereit für den Start?</h2>
<p>Kontaktieren Sie uns und beginnen Sie Ihre IT-Karriere noch heute</p>
<div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
<a href="/kontakt" className="btn btn-primary">
Jetzt durchstarten
</a>
<Link href="/quereinsteiger/kurse" className="btn btn-secondary">
Kurskatalog ansehen
</Link>
</div>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}