310 lines
13 KiB
TypeScript
310 lines
13 KiB
TypeScript
'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 />
|
|
</>
|
|
)
|
|
}
|
|
|