first commit
This commit is contained in:
272
app/unternehmen/tools/it-checkliste/page.tsx
Executable file
272
app/unternehmen/tools/it-checkliste/page.tsx
Executable file
@@ -0,0 +1,272 @@
|
||||
'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 ITCheckliste() {
|
||||
const [answers, setAnswers] = useState<Record<string, string>>({})
|
||||
const [showResults, setShowResults] = useState(false)
|
||||
|
||||
const questions = [
|
||||
{
|
||||
id: 'backup',
|
||||
question: 'Wie häufig werden Backups Ihrer IT-Systeme durchgeführt?',
|
||||
options: ['Täglich automatisch', 'Wöchentlich', 'Manuell bei Bedarf', 'Keine regelmäßigen Backups'],
|
||||
risks: {
|
||||
'Keine regelmäßigen Backups': 'hoch',
|
||||
'Manuell bei Bedarf': 'mittel',
|
||||
'Wöchentlich': 'niedrig',
|
||||
'Täglich automatisch': 'sehr niedrig',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'updates',
|
||||
question: 'Wie werden Software-Updates und Sicherheitspatches verwaltet?',
|
||||
options: ['Automatisch installiert', 'Regelmäßig manuell', 'Nur bei Problemen', 'Keine systematische Verwaltung'],
|
||||
risks: {
|
||||
'Keine systematische Verwaltung': 'hoch',
|
||||
'Nur bei Problemen': 'hoch',
|
||||
'Regelmäßig manuell': 'mittel',
|
||||
'Automatisch installiert': 'niedrig',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'security',
|
||||
question: 'Welche IT-Sicherheitsmaßnahmen sind implementiert?',
|
||||
options: ['Firewall, Antivirus, regelmäßige Audits', 'Firewall und Antivirus', 'Nur Antivirus', 'Keine speziellen Maßnahmen'],
|
||||
risks: {
|
||||
'Keine speziellen Maßnahmen': 'hoch',
|
||||
'Nur Antivirus': 'hoch',
|
||||
'Firewall und Antivirus': 'mittel',
|
||||
'Firewall, Antivirus, regelmäßige Audits': 'niedrig',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'training',
|
||||
question: 'Wie häufig werden Mitarbeiter in IT-Sicherheit geschult?',
|
||||
options: ['Regelmäßig (mind. jährlich)', 'Bei Bedarf', 'Nur bei Einstellung', 'Keine Schulungen'],
|
||||
risks: {
|
||||
'Keine Schulungen': 'hoch',
|
||||
'Nur bei Einstellung': 'mittel',
|
||||
'Bei Bedarf': 'mittel',
|
||||
'Regelmäßig (mind. jährlich)': 'niedrig',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'documentation',
|
||||
question: 'Wie ist die Dokumentation Ihrer IT-Infrastruktur?',
|
||||
options: ['Vollständig und aktuell', 'Teilweise dokumentiert', 'Veraltete Dokumentation', 'Keine Dokumentation'],
|
||||
risks: {
|
||||
'Keine Dokumentation': 'hoch',
|
||||
'Veraltete Dokumentation': 'mittel',
|
||||
'Teilweise dokumentiert': 'mittel',
|
||||
'Vollständig und aktuell': 'niedrig',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const handleAnswer = (questionId: string, answer: string) => {
|
||||
setAnswers({ ...answers, [questionId]: answer })
|
||||
}
|
||||
|
||||
const calculateResults = () => {
|
||||
const riskCounts = { hoch: 0, mittel: 0, niedrig: 0, 'sehr niedrig': 0 }
|
||||
|
||||
questions.forEach(q => {
|
||||
const answer = answers[q.id]
|
||||
if (answer) {
|
||||
const risk = q.risks[answer as keyof typeof q.risks]
|
||||
if (risk) riskCounts[risk as keyof typeof riskCounts]++
|
||||
}
|
||||
})
|
||||
|
||||
const totalAnswered = Object.keys(answers).length
|
||||
const highRiskCount = riskCounts.hoch
|
||||
const mediumRiskCount = riskCounts.mittel
|
||||
|
||||
let overallRisk = 'niedrig'
|
||||
let recommendations: string[] = []
|
||||
|
||||
if (highRiskCount > 2 || (highRiskCount > 0 && mediumRiskCount > 2)) {
|
||||
overallRisk = 'hoch'
|
||||
recommendations = [
|
||||
'Dringende IT-Sicherheitsanalyse empfohlen',
|
||||
'Implementierung eines Backup-Systems',
|
||||
'Regelmäßige Sicherheitsschulungen für Mitarbeiter',
|
||||
'Aktualisierung der IT-Dokumentation',
|
||||
]
|
||||
} else if (highRiskCount > 0 || mediumRiskCount > 2) {
|
||||
overallRisk = 'mittel'
|
||||
recommendations = [
|
||||
'IT-Infrastrukturanalyse zur Identifikation von Optimierungspotenzialen',
|
||||
'Verbesserung der Backup-Strategie',
|
||||
'Regelmäßige IT-Sicherheitsschulungen',
|
||||
]
|
||||
} else {
|
||||
recommendations = [
|
||||
'Regelmäßige Überprüfung der IT-Infrastruktur',
|
||||
'Fortlaufende Weiterbildung der Mitarbeiter',
|
||||
]
|
||||
}
|
||||
|
||||
return { overallRisk, recommendations, riskCounts }
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (Object.keys(answers).length === questions.length) {
|
||||
setShowResults(true)
|
||||
} else {
|
||||
alert('Bitte beantworten Sie alle Fragen.')
|
||||
}
|
||||
}
|
||||
|
||||
const results = showResults ? calculateResults() : 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>IT-Infrastruktur-Checkliste</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
{!showResults ? (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<h2>Beantworten Sie die folgenden Fragen</h2>
|
||||
<p>
|
||||
Diese Checkliste gibt Ihnen eine erste Einschätzung potenzieller Schwachstellen
|
||||
und Optimierungspotenziale in Ihrer IT-Infrastruktur.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
|
||||
{questions.map((q, index) => (
|
||||
<motion.div
|
||||
key={q.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"
|
||||
style={{ marginBottom: '30px', textAlign: 'left' }}
|
||||
>
|
||||
<h3 style={{ marginBottom: '20px', fontSize: '20px' }}>{q.question}</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{q.options.map((option) => (
|
||||
<label
|
||||
key={option}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '12px',
|
||||
background: answers[q.id] === option ? 'rgba(0, 113, 227, 0.1)' : 'rgba(255, 255, 255, 0.05)',
|
||||
border: `1px solid ${answers[q.id] === option ? 'var(--color-accent)' : 'rgba(255, 255, 255, 0.1)'}`,
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name={q.id}
|
||||
value={option}
|
||||
checked={answers[q.id] === option}
|
||||
onChange={() => handleAnswer(q.id, option)}
|
||||
style={{ marginRight: '10px' }}
|
||||
/>
|
||||
{option}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<button onClick={handleSubmit} className="btn btn-primary" style={{ width: '100%', marginTop: '20px' }}>
|
||||
Auswertung anzeigen
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="feature-card-large"
|
||||
style={{ maxWidth: '800px', margin: '0 auto', textAlign: 'left' }}
|
||||
>
|
||||
<h2 style={{ marginBottom: '30px' }}>Ihre IT-Einschätzung</h2>
|
||||
|
||||
<div style={{ marginBottom: '30px' }}>
|
||||
<h3 style={{ marginBottom: '15px' }}>Gesamtrisiko: {results?.overallRisk}</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
|
||||
Basierend auf Ihren Antworten haben wir eine erste Einschätzung erstellt.
|
||||
Für eine detaillierte Analyse empfehlen wir eine umfassende IT-Infrastrukturanalyse.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '30px' }}>
|
||||
<h3 style={{ marginBottom: '15px' }}>Empfohlene Maßnahmen</h3>
|
||||
<ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
|
||||
{results?.recommendations.map((rec, i) => (
|
||||
<li key={i} style={{ marginBottom: '10px' }}>{rec}</li>
|
||||
))}
|
||||
</ul>
|
||||
</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 eine detaillierte IT-Infrastrukturanalyse? Kontaktieren Sie uns für eine unverbindliche Beratung.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Kontakt aufnehmen
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowResults(false)
|
||||
setAnswers({})
|
||||
}}
|
||||
className="btn btn-secondary"
|
||||
>
|
||||
Erneut starten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
258
app/unternehmen/tools/schulungsbedarf/page.tsx
Executable file
258
app/unternehmen/tools/schulungsbedarf/page.tsx
Executable file
@@ -0,0 +1,258 @@
|
||||
'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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user