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

v1 production

Browse Source
This commit is contained in:
loepperts
2025-12-05 01:01:04 +01:00
parent 0f32d5927b
commit 8fbe1113dd
68 changed files with 2608 additions and 3463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/quereinsteiger/coming-soon/page.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client'
import { motion } from 'framer-motion'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'
export default function ComingSoon() {
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>Coming Soon</h1>
</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>Hier entsteht gerade etwas Neues.</h2>
<p>
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
</p>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}

281
app/quereinsteiger/kurse/[id]/page.tsx Executable file → Normal file
View File

@@ -1,198 +1,10 @@
'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 />
@@ -204,9 +16,9 @@ export default function KursDetail() {
transition={{ duration: 0.8 }}
className="container"
>
<h1>{course.title}</h1>
<h1>Kursdetails</h1>
<p className="page-hero-subtitle">
{course.description}
Hier entsteht gerade etwas Neues.
</p>
</motion.div>
</section>
@@ -219,93 +31,11 @@ export default function KursDetail() {
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}
<h2>Coming Soon</h2>
<p>
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
</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>
@@ -314,4 +44,3 @@ export default function KursDetail() {
</>
)
}

290
app/quereinsteiger/kurse/page.tsx Executable file → Normal file
View 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 />
</>
)
}

544
app/quereinsteiger/lernpfad-finder/page.tsx Executable file → Normal file
View File

@@ -1,235 +1,309 @@
'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 />
</>
)
}
'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 [showContactForm, setShowContactForm] = useState(false)
const [contactData, setContactData] = useState({
name: '',
email: '',
message: '',
})
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)' }}>
{!showContactForm ? (
<>
<p style={{ marginBottom: '20px', fontSize: '17px' }}>
Möchten Sie diesen Lernpfad per E-Mail erhalten? Füllen Sie das Kontaktformular aus und wir senden Ihnen die Empfehlung zu.
</p>
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
<button
onClick={() => setShowContactForm(true)}
className="btn btn-primary btn-large"
>
Lernpfad per E-Mail senden
</button>
<Link href="/quereinsteiger/kurse" className="btn btn-secondary btn-large">
Zum Kurskatalog
</Link>
<button
onClick={resetQuiz}
className="btn btn-secondary btn-large"
>
Quiz erneut starten
</button>
</div>
</>
) : (
<div>
<h3 style={{ marginBottom: '20px', fontSize: '20px' }}>Kontaktformular</h3>
<form
onSubmit={(e) => {
e.preventDefault()
const subject = `Lernpfad-Empfehlung: ${recommendation}`
const body = `Hallo,\n\nich habe den Lernpfad-Finder ausgefüllt und folgende Empfehlung erhalten:\n\n${recommendation}\n\nMeine Antworten:\n${Object.entries(answers).map(([key, value]) => {
const question = questions[parseInt(key)]
const option = question?.options.find(opt => opt.value === value)
return `Frage ${parseInt(key) + 1}: ${option?.text || value}`
}).join('\n')}\n\n${contactData.message ? `Nachricht:\n${contactData.message}` : ''}`
window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
}}
>
<div className="form-group">
<label htmlFor="name">Name *</label>
<input
type="text"
id="name"
required
value={contactData.name}
onChange={(e) => setContactData({ ...contactData, name: e.target.value })}
placeholder="Ihr Name"
/>
</div>
<div className="form-group">
<label htmlFor="email">E-Mail *</label>
<input
type="email"
id="email"
required
value={contactData.email}
onChange={(e) => setContactData({ ...contactData, email: e.target.value })}
placeholder="ihre.email@beispiel.de"
/>
</div>
<div className="form-group">
<label htmlFor="message">Nachricht (optional)</label>
<textarea
id="message"
value={contactData.message}
onChange={(e) => setContactData({ ...contactData, message: e.target.value })}
placeholder="Ihre Nachricht an uns..."
rows={4}
/>
</div>
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap', marginTop: '20px' }}>
<button type="submit" className="btn btn-primary btn-large">
E-Mail senden
</button>
<button
type="button"
onClick={() => setShowContactForm(false)}
className="btn btn-secondary btn-large"
>
Abbrechen
</button>
</div>
</form>
</div>
)}
</div>
</motion.div>
)}
</div>
</div>
</section>
</main>
<Footer />
</>
)
}

1
app/quereinsteiger/page.tsx Executable file → Normal file
View File

@@ -135,7 +135,6 @@ export default function Quereinsteiger() {
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.