first commit

app/unternehmen/schulungsthemen/page.tsx

@@ -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 />
+    </>
+  )
+}
+