first commit
This commit is contained in:
236
app/unternehmen/it-infrastrukturanalyse/page.tsx
Executable file
236
app/unternehmen/it-infrastrukturanalyse/page.tsx
Executable file
@@ -0,0 +1,236 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function ITInfrastrukturanalyse() {
|
||||
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-Infrastrukturanalyse</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Der erste Schritt zu mehr IT-Kompetenz
|
||||
</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>Was wird untersucht?</h2>
|
||||
<p>
|
||||
Unsere umfassende IT-Infrastrukturanalyse gibt Ihnen Klarheit über den aktuellen
|
||||
Zustand Ihrer IT und zeigt konkrete Handlungsfelder auf.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '60px' }}>
|
||||
<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-large"
|
||||
>
|
||||
<div className="feature-icon">🔍</div>
|
||||
<h3>Infrastruktur-Erfassung</h3>
|
||||
<p>
|
||||
Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke,
|
||||
Software-Landschaft, Cloud-Services und Endgeräte. Dabei erstellen wir eine
|
||||
vollständige IST-Dokumentation Ihrer IT-Infrastruktur.
|
||||
</p>
|
||||
</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-large"
|
||||
>
|
||||
<div className="feature-icon">🛡️</div>
|
||||
<h3>Sicherheitsanalyse</h3>
|
||||
<p>
|
||||
Wir identifizieren Sicherheitslücken, veraltete Systeme und
|
||||
Compliance-Probleme. Unser Schwachstellenbericht zeigt Ihnen genau, wo
|
||||
Handlungsbedarf besteht.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">📊</div>
|
||||
<h3>Schulungsbedarfs-Analyse</h3>
|
||||
<p>
|
||||
Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche
|
||||
Kompetenzen fehlen? Wo gibt es Wissenslücken? Diese Analyse bildet die Basis
|
||||
für maßgeschneiderte Schulungskonzepte.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ marginTop: '80px' }}
|
||||
>
|
||||
<h2>Welche Methoden werden eingesetzt?</h2>
|
||||
<p>
|
||||
Wir nutzen bewährte Methoden und Tools für eine gründliche Analyse:
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '40px' }}>
|
||||
<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"
|
||||
>
|
||||
<h3>Vor-Ort-Begehungen</h3>
|
||||
<p>Persönliche Inspektion Ihrer IT-Infrastruktur</p>
|
||||
</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"
|
||||
>
|
||||
<h3>Interviews mit Mitarbeitern</h3>
|
||||
<p>Gespräche zur Ermittlung des Wissensstands</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<h3>Technische Scans</h3>
|
||||
<p>Automatisierte Analyse von Systemen und Netzwerken</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<h3>Dokumentenanalyse</h3>
|
||||
<p>Auswertung bestehender Dokumentationen</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ marginTop: '80px' }}
|
||||
>
|
||||
<h2>Konkrete Ergebnisse</h2>
|
||||
<p>
|
||||
Nach der Analyse erhalten Sie:
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: '1fr' }}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="feature-card-large"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
<h3 style={{ marginBottom: '20px' }}>IST-Dokumentation</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7' }}>
|
||||
Eine vollständige Dokumentation Ihrer aktuellen IT-Infrastruktur mit allen
|
||||
Systemen, Komponenten und Abhängigkeiten. Diese Dokumentation dient als Basis
|
||||
für alle weiteren Schritte.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="feature-card-large"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
<h3 style={{ marginBottom: '20px' }}>Schwachstellenbericht</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7' }}>
|
||||
Ein detaillierter Bericht über identifizierte Sicherheitslücken, veraltete
|
||||
Systeme und Risiken. Jede Schwachstelle wird mit Priorität und Handlungsempfehlung
|
||||
versehen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="feature-card-large"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
<h3 style={{ marginBottom: '20px' }}>Handlungsempfehlungen</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7' }}>
|
||||
Konkrete, priorisierte Empfehlungen für die nächsten Schritte. Diese umfassen
|
||||
sowohl technische Maßnahmen als auch Schulungsbedarfe für Ihre Mitarbeiter.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="cta-section"
|
||||
>
|
||||
<h2>Starten Sie mit der Analyse</h2>
|
||||
<p>Kontaktieren Sie uns für eine unverbindliche Beratung</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
IT-Analyse anfordern
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
340
app/unternehmen/page.tsx
Executable file
340
app/unternehmen/page.tsx
Executable file
@@ -0,0 +1,340 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function Unternehmen() {
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="page-hero">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="container"
|
||||
>
|
||||
<h1>IT-Schulungen für Unternehmen</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Stärken Sie Ihr Team mit maßgeschneiderten IT-Schulungen
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<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>Unser Prozess: Von der Analyse bis zum internen Experten</h2>
|
||||
<p>
|
||||
Wir begleiten Sie in drei klaren Schritten zu mehr IT-Kompetenz in Ihrem Unternehmen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px', marginBottom: '100px' }}>
|
||||
<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-large"
|
||||
>
|
||||
<div className="feature-number">1</div>
|
||||
<h3>Analyse Ihrer IT</h3>
|
||||
<p>
|
||||
Wir analysieren Ihre bestehende IT-Infrastruktur umfassend. Dabei identifizieren wir
|
||||
Schwachstellen, Optimierungspotenziale und den konkreten Schulungsbedarf Ihrer
|
||||
Mitarbeiter. Sie erhalten eine detaillierte IST-Dokumentation, einen
|
||||
Schwachstellenbericht und konkrete Handlungsempfehlungen.
|
||||
</p>
|
||||
</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-large"
|
||||
>
|
||||
<div className="feature-number">2</div>
|
||||
<h3>Maßgeschneiderte Schulungskonzepte</h3>
|
||||
<p>
|
||||
Basierend auf der Analyse entwickeln wir individuelle Schulungskonzepte, die genau
|
||||
auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind. Ihre
|
||||
Mitarbeiter lernen direkt an Ihrer eigenen IT – praxisnah und sofort anwendbar.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-number">3</div>
|
||||
<h3>Aufbau interner Experten</h3>
|
||||
<p>
|
||||
Durch unsere Schulungen entwickeln Sie eigene IT-Experten im Haus. Das reduziert
|
||||
langfristig externe Kosten, erhöht die IT-Sicherheit und ermöglicht schnellere
|
||||
Reaktionszeiten bei Problemen. Sie werden unabhängiger und stärker.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<h2>Ihre Vorteile</h2>
|
||||
<p>
|
||||
Mit unseren maßgeschneiderten IT-Schulungen erreichen Sie mehr Sicherheit, Effizienz
|
||||
und Kostensenkung in Ihrem Unternehmen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid">
|
||||
<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-large"
|
||||
>
|
||||
<div className="feature-icon">🔍</div>
|
||||
<h3>IT-Analyse</h3>
|
||||
<p>
|
||||
Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren
|
||||
Schulungsbedarfe. So wissen wir genau, wo wir ansetzen müssen.
|
||||
</p>
|
||||
</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-large"
|
||||
>
|
||||
<div className="feature-icon">🏢</div>
|
||||
<h3>Schulung auf Ihrer Infrastruktur</h3>
|
||||
<p>
|
||||
Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur.
|
||||
Keine abstrakten Beispiele – praxisnah und sofort anwendbar.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">👨💼</div>
|
||||
<h3>Interne Experten aufbauen</h3>
|
||||
<p>
|
||||
Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie
|
||||
Abhängigkeiten und stärken Sie Ihr Team nachhaltig.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">🎓</div>
|
||||
<h3>IT-Sensibilisierung</h3>
|
||||
<p>
|
||||
Wir schulen Ihre Mitarbeiter in generellen IT-Themen als Sensibilisierung
|
||||
für verschiedenste Bereiche. Von Sicherheit bis Cloud-Computing.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Additional Company Benefits */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<h2>Weitere Vorteile für Ihr Unternehmen</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid">
|
||||
<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"
|
||||
>
|
||||
<div className="feature-icon">💰</div>
|
||||
<h3>Kosteneinsparung</h3>
|
||||
<p>
|
||||
Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte
|
||||
interne Mitarbeiter.
|
||||
</p>
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">⚡</div>
|
||||
<h3>Schnellere Reaktionszeiten</h3>
|
||||
<p>
|
||||
Interne Experten können Probleme schneller lösen, ohne auf externe
|
||||
Unterstützung warten zu müssen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🔒</div>
|
||||
<h3>Erhöhte IT-Sicherheit</h3>
|
||||
<p>
|
||||
Geschulte Mitarbeiter erkennen Sicherheitsrisiken früher und handeln
|
||||
entsprechend.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">📈</div>
|
||||
<h3>Innovation fördern</h3>
|
||||
<p>
|
||||
Gut geschulte Teams sind innovativer und können neue Technologien
|
||||
schneller adaptieren.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🤝</div>
|
||||
<h3>Maßgeschneiderte Programme</h3>
|
||||
<p>
|
||||
Jedes Schulungsprogramm wird individuell auf Ihr Unternehmen, Ihre
|
||||
Branche und Ihre Ziele zugeschnitten.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">📊</div>
|
||||
<h3>Fortschritts-Tracking</h3>
|
||||
<p>
|
||||
Verfolgen Sie den Lernfortschritt Ihrer Mitarbeiter und messen Sie
|
||||
den ROI Ihrer Investition in Weiterbildung.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ marginTop: '80px' }}
|
||||
>
|
||||
<h2>Interaktive Tools</h2>
|
||||
<p>
|
||||
Nutzen Sie unsere interaktiven Tools, um eine erste Einschätzung zu erhalten:
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
|
||||
<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"
|
||||
>
|
||||
<div className="feature-icon">📋</div>
|
||||
<h3>IT-Checkliste</h3>
|
||||
<p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit</p>
|
||||
<Link href="/unternehmen/tools/it-checkliste" className="btn btn-secondary" style={{ marginTop: '20px', display: 'inline-block' }}>
|
||||
Tool öffnen
|
||||
</Link>
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">📊</div>
|
||||
<h3>Schulungsbedarfs-Rechner</h3>
|
||||
<p>Schätzen Sie den Umfang Ihrer IT-Schulung</p>
|
||||
<Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-secondary" style={{ marginTop: '20px', display: 'inline-block' }}>
|
||||
Tool öffnen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</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 die IT-Analyse?</h2>
|
||||
<p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
|
||||
<a href="/kontakt" className="btn btn-primary">
|
||||
IT-Analyse anfordern
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
142
app/unternehmen/schulungsthemen/page.tsx
Executable file
142
app/unternehmen/schulungsthemen/page.tsx
Executable file
@@ -0,0 +1,142 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function Schulungsthemen() {
|
||||
const topics = [
|
||||
{
|
||||
title: 'IT-Security für Mitarbeiter',
|
||||
description: 'Grundlagen der IT-Sicherheit, Erkennung von Phishing-Angriffen, sicheres Passwort-Management und Umgang mit sensiblen Daten.',
|
||||
duration: '1-2 Tage',
|
||||
level: 'Grundlagen',
|
||||
},
|
||||
{
|
||||
title: 'Effizienter Umgang mit Office-Software',
|
||||
description: 'Optimierung der täglichen Arbeit mit Microsoft Office, Google Workspace oder anderen Office-Suites. Tipps und Tricks für mehr Produktivität.',
|
||||
duration: '1 Tag',
|
||||
level: 'Grundlagen bis Fortgeschritten',
|
||||
},
|
||||
{
|
||||
title: 'Datenschutz DSGVO',
|
||||
description: 'Umfassende Schulung zu Datenschutzbestimmungen, DSGVO-Compliance und korrektem Umgang mit personenbezogenen Daten.',
|
||||
duration: '2-3 Tage',
|
||||
level: 'Grundlagen bis Experte',
|
||||
},
|
||||
{
|
||||
title: 'Cloud-Computing Grundlagen',
|
||||
description: 'Einführung in Cloud-Technologien, Nutzung von AWS, Azure oder Google Cloud. Migration und Verwaltung von Cloud-Ressourcen.',
|
||||
duration: '3-5 Tage',
|
||||
level: 'Grundlagen bis Fortgeschritten',
|
||||
},
|
||||
{
|
||||
title: 'Systemadministration',
|
||||
description: 'Grundlagen der Systemadministration für Windows- und Linux-Server. Verwaltung von Benutzern, Berechtigungen und Systemen.',
|
||||
duration: '5-7 Tage',
|
||||
level: 'Fortgeschritten',
|
||||
},
|
||||
{
|
||||
title: 'Netzwerktechnik',
|
||||
description: 'Grundlagen der Netzwerktechnik, TCP/IP, Routing, Switching und Netzwerk-Troubleshooting.',
|
||||
duration: '3-5 Tage',
|
||||
level: 'Fortgeschritten',
|
||||
},
|
||||
]
|
||||
|
||||
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>Schulungsthemen</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Übersicht über mögliche Schulungsmodule
|
||||
</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>Maßgeschneiderte Schulungsmodule</h2>
|
||||
<p>
|
||||
Wir bieten eine breite Palette an Schulungsthemen, die wir individuell auf Ihre
|
||||
Bedürfnisse zuschneiden. Alle Schulungen erfolgen direkt an Ihrer IT-Infrastruktur
|
||||
für maximale Praxisnähe.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '60px', gridTemplateColumns: '1fr' }}>
|
||||
{topics.map((topic, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
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' }}
|
||||
>
|
||||
<h3 style={{ fontSize: '28px', marginBottom: '15px' }}>{topic.title}</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '20px', color: 'var(--color-text-secondary)' }}>
|
||||
{topic.description}
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '20px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
|
||||
<span><strong>Dauer:</strong> {topic.duration}</span>
|
||||
<span><strong>Niveau:</strong> {topic.level}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ marginTop: '80px' }}
|
||||
>
|
||||
<h2>Individuelle Anpassung</h2>
|
||||
<p>
|
||||
Diese Themen sind nur Beispiele. Wir entwickeln gerne individuelle Schulungskonzepte,
|
||||
die genau auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind.
|
||||
Kontaktieren Sie uns für eine maßgeschneiderte Lösung.
|
||||
</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>Interesse an einer Schulung?</h2>
|
||||
<p>Lassen Sie uns gemeinsam das passende Schulungskonzept entwickeln</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Beratung anfragen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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