v1 production
This commit is contained in:
0
.dockerignore
Executable file → Normal file
0
.dockerignore
Executable file → Normal file
0
.eslintrc.json
Executable file → Normal file
0
.eslintrc.json
Executable file → Normal file
0
.gitignore
vendored
Executable file → Normal file
0
.gitignore
vendored
Executable file → Normal file
0
Dockerfile
Executable file → Normal file
0
Dockerfile
Executable file → Normal file
0
Dockerfile.dev
Executable file → Normal file
0
Dockerfile.dev
Executable file → Normal file
0
PROJEKTINFORMATIONEN.md
Executable file → Normal file
0
PROJEKTINFORMATIONEN.md
Executable file → Normal file
0
app/agb/page.tsx
Executable file → Normal file
0
app/agb/page.tsx
Executable file → Normal file
@@ -1,143 +0,0 @@
|
||||
'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 CaseStudies() {
|
||||
const caseStudies = [
|
||||
{
|
||||
title: 'IT-Sicherheit für mittelständisches Unternehmen',
|
||||
company: 'Musterfirma GmbH',
|
||||
industry: 'Produktion',
|
||||
challenge: 'Das Unternehmen hatte wiederkehrende IT-Sicherheitsvorfälle und war stark von externen IT-Dienstleistern abhängig. Die Mitarbeiter hatten wenig IT-Wissen und konnten einfache Probleme nicht selbst lösen.',
|
||||
solution: 'Wir führten eine umfassende IT-Infrastrukturanalyse durch, identifizierten kritische Schwachstellen und entwickelten ein maßgeschneidertes Schulungskonzept. Die Mitarbeiter wurden in IT-Sicherheitsgrundlagen, Systemadministration und Notfallmaßnahmen geschult.',
|
||||
results: [
|
||||
'40% Reduzierung externer IT-Kosten',
|
||||
'60% weniger IT-Sicherheitsvorfälle',
|
||||
'3 interne IT-Experten aufgebaut',
|
||||
'Durchschnittliche Reaktionszeit bei Problemen von 4 Stunden auf 30 Minuten reduziert',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Cloud-Migration und Schulung',
|
||||
company: 'TechSolutions AG',
|
||||
industry: 'IT-Dienstleistungen',
|
||||
challenge: 'Das Unternehmen wollte von lokalen Servern auf Cloud-Lösungen migrieren, hatte aber keine internen Experten für Cloud-Technologien. Die Mitarbeiter waren mit den neuen Systemen überfordert.',
|
||||
solution: 'Wir analysierten die bestehende Infrastruktur, entwickelten eine Migrationsstrategie und schulten das gesamte Team in Cloud-Technologien. Die Schulungen erfolgten parallel zur Migration, sodass die Mitarbeiter direkt an den neuen Systemen lernen konnten.',
|
||||
results: [
|
||||
'Erfolgreiche Migration ohne Ausfallzeiten',
|
||||
'5 Mitarbeiter zu Cloud-Experten zertifiziert',
|
||||
'30% Kosteneinsparung durch optimierte Cloud-Nutzung',
|
||||
'100% der Mitarbeiter können die neuen Systeme selbstständig nutzen',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'DSGVO-Compliance Schulung',
|
||||
company: 'Service GmbH',
|
||||
industry: 'Dienstleistungen',
|
||||
challenge: 'Das Unternehmen musste DSGVO-konform werden, hatte aber keine Expertise im Datenschutz. Die Mitarbeiter wussten nicht, wie sie mit personenbezogenen Daten umgehen sollten.',
|
||||
solution: 'Wir führten eine Datenschutzanalyse durch, identifizierten Compliance-Lücken und entwickelten ein umfassendes Schulungsprogramm zu DSGVO-Grundlagen, Datenschutzbestimmungen und korrektem Umgang mit personenbezogenen Daten.',
|
||||
results: [
|
||||
'Vollständige DSGVO-Compliance erreicht',
|
||||
'2 Datenschutzbeauftragte intern ausgebildet',
|
||||
'Keine Datenschutzverstöße mehr',
|
||||
'Zertifizierung nach ISO 27001 vorbereitet',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
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>Fallstudien</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Erfolgreiche Projekte im Detail
|
||||
</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>Von der Herausforderung zum Erfolg</h2>
|
||||
<p>
|
||||
Erfahren Sie, wie wir Unternehmen dabei geholfen haben, ihre IT-Kompetenzen
|
||||
zu stärken und messbare Ergebnisse zu erzielen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div style={{ marginTop: '80px' }}>
|
||||
{caseStudies.map((study, 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.2 }}
|
||||
className="feature-card-large"
|
||||
style={{ marginBottom: '60px', textAlign: 'left' }}
|
||||
>
|
||||
<h2 style={{ fontSize: '32px', marginBottom: '10px' }}>{study.title}</h2>
|
||||
<p style={{ color: 'var(--color-text-secondary)', marginBottom: '30px' }}>
|
||||
{study.company} • {study.industry}
|
||||
</p>
|
||||
|
||||
<h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Ausgangssituation</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
|
||||
{study.challenge}
|
||||
</p>
|
||||
|
||||
<h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Unsere Lösung</h3>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
|
||||
{study.solution}
|
||||
</p>
|
||||
|
||||
<h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Erzielte Ergebnisse</h3>
|
||||
<ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px' }}>
|
||||
{study.results.map((result, i) => (
|
||||
<li key={i} style={{ marginBottom: '10px', color: 'var(--color-text-secondary)' }}>
|
||||
{result}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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>Ihr Erfolg könnte der nächste sein</h2>
|
||||
<p>Lassen Sie uns gemeinsam Ihre IT-Herausforderungen lösen</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Beratung anfragen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
0
app/datenschutz/page.tsx
Executable file → Normal file
0
app/datenschutz/page.tsx
Executable file → Normal file
287
app/globals.css
Executable file → Normal file
287
app/globals.css
Executable file → Normal file
@@ -5,17 +5,20 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #000000;
|
||||
--color-bg: #1a0a0a;
|
||||
--color-bg-secondary: #2a0f0f;
|
||||
--color-text: #ffffff;
|
||||
--color-text-secondary: #a1a1a6;
|
||||
--color-text-secondary: #d1a1a1;
|
||||
--color-accent: #ff3b30;
|
||||
--color-accent-hover: #ff453a;
|
||||
--color-accent-hover: #ff5c52;
|
||||
--color-accent-light: #ff6b6b;
|
||||
--color-card: #1c1c1e;
|
||||
--color-border: #38383a;
|
||||
--color-card: #2a0f0f;
|
||||
--color-card-hover: #3a1f1f;
|
||||
--color-border: #4a2f2f;
|
||||
--color-red: #ff3b30;
|
||||
--color-red-dark: #d70015;
|
||||
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -25,11 +28,34 @@ html {
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
background-color: var(--color-bg);
|
||||
background-image: url('/site.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: overlay;
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-bg);
|
||||
opacity: 0.85;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -68,7 +94,7 @@ a:hover {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(26, 10, 10, 0.9);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
@@ -120,9 +146,48 @@ a:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-link[href*="linkedin"]:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-red);
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-dropdown-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-dropdown-toggle:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 10px;
|
||||
background: var(--color-card);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-dropdown-link {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-dropdown-link:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
@@ -165,7 +230,7 @@ a:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
background: rgba(26, 10, 10, 0.95);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@@ -186,6 +251,29 @@ a:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-mobile-dropdown {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-mobile-dropdown-toggle {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-mobile-dropdown-menu {
|
||||
padding-left: 20px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.nav-mobile-sublink {
|
||||
padding-left: 40px;
|
||||
font-size: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
@@ -194,11 +282,35 @@ a:hover {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 100px 20px 60px;
|
||||
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
|
||||
background: rgba(26, 10, 10, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-with-background {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-background-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/site.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.25;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -238,49 +350,93 @@ a:hover {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Social Media Icons */
|
||||
.social-icons {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 16px;
|
||||
background: #000000;
|
||||
color: var(--color-text);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.social-icon-link:hover {
|
||||
background: #1a1a1a;
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
box-shadow: 0 12px 24px rgba(255, 59, 48, 0.4);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
|
||||
.social-icon-link svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
border-radius: 22px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-red);
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px rgba(255, 59, 48, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(255, 59, 48, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
background: rgba(255, 59, 48, 0.2);
|
||||
color: var(--color-red);
|
||||
border: 1px solid var(--color-red);
|
||||
border: 2px solid var(--color-red);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
background: rgba(255, 59, 48, 0.3);
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-accent-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(255, 59, 48, 0.3);
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 18px 36px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 100px 0;
|
||||
background: var(--color-bg);
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -313,39 +469,25 @@ a:hover {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--color-card);
|
||||
border-radius: 20px;
|
||||
padding: 45px 35px;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 24px 48px rgba(255, 59, 48, 0.15);
|
||||
border-color: rgba(255, 59, 48, 0.2);
|
||||
background: #1f1f21;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 24px 48px rgba(255, 59, 48, 0.3);
|
||||
border-color: rgba(255, 59, 48, 0.4);
|
||||
background: var(--color-card-hover);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
@@ -361,13 +503,18 @@ a:hover {
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
letter-spacing: -0.1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-card .btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.feature-card-large {
|
||||
background: var(--color-card);
|
||||
border-radius: 20px;
|
||||
padding: 60px 50px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@@ -376,7 +523,7 @@ a:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 24px 48px rgba(255, 59, 48, 0.15);
|
||||
border-color: rgba(255, 59, 48, 0.2);
|
||||
background: #1f1f21;
|
||||
background: var(--color-card-hover);
|
||||
}
|
||||
|
||||
.feature-card-large h3 {
|
||||
@@ -394,26 +541,32 @@ a:hover {
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.feature-number {
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
color: var(--color-red);
|
||||
opacity: 0.15;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
transition: opacity 0.3s ease;
|
||||
/* Animation Icons */
|
||||
.animation-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 59, 48, 0.15);
|
||||
border: 2px solid rgba(255, 59, 48, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card-large:hover .feature-number {
|
||||
opacity: 0.25;
|
||||
.animation-icon:hover {
|
||||
background: rgba(255, 59, 48, 0.25);
|
||||
border-color: rgba(255, 59, 48, 0.5);
|
||||
}
|
||||
|
||||
/* Page Hero */
|
||||
.page-hero {
|
||||
padding: 140px 20px 80px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
|
||||
background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
@@ -443,6 +596,8 @@ a:hover {
|
||||
/* Page Content */
|
||||
.page-content {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
@@ -506,6 +661,8 @@ a:hover {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 60px 0 30px;
|
||||
margin-top: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -581,14 +738,18 @@ a:hover {
|
||||
padding: 100px 0;
|
||||
background: var(--color-card);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Partners Section */
|
||||
.partners-section {
|
||||
padding: 80px 0;
|
||||
background: var(--color-bg);
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.partners-content {
|
||||
@@ -754,3 +915,15 @@ a:hover {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive YouTube Videos */
|
||||
@media (max-width: 768px) {
|
||||
.youtube-video-container {
|
||||
padding-bottom: 56.25% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cal.com Widget */
|
||||
.cal-widget {
|
||||
margin-top: 40px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
52
app/impressum/page.tsx
Executable file → Normal file
52
app/impressum/page.tsx
Executable file → Normal file
@@ -30,49 +30,46 @@ export default function Impressum() {
|
||||
className="legal-content"
|
||||
>
|
||||
<h2>Angaben gemäß § 5 TMG</h2>
|
||||
|
||||
<h3>Gewerbe:</h3>
|
||||
<p>
|
||||
doing-it.de<br />
|
||||
[Ihre Firmenadresse]<br />
|
||||
[PLZ Ort]
|
||||
Mathias Brax – Matze Fix IT<br />
|
||||
Mathias Brax<br />
|
||||
Krumbacherstraße 4/4<br />
|
||||
88069 Tannau
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Inhaltlich Verantwortlicher gemäß § 55 Abs. 2 RStV: Mathias Brax
|
||||
</p>
|
||||
|
||||
<h2>Kontakt</h2>
|
||||
<p>
|
||||
Telefon: [Telefonnummer]<br />
|
||||
E-Mail: info@doing-it.de
|
||||
E-Mail: mathias.brax@matzefixit.de
|
||||
</p>
|
||||
|
||||
<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
|
||||
<h2>Haftung für Inhalte</h2>
|
||||
<p>
|
||||
[Name des Verantwortlichen]<br />
|
||||
[Adresse]<br />
|
||||
[PLZ Ort]
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
<p>
|
||||
Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
|
||||
</p>
|
||||
|
||||
<h2>Haftungsausschluss</h2>
|
||||
|
||||
<h3>Haftung für Inhalte</h3>
|
||||
<h2>Haftung für Links</h2>
|
||||
<p>
|
||||
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit,
|
||||
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten
|
||||
nach den allgemeinen Gesetzen verantwortlich.
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
|
||||
</p>
|
||||
<p>
|
||||
Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.
|
||||
</p>
|
||||
|
||||
<h3>Haftung für Links</h3>
|
||||
<h2>Urheberrecht</h2>
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen
|
||||
Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen.
|
||||
Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber
|
||||
der Seiten verantwortlich.
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
|
||||
</p>
|
||||
|
||||
<h3>Urheberrecht</h3>
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen
|
||||
dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art
|
||||
der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen
|
||||
Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -82,4 +79,3 @@ export default function Impressum() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
136
app/kontakt/page.tsx
Executable file → Normal file
136
app/kontakt/page.tsx
Executable file → Normal file
@@ -1,36 +1,14 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { useState } from 'react'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function Kontakt() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// In production, this would send the form data to a backend
|
||||
window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(formData.subject)}&body=${encodeURIComponent(`Name: ${formData.name}\nE-Mail: ${formData.email}\n\nNachricht:\n${formData.message}`)}`
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="page-hero">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -45,7 +23,6 @@ export default function Kontakt() {
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
@@ -53,74 +30,56 @@ export default function Kontakt() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<form className="contact-form" onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Ihr Name"
|
||||
<h2>Kontaktieren Sie uns</h2>
|
||||
<p style={{ marginBottom: '40px' }}>
|
||||
Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren? Schreiben Sie uns eine E-Mail oder buchen Sie direkt einen Termin.
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="mailto:info@doing-it.de"
|
||||
className="btn btn-primary btn-large"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
marginBottom: '40px',
|
||||
fontSize: '20px',
|
||||
padding: '20px 40px'
|
||||
}}
|
||||
>
|
||||
E-Mail senden: info@doing-it.de
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
{/* Cal.com Widget */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="cal-widget"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '700px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: '20px',
|
||||
overflow: 'hidden',
|
||||
background: 'var(--color-card)'
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
src="https://cal.com/embed/doing-it-de"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
borderRadius: '20px'
|
||||
}}
|
||||
title="Cal.com Booking"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">E-Mail *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="ihre.email@beispiel.de"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="subject">Betreff *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
placeholder="Betreff Ihrer Nachricht"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="message">Nachricht *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder="Ihre Nachricht an uns..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
|
||||
Nachricht senden
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="contact-info">
|
||||
<div className="contact-info-item">
|
||||
<h3>E-Mail</h3>
|
||||
<a href="mailto:info@doing-it.de">info@doing-it.de</a>
|
||||
</div>
|
||||
<div className="contact-info-item">
|
||||
<h3>Kontakt</h3>
|
||||
<p>Wir melden uns schnellstmöglich bei Ihnen zurück.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -129,4 +88,3 @@ export default function Kontakt() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
5
app/layout.tsx
Executable file → Normal file
5
app/layout.tsx
Executable file → Normal file
@@ -13,6 +13,11 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
{children}
|
||||
{/* Live Chat Integration - Platzhalter für Tawk.to, Crisp oder Intercom */}
|
||||
|
||||
286
app/page.tsx
Executable file → Normal file
286
app/page.tsx
Executable file → Normal file
@@ -2,6 +2,9 @@
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { FaInstagram, FaYoutube, FaTiktok, FaGraduationCap, FaBuilding, FaSearch, FaGlobe, FaCheckCircle, FaCalculator } from 'react-icons/fa'
|
||||
import AnimatedIcon from '@/components/AnimatedIcon'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
@@ -11,30 +14,65 @@ export default function Home() {
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="hero">
|
||||
<section className="hero hero-with-background">
|
||||
<div className="hero-background-image"></div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="hero-content"
|
||||
>
|
||||
<h1 className="hero-title">doing-it</h1>
|
||||
<h1 className="hero-title">Doing-IT</h1>
|
||||
<p className="hero-subtitle">
|
||||
IT Weiterbildung und Schulungen<br />
|
||||
für Quereinsteiger und Unternehmen
|
||||
</p>
|
||||
<div className="hero-buttons">
|
||||
<Link href="/quereinsteiger" className="btn btn-primary">
|
||||
Jetzt durchstarten
|
||||
<p style={{ fontSize: '19px', color: 'var(--color-text-secondary)', marginTop: '20px', maxWidth: '700px', marginLeft: 'auto', marginRight: 'auto', lineHeight: '1.7' }}>
|
||||
Doing-IT unterstützt Quereinsteiger und Unternehmen dabei, IT-Kompetenzen aufzubauen, Prozesse zu optimieren und digitale Sicherheit zu verbessern. Durch Schulungen, IT-Analysen, Webseiten-Checks und Social-Media-Analysen helfen wir dabei, digitale Herausforderungen einfach und verständlich zu meistern.
|
||||
</p>
|
||||
<div className="hero-buttons" style={{ marginTop: '40px' }}>
|
||||
<Link href="/quereinsteiger" className="btn btn-primary btn-large">
|
||||
Für Quereinsteiger
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="btn btn-secondary">
|
||||
IT-Analyse anfordern
|
||||
<Link href="/unternehmen" className="btn btn-secondary btn-large">
|
||||
Für Unternehmen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Social Media Icons */}
|
||||
<div className="social-icons">
|
||||
<a
|
||||
href="https://www.instagram.com/doing_it_de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-icon-link"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<FaInstagram />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.youtube.com/@doing-IT-de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-icon-link"
|
||||
aria-label="YouTube"
|
||||
>
|
||||
<FaYoutube />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.tiktok.com/@doing_it_de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-icon-link"
|
||||
aria-label="TikTok"
|
||||
>
|
||||
<FaTiktok />
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
{/* About Section */}
|
||||
<section className="features">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
@@ -44,8 +82,8 @@ export default function Home() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="section-header"
|
||||
>
|
||||
<h2>Warum doing-it?</h2>
|
||||
<p>Individuell, niveaubasiert, zertifiziert – mit Experten-Support</p>
|
||||
<h2>Was ist Doing-IT?</h2>
|
||||
<p>Ein Unternehmen und Social Media Kanal rund um die Informatik</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid">
|
||||
@@ -56,9 +94,14 @@ export default function Home() {
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🎯</div>
|
||||
<h3>Individuell</h3>
|
||||
<p>Maßgeschneiderte Schulungen auf Ihre Bedürfnisse zugeschnitten</p>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaGraduationCap size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Schulungen für Quereinsteiger</h3>
|
||||
<p>Speziell konzipierte Schulungen für den Einstieg in die Informatik. Von den Grundlagen bis zu fortgeschrittenen Themen – wir begleiten Sie auf Ihrem Weg.</p>
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@@ -68,9 +111,14 @@ export default function Home() {
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">📚</div>
|
||||
<h3>Stufenweise</h3>
|
||||
<p>Niveaubasierte Freischaltung von Inhalten für optimalen Lernerfolg</p>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaBuilding size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Optimierte Schulungen für Unternehmen</h3>
|
||||
<p>Maßgeschneiderte Schulungen angepasst an Ihre Anforderungen. Ob TISAX oder ISO Zertifizierung – wir schulen Ihre Mitarbeiter auf sensible IT-Themen.</p>
|
||||
<Link href="/unternehmen" className="btn btn-primary">
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@@ -80,9 +128,14 @@ export default function Home() {
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">💼</div>
|
||||
<h3>Zertifiziert</h3>
|
||||
<p>Anerkannte Zertifizierungen für Ihre Karriere</p>
|
||||
<AnimatedIcon delay={0.3}>
|
||||
<FaSearch size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>IT-Analyse</h3>
|
||||
<p>Umfassende Analyse Ihrer IT-Infrastruktur: Bedarf, Sicherheit, Kostenersparnis und Optimierungspotenziale. Wir identifizieren Schwachstellen und Verbesserungsmöglichkeiten.</p>
|
||||
<Link href="/unternehmen/it-infrastrukturanalyse" className="btn btn-primary">
|
||||
IT-Analyse anfordern
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@@ -92,16 +145,159 @@ export default function Home() {
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">👥</div>
|
||||
<h3>Experten-Support</h3>
|
||||
<p>Livetrainings und Chats mit IT-Experten bei Fragen</p>
|
||||
<AnimatedIcon delay={0.4}>
|
||||
<FaGlobe size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Webseiten & Social Media Analysen</h3>
|
||||
<p>Professionelle Analysen Ihrer Webseite und Social Media Präsenz. Wir zeigen Ihnen Optimierungspotenziale und helfen bei der digitalen Strategie.</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Analyse anfragen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="cta-hero">
|
||||
{/* Tools Section */}
|
||||
<section className="features" style={{ background: 'transparent' }}>
|
||||
<div className="container">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="section-header"
|
||||
>
|
||||
<h2>Unsere Tools</h2>
|
||||
<p>Praktische Hilfsmittel für Ihre IT-Planung</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"
|
||||
>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaCheckCircle size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>IT-Checkliste</h3>
|
||||
<p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit und identifizieren Sie Optimierungspotenziale in Ihrer IT-Infrastruktur.</p>
|
||||
<Link href="/unternehmen/tools/it-checkliste" className="btn btn-primary">
|
||||
Checkliste starten
|
||||
</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"
|
||||
>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaCalculator size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Schulungsbedarfs-Rechner</h3>
|
||||
<p>Ermitteln Sie den Umfang Ihrer IT-Schulung basierend auf Mitarbeiteranzahl, Abteilungen und gewünschten Themen.</p>
|
||||
<Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-primary">
|
||||
Bedarf berechnen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* YouTube Videos Section */}
|
||||
<section className="features" style={{ background: 'transparent' }}>
|
||||
<div className="container">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="section-header"
|
||||
>
|
||||
<h2>Aus unserem YouTube Kanal</h2>
|
||||
<p>Lernen Sie mehr über IT-Themen in unseren Videos</p>
|
||||
</motion.div>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr',
|
||||
gap: '40px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto'
|
||||
}}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
borderRadius: '20px',
|
||||
background: 'var(--color-card)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none'
|
||||
}}
|
||||
src="https://www.youtube.com/embed/TSJUu4729RE"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingBottom: '56.25%',
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
borderRadius: '20px',
|
||||
background: 'var(--color-card)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none'
|
||||
}}
|
||||
src="https://www.youtube.com/embed/nMREjJ6UbHY"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Wiki & Resources Section */}
|
||||
<section className="cta-hero" style={{ background: 'var(--color-card)' }}>
|
||||
<div className="container">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -110,11 +306,21 @@ export default function Home() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="cta-hero-content"
|
||||
>
|
||||
<h2>Bereit für den nächsten Schritt?</h2>
|
||||
<p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
|
||||
<div className="hero-buttons">
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Kontakt aufnehmen
|
||||
<h2>Weitere Ressourcen</h2>
|
||||
<p style={{ marginBottom: '40px' }}>
|
||||
Entdecken Sie unser Wiki mit umfassenden IT-Ressourcen und Lernmaterialien
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<a
|
||||
href="https://wiki.doing-it.de"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn btn-primary btn-large"
|
||||
>
|
||||
Zum Wiki
|
||||
</a>
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="btn btn-secondary btn-large">
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -181,9 +387,29 @@ export default function Home() {
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Über uns Section */}
|
||||
<section className="cta-hero" style={{ background: 'var(--color-card)', marginTop: '0' }}>
|
||||
<div className="container">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="cta-hero-content"
|
||||
>
|
||||
<h2>Über uns</h2>
|
||||
<p style={{ marginBottom: '40px' }}>
|
||||
Erfahren Sie mehr über Doing-IT und unsere Mission
|
||||
</p>
|
||||
<Link href="/ueber-uns" className="btn btn-primary btn-large">
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
44
app/projekte/coming-soon-2/page.tsx
Normal file
44
app/projekte/coming-soon-2/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function ComingSoon2() {
|
||||
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>Coming Soon</h1>
|
||||
</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>Hier entsteht gerade etwas Neues.</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
44
app/projekte/coming-soon/page.tsx
Normal file
44
app/projekte/coming-soon/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function ComingSoon() {
|
||||
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>Coming Soon</h1>
|
||||
</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>Hier entsteht gerade etwas Neues.</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
44
app/projekte/youtube-website/page.tsx
Normal file
44
app/projekte/youtube-website/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function YouTubeWebsite() {
|
||||
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>YouTube Website</h1>
|
||||
</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>Hier entsteht gerade etwas Neues.</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
44
app/quereinsteiger/coming-soon/page.tsx
Normal file
44
app/quereinsteiger/coming-soon/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function ComingSoon() {
|
||||
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>Coming Soon</h1>
|
||||
</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>Hier entsteht gerade etwas Neues.</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
281
app/quereinsteiger/kurse/[id]/page.tsx
Executable file → Normal file
281
app/quereinsteiger/kurse/[id]/page.tsx
Executable file → Normal file
@@ -1,198 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function KursDetail() {
|
||||
const params = useParams()
|
||||
const courseId = parseInt(params.id as string)
|
||||
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'IT-Grundlagen für Einsteiger',
|
||||
description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
|
||||
longDescription: 'Dieser Kurs ist speziell für absolute Anfänger konzipiert, die noch keine Erfahrung mit IT haben. Sie lernen Schritt für Schritt die Grundlagen kennen und werden nicht überfordert. Unser niveaubasiertes System führt Sie sicher durch alle Module.',
|
||||
duration: '4-6 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'Keine Vorkenntnisse nötig',
|
||||
certification: 'IT-Grundlagen Zertifikat',
|
||||
modules: [
|
||||
{ name: 'Computer-Grundlagen', description: 'Verstehen Sie, wie Computer funktionieren, Hardware-Komponenten und deren Zusammenwirken.' },
|
||||
{ name: 'Betriebssysteme', description: 'Lernen Sie Windows, macOS und Linux kennen und verstehen Sie deren Unterschiede.' },
|
||||
{ name: 'Netzwerke', description: 'Grundlagen der Netzwerktechnik, Internet, LAN, WLAN und Netzwerk-Sicherheit.' },
|
||||
{ name: 'IT-Sicherheit', description: 'Grundlagen der IT-Sicherheit, Passwörter, Virenschutz und sichere Nutzung des Internets.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'Verständnis der grundlegenden IT-Konzepte',
|
||||
'Sicherer Umgang mit Betriebssystemen',
|
||||
'Grundkenntnisse in Netzwerktechnik',
|
||||
'Bewusstsein für IT-Sicherheit',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Python für Anfänger',
|
||||
description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
|
||||
longDescription: 'Python ist die ideale Programmiersprache für Einsteiger. In diesem Kurs lernen Sie von Grund auf, wie man programmiert. Sie schreiben Ihre ersten Programme, arbeiten mit Daten und erstellen praktische Anwendungen.',
|
||||
duration: '6-8 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Python Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'Python-Grundlagen', description: 'Syntax, Variablen, Datentypen und erste Programme schreiben.' },
|
||||
{ name: 'Datenstrukturen', description: 'Listen, Dictionaries, Tupel und Sets verstehen und anwenden.' },
|
||||
{ name: 'Funktionen & Module', description: 'Eigene Funktionen erstellen, Module nutzen und Code organisieren.' },
|
||||
{ name: 'Praxisprojekte', description: 'Anwendung des Gelernten in realen Projekten wie einem Taschenrechner oder einem einfachen Spiel.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'Grundlegende Python-Programmierung beherrschen',
|
||||
'Eigene Programme entwickeln können',
|
||||
'Code lesen und verstehen',
|
||||
'Probleme algorithmisch lösen',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'IT-Security Grundlagen',
|
||||
description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
|
||||
longDescription: 'IT-Sicherheit wird immer wichtiger. In diesem Kurs lernen Sie die Grundlagen der Cybersecurity kennen, erkennen Bedrohungen und wissen, wie Sie sich schützen können.',
|
||||
duration: '4-6 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'IT-Security Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'Sicherheitsgrundlagen', description: 'Grundlegende Konzepte der IT-Sicherheit, Bedrohungsmodelle und Sicherheitsprinzipien.' },
|
||||
{ name: 'Bedrohungen erkennen', description: 'Phishing, Malware, Social Engineering und andere Bedrohungen erkennen und verstehen.' },
|
||||
{ name: 'Schutzmaßnahmen', description: 'Firewalls, Antivirus, Verschlüsselung und andere Schutzmechanismen.' },
|
||||
{ name: 'Incident Response', description: 'Was tun bei einem Sicherheitsvorfall? Grundlagen des Incident Managements.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'IT-Sicherheitsbedrohungen erkennen',
|
||||
'Schutzmaßnahmen verstehen und anwenden',
|
||||
'Sicherheitsbewusstsein entwickeln',
|
||||
'Grundlagen des Incident Response',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Webentwicklung für Einsteiger',
|
||||
description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
|
||||
longDescription: 'Webentwicklung ist einer der zugänglichsten Einstiege in die IT. In diesem Kurs erstellen Sie Ihre ersten Webseiten und lernen die drei Grundpfeiler der Webentwicklung kennen.',
|
||||
duration: '8-10 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Web Development Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'HTML & CSS', description: 'Struktur und Styling von Webseiten, Layouts erstellen und responsive Design.' },
|
||||
{ name: 'JavaScript Grundlagen', description: 'Programmierung im Browser, DOM-Manipulation und erste interaktive Elemente.' },
|
||||
{ name: 'Responsive Design', description: 'Webseiten für alle Geräte optimieren, Mobile-First-Ansatz.' },
|
||||
{ name: 'Projektarbeit', description: 'Erstellen Sie Ihre eigene Webseite als Abschlussprojekt.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'HTML, CSS und JavaScript beherrschen',
|
||||
'Responsive Webseiten erstellen',
|
||||
'Moderne Webentwicklung verstehen',
|
||||
'Eigene Webprojekte umsetzen',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Linux für Anfänger',
|
||||
description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
|
||||
longDescription: 'Linux ist das Rückgrat vieler IT-Systeme. In diesem Kurs lernen Sie Linux von Grund auf kennen und werden fit für die Systemadministration.',
|
||||
duration: '6-8 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Linux Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'Linux Installation', description: 'Linux installieren, verschiedene Distributionen kennenlernen und erste Schritte.' },
|
||||
{ name: 'Command Line', description: 'Terminal beherrschen, wichtige Befehle und Shell-Scripting Grundlagen.' },
|
||||
{ name: 'Systemadministration', description: 'Benutzerverwaltung, Berechtigungen, Prozesse und Dienste verwalten.' },
|
||||
{ name: 'Netzwerk-Konfiguration', description: 'Netzwerke konfigurieren, Firewall einrichten und Netzwerk-Troubleshooting.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'Linux-Systeme verstehen und bedienen',
|
||||
'Command Line sicher nutzen',
|
||||
'Grundlagen der Systemadministration',
|
||||
'Linux-Netzwerke konfigurieren',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Datenbanken Grundlagen',
|
||||
description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
|
||||
longDescription: 'Datenbanken sind das Herzstück vieler Anwendungen. In diesem Kurs lernen Sie, wie Datenbanken funktionieren und wie Sie mit SQL arbeiten.',
|
||||
duration: '5-7 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Database Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'Datenbank-Konzepte', description: 'Relationale Datenbanken, Tabellen, Beziehungen und Normalisierung verstehen.' },
|
||||
{ name: 'SQL Grundlagen', description: 'SELECT, INSERT, UPDATE, DELETE und weitere wichtige SQL-Befehle.' },
|
||||
{ name: 'Datenbankdesign', description: 'Eigene Datenbanken entwerfen, ER-Modelle erstellen und optimieren.' },
|
||||
{ name: 'Praxisprojekte', description: 'Anwendung des Gelernten in praktischen Projekten mit echten Datenbanken.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'Datenbanken verstehen und nutzen',
|
||||
'SQL sicher beherrschen',
|
||||
'Datenbanken entwerfen können',
|
||||
'Praktische Datenbankprojekte umsetzen',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'KI & Machine Learning Grundlagen',
|
||||
description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
|
||||
longDescription: 'Künstliche Intelligenz und Machine Learning sind die Zukunft der Technologie. In diesem Kurs lernen Sie die Grundlagen kennen und verstehen, wie moderne KI-Systeme funktionieren. Sie arbeiten mit praktischen Beispielen und erstellen Ihre ersten Machine-Learning-Modelle.',
|
||||
duration: '8-10 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'Python-Grundlagen empfohlen',
|
||||
certification: 'AI & ML Basics Zertifikat',
|
||||
modules: [
|
||||
{ name: 'KI-Grundlagen', description: 'Was ist Künstliche Intelligenz? Geschichte, Konzepte und aktuelle Anwendungen der KI.' },
|
||||
{ name: 'Machine Learning Basics', description: 'Supervised Learning, Unsupervised Learning, Regression und Klassifikation verstehen.' },
|
||||
{ name: 'Neuronale Netze', description: 'Einführung in neuronale Netze, Deep Learning und moderne KI-Architekturen.' },
|
||||
{ name: 'Praktische Anwendungen', description: 'Eigene Machine-Learning-Modelle erstellen, trainieren und evaluieren mit Python und TensorFlow.' },
|
||||
],
|
||||
learningGoals: [
|
||||
'Grundlagen der KI und des Machine Learning verstehen',
|
||||
'Machine-Learning-Modelle entwickeln können',
|
||||
'Neuronale Netze und Deep Learning kennenlernen',
|
||||
'Praktische KI-Anwendungen umsetzen',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const course = courses.find(c => c.id === courseId)
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
<section className="page-hero">
|
||||
<div className="container">
|
||||
<h1>Kurs nicht gefunden</h1>
|
||||
<p className="page-hero-subtitle">Der angeforderte Kurs existiert nicht.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
<Link href="/quereinsteiger/kurse" className="btn btn-primary">
|
||||
Zurück zum Kurskatalog
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
@@ -204,9 +16,9 @@ export default function KursDetail() {
|
||||
transition={{ duration: 0.8 }}
|
||||
className="container"
|
||||
>
|
||||
<h1>{course.title}</h1>
|
||||
<h1>Kursdetails</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
{course.description}
|
||||
Hier entsteht gerade etwas Neues.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
@@ -219,93 +31,11 @@ export default function KursDetail() {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ textAlign: 'left', maxWidth: '100%' }}
|
||||
>
|
||||
<h2>Kursbeschreibung</h2>
|
||||
<p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '40px' }}>
|
||||
{course.longDescription}
|
||||
<h2>Coming Soon</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '40px' }}>
|
||||
<div className="feature-card" style={{ textAlign: 'left' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Dauer</h3>
|
||||
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.duration}</p>
|
||||
</div>
|
||||
<div className="feature-card" style={{ textAlign: 'left' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Niveau</h3>
|
||||
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.level}</p>
|
||||
</div>
|
||||
<div className="feature-card" style={{ textAlign: 'left' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Voraussetzungen</h3>
|
||||
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.prerequisites}</p>
|
||||
</div>
|
||||
<div className="feature-card" style={{ textAlign: 'left' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Zertifizierung</h3>
|
||||
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.certification}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Lernziele</h2>
|
||||
<ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', marginBottom: '40px', color: 'var(--color-text-secondary)' }}>
|
||||
{course.learningGoals.map((goal, i) => (
|
||||
<li key={i} style={{ marginBottom: '10px' }}>{goal}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Modulplan</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '40px' }}>
|
||||
{course.modules.map((module, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: i * 0.1 }}
|
||||
className="feature-card"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '10px' }}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--color-accent)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontWeight: '600',
|
||||
fontSize: '18px',
|
||||
}}>
|
||||
{i + 1}
|
||||
</div>
|
||||
<h3 style={{ fontSize: '24px', margin: 0 }}>{module.name}</h3>
|
||||
</div>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginLeft: '55px' }}>
|
||||
{module.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</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>Bereit für diesen Kurs?</h2>
|
||||
<p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
|
||||
<div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt anmelden
|
||||
</Link>
|
||||
<Link href="/quereinsteiger/kurse" className="btn btn-secondary">
|
||||
Zurück zum Kurskatalog
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -314,4 +44,3 @@ export default function KursDetail() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
208
app/quereinsteiger/kurse/page.tsx
Executable file → Normal file
208
app/quereinsteiger/kurse/page.tsx
Executable file → Normal file
@@ -1,95 +1,10 @@
|
||||
'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 Kurse() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [selectedLevel, setSelectedLevel] = useState<string>('all')
|
||||
|
||||
const courses = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'IT-Grundlagen für Einsteiger',
|
||||
description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
|
||||
duration: '4-6 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'Keine Vorkenntnisse nötig',
|
||||
certification: 'IT-Grundlagen Zertifikat',
|
||||
modules: ['Computer-Grundlagen', 'Betriebssysteme', 'Netzwerke', 'IT-Sicherheit'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Python für Anfänger',
|
||||
description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
|
||||
duration: '6-8 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Python Basics Zertifikat',
|
||||
modules: ['Python-Grundlagen', 'Datenstrukturen', 'Funktionen & Module', 'Praxisprojekte'],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'IT-Security Grundlagen',
|
||||
description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
|
||||
duration: '4-6 Wochen',
|
||||
level: 'Anfänger',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'IT-Security Basics Zertifikat',
|
||||
modules: ['Sicherheitsgrundlagen', 'Bedrohungen erkennen', 'Schutzmaßnahmen', 'Incident Response'],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Webentwicklung für Einsteiger',
|
||||
description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
|
||||
duration: '8-10 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Web Development Basics Zertifikat',
|
||||
modules: ['HTML & CSS', 'JavaScript Grundlagen', 'Responsive Design', 'Projektarbeit'],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Linux für Anfänger',
|
||||
description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
|
||||
duration: '6-8 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Linux Basics Zertifikat',
|
||||
modules: ['Linux Installation', 'Command Line', 'Systemadministration', 'Netzwerk-Konfiguration'],
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Datenbanken Grundlagen',
|
||||
description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
|
||||
duration: '5-7 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'IT-Grundlagen empfohlen',
|
||||
certification: 'Database Basics Zertifikat',
|
||||
modules: ['Datenbank-Konzepte', 'SQL Grundlagen', 'Datenbankdesign', 'Praxisprojekte'],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'KI & Machine Learning Grundlagen',
|
||||
description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
|
||||
duration: '8-10 Wochen',
|
||||
level: 'Anfänger bis Fortgeschritten',
|
||||
prerequisites: 'Python-Grundlagen empfohlen',
|
||||
certification: 'AI & ML Basics Zertifikat',
|
||||
modules: ['KI-Grundlagen', 'Machine Learning Basics', 'Neuronale Netze', 'Praktische Anwendungen'],
|
||||
},
|
||||
]
|
||||
|
||||
const filteredCourses = courses.filter(course => {
|
||||
const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
course.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
const matchesLevel = selectedLevel === 'all' || course.level.toLowerCase().includes(selectedLevel.toLowerCase())
|
||||
return matchesSearch && matchesLevel
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
@@ -103,136 +18,24 @@ export default function Kurse() {
|
||||
>
|
||||
<h1>Kurskatalog</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Finden Sie den passenden Kurs für Ihren Einstieg in die IT
|
||||
Hier entsteht gerade etwas Neues.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
{/* Search and Filter */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
style={{ marginBottom: '60px' }}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Kurse durchsuchen..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{
|
||||
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)',
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
onClick={() => setSelectedLevel('all')}
|
||||
className={selectedLevel === 'all' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedLevel('anfänger')}
|
||||
className={selectedLevel === 'anfänger' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||||
>
|
||||
Anfänger
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedLevel('fortgeschritten')}
|
||||
className={selectedLevel === 'fortgeschritten' ? 'btn btn-primary' : 'btn btn-secondary'}
|
||||
style={{ fontSize: '14px', padding: '8px 16px' }}
|
||||
>
|
||||
Fortgeschritten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Course List */}
|
||||
<div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px' }}>
|
||||
{filteredCourses.map((course, index) => (
|
||||
<motion.div
|
||||
key={course.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-large"
|
||||
style={{ textAlign: 'left' }}
|
||||
>
|
||||
<h2 style={{ fontSize: '32px', marginBottom: '15px' }}>{course.title}</h2>
|
||||
<p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '25px', color: 'var(--color-text-secondary)' }}>
|
||||
{course.description}
|
||||
</p>
|
||||
|
||||
<div style={{ marginBottom: '25px' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Kursdetails</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
|
||||
<div>
|
||||
<strong>Dauer:</strong> {course.duration}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Niveau:</strong> {course.level}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Voraussetzungen:</strong> {course.prerequisites}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Zertifizierung:</strong> {course.certification}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '25px' }}>
|
||||
<h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Modulplan</h3>
|
||||
<ul style={{ fontSize: '15px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
|
||||
{course.modules.map((module, i) => (
|
||||
<li key={i} style={{ marginBottom: '8px' }}>{module}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Link href={`/quereinsteiger/kurse/${course.id}`} className="btn btn-primary" style={{ display: 'inline-block' }}>
|
||||
Mehr erfahren
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredCourses.length === 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="content-block"
|
||||
>
|
||||
<p>Keine Kurse gefunden. Bitte passen Sie Ihre Suchkriterien an.</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>Nicht den passenden Kurs gefunden?</h2>
|
||||
<p>Kontaktieren Sie uns und wir finden gemeinsam den richtigen Weg für Sie</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Kontakt aufnehmen
|
||||
</Link>
|
||||
<h2>Coming Soon</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -241,4 +44,3 @@ export default function Kurse() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
86
app/quereinsteiger/lernpfad-finder/page.tsx
Executable file → Normal file
86
app/quereinsteiger/lernpfad-finder/page.tsx
Executable file → Normal file
@@ -10,6 +10,12 @@ 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 = [
|
||||
{
|
||||
@@ -204,23 +210,91 @@ export default function LernpfadFinder() {
|
||||
</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 mehr über diesen Kurs erfahren oder haben Sie Fragen? Kontaktieren Sie uns!
|
||||
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' }}>
|
||||
<Link href="/quereinsteiger/kurse" className="btn btn-primary">
|
||||
<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>
|
||||
<Link href="/kontakt" className="btn btn-secondary">
|
||||
Kontakt aufnehmen
|
||||
</Link>
|
||||
<button
|
||||
onClick={resetQuiz}
|
||||
className="btn btn-secondary"
|
||||
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>
|
||||
)}
|
||||
|
||||
1
app/quereinsteiger/page.tsx
Executable file → Normal file
1
app/quereinsteiger/page.tsx
Executable file → Normal file
@@ -135,7 +135,6 @@ export default function Quereinsteiger() {
|
||||
className="feature-card-large"
|
||||
style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }}
|
||||
>
|
||||
<div className="feature-icon" style={{ fontSize: '64px' }}>🎯</div>
|
||||
<h3>Lernpfad-Finder</h3>
|
||||
<p style={{ marginBottom: '30px' }}>
|
||||
Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT.
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
'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 Testimonials() {
|
||||
const testimonials = [
|
||||
{
|
||||
type: 'unternehmen',
|
||||
quote: 'Die IT-Analyse von doing-it.de hat uns geholfen, Schwachstellen zu identifizieren, die wir vorher nicht gesehen haben. Die Schulungen waren praxisnah und unsere Mitarbeiter konnten das Gelernte sofort anwenden.',
|
||||
author: 'Max Mustermann',
|
||||
position: 'IT-Leiter',
|
||||
company: 'Musterfirma GmbH',
|
||||
image: '👨💼',
|
||||
},
|
||||
{
|
||||
type: 'unternehmen',
|
||||
quote: 'Durch die maßgeschneiderten Schulungen haben wir interne Experten aufgebaut und konnten unsere externen IT-Kosten um 40% reduzieren. Eine lohnende Investition!',
|
||||
author: 'Anna Schmidt',
|
||||
position: 'Geschäftsführerin',
|
||||
company: 'TechSolutions AG',
|
||||
image: '👩💼',
|
||||
},
|
||||
{
|
||||
type: 'quereinsteiger',
|
||||
quote: 'Ohne Vorkenntnisse habe ich mit doing-it.de meinen Einstieg in die IT geschafft. Das niveaubasierte System hat mich nicht überfordert und die Experten waren immer da, wenn ich Fragen hatte.',
|
||||
author: 'Thomas Weber',
|
||||
position: 'Junior IT-Support',
|
||||
company: 'Digital Solutions',
|
||||
image: '👨💻',
|
||||
},
|
||||
{
|
||||
type: 'quereinsteiger',
|
||||
quote: 'Die Zertifizierung hat mir den Karriere-Boost gegeben, den ich brauchte. Heute arbeite ich als IT-Sicherheitsspezialist – etwas, das vor einem Jahr noch unvorstellbar war.',
|
||||
author: 'Lisa Müller',
|
||||
position: 'IT-Sicherheitsspezialistin',
|
||||
company: 'SecureIT GmbH',
|
||||
image: '👩💻',
|
||||
},
|
||||
]
|
||||
|
||||
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>Kundenstimmen</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Was unsere Kunden über uns sagen
|
||||
</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>Erfolgreiche Projekte, zufriedene Kunden</h2>
|
||||
<p>
|
||||
Unsere Kunden sind unser größter Erfolg. Lesen Sie, was Unternehmen und
|
||||
Quereinsteiger über ihre Erfahrungen mit doing-it.de berichten.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px', marginTop: '60px' }}>
|
||||
{testimonials.map((testimonial, 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' }}
|
||||
>
|
||||
<div style={{ fontSize: '48px', marginBottom: '20px' }}>
|
||||
{testimonial.image}
|
||||
</div>
|
||||
<p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '30px', fontStyle: 'italic' }}>
|
||||
“{testimonial.quote}”
|
||||
</p>
|
||||
<div>
|
||||
<h3 style={{ marginBottom: '5px' }}>{testimonial.author}</h3>
|
||||
<p style={{ color: 'var(--color-text-secondary)', fontSize: '17px' }}>
|
||||
{testimonial.position} bei {testimonial.company}
|
||||
</p>
|
||||
</div>
|
||||
</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>Werden Sie Teil unserer Erfolgsgeschichte</h2>
|
||||
<p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
Jetzt Kontakt aufnehmen
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
188
app/ueber-uns/page.tsx
Executable file → Normal file
188
app/ueber-uns/page.tsx
Executable file → Normal file
@@ -2,6 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
@@ -10,7 +11,6 @@ export default function UeberUns() {
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="page-hero">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -20,12 +20,11 @@ export default function UeberUns() {
|
||||
>
|
||||
<h1>Über uns</h1>
|
||||
<p className="page-hero-subtitle">
|
||||
Ihre Experten für IT-Weiterbildung
|
||||
IT für alle verständlich machen
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
@@ -37,108 +36,7 @@ export default function UeberUns() {
|
||||
>
|
||||
<h2>Unsere Mission</h2>
|
||||
<p>
|
||||
doing-it.de wurde mit dem Ziel gegründet, IT-Weiterbildung für jeden zugänglich zu machen.
|
||||
Wir glauben daran, dass jeder – unabhängig von Vorkenntnissen – die Möglichkeit haben sollte,
|
||||
sich in der IT weiterzubilden und neue Karrierewege einzuschlagen.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
>
|
||||
<h2>Was uns auszeichnet</h2>
|
||||
<p>
|
||||
Unser Ansatz ist individuell, praxisnah und ergebnisorientiert. Wir schulen nicht nur
|
||||
theoretisch, sondern direkt an der realen IT-Infrastruktur. So wird Wissen sofort
|
||||
anwendbar und nachhaltig verankert.
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon">🎯</div>
|
||||
<h3>Individuell</h3>
|
||||
<p>Jede Schulung wird auf Ihre spezifischen Bedürfnisse 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.2 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">💼</div>
|
||||
<h3>Praxisnah</h3>
|
||||
<p>Lernen direkt an Ihrer eigenen 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.3 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">👥</div>
|
||||
<h3>Experten-Team</h3>
|
||||
<p>Erfahrene IT-Profis mit jahrelanger Branchenerfahrung</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>Niveaubasiert</h3>
|
||||
<p>Stufenweise Freischaltung für optimalen Lernerfolg</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>Unser Team</h2>
|
||||
<p>
|
||||
Unsere Dozenten, Trainer und Experten bringen jahrelange Erfahrung in der IT-Branche mit.
|
||||
Lernen Sie die Menschen kennen, die Sie auf Ihrem Weg begleiten.
|
||||
</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"
|
||||
>
|
||||
<div className="feature-icon" style={{ fontSize: '64px' }}>👨💼</div>
|
||||
<h3>Dr. Michael Schneider</h3>
|
||||
<p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
|
||||
IT-Sicherheitsexperte
|
||||
</p>
|
||||
<p>
|
||||
15+ Jahre Erfahrung in IT-Sicherheit und Compliance. Zertifizierter CISSP und
|
||||
Experte für DSGVO-Implementierung.
|
||||
Wir möchten IT für alle verständlich machen. Unser Fokus liegt auf praktischen, verständlichen und realistischen Schulungsangeboten für Quereinsteiger und Unternehmen. Dabei setzen wir auf Erfahrung, Ehrlichkeit und moderne Lernmethoden.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -147,56 +45,37 @@ export default function UeberUns() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card"
|
||||
style={{
|
||||
maxWidth: '800px',
|
||||
margin: '80px auto',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<div className="feature-icon" style={{ fontSize: '64px' }}>👩💻</div>
|
||||
<h3>Sarah Müller</h3>
|
||||
<p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
|
||||
Cloud-Architektin
|
||||
</p>
|
||||
<p>
|
||||
Spezialistin für Cloud-Migration und moderne IT-Infrastrukturen. AWS und Azure
|
||||
zertifiziert mit 10+ Jahren Projekterfahrung.
|
||||
<Image
|
||||
src="/motorrad.png"
|
||||
alt="Motorradfahren"
|
||||
width={800}
|
||||
height={600}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
display: 'block',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}}
|
||||
/>
|
||||
<p style={{
|
||||
marginTop: '30px',
|
||||
fontSize: '19px',
|
||||
color: 'var(--color-text-secondary)',
|
||||
lineHeight: '1.7'
|
||||
}}>
|
||||
Neben der IT teilen wir beide die Leidenschaft für das Motorradfahren.
|
||||
</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" style={{ fontSize: '64px' }}>👨💻</div>
|
||||
<h3>Thomas Weber</h3>
|
||||
<p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
|
||||
Systemadministrator & Trainer
|
||||
</p>
|
||||
<p>
|
||||
Experte für Linux, Windows-Server und Netzwerktechnik. Bringt komplexe Themen
|
||||
verständlich und praxisnah rüber.
|
||||
</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" style={{ fontSize: '64px' }}>👩🏫</div>
|
||||
<h3>Lisa Schmidt</h3>
|
||||
<p style={{ color: 'var(--color-accent)', marginBottom: '15px' }}>
|
||||
Pädagogin & IT-Trainerin
|
||||
</p>
|
||||
<p>
|
||||
Spezialisiert auf die Schulung von Quereinsteigern. Entwickelt Lernkonzepte, die
|
||||
auch ohne Vorkenntnisse zum Erfolg führen.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -204,9 +83,9 @@ export default function UeberUns() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="cta-section"
|
||||
>
|
||||
<h2>Lernen Sie uns kennen</h2>
|
||||
<p>Kontaktieren Sie uns und erfahren Sie mehr über unsere Angebote</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
<h2>Kontaktieren Sie uns</h2>
|
||||
<p>Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren?</p>
|
||||
<Link href="/kontakt" className="btn btn-primary btn-large">
|
||||
Jetzt Kontakt aufnehmen
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -217,4 +96,3 @@ export default function UeberUns() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
44
app/unternehmen/coming-soon/page.tsx
Normal file
44
app/unternehmen/coming-soon/page.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
export default function ComingSoon() {
|
||||
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>Coming Soon</h1>
|
||||
</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>Hier entsteht gerade etwas Neues.</h2>
|
||||
<p>
|
||||
Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
29
app/unternehmen/it-infrastrukturanalyse/page.tsx
Executable file → Normal file
29
app/unternehmen/it-infrastrukturanalyse/page.tsx
Executable file → Normal file
@@ -2,6 +2,8 @@
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { FaSearch, FaShieldAlt, FaChartBar, FaMapMarkerAlt, FaComments, FaNetworkWired, FaFileAlt } from 'react-icons/fa'
|
||||
import AnimatedIcon from '@/components/AnimatedIcon'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
@@ -48,7 +50,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">🔍</div>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaSearch size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Infrastruktur-Erfassung</h3>
|
||||
<p>
|
||||
Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke,
|
||||
@@ -64,7 +68,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">🛡️</div>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaShieldAlt size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Sicherheitsanalyse</h3>
|
||||
<p>
|
||||
Wir identifizieren Sicherheitslücken, veraltete Systeme und
|
||||
@@ -80,7 +86,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
>
|
||||
<div className="feature-icon">📊</div>
|
||||
<AnimatedIcon delay={0.3}>
|
||||
<FaChartBar size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Schulungsbedarfs-Analyse</h3>
|
||||
<p>
|
||||
Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche
|
||||
@@ -112,6 +120,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaMapMarkerAlt size={28} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Vor-Ort-Begehungen</h3>
|
||||
<p>Persönliche Inspektion Ihrer IT-Infrastruktur</p>
|
||||
</motion.div>
|
||||
@@ -123,6 +134,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaComments size={28} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Interviews mit Mitarbeitern</h3>
|
||||
<p>Gespräche zur Ermittlung des Wissensstands</p>
|
||||
</motion.div>
|
||||
@@ -134,6 +148,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<AnimatedIcon delay={0.3}>
|
||||
<FaNetworkWired size={28} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Technische Scans</h3>
|
||||
<p>Automatisierte Analyse von Systemen und Netzwerken</p>
|
||||
</motion.div>
|
||||
@@ -145,6 +162,9 @@ export default function ITInfrastrukturanalyse() {
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<AnimatedIcon delay={0.4}>
|
||||
<FaFileAlt size={28} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Dokumentenanalyse</h3>
|
||||
<p>Auswertung bestehender Dokumentationen</p>
|
||||
</motion.div>
|
||||
@@ -222,7 +242,7 @@ export default function ITInfrastrukturanalyse() {
|
||||
>
|
||||
<h2>Starten Sie mit der Analyse</h2>
|
||||
<p>Kontaktieren Sie uns für eine unverbindliche Beratung</p>
|
||||
<Link href="/kontakt" className="btn btn-primary">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-large">
|
||||
IT-Analyse anfordern
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -233,4 +253,3 @@ export default function ITInfrastrukturanalyse() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
141
app/unternehmen/page.tsx
Executable file → Normal file
141
app/unternehmen/page.tsx
Executable file → Normal file
@@ -2,6 +2,8 @@
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import Link from 'next/link'
|
||||
import { FaSearch, FaServer, FaUserTie, FaShieldAlt, FaDollarSign, FaBolt, FaLock, FaChartLine, FaHandshake, FaClipboardCheck } from 'react-icons/fa'
|
||||
import AnimatedIcon from '@/components/AnimatedIcon'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
@@ -10,7 +12,6 @@ export default function Unternehmen() {
|
||||
<>
|
||||
<Navigation />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="page-hero">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -25,7 +26,6 @@ export default function Unternehmen() {
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="page-content">
|
||||
<div className="container">
|
||||
<motion.div
|
||||
@@ -41,13 +41,13 @@ export default function Unternehmen() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px', marginBottom: '100px' }}>
|
||||
<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"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-number">1</div>
|
||||
<h3>Analyse Ihrer IT</h3>
|
||||
@@ -64,7 +64,7 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-number">2</div>
|
||||
<h3>Maßgeschneiderte Schulungskonzepte</h3>
|
||||
@@ -80,7 +80,7 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-number">3</div>
|
||||
<h3>Aufbau interner Experten</h3>
|
||||
@@ -98,6 +98,7 @@ export default function Unternehmen() {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="content-block"
|
||||
style={{ marginTop: '80px' }}
|
||||
>
|
||||
<h2>Ihre Vorteile</h2>
|
||||
<p>
|
||||
@@ -112,9 +113,11 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🔍</div>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaSearch size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>IT-Analyse</h3>
|
||||
<p>
|
||||
Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren
|
||||
@@ -127,9 +130,11 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🏢</div>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaServer size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Schulung auf Ihrer Infrastruktur</h3>
|
||||
<p>
|
||||
Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur.
|
||||
@@ -142,9 +147,11 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">👨💼</div>
|
||||
<AnimatedIcon delay={0.3}>
|
||||
<FaUserTie size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Interne Experten aufbauen</h3>
|
||||
<p>
|
||||
Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie
|
||||
@@ -157,37 +164,28 @@ export default function Unternehmen() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="feature-card-large"
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">🎓</div>
|
||||
<AnimatedIcon delay={0.4}>
|
||||
<FaShieldAlt size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<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 }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">💰</div>
|
||||
<AnimatedIcon delay={0.5}>
|
||||
<FaDollarSign size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<h3>Kosteneinsparung</h3>
|
||||
<p>
|
||||
Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte
|
||||
@@ -199,76 +197,18 @@ export default function Unternehmen() {
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">⚡</div>
|
||||
<AnimatedIcon delay={0.6}>
|
||||
<FaBolt size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<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
|
||||
@@ -285,7 +225,7 @@ export default function Unternehmen() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
|
||||
<div className="features-grid">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -293,10 +233,12 @@ export default function Unternehmen() {
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">📋</div>
|
||||
<AnimatedIcon delay={0.1}>
|
||||
<FaClipboardCheck size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<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' }}>
|
||||
<Link href="/unternehmen/tools/it-checkliste" className="btn btn-primary" style={{ marginTop: '20px', display: 'inline-block' }}>
|
||||
Tool öffnen
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -308,10 +250,12 @@ export default function Unternehmen() {
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="feature-card"
|
||||
>
|
||||
<div className="feature-icon">📊</div>
|
||||
<AnimatedIcon delay={0.2}>
|
||||
<FaCalculator size={32} color="var(--color-red)" />
|
||||
</AnimatedIcon>
|
||||
<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' }}>
|
||||
<Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-primary" style={{ marginTop: '20px', display: 'inline-block' }}>
|
||||
Tool öffnen
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -326,9 +270,9 @@ export default function Unternehmen() {
|
||||
>
|
||||
<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">
|
||||
<Link href="/kontakt" className="btn btn-primary btn-large">
|
||||
IT-Analyse anfordern
|
||||
</a>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -337,4 +281,3 @@ export default function Unternehmen() {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
0
app/unternehmen/schulungsthemen/page.tsx
Executable file → Normal file
0
app/unternehmen/schulungsthemen/page.tsx
Executable file → Normal file
0
app/unternehmen/tools/it-checkliste/page.tsx
Executable file → Normal file
0
app/unternehmen/tools/it-checkliste/page.tsx
Executable file → Normal file
0
app/unternehmen/tools/schulungsbedarf/page.tsx
Executable file → Normal file
0
app/unternehmen/tools/schulungsbedarf/page.tsx
Executable file → Normal file
0
app/wiki/page.tsx
Executable file → Normal file
0
app/wiki/page.tsx
Executable file → Normal file
25
components/AnimatedIcon.tsx
Normal file
25
components/AnimatedIcon.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface AnimatedIconProps {
|
||||
children: ReactNode
|
||||
delay?: number
|
||||
}
|
||||
|
||||
export default function AnimatedIcon({ children, delay = 0 }: AnimatedIconProps) {
|
||||
return (
|
||||
<motion.div
|
||||
className="animation-icon"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
41
components/Footer.tsx
Executable file → Normal file
41
components/Footer.tsx
Executable file → Normal file
@@ -1,4 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
import { FaInstagram, FaYoutube, FaTiktok } from 'react-icons/fa'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
@@ -8,38 +9,57 @@ export default function Footer() {
|
||||
<div className="footer-section">
|
||||
<h3>doing-it</h3>
|
||||
<p>IT Weiterbildung und Schulungen</p>
|
||||
<p style={{ fontSize: '14px', color: 'var(--color-text-secondary)', marginTop: '15px' }}>
|
||||
Doing-IT – ein Projekt von{' '}
|
||||
<a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
|
||||
matzefixit
|
||||
</a>
|
||||
{' '}&{' '}
|
||||
<a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
|
||||
hoerter-tech
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Kontakt</h4>
|
||||
<a href="mailto:info@doing-it.de">info@doing-it.de</a>
|
||||
<Link href="/kontakt" style={{ display: 'block', marginTop: '10px' }}>
|
||||
Kontaktformular
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Social Media</h4>
|
||||
<div className="footer-social">
|
||||
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
|
||||
LinkedIn
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaInstagram style={{ fontSize: '18px' }} /> Instagram
|
||||
</a>
|
||||
<a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing">
|
||||
Xing
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" aria-label="YouTube" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaYoutube style={{ fontSize: '18px' }} /> YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="TikTok" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaTiktok style={{ fontSize: '18px' }} /> TikTok
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Navigation</h4>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/unternehmen">Für Unternehmen</Link>
|
||||
<Link href="/quereinsteiger">Für Quereinsteiger</Link>
|
||||
<Link href="/ueber-uns">Über uns</Link>
|
||||
<Link href="/kontakt">Kontakt</Link>
|
||||
<Link href="/">Startseite</Link>
|
||||
<Link href="/quereinsteiger">Quereinsteiger</Link>
|
||||
<Link href="/unternehmen">Unternehmen</Link>
|
||||
<Link href="/quereinsteiger/kurse">Kurskatalog</Link>
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer">
|
||||
Wiki
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Rechtliches</h4>
|
||||
<Link href="/impressum">Impressum</Link>
|
||||
<Link href="/datenschutz">Datenschutzerklärung</Link>
|
||||
<Link href="/agb">AGB</Link>
|
||||
<Link href="/kontakt">Kontakt</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,4 +70,3 @@ export default function Footer() {
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
292
components/Navigation.tsx
Executable file → Normal file
292
components/Navigation.tsx
Executable file → Normal file
@@ -6,6 +6,11 @@ import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
export default function Navigation() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null)
|
||||
|
||||
const toggleDropdown = (dropdown: string) => {
|
||||
setOpenDropdown(openDropdown === dropdown ? null : dropdown)
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="nav">
|
||||
@@ -17,26 +22,171 @@ export default function Navigation() {
|
||||
{/* Desktop Menu */}
|
||||
<div className="nav-menu">
|
||||
<Link href="/" className="nav-link">
|
||||
Home
|
||||
Startseite
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="nav-link">
|
||||
Für Unternehmen
|
||||
|
||||
{/* Quereinsteiger Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('quereinsteiger')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Quereinsteiger
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'quereinsteiger' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="nav-dropdown-link">
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
<Link href="/quereinsteiger" className="nav-link">
|
||||
Für Quereinsteiger
|
||||
<Link href="/unternehmen/tools/it-checkliste" className="nav-dropdown-link">
|
||||
Checkliste
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-link">
|
||||
Über uns
|
||||
<Link href="/quereinsteiger/coming-soon" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Unternehmen Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('unternehmen')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Unternehmen
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'unternehmen' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/unternehmen/it-infrastrukturanalyse" className="nav-dropdown-link">
|
||||
IT-Analyse
|
||||
</Link>
|
||||
<Link href="/unternehmen/schulungsthemen" className="nav-dropdown-link">
|
||||
Mitarbeiter-Schulungen
|
||||
</Link>
|
||||
<Link href="/unternehmen/tools/schulungsbedarf" className="nav-dropdown-link">
|
||||
Bedarfsrechner
|
||||
</Link>
|
||||
<Link href="/unternehmen/coming-soon" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<Link href="/quereinsteiger/kurse" className="nav-link">
|
||||
Kurskatalog
|
||||
</Link>
|
||||
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link">
|
||||
Wiki
|
||||
</a>
|
||||
<Link href="/kontakt" className="nav-link">
|
||||
|
||||
{/* Projekte Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('projekte')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Projekte
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'projekte' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/projekte/youtube-website" className="nav-dropdown-link">
|
||||
YouTube Website
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon-2" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Socials Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('socials')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Socials
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'socials' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
Instagram
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
TikTok
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Kontakt Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('kontakt')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Kontakt
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'kontakt' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/kontakt" className="nav-dropdown-link">
|
||||
Kontakt
|
||||
</Link>
|
||||
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
|
||||
<span aria-label="LinkedIn">🔗</span>
|
||||
</a>
|
||||
<Link href="/ueber-uns" className="nav-dropdown-link">
|
||||
Über uns
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
@@ -61,27 +211,129 @@ export default function Navigation() {
|
||||
className="nav-mobile"
|
||||
>
|
||||
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Home
|
||||
Startseite
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Für Unternehmen
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('quereinsteiger-mobile')}
|
||||
>
|
||||
Quereinsteiger {openDropdown === 'quereinsteiger-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'quereinsteiger-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
<Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Für Quereinsteiger
|
||||
<Link href="/unternehmen/tools/it-checkliste" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Checkliste
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Über uns
|
||||
<Link href="/quereinsteiger/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('unternehmen-mobile')}
|
||||
>
|
||||
Unternehmen {openDropdown === 'unternehmen-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'unternehmen-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/unternehmen/it-infrastrukturanalyse" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
IT-Analyse
|
||||
</Link>
|
||||
<Link href="/unternehmen/schulungsthemen" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Mitarbeiter-Schulungen
|
||||
</Link>
|
||||
<Link href="/unternehmen/tools/schulungsbedarf" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Bedarfsrechner
|
||||
</Link>
|
||||
<Link href="/unternehmen/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link href="/quereinsteiger/kurse" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Kurskatalog
|
||||
</Link>
|
||||
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Wiki
|
||||
</a>
|
||||
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('projekte-mobile')}
|
||||
>
|
||||
Projekte {openDropdown === 'projekte-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'projekte-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/projekte/youtube-website" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
YouTube Website
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon-2" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('socials-mobile')}
|
||||
>
|
||||
Socials {openDropdown === 'socials-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'socials-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Instagram
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
TikTok
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('kontakt-mobile')}
|
||||
>
|
||||
Kontakt {openDropdown === 'kontakt-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'kontakt-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/kontakt" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Kontakt
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Über uns
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
0
docker-compose.yml
Executable file → Normal file
0
docker-compose.yml
Executable file → Normal file
3
next.config.js
Executable file → Normal file
3
next.config.js
Executable file → Normal file
@@ -2,6 +2,9 @@
|
||||
const nextConfig = {
|
||||
output: 'standalone',
|
||||
reactStrictMode: true,
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
3
package.json
Executable file → Normal file
3
package.json
Executable file → Normal file
@@ -12,7 +12,8 @@
|
||||
"next": "14.0.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"framer-motion": "^10.16.16"
|
||||
"framer-motion": "^10.16.16",
|
||||
"react-icons": "^4.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.10.6",
|
||||
|
||||
BIN
public/motorrad.png
Normal file
BIN
public/motorrad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
public/site.png
Normal file
BIN
public/site.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -1,4 +0,0 @@
|
||||
node_modules
|
||||
.next
|
||||
.git
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Install git (needed for cloning Quartz)
|
||||
RUN apk add --no-cache git
|
||||
|
||||
# Update npm to latest version
|
||||
RUN npm install -g npm@latest
|
||||
|
||||
# Clone Quartz repository
|
||||
RUN git clone https://github.com/jackyzha0/quartz.git quartz-repo
|
||||
|
||||
# Move into Quartz directory
|
||||
WORKDIR /app/quartz-repo
|
||||
|
||||
# Install Quartz dependencies
|
||||
RUN npm install
|
||||
|
||||
# Install serve for static file serving
|
||||
RUN npm install -g serve
|
||||
|
||||
# Create directories for content and output
|
||||
RUN mkdir -p /app/content /app/public
|
||||
|
||||
# Copy entrypoint script
|
||||
COPY entrypoint.sh /app/entrypoint.sh
|
||||
RUN chmod +x /app/entrypoint.sh
|
||||
|
||||
# Expose port
|
||||
EXPOSE 8080
|
||||
|
||||
# Set working directory back to app root
|
||||
WORKDIR /app
|
||||
|
||||
CMD ["/app/entrypoint.sh"]
|
||||
@@ -1,165 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
echo "Starting Quartz Wiki..."
|
||||
|
||||
# Check if content directory has files
|
||||
if [ -z "$(ls -A /app/content 2>/dev/null)" ]; then
|
||||
echo "Warning: Content directory is empty!"
|
||||
# Create a default index page
|
||||
mkdir -p /app/content
|
||||
echo "# Wiki Home
|
||||
|
||||
Willkommen im doing-it Wiki!
|
||||
|
||||
Dieses Wiki wird mit Obsidian Quartz betrieben.
|
||||
" > /app/content/index.md
|
||||
fi
|
||||
|
||||
# Copy content to Quartz content directory
|
||||
echo "Copying vault content to Quartz..."
|
||||
mkdir -p /app/quartz-repo/content
|
||||
cp -r /app/content/* /app/quartz-repo/content/ 2>/dev/null || true
|
||||
|
||||
# Build Quartz
|
||||
echo "Building Quartz site..."
|
||||
cd /app/quartz-repo
|
||||
|
||||
# Check if Quartz CLI exists and try different methods
|
||||
QUARTZ_CLI="/app/quartz-repo/node_modules/@jackyzha0/quartz/cli/index.js"
|
||||
QUARTZ_BUILD_SUCCESS=false
|
||||
|
||||
# Method 1: Direct node call to Quartz CLI (avoids npx BusyBox issue)
|
||||
if [ -f "$QUARTZ_CLI" ]; then
|
||||
echo "Trying direct node call to Quartz CLI..."
|
||||
if node "$QUARTZ_CLI" build --contentDir ./content --outputDir /app/public 2>&1; then
|
||||
QUARTZ_BUILD_SUCCESS=true
|
||||
echo "Quartz build successful!"
|
||||
fi
|
||||
fi
|
||||
|
||||
# Method 2: Try using npm run script
|
||||
if [ "$QUARTZ_BUILD_SUCCESS" = false ] && [ -f "package.json" ]; then
|
||||
echo "Trying npm run build..."
|
||||
if npm run build 2>&1; then
|
||||
QUARTZ_BUILD_SUCCESS=true
|
||||
echo "Quartz build successful via npm!"
|
||||
# Copy output if it went to default location
|
||||
if [ -d "./public" ] && [ -n "$(ls -A ./public 2>/dev/null)" ]; then
|
||||
cp -r ./public/* /app/public/ 2>/dev/null || true
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
|
||||
# If Quartz build succeeded, copy output
|
||||
if [ "$QUARTZ_BUILD_SUCCESS" = true ]; then
|
||||
if [ -d "/app/quartz-repo/public" ] && [ -n "$(ls -A /app/quartz-repo/public 2>/dev/null)" ]; then
|
||||
echo "Copying Quartz output to public directory..."
|
||||
cp -r /app/quartz-repo/public/* /app/public/ 2>/dev/null || true
|
||||
fi
|
||||
fi
|
||||
|
||||
# If build failed, create fallback static site
|
||||
if [ "$QUARTZ_BUILD_SUCCESS" = false ]; then
|
||||
echo "Quartz build failed, creating fallback static site..."
|
||||
mkdir -p /app/public
|
||||
cd /app/content
|
||||
|
||||
# Create index.html
|
||||
cat > /app/public/index.html << 'EOFHTML'
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>doing-it Wiki</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
||||
background: #161618;
|
||||
color: #ebebec;
|
||||
line-height: 1.6;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #ebebec;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin: 40px 0 20px;
|
||||
color: #ebebec;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
a {
|
||||
color: #ff3b30;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
a:hover {
|
||||
color: #ff453a;
|
||||
}
|
||||
.intro {
|
||||
font-size: 20px;
|
||||
color: #d4d4d4;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>doing-it Wiki</h1>
|
||||
<p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
|
||||
<h2>Inhalte</h2>
|
||||
<ul id="content-list">
|
||||
EOFHTML
|
||||
|
||||
# Find all markdown files and create links
|
||||
if [ -n "$(find /app/content -name "*.md" -type f 2>/dev/null)" ]; then
|
||||
find /app/content -name "*.md" -type f | while read file; do
|
||||
title=$(basename "$file" .md)
|
||||
relative_path=$(echo "$file" | sed "s|/app/content/||")
|
||||
echo " <li><a href=\"/$relative_path\">$title</a></li>" >> /app/public/index.html
|
||||
done
|
||||
else
|
||||
echo " <li><em>Keine Inhalte gefunden</em></li>" >> /app/public/index.html
|
||||
fi
|
||||
|
||||
echo " </ul>" >> /app/public/index.html
|
||||
echo " </div>" >> /app/public/index.html
|
||||
echo "</body>" >> /app/public/index.html
|
||||
echo "</html>" >> /app/public/index.html
|
||||
|
||||
# Copy markdown files to public
|
||||
cp -r /app/content/* /app/public/ 2>/dev/null || true
|
||||
fi
|
||||
|
||||
# Ensure public directory exists
|
||||
if [ ! -d "/app/public" ] || [ -z "$(ls -A /app/public 2>/dev/null)" ]; then
|
||||
echo "Error: Public directory is empty, creating minimal site..."
|
||||
mkdir -p /app/public
|
||||
echo "<!DOCTYPE html><html><head><meta charset='UTF-8'><title>doing-it Wiki</title></head><body><h1>doing-it Wiki</h1><p>Wiki wird geladen...</p></body></html>" > /app/public/index.html
|
||||
fi
|
||||
|
||||
echo "Build complete. Starting server on port 8080..."
|
||||
cd /app
|
||||
serve -s public -l 8080
|
||||
@@ -1,18 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
# Initialize Quartz
|
||||
echo "Initializing Quartz..."
|
||||
npx @jackyzha0/quartz create --help
|
||||
|
||||
# Copy vault content to content directory
|
||||
if [ -d "/vault" ]; then
|
||||
echo "Copying vault content..."
|
||||
cp -r /vault/* ./content/ 2>/dev/null || true
|
||||
fi
|
||||
|
||||
# Build Quartz
|
||||
echo "Building Quartz site..."
|
||||
npx quartz build
|
||||
|
||||
echo "Quartz build complete!"
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
server {
|
||||
listen 8080;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ $uri.html /index.html;
|
||||
}
|
||||
|
||||
# Enable gzip compression
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||
|
||||
# Cache static assets
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"name": "quartz-wiki",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "quartz build",
|
||||
"watch": "quartz watch",
|
||||
"sync": "quartz sync"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jackyzha0/quartz": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"serve": "^14.2.1"
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
This Knowledge Database is about to get greatly organized and will grow soon for you!
|
||||
@@ -1,12 +0,0 @@
|
||||
# Wiki Home
|
||||
|
||||
Willkommen im doing-it Wiki!
|
||||
|
||||
Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
|
||||
|
||||
## Übersicht
|
||||
|
||||
- [[IT-Grundlagen]]
|
||||
- [[Schulungsmethoden]]
|
||||
- [[Ressourcen]]
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# IT-Grundlagen
|
||||
|
||||
## Einführung
|
||||
|
||||
Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
|
||||
|
||||
## Themenbereiche
|
||||
|
||||
### Netzwerke
|
||||
- Grundlagen der Netzwerkarchitektur
|
||||
- TCP/IP Protokolle
|
||||
- Firewall-Konfiguration
|
||||
|
||||
### Betriebssysteme
|
||||
- Linux
|
||||
- Windows Server
|
||||
- Virtualisierung
|
||||
|
||||
## Weiterführende Links
|
||||
|
||||
- [[Home]]
|
||||
- [[Ressourcen]]
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
# Ressourcen
|
||||
|
||||
## Lernmaterialien
|
||||
|
||||
### Bücher
|
||||
- Empfohlene Fachliteratur
|
||||
- Online-Ressourcen
|
||||
|
||||
### Tools
|
||||
- Software für IT-Schulungen
|
||||
- Virtualisierungstools
|
||||
- Entwicklungsumgebungen
|
||||
|
||||
### Community
|
||||
- Foren und Diskussionsgruppen
|
||||
- Online-Kurse
|
||||
- Zertifizierungen
|
||||
|
||||
## Siehe auch
|
||||
|
||||
- [[IT-Grundlagen]]
|
||||
- [[Schulungsmethoden]]
|
||||
- [[Home]]
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
# Schulungsmethoden
|
||||
|
||||
## Moderne Ansätze der IT-Schulung
|
||||
|
||||
### Praxisorientierte Schulungen
|
||||
- Hands-on Workshops
|
||||
- Real-world Szenarien
|
||||
- Projektbasierter Unterricht
|
||||
|
||||
### Blended Learning
|
||||
- Online-Materialien
|
||||
- Präsenzveranstaltungen
|
||||
- Selbstlernphasen
|
||||
|
||||
## Vorteile
|
||||
|
||||
1. Bessere Wissensretention
|
||||
2. Praktische Anwendbarkeit
|
||||
3. Flexibilität für Teilnehmer
|
||||
|
||||
[[Home]]
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
|
||||
this note is linked to a test note :D
|
||||
|
||||
[[Welcome]]
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
This is your new *vault*.
|
||||
|
||||
Make a note of something, [[create a link]], or try [the Importer](https://help.obsidian.md/Plugins/Importer)!
|
||||
|
||||
When you're ready, delete this note and make the vault your own.
|
||||
@@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>doing-it Wiki</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
||||
background: #161618;
|
||||
color: #ebebec;
|
||||
line-height: 1.6;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #ebebec;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin: 40px 0 20px;
|
||||
color: #ebebec;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
a {
|
||||
color: #ff3b30;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
transition: color 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
a:hover {
|
||||
color: #ff453a;
|
||||
}
|
||||
.intro {
|
||||
font-size: 20px;
|
||||
color: #d4d4d4;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>doing-it Wiki</h1>
|
||||
<p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
|
||||
<h2>Inhalte</h2>
|
||||
<ul id="content-list">
|
||||
<li><a href="/Doing IT!.md">Doing IT!</a></li>
|
||||
<li><a href="/Home.md">Home</a></li>
|
||||
<li><a href="/IT-Grundlagen.md">IT-Grundlagen</a></li>
|
||||
<li><a href="/Ressourcen.md">Ressourcen</a></li>
|
||||
<li><a href="/Schulungsmethoden.md">Schulungsmethoden</a></li>
|
||||
<li><a href="/Test Note linked.md">Test Note linked</a></li>
|
||||
<li><a href="/Welcome.md">Welcome</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
import { QuartzConfig } from "./quartz/cfg"
|
||||
import * as Plugin from "./quartz/plugins"
|
||||
|
||||
/**
|
||||
* Quartz 4.0 Configuration
|
||||
*
|
||||
* See https://quartz.jzhao.xyz/configuration for more information.
|
||||
*/
|
||||
const config: QuartzConfig = {
|
||||
configuration: {
|
||||
pageTitle: "doing-it Wiki",
|
||||
enableSPA: true,
|
||||
enablePopovers: true,
|
||||
analytics: null,
|
||||
locale: "de-DE",
|
||||
baseUrl: "wiki",
|
||||
ignorePatterns: ["private", "templates", ".obsidian"],
|
||||
defaultDateType: "created",
|
||||
theme: {
|
||||
fontOrigin: "googleFonts",
|
||||
cdnCaching: true,
|
||||
typography: {
|
||||
header: "Schibsted Grotesk",
|
||||
body: "Source Sans Pro",
|
||||
code: "IBM Plex Mono",
|
||||
},
|
||||
colors: {
|
||||
lightMode: {
|
||||
light: "#faf8f8",
|
||||
lightgray: "#e5e5e5",
|
||||
gray: "#b8b8b8",
|
||||
darkgray: "#4e4e4e",
|
||||
dark: "#2b2b2b",
|
||||
secondary: "#284b63",
|
||||
tertiary: "#84a59d",
|
||||
highlight: "rgba(143, 159, 169, 0.15)",
|
||||
},
|
||||
darkMode: {
|
||||
light: "#161618",
|
||||
lightgray: "#393639",
|
||||
gray: "#646464",
|
||||
darkgray: "#d4d4d4",
|
||||
dark: "#ebebec",
|
||||
secondary: "#7b97aa",
|
||||
tertiary: "#84a59d",
|
||||
highlight: "rgba(143, 159, 169, 0.15)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
transformers: [
|
||||
Plugin.FrontMatter({ delimiters: "---" }),
|
||||
Plugin.CreatedModifiedDate({
|
||||
priority: ["frontmatter", "filesystem"],
|
||||
}),
|
||||
Plugin.SyntaxHighlighting({
|
||||
theme: {
|
||||
light: "github-light",
|
||||
dark: "github-dark",
|
||||
},
|
||||
keepBackground: false,
|
||||
}),
|
||||
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
|
||||
Plugin.GitHubFlavoredMarkdown(),
|
||||
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
|
||||
Plugin.Latex({ renderEngine: "katex" }),
|
||||
Plugin.Description(),
|
||||
],
|
||||
filters: [Plugin.RemoveDrafts()],
|
||||
emitters: [
|
||||
Plugin.AliasRedirects(),
|
||||
Plugin.ComponentResources(),
|
||||
Plugin.ContentPage(),
|
||||
Plugin.FolderPage(),
|
||||
Plugin.TagPage(),
|
||||
Plugin.ContentIndex({
|
||||
enableSiteMap: true,
|
||||
enableRSS: true,
|
||||
}),
|
||||
Plugin.Assets(),
|
||||
Plugin.Static(),
|
||||
Plugin.NotFoundPage(),
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
||||
0
tsconfig.json
Executable file → Normal file
0
tsconfig.json
Executable file → Normal file
1
wiki-vault/.obsidian/app.json
vendored
1
wiki-vault/.obsidian/app.json
vendored
@@ -1 +0,0 @@
|
||||
{}
|
||||
1
wiki-vault/.obsidian/appearance.json
vendored
1
wiki-vault/.obsidian/appearance.json
vendored
@@ -1 +0,0 @@
|
||||
{}
|
||||
33
wiki-vault/.obsidian/core-plugins.json
vendored
33
wiki-vault/.obsidian/core-plugins.json
vendored
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"file-explorer": true,
|
||||
"global-search": true,
|
||||
"switcher": true,
|
||||
"graph": true,
|
||||
"backlink": true,
|
||||
"canvas": true,
|
||||
"outgoing-link": true,
|
||||
"tag-pane": true,
|
||||
"footnotes": false,
|
||||
"properties": true,
|
||||
"page-preview": true,
|
||||
"daily-notes": true,
|
||||
"templates": true,
|
||||
"note-composer": true,
|
||||
"command-palette": true,
|
||||
"slash-command": false,
|
||||
"editor-status": true,
|
||||
"bookmarks": true,
|
||||
"markdown-importer": false,
|
||||
"zk-prefixer": false,
|
||||
"random-note": false,
|
||||
"outline": true,
|
||||
"word-count": true,
|
||||
"slides": false,
|
||||
"audio-recorder": false,
|
||||
"workspaces": false,
|
||||
"file-recovery": true,
|
||||
"publish": false,
|
||||
"sync": true,
|
||||
"bases": true,
|
||||
"webviewer": false
|
||||
}
|
||||
22
wiki-vault/.obsidian/graph.json
vendored
22
wiki-vault/.obsidian/graph.json
vendored
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"collapse-filter": true,
|
||||
"search": "",
|
||||
"showTags": false,
|
||||
"showAttachments": false,
|
||||
"hideUnresolved": false,
|
||||
"showOrphans": true,
|
||||
"collapse-color-groups": true,
|
||||
"colorGroups": [],
|
||||
"collapse-display": true,
|
||||
"showArrow": false,
|
||||
"textFadeMultiplier": 0,
|
||||
"nodeSizeMultiplier": 1,
|
||||
"lineSizeMultiplier": 1,
|
||||
"collapse-forces": true,
|
||||
"centerStrength": 0.518713248970312,
|
||||
"repelStrength": 10,
|
||||
"linkStrength": 1,
|
||||
"linkDistance": 250,
|
||||
"scale": 1,
|
||||
"close": true
|
||||
}
|
||||
241
wiki-vault/.obsidian/workspace.json
vendored
241
wiki-vault/.obsidian/workspace.json
vendored
@@ -1,241 +0,0 @@
|
||||
{
|
||||
"main": {
|
||||
"id": "8dfc66e3057e2bb9",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "f254dd73117432c7",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "334df45c100a09a2",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "Welcome.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
},
|
||||
"icon": "lucide-file",
|
||||
"title": "Welcome"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "baf1be712b9b3822",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "Test Note linked.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
},
|
||||
"icon": "lucide-file",
|
||||
"title": "Test Note linked"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "855fb4c7ce23c4ee",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "Doing IT!.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
},
|
||||
"icon": "lucide-file",
|
||||
"title": "Doing IT!"
|
||||
}
|
||||
}
|
||||
],
|
||||
"currentTab": 2
|
||||
},
|
||||
{
|
||||
"id": "725ac779b4d8107f",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "b2007c6d00445ba0",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "graph",
|
||||
"state": {},
|
||||
"icon": "lucide-git-fork",
|
||||
"title": "Graph view"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"direction": "vertical"
|
||||
},
|
||||
"left": {
|
||||
"id": "16268a6aef3ede11",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "f56aae6148ea355d",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "4b0d386092e6e588",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "file-explorer",
|
||||
"state": {
|
||||
"sortOrder": "alphabetical",
|
||||
"autoReveal": false
|
||||
},
|
||||
"icon": "lucide-folder-closed",
|
||||
"title": "Files"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "c4f28387b626626a",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "search",
|
||||
"state": {
|
||||
"query": "",
|
||||
"matchingCase": false,
|
||||
"explainSearch": false,
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical"
|
||||
},
|
||||
"icon": "lucide-search",
|
||||
"title": "Search"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "97f0ec187bce6018",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "bookmarks",
|
||||
"state": {},
|
||||
"icon": "lucide-bookmark",
|
||||
"title": "Bookmarks"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"direction": "horizontal",
|
||||
"width": 300
|
||||
},
|
||||
"right": {
|
||||
"id": "415cdc7ad6d23c52",
|
||||
"type": "split",
|
||||
"children": [
|
||||
{
|
||||
"id": "a5fe71931beb80b2",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "3434ba62798ef10c",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "backlink",
|
||||
"state": {
|
||||
"file": "Doing IT!.md",
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical",
|
||||
"showSearch": false,
|
||||
"searchQuery": "",
|
||||
"backlinkCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
},
|
||||
"icon": "links-coming-in",
|
||||
"title": "Backlinks for Doing IT!"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "46aacad1d2514ee2",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "outgoing-link",
|
||||
"state": {
|
||||
"file": "Doing IT!.md",
|
||||
"linksCollapsed": false,
|
||||
"unlinkedCollapsed": true
|
||||
},
|
||||
"icon": "links-going-out",
|
||||
"title": "Outgoing links from Doing IT!"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "fe0aa26d6421abc2",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "tag",
|
||||
"state": {
|
||||
"sortOrder": "frequency",
|
||||
"useHierarchy": true,
|
||||
"showSearch": false,
|
||||
"searchQuery": ""
|
||||
},
|
||||
"icon": "lucide-tags",
|
||||
"title": "Tags"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "fef4fad5be646696",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "all-properties",
|
||||
"state": {
|
||||
"sortOrder": "frequency",
|
||||
"showSearch": false,
|
||||
"searchQuery": ""
|
||||
},
|
||||
"icon": "lucide-archive",
|
||||
"title": "All properties"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "99fb7a202645d667",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "outline",
|
||||
"state": {
|
||||
"file": "Doing IT!.md",
|
||||
"followCursor": false,
|
||||
"showSearch": false,
|
||||
"searchQuery": ""
|
||||
},
|
||||
"icon": "lucide-list",
|
||||
"title": "Outline of Doing IT!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"direction": "horizontal",
|
||||
"width": 300,
|
||||
"collapsed": true
|
||||
},
|
||||
"left-ribbon": {
|
||||
"hiddenItems": {
|
||||
"switcher:Open quick switcher": false,
|
||||
"graph:Open graph view": false,
|
||||
"canvas:Create new canvas": false,
|
||||
"daily-notes:Open today's daily note": false,
|
||||
"templates:Insert template": false,
|
||||
"command-palette:Open command palette": false,
|
||||
"bases:Create new base": false
|
||||
}
|
||||
},
|
||||
"active": "855fb4c7ce23c4ee",
|
||||
"lastOpenFiles": [
|
||||
"Home.md",
|
||||
"Schulungsmethoden.md",
|
||||
"Ressourcen.md",
|
||||
"IT-Grundlagen.md",
|
||||
"Test Note linked.md",
|
||||
"Doing IT!.md",
|
||||
"Welcome.md"
|
||||
]
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
This Knowledge Database is about to get greatly organized and will grow soon for you!
|
||||
@@ -1,12 +0,0 @@
|
||||
# Wiki Home
|
||||
|
||||
Willkommen im doing-it Wiki!
|
||||
|
||||
Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
|
||||
|
||||
## Übersicht
|
||||
|
||||
- [[IT-Grundlagen]]
|
||||
- [[Schulungsmethoden]]
|
||||
- [[Ressourcen]]
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# IT-Grundlagen
|
||||
|
||||
## Einführung
|
||||
|
||||
Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
|
||||
|
||||
## Themenbereiche
|
||||
|
||||
### Netzwerke
|
||||
- Grundlagen der Netzwerkarchitektur
|
||||
- TCP/IP Protokolle
|
||||
- Firewall-Konfiguration
|
||||
|
||||
### Betriebssysteme
|
||||
- Linux
|
||||
- Windows Server
|
||||
- Virtualisierung
|
||||
|
||||
## Weiterführende Links
|
||||
|
||||
- [[Home]]
|
||||
- [[Ressourcen]]
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
# Ressourcen
|
||||
|
||||
## Lernmaterialien
|
||||
|
||||
### Bücher
|
||||
- Empfohlene Fachliteratur
|
||||
- Online-Ressourcen
|
||||
|
||||
### Tools
|
||||
- Software für IT-Schulungen
|
||||
- Virtualisierungstools
|
||||
- Entwicklungsumgebungen
|
||||
|
||||
### Community
|
||||
- Foren und Diskussionsgruppen
|
||||
- Online-Kurse
|
||||
- Zertifizierungen
|
||||
|
||||
## Siehe auch
|
||||
|
||||
- [[IT-Grundlagen]]
|
||||
- [[Schulungsmethoden]]
|
||||
- [[Home]]
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
# Schulungsmethoden
|
||||
|
||||
## Moderne Ansätze der IT-Schulung
|
||||
|
||||
### Praxisorientierte Schulungen
|
||||
- Hands-on Workshops
|
||||
- Real-world Szenarien
|
||||
- Projektbasierter Unterricht
|
||||
|
||||
### Blended Learning
|
||||
- Online-Materialien
|
||||
- Präsenzveranstaltungen
|
||||
- Selbstlernphasen
|
||||
|
||||
## Vorteile
|
||||
|
||||
1. Bessere Wissensretention
|
||||
2. Praktische Anwendbarkeit
|
||||
3. Flexibilität für Teilnehmer
|
||||
|
||||
[[Home]]
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
|
||||
this note is linked to a test note :D
|
||||
|
||||
[[Welcome]]
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
This is your new *vault*.
|
||||
|
||||
Make a note of something, [[create a link]], or try [the Importer](https://help.obsidian.md/Plugins/Importer)!
|
||||
|
||||
When you're ready, delete this note and make the vault your own.
|
||||
Reference in New Issue
Block a user