v1 production
This commit is contained in:
544
app/quereinsteiger/lernpfad-finder/page.tsx
Executable file → Normal file
544
app/quereinsteiger/lernpfad-finder/page.tsx
Executable file → Normal 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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user