259 lines
10 KiB
TypeScript
Executable File
259 lines
10 KiB
TypeScript
Executable File
'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 Schulungsbedarf() {
|
|
const [employees, setEmployees] = useState('')
|
|
const [departments, setDepartments] = useState('')
|
|
const [selectedTopics, setSelectedTopics] = useState<string[]>([])
|
|
|
|
const topics = [
|
|
'IT-Security für Mitarbeiter',
|
|
'Office-Software Optimierung',
|
|
'Datenschutz DSGVO',
|
|
'Cloud-Computing Grundlagen',
|
|
'Systemadministration',
|
|
'Netzwerktechnik',
|
|
]
|
|
|
|
const toggleTopic = (topic: string) => {
|
|
if (selectedTopics.includes(topic)) {
|
|
setSelectedTopics(selectedTopics.filter(t => t !== topic))
|
|
} else {
|
|
setSelectedTopics([...selectedTopics, topic])
|
|
}
|
|
}
|
|
|
|
const calculateEstimate = () => {
|
|
const empCount = parseInt(employees) || 0
|
|
const deptCount = parseInt(departments) || 1
|
|
const topicCount = selectedTopics.length || 1
|
|
|
|
// Basis-Schätzung: 1 Tag pro Thema, 0.5 Tage pro 10 Mitarbeiter
|
|
const baseDays = topicCount * 1
|
|
const employeeDays = Math.ceil(empCount / 10) * 0.5
|
|
const departmentFactor = Math.max(1, deptCount * 0.2)
|
|
|
|
const totalDays = Math.ceil((baseDays + employeeDays) * departmentFactor)
|
|
const estimatedWeeks = Math.ceil(totalDays / 5)
|
|
const estimatedMonths = Math.ceil(totalDays / 20)
|
|
|
|
return {
|
|
totalDays,
|
|
estimatedWeeks,
|
|
estimatedMonths,
|
|
empCount,
|
|
topicCount,
|
|
}
|
|
}
|
|
|
|
const [showResults, setShowResults] = useState(false)
|
|
const estimate = calculateEstimate()
|
|
|
|
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>Schulungsbedarfs-Rechner</h1>
|
|
<p className="page-hero-subtitle">
|
|
Schätzen Sie den Umfang Ihrer IT-Schulung
|
|
</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>Ermitteln Sie Ihren Schulungsbedarf</h2>
|
|
<p>
|
|
Geben Sie einige Informationen zu Ihrem Unternehmen ein und erhalten Sie eine
|
|
erste Schätzung des potenziellen Schulungsumfangs.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="feature-card"
|
|
style={{ marginBottom: '30px', textAlign: 'left' }}
|
|
>
|
|
<h3 style={{ marginBottom: '20px' }}>Anzahl der Mitarbeiter</h3>
|
|
<input
|
|
type="number"
|
|
value={employees}
|
|
onChange={(e) => setEmployees(e.target.value)}
|
|
placeholder="z.B. 50"
|
|
style={{
|
|
width: '100%',
|
|
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)',
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
|
|
<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"
|
|
style={{ marginBottom: '30px', textAlign: 'left' }}
|
|
>
|
|
<h3 style={{ marginBottom: '20px' }}>Anzahl der Abteilungen</h3>
|
|
<input
|
|
type="number"
|
|
value={departments}
|
|
onChange={(e) => setDepartments(e.target.value)}
|
|
placeholder="z.B. 5"
|
|
style={{
|
|
width: '100%',
|
|
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)',
|
|
}}
|
|
/>
|
|
</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"
|
|
style={{ marginBottom: '30px', textAlign: 'left' }}
|
|
>
|
|
<h3 style={{ marginBottom: '20px' }}>Gewünschte Schulungsthemen</h3>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
|
{topics.map((topic) => (
|
|
<label
|
|
key={topic}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '12px',
|
|
background: selectedTopics.includes(topic) ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
|
|
border: `1px solid ${selectedTopics.includes(topic) ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
|
|
borderRadius: '8px',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease',
|
|
}}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedTopics.includes(topic)}
|
|
onChange={() => toggleTopic(topic)}
|
|
style={{ marginRight: '10px' }}
|
|
/>
|
|
{topic}
|
|
</label>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
>
|
|
<button
|
|
onClick={() => setShowResults(true)}
|
|
className="btn btn-primary"
|
|
style={{ width: '100%' }}
|
|
disabled={!employees || selectedTopics.length === 0}
|
|
>
|
|
Schulungsbedarf berechnen
|
|
</button>
|
|
</motion.div>
|
|
|
|
{showResults && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="feature-card-large"
|
|
style={{ marginTop: '40px', textAlign: 'left' }}
|
|
>
|
|
<h2 style={{ marginBottom: '30px' }}>Geschätzter Schulungsbedarf</h2>
|
|
|
|
<div style={{ marginBottom: '30px' }}>
|
|
<h3 style={{ marginBottom: '15px' }}>Ihre Angaben</h3>
|
|
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
|
|
<strong>Mitarbeiter:</strong> {estimate.empCount}<br />
|
|
<strong>Abteilungen:</strong> {departments || 'Nicht angegeben'}<br />
|
|
<strong>Gewählte Themen:</strong> {estimate.topicCount}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '30px' }}>
|
|
<h3 style={{ marginBottom: '15px' }}>Geschätzter Umfang</h3>
|
|
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
|
|
Basierend auf Ihren Angaben schätzen wir einen Schulungsbedarf von ca. <strong>{estimate.totalDays} Tagen</strong>
|
|
({estimate.estimatedWeeks} Wochen / {estimate.estimatedMonths} Monate).
|
|
</p>
|
|
<p style={{ fontSize: '15px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginTop: '15px', fontStyle: 'italic' }}>
|
|
* Dies ist eine erste Schätzung. Der tatsächliche Umfang kann je nach spezifischen Anforderungen variieren.
|
|
</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 ein individuelles Schulungskonzept entwickeln? Kontaktieren Sie uns für eine detaillierte Beratung.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
|
|
<Link href="/kontakt" className="btn btn-primary">
|
|
Jetzt Beratung anfragen
|
|
</Link>
|
|
<button
|
|
onClick={() => {
|
|
setShowResults(false)
|
|
setEmployees('')
|
|
setDepartments('')
|
|
setSelectedTopics([])
|
|
}}
|
|
className="btn btn-secondary"
|
|
>
|
|
Erneut berechnen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|
|
|