loepperts/doing-it-website
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

v1 production

Browse Source
This commit is contained in:
loepperts
2025-12-05 01:01:04 +01:00
parent 0f32d5927b
commit 8fbe1113dd
68 changed files with 2608 additions and 3463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.dockerignore Executable file → Normal file
View File

0
.eslintrc.json Executable file → Normal file
View File

0
.gitignore vendored Executable file → Normal file
View File

0
Dockerfile Executable file → Normal file
View File

0
Dockerfile.dev Executable file → Normal file
View File

0
PROJEKTINFORMATIONEN.md Executable file → Normal file
View File

0
README.md Executable file → Normal file
View File

0
app/agb/page.tsx Executable file → Normal file
View File

143
app/case-studies/page.tsx
View 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
View File

1685
app/globals.css Executable file → Normal file
View File

File diff suppressed because it is too large Load Diff

166
app/impressum/page.tsx Executable file → Normal file
View File

@@ -1,85 +1,81 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Navigation from '@/components/Navigation' import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
export default function Impressum() { export default function Impressum() {
return ( return (
<> <>
<Navigation /> <Navigation />
<main> <main>
<section className="page-hero"> <section className="page-hero">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="container" className="container"
> >
<h1>Impressum</h1> <h1>Impressum</h1>
</motion.div> </motion.div>
</section> </section>
<section className="page-content"> <section className="page-content">
<div className="container"> <div className="container">
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="legal-content" className="legal-content"
> >
<h2>Angaben gemäß § 5 TMG</h2> <h2>Angaben gemäß § 5 TMG</h2>
<p>
doing-it.de<br /> <h3>Gewerbe:</h3>
[Ihre Firmenadresse]<br /> <p>
[PLZ Ort] Mathias Brax – Matze Fix IT<br />
</p> Mathias Brax<br />
Krumbacherstraße 4/4<br />
<h2>Kontakt</h2> 88069 Tannau
<p> </p>
Telefon: [Telefonnummer]<br />
E-Mail: info@doing-it.de <p>
</p> Inhaltlich Verantwortlicher gemäß § 55 Abs. 2 RStV: Mathias Brax
</p>
<h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
<p> <h2>Kontakt</h2>
[Name des Verantwortlichen]<br /> <p>
[Adresse]<br /> E-Mail: mathias.brax@matzefixit.de
[PLZ Ort] </p>
</p>
<h2>Haftung für Inhalte</h2>
<h2>Haftungsausschluss</h2> <p>
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.
<h3>Haftung für Inhalte</h3> </p>
<p> <p>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, 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.
Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. </p>
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten
nach den allgemeinen Gesetzen verantwortlich. <h2>Haftung für Links</h2>
</p> <p>
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.
<h3>Haftung für Links</h3> </p>
<p> <p>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen 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.
Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. </p>
Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber
der Seiten verantwortlich. <h2>Urheberrecht</h2>
</p> <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. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
<h3>Urheberrecht</h3> </p>
<p> <p>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen 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.
dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art </p>
der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen </motion.div>
Zustimmung des jeweiligen Autors bzw. Erstellers. </div>
</p> </section>
</motion.div> </main>
</div> <Footer />
</section> </>
</main> )
<Footer /> }
</>
)
}

136
app/kontakt/page.tsx Executable file → Normal file
View File

@@ -1,36 +1,14 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useState } from 'react'
import Navigation from '@/components/Navigation' import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
export default function Kontakt() { 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 ( return (
<> <>
<Navigation /> <Navigation />
<main> <main>
{/* Hero Section */}
<section className="page-hero"> <section className="page-hero">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -45,7 +23,6 @@ export default function Kontakt() {
</motion.div> </motion.div>
</section> </section>
{/* Contact Section */}
<section className="page-content"> <section className="page-content">
<div className="container"> <div className="container">
<motion.div <motion.div
@@ -53,73 +30,55 @@ export default function Kontakt() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="content-block"
> >
<form className="contact-form" onSubmit={handleSubmit}> <h2>Kontaktieren Sie uns</h2>
<div className="form-group"> <p style={{ marginBottom: '40px' }}>
<label htmlFor="name">Name *</label> Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren? Schreiben Sie uns eine E-Mail oder buchen Sie direkt einen Termin.
<input </p>
type="text"
id="name" <a
name="name" href="mailto:info@doing-it.de"
required className="btn btn-primary btn-large"
value={formData.name} style={{
onChange={handleChange} display: 'inline-block',
placeholder="Ihr Name" marginBottom: '40px',
/> fontSize: '20px',
</div> padding: '20px 40px'
}}
>
E-Mail senden: info@doing-it.de
</a>
</motion.div>
<div className="form-group"> {/* Cal.com Widget */}
<label htmlFor="email">E-Mail *</label> <motion.div
<input initial={{ opacity: 0, y: 30 }}
type="email" whileInView={{ opacity: 1, y: 0 }}
id="email" viewport={{ once: true }}
name="email" transition={{ duration: 0.6, delay: 0.2 }}
required className="cal-widget"
value={formData.email} >
onChange={handleChange} <div
placeholder="ihre.email@beispiel.de" style={{
/> width: '100%',
</div> height: '700px',
border: '1px solid rgba(255, 255, 255, 0.1)',
<div className="form-group"> borderRadius: '20px',
<label htmlFor="subject">Betreff *</label> overflow: 'hidden',
<input background: 'var(--color-card)'
type="text" }}
id="subject" >
name="subject" <iframe
required src="https://cal.com/embed/doing-it-de"
value={formData.subject} style={{
onChange={handleChange} width: '100%',
placeholder="Betreff Ihrer Nachricht" height: '100%',
/> border: 'none',
</div> borderRadius: '20px'
}}
<div className="form-group"> title="Cal.com Booking"
<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> </div>
</motion.div> </motion.div>
</div> </div>
@@ -129,4 +88,3 @@ export default function Kontakt() {
</> </>
) )
} }

83
app/layout.tsx Executable file → Normal file
View File

@@ -1,39 +1,44 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import './globals.css' import './globals.css'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'doing-it - IT Weiterbildung & Schulungen', title: 'doing-it - IT Weiterbildung & Schulungen',
description: 'IT Weiterbildung und Schulungen für Quereinsteiger und Unternehmen', description: 'IT Weiterbildung und Schulungen für Quereinsteiger und Unternehmen',
} }
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="de"> <html lang="de">
<body> <head>
{children} <link rel="preconnect" href="https://fonts.googleapis.com" />
{/* Live Chat Integration - Platzhalter für Tawk.to, Crisp oder Intercom */} <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" />
<script dangerouslySetInnerHTML={{ </head>
__html: ` <body>
// Beispiel für Tawk.to Integration: {children}
// var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); {/* Live Chat Integration - Platzhalter für Tawk.to, Crisp oder Intercom */}
// (function(){ {/*
// var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; <script dangerouslySetInnerHTML={{
// s1.async=true; __html: `
// s1.src='https://embed.tawk.to/YOUR_PROPERTY_ID/YOUR_WIDGET_ID'; // Beispiel für Tawk.to Integration:
// s1.charset='UTF-8'; // var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
// s1.setAttribute('crossorigin','*'); // (function(){
// s0.parentNode.insertBefore(s1,s0); // var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
// })(); // s1.async=true;
` // s1.src='https://embed.tawk.to/YOUR_PROPERTY_ID/YOUR_WIDGET_ID';
}} /> // s1.charset='UTF-8';
*/} // s1.setAttribute('crossorigin','*');
</body> // s0.parentNode.insertBefore(s1,s0);
</html> // })();
) `
} }} />
*/}
</body>
</html>
)
}

604
app/page.tsx Executable file → Normal file
View File

@@ -1,189 +1,415 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Link from 'next/link' import Link from 'next/link'
import Navigation from '@/components/Navigation' import Image from 'next/image'
import Footer from '@/components/Footer' import { FaInstagram, FaYoutube, FaTiktok, FaGraduationCap, FaBuilding, FaSearch, FaGlobe, FaCheckCircle, FaCalculator } from 'react-icons/fa'
import AnimatedIcon from '@/components/AnimatedIcon'
export default function Home() { import Navigation from '@/components/Navigation'
return ( import Footer from '@/components/Footer'
<>
<Navigation /> export default function Home() {
<main> return (
{/* Hero Section */} <>
<section className="hero"> <Navigation />
<motion.div <main>
initial={{ opacity: 0, y: 20 }} {/* Hero Section */}
animate={{ opacity: 1, y: 0 }} <section className="hero hero-with-background">
transition={{ duration: 0.8 }} <div className="hero-background-image"></div>
className="hero-content" <motion.div
> initial={{ opacity: 0, y: 20 }}
<h1 className="hero-title">doing-it</h1> animate={{ opacity: 1, y: 0 }}
<p className="hero-subtitle"> transition={{ duration: 0.8 }}
IT Weiterbildung und Schulungen<br /> className="hero-content"
für Quereinsteiger und Unternehmen >
</p> <h1 className="hero-title">Doing-IT</h1>
<div className="hero-buttons"> <p className="hero-subtitle">
<Link href="/quereinsteiger" className="btn btn-primary"> IT Weiterbildung und Schulungen<br />
Jetzt durchstarten für Quereinsteiger und Unternehmen
</Link> </p>
<Link href="/unternehmen" className="btn btn-secondary"> <p style={{ fontSize: '19px', color: 'var(--color-text-secondary)', marginTop: '20px', maxWidth: '700px', marginLeft: 'auto', marginRight: 'auto', lineHeight: '1.7' }}>
IT-Analyse anfordern 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.
</Link> </p>
</div> <div className="hero-buttons" style={{ marginTop: '40px' }}>
</motion.div> <Link href="/quereinsteiger" className="btn btn-primary btn-large">
</section> Für Quereinsteiger
</Link>
{/* Features Section */} <Link href="/unternehmen" className="btn btn-secondary btn-large">
<section className="features"> Für Unternehmen
<div className="container"> </Link>
<motion.div </div>
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} {/* Social Media Icons */}
viewport={{ once: true }} <div className="social-icons">
transition={{ duration: 0.6 }} <a
className="section-header" href="https://www.instagram.com/doing_it_de"
> target="_blank"
<h2>Warum doing-it?</h2> rel="noopener noreferrer"
<p>Individuell, niveaubasiert, zertifiziert – mit Experten-Support</p> className="social-icon-link"
</motion.div> aria-label="Instagram"
>
<div className="features-grid"> <FaInstagram />
<motion.div </a>
initial={{ opacity: 0, y: 30 }} <a
whileInView={{ opacity: 1, y: 0 }} href="https://www.youtube.com/@doing-IT-de"
viewport={{ once: true }} target="_blank"
transition={{ duration: 0.6, delay: 0.1 }} rel="noopener noreferrer"
className="feature-card" className="social-icon-link"
> aria-label="YouTube"
<div className="feature-icon">🎯</div> >
<h3>Individuell</h3> <FaYoutube />
<p>Maßgeschneiderte Schulungen auf Ihre Bedürfnisse zugeschnitten</p> </a>
</motion.div> <a
href="https://www.tiktok.com/@doing_it_de"
<motion.div target="_blank"
initial={{ opacity: 0, y: 30 }} rel="noopener noreferrer"
whileInView={{ opacity: 1, y: 0 }} className="social-icon-link"
viewport={{ once: true }} aria-label="TikTok"
transition={{ duration: 0.6, delay: 0.2 }} >
className="feature-card" <FaTiktok />
> </a>
<div className="feature-icon">📚</div> </div>
<h3>Stufenweise</h3> </motion.div>
<p>Niveaubasierte Freischaltung von Inhalten für optimalen Lernerfolg</p> </section>
</motion.div>
{/* About Section */}
<motion.div <section className="features">
initial={{ opacity: 0, y: 30 }} <div className="container">
whileInView={{ opacity: 1, y: 0 }} <motion.div
viewport={{ once: true }} initial={{ opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: 0.3 }} whileInView={{ opacity: 1, y: 0 }}
className="feature-card" viewport={{ once: true }}
> transition={{ duration: 0.6 }}
<div className="feature-icon">💼</div> className="section-header"
<h3>Zertifiziert</h3> >
<p>Anerkannte Zertifizierungen für Ihre Karriere</p> <h2>Was ist Doing-IT?</h2>
</motion.div> <p>Ein Unternehmen und Social Media Kanal rund um die Informatik</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }} <div className="features-grid">
whileInView={{ opacity: 1, y: 0 }} <motion.div
viewport={{ once: true }} initial={{ opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: 0.4 }} whileInView={{ opacity: 1, y: 0 }}
className="feature-card" viewport={{ once: true }}
> transition={{ duration: 0.6, delay: 0.1 }}
<div className="feature-icon">👥</div> className="feature-card"
<h3>Experten-Support</h3> >
<p>Livetrainings und Chats mit IT-Experten bei Fragen</p> <AnimatedIcon delay={0.1}>
</motion.div> <FaGraduationCap size={32} color="var(--color-red)" />
</div> </AnimatedIcon>
</div> <h3>Schulungen für Quereinsteiger</h3>
</section> <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">
{/* CTA Section */} Lernpfadfinder
<section className="cta-hero"> </Link>
<div className="container"> </motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }} <motion.div
whileInView={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 30 }}
viewport={{ once: true }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} viewport={{ once: true }}
className="cta-hero-content" transition={{ duration: 0.6, delay: 0.2 }}
> className="feature-card"
<h2>Bereit für den nächsten Schritt?</h2> >
<p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p> <AnimatedIcon delay={0.2}>
<div className="hero-buttons"> <FaBuilding size={32} color="var(--color-red)" />
<Link href="/kontakt" className="btn btn-primary"> </AnimatedIcon>
Jetzt Kontakt aufnehmen <h3>Optimierte Schulungen für Unternehmen</h3>
</Link> <p>Maßgeschneiderte Schulungen angepasst an Ihre Anforderungen. Ob TISAX oder ISO Zertifizierung – wir schulen Ihre Mitarbeiter auf sensible IT-Themen.</p>
</div> <Link href="/unternehmen" className="btn btn-primary">
</motion.div> Mehr erfahren
</div> </Link>
</section> </motion.div>
{/* Partners Section */} <motion.div
<section className="partners-section"> initial={{ opacity: 0, y: 30 }}
<div className="container"> whileInView={{ opacity: 1, y: 0 }}
<motion.div viewport={{ once: true }}
initial={{ opacity: 0, y: 30 }} transition={{ duration: 0.6, delay: 0.3 }}
whileInView={{ opacity: 1, y: 0 }} className="feature-card"
viewport={{ once: true }} >
transition={{ duration: 0.6 }} <AnimatedIcon delay={0.3}>
className="partners-content" <FaSearch size={32} color="var(--color-red)" />
> </AnimatedIcon>
<p style={{ fontSize: '15px', color: 'var(--color-text-secondary)', marginBottom: '20px', textTransform: 'uppercase', letterSpacing: '1px' }}> <h3>IT-Analyse</h3>
Partner-Projekt <p>Umfassende Analyse Ihrer IT-Infrastruktur: Bedarf, Sicherheit, Kostenersparnis und Optimierungspotenziale. Wir identifizieren Schwachstellen und Verbesserungsmöglichkeiten.</p>
</p> <Link href="/unternehmen/it-infrastrukturanalyse" className="btn btn-primary">
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)', marginBottom: '30px', maxWidth: '600px', margin: '0 auto 30px' }}> IT-Analyse anfordern
doing-it.de ist ein gemeinsames Projekt von{' '} </Link>
<a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}> </motion.div>
hoerter-tech.de
</a> <motion.div
{' '}und{' '} initial={{ opacity: 0, y: 30 }}
<a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}> whileInView={{ opacity: 1, y: 0 }}
matzefixit.de viewport={{ once: true }}
</a> transition={{ duration: 0.6, delay: 0.4 }}
. className="feature-card"
</p> >
<div style={{ display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}> <AnimatedIcon delay={0.4}>
<a <FaGlobe size={32} color="var(--color-red)" />
href="https://hoerter-tech.de" </AnimatedIcon>
target="_blank" <h3>Webseiten & Social Media Analysen</h3>
rel="noopener noreferrer" <p>Professionelle Analysen Ihrer Webseite und Social Media Präsenz. Wir zeigen Ihnen Optimierungspotenziale und helfen bei der digitalen Strategie.</p>
style={{ <Link href="/kontakt" className="btn btn-primary">
color: 'var(--color-text-secondary)', Analyse anfragen
fontSize: '17px', </Link>
transition: 'color 0.3s ease', </motion.div>
textDecoration: 'none' </div>
}} </div>
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'} </section>
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
> {/* Tools Section */}
hoerter-tech.de <section className="features" style={{ background: 'transparent' }}>
</a> <div className="container">
<span style={{ color: 'var(--color-text-secondary)', fontSize: '20px' }}>×</span> <motion.div
<a initial={{ opacity: 0, y: 30 }}
href="https://matzefixit.de" whileInView={{ opacity: 1, y: 0 }}
target="_blank" viewport={{ once: true }}
rel="noopener noreferrer" transition={{ duration: 0.6 }}
style={{ className="section-header"
color: 'var(--color-text-secondary)', >
fontSize: '17px', <h2>Unsere Tools</h2>
transition: 'color 0.3s ease', <p>Praktische Hilfsmittel für Ihre IT-Planung</p>
textDecoration: 'none' </motion.div>
}}
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'} <div className="features-grid">
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'} <motion.div
> initial={{ opacity: 0, y: 30 }}
matzefixit.de whileInView={{ opacity: 1, y: 0 }}
</a> viewport={{ once: true }}
</div> transition={{ duration: 0.6, delay: 0.1 }}
</motion.div> className="feature-card"
</div> >
</section> <AnimatedIcon delay={0.1}>
</main> <FaCheckCircle size={32} color="var(--color-red)" />
<Footer /> </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 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="cta-hero-content"
>
<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>
</div>
</section>
{/* Partners Section */}
<section className="partners-section">
<div className="container">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="partners-content"
>
<p style={{ fontSize: '15px', color: 'var(--color-text-secondary)', marginBottom: '20px', textTransform: 'uppercase', letterSpacing: '1px' }}>
Partner-Projekt
</p>
<p style={{ fontSize: '17px', color: 'var(--color-text-secondary)', marginBottom: '30px', maxWidth: '600px', margin: '0 auto 30px' }}>
doing-it.de ist ein gemeinsames Projekt von{' '}
<a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
hoerter-tech.de
</a>
{' '}und{' '}
<a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
matzefixit.de
</a>
.
</p>
<div style={{ display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
<a
href="https://hoerter-tech.de"
target="_blank"
rel="noopener noreferrer"
style={{
color: 'var(--color-text-secondary)',
fontSize: '17px',
transition: 'color 0.3s ease',
textDecoration: 'none'
}}
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
>
hoerter-tech.de
</a>
<span style={{ color: 'var(--color-text-secondary)', fontSize: '20px' }}>×</span>
<a
href="https://matzefixit.de"
target="_blank"
rel="noopener noreferrer"
style={{
color: 'var(--color-text-secondary)',
fontSize: '17px',
transition: 'color 0.3s ease',
textDecoration: 'none'
}}
onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
>
matzefixit.de
</a>
</div>
</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
View 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
View 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
View 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
View 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
View File

@@ -1,198 +1,10 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import Navigation from '@/components/Navigation' import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
export default function KursDetail() { 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 ( return (
<> <>
<Navigation /> <Navigation />
@@ -204,9 +16,9 @@ export default function KursDetail() {
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="container" className="container"
> >
<h1>{course.title}</h1> <h1>Kursdetails</h1>
<p className="page-hero-subtitle"> <p className="page-hero-subtitle">
{course.description} Hier entsteht gerade etwas Neues.
</p> </p>
</motion.div> </motion.div>
</section> </section>
@@ -219,93 +31,11 @@ export default function KursDetail() {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="content-block" className="content-block"
style={{ textAlign: 'left', maxWidth: '100%' }}
> >
<h2>Kursbeschreibung</h2> <h2>Coming Soon</h2>
<p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '40px' }}> <p>
{course.longDescription} Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
</p> </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> </motion.div>
</div> </div>
</section> </section>
@@ -314,4 +44,3 @@ export default function KursDetail() {
</> </>
) )
} }

290
app/quereinsteiger/kurse/page.tsx Executable file → Normal file
View File

@@ -1,244 +1,46 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useState } from 'react' import Navigation from '@/components/Navigation'
import Link from 'next/link' import Footer from '@/components/Footer'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' export default function Kurse() {
return (
export default function Kurse() { <>
const [searchTerm, setSearchTerm] = useState('') <Navigation />
const [selectedLevel, setSelectedLevel] = useState<string>('all') <main>
<section className="page-hero">
const courses = [ <motion.div
{ initial={{ opacity: 0, y: 20 }}
id: 1, animate={{ opacity: 1, y: 0 }}
title: 'IT-Grundlagen für Einsteiger', transition={{ duration: 0.8 }}
description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.', className="container"
duration: '4-6 Wochen', >
level: 'Anfänger', <h1>Kurskatalog</h1>
prerequisites: 'Keine Vorkenntnisse nötig', <p className="page-hero-subtitle">
certification: 'IT-Grundlagen Zertifikat', Hier entsteht gerade etwas Neues.
modules: ['Computer-Grundlagen', 'Betriebssysteme', 'Netzwerke', 'IT-Sicherheit'], </p>
}, </motion.div>
{ </section>
id: 2,
title: 'Python für Anfänger', <section className="page-content">
description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.', <div className="container">
duration: '6-8 Wochen', <motion.div
level: 'Anfänger', initial={{ opacity: 0, y: 30 }}
prerequisites: 'IT-Grundlagen empfohlen', whileInView={{ opacity: 1, y: 0 }}
certification: 'Python Basics Zertifikat', viewport={{ once: true }}
modules: ['Python-Grundlagen', 'Datenstrukturen', 'Funktionen & Module', 'Praxisprojekte'], transition={{ duration: 0.6 }}
}, className="content-block"
{ >
id: 3, <h2>Coming Soon</h2>
title: 'IT-Security Grundlagen', <p>
description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.', Wir arbeiten an spannenden Projekten für die Doing-IT Community. Schau bald wieder vorbei!
duration: '4-6 Wochen', </p>
level: 'Anfänger', </motion.div>
prerequisites: 'IT-Grundlagen empfohlen', </div>
certification: 'IT-Security Basics Zertifikat', </section>
modules: ['Sicherheitsgrundlagen', 'Bedrohungen erkennen', 'Schutzmaßnahmen', 'Incident Response'], </main>
}, <Footer />
{ </>
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 />
<main>
<section className="page-hero">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="container"
>
<h1>Kurskatalog</h1>
<p className="page-hero-subtitle">
Finden Sie den passenden Kurs für Ihren Einstieg in die IT
</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>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}

544
app/quereinsteiger/lernpfad-finder/page.tsx Executable file → Normal file
View File

@@ -1,235 +1,309 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useState } from 'react' import { useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import Navigation from '@/components/Navigation' import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
export default function LernpfadFinder() { export default function LernpfadFinder() {
const [currentStep, setCurrentStep] = useState(0) const [currentStep, setCurrentStep] = useState(0)
const [answers, setAnswers] = useState<Record<number, string>>({}) const [answers, setAnswers] = useState<Record<number, string>>({})
const [recommendation, setRecommendation] = useState<string | null>(null) const [recommendation, setRecommendation] = useState<string | null>(null)
const [showContactForm, setShowContactForm] = useState(false)
const questions = [ const [contactData, setContactData] = useState({
{ name: '',
question: 'Was ist Ihr Hauptziel?', email: '',
options: [ message: '',
{ text: 'Karrierewechsel in die IT', value: 'career' }, })
{ text: 'IT-Kenntnisse für meinen aktuellen Job', value: 'current' },
{ text: 'Persönliches Interesse an IT', value: 'interest' }, const questions = [
{ text: 'Gründung eines IT-Unternehmens', value: 'startup' }, {
], question: 'Was ist Ihr Hauptziel?',
}, options: [
{ { text: 'Karrierewechsel in die IT', value: 'career' },
question: 'Welcher Bereich interessiert Sie am meisten?', { text: 'IT-Kenntnisse für meinen aktuellen Job', value: 'current' },
options: [ { text: 'Persönliches Interesse an IT', value: 'interest' },
{ text: 'Programmierung & Softwareentwicklung', value: 'programming' }, { text: 'Gründung eines IT-Unternehmens', value: 'startup' },
{ text: 'IT-Sicherheit & Cybersecurity', value: 'security' }, ],
{ text: 'Systemadministration & Netzwerke', value: 'admin' }, },
{ text: 'Webentwicklung', value: 'web' }, {
{ text: 'Noch unsicher', value: 'unsure' }, question: 'Welcher Bereich interessiert Sie am meisten?',
], options: [
}, { text: 'Programmierung & Softwareentwicklung', value: 'programming' },
{ { text: 'IT-Sicherheit & Cybersecurity', value: 'security' },
question: 'Wie viel Zeit können Sie pro Woche investieren?', { text: 'Systemadministration & Netzwerke', value: 'admin' },
options: [ { text: 'Webentwicklung', value: 'web' },
{ text: 'Weniger als 5 Stunden', value: 'low' }, { text: 'Noch unsicher', value: 'unsure' },
{ text: '5-10 Stunden', value: 'medium' }, ],
{ text: '10-20 Stunden', value: 'high' }, },
{ text: 'Mehr als 20 Stunden', value: 'very-high' }, {
], question: 'Wie viel Zeit können Sie pro Woche investieren?',
}, options: [
{ { text: 'Weniger als 5 Stunden', value: 'low' },
question: 'Haben Sie bereits IT-Vorkenntnisse?', { text: '5-10 Stunden', value: 'medium' },
options: [ { text: '10-20 Stunden', value: 'high' },
{ text: 'Keine Vorkenntnisse', value: 'none' }, { text: 'Mehr als 20 Stunden', value: 'very-high' },
{ text: 'Grundkenntnisse (Computer, Internet)', value: 'basic' }, ],
{ text: 'Einige Erfahrung mit IT', value: 'some' }, },
{ text: 'Fortgeschrittene Kenntnisse', value: 'advanced' }, {
], question: 'Haben Sie bereits IT-Vorkenntnisse?',
}, options: [
] { text: 'Keine Vorkenntnisse', value: 'none' },
{ text: 'Grundkenntnisse (Computer, Internet)', value: 'basic' },
const handleAnswer = (value: string) => { { text: 'Einige Erfahrung mit IT', value: 'some' },
setAnswers({ ...answers, [currentStep]: value }) { text: 'Fortgeschrittene Kenntnisse', value: 'advanced' },
if (currentStep < questions.length - 1) { ],
setCurrentStep(currentStep + 1) },
} else { ]
calculateRecommendation()
} const handleAnswer = (value: string) => {
} setAnswers({ ...answers, [currentStep]: value })
if (currentStep < questions.length - 1) {
const calculateRecommendation = () => { setCurrentStep(currentStep + 1)
const goal = answers[0] } else {
const interest = answers[1] calculateRecommendation()
const time = answers[2] }
const experience = answers[3] }
let recommendedCourse = 'IT-Grundlagen für Einsteiger' const calculateRecommendation = () => {
const goal = answers[0]
if (experience === 'none' || experience === 'basic') { const interest = answers[1]
recommendedCourse = 'IT-Grundlagen für Einsteiger' const time = answers[2]
} else if (interest === 'programming') { const experience = answers[3]
recommendedCourse = 'Python für Anfänger'
} else if (interest === 'web') { let recommendedCourse = 'IT-Grundlagen für Einsteiger'
recommendedCourse = 'Webentwicklung für Einsteiger'
} else if (interest === 'security') { if (experience === 'none' || experience === 'basic') {
recommendedCourse = 'IT-Security Grundlagen' recommendedCourse = 'IT-Grundlagen für Einsteiger'
} else if (interest === 'admin') { } else if (interest === 'programming') {
recommendedCourse = 'Linux für Anfänger' recommendedCourse = 'Python für Anfänger'
} } else if (interest === 'web') {
recommendedCourse = 'Webentwicklung für Einsteiger'
setRecommendation(recommendedCourse) } else if (interest === 'security') {
} recommendedCourse = 'IT-Security Grundlagen'
} else if (interest === 'admin') {
const resetQuiz = () => { recommendedCourse = 'Linux für Anfänger'
setCurrentStep(0) }
setAnswers({})
setRecommendation(null) setRecommendation(recommendedCourse)
} }
return ( const resetQuiz = () => {
<> setCurrentStep(0)
<Navigation /> setAnswers({})
<main> setRecommendation(null)
<section className="page-hero"> }
<motion.div
initial={{ opacity: 0, y: 20 }} return (
animate={{ opacity: 1, y: 0 }} <>
transition={{ duration: 0.8 }} <Navigation />
className="container" <main>
> <section className="page-hero">
<h1>Lernpfad-Finder</h1> <motion.div
<p className="page-hero-subtitle"> initial={{ opacity: 0, y: 20 }}
Finden Sie den passenden Kurs für Ihren Einstieg animate={{ opacity: 1, y: 0 }}
</p> transition={{ duration: 0.8 }}
</motion.div> className="container"
</section> >
<h1>Lernpfad-Finder</h1>
<section className="page-content"> <p className="page-hero-subtitle">
<div className="container"> Finden Sie den passenden Kurs für Ihren Einstieg
<motion.div </p>
initial={{ opacity: 0, y: 30 }} </motion.div>
whileInView={{ opacity: 1, y: 0 }} </section>
viewport={{ once: true }}
transition={{ duration: 0.6 }} <section className="page-content">
className="content-block" <div className="container">
> <motion.div
<h2>Ihr persönlicher Lernpfad</h2> initial={{ opacity: 0, y: 30 }}
<p> whileInView={{ opacity: 1, y: 0 }}
Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs viewport={{ once: true }}
für Ihren Einstieg in die IT. transition={{ duration: 0.6 }}
</p> className="content-block"
</motion.div> >
<h2>Ihr persönlicher Lernpfad</h2>
<div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}> <p>
{!recommendation ? ( Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs
<> für Ihren Einstieg in die IT.
{/* Progress Bar */} </p>
<div style={{ marginBottom: '40px' }}> </motion.div>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
<span>Frage {currentStep + 1} von {questions.length}</span> <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '60px' }}>
<span>{Math.round(((currentStep + 1) / questions.length) * 100)}%</span> {!recommendation ? (
</div> <>
<div style={{ width: '100%', height: '4px', background: 'rgba(255, 255, 255, 0.1)', borderRadius: '2px', overflow: 'hidden' }}> {/* Progress Bar */}
<motion.div <div style={{ marginBottom: '40px' }}>
initial={{ width: 0 }} <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
animate={{ width: `${((currentStep + 1) / questions.length) * 100}%` }} <span>Frage {currentStep + 1} von {questions.length}</span>
transition={{ duration: 0.3 }} <span>{Math.round(((currentStep + 1) / questions.length) * 100)}%</span>
style={{ height: '100%', background: 'var(--color-accent)', borderRadius: '2px' }} </div>
/> <div style={{ width: '100%', height: '4px', background: 'rgba(255, 255, 255, 0.1)', borderRadius: '2px', overflow: 'hidden' }}>
</div> <motion.div
</div> initial={{ width: 0 }}
animate={{ width: `${((currentStep + 1) / questions.length) * 100}%` }}
{/* Current Question */} transition={{ duration: 0.3 }}
<motion.div style={{ height: '100%', background: 'var(--color-accent)', borderRadius: '2px' }}
key={currentStep} />
initial={{ opacity: 0, x: 20 }} </div>
animate={{ opacity: 1, x: 0 }} </div>
exit={{ opacity: 0, x: -20 }}
className="feature-card-large" {/* Current Question */}
style={{ textAlign: 'left' }} <motion.div
> key={currentStep}
<h2 style={{ marginBottom: '30px', fontSize: '28px' }}> initial={{ opacity: 0, x: 20 }}
{questions[currentStep].question} animate={{ opacity: 1, x: 0 }}
</h2> exit={{ opacity: 0, x: -20 }}
<div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}> className="feature-card-large"
{questions[currentStep].options.map((option) => ( style={{ textAlign: 'left' }}
<button >
key={option.value} <h2 style={{ marginBottom: '30px', fontSize: '28px' }}>
onClick={() => handleAnswer(option.value)} {questions[currentStep].question}
className="btn btn-secondary" </h2>
style={{ <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
textAlign: 'left', {questions[currentStep].options.map((option) => (
justifyContent: 'flex-start', <button
padding: '15px 20px', key={option.value}
fontSize: '17px', onClick={() => handleAnswer(option.value)}
}} className="btn btn-secondary"
> style={{
{option.text} textAlign: 'left',
</button> justifyContent: 'flex-start',
))} padding: '15px 20px',
</div> fontSize: '17px',
}}
{currentStep > 0 && ( >
<button {option.text}
onClick={() => setCurrentStep(currentStep - 1)} </button>
className="btn btn-secondary" ))}
style={{ marginTop: '20px', width: '100%' }} </div>
>
Zurück {currentStep > 0 && (
</button> <button
)} onClick={() => setCurrentStep(currentStep - 1)}
</motion.div> className="btn btn-secondary"
</> style={{ marginTop: '20px', width: '100%' }}
) : ( >
<motion.div Zurück
initial={{ opacity: 0, y: 30 }} </button>
animate={{ opacity: 1, y: 0 }} )}
className="feature-card-large" </motion.div>
style={{ textAlign: 'left' }} </>
> ) : (
<h2 style={{ marginBottom: '30px' }}>Ihre Empfehlung</h2> <motion.div
initial={{ opacity: 0, y: 30 }}
<div style={{ marginBottom: '30px' }}> animate={{ opacity: 1, y: 0 }}
<h3 style={{ fontSize: '24px', marginBottom: '15px', color: 'var(--color-accent)' }}> className="feature-card-large"
{recommendation} style={{ textAlign: 'left' }}
</h3> >
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}> <h2 style={{ marginBottom: '30px' }}>Ihre Empfehlung</h2>
Basierend auf Ihren Antworten empfehlen wir Ihnen diesen Kurs als Einstieg.
Dieser Kurs ist speziell für Quereinsteiger konzipiert und führt Sie Schritt <div style={{ marginBottom: '30px' }}>
für Schritt in die IT-Welt ein. <h3 style={{ fontSize: '24px', marginBottom: '15px', color: 'var(--color-accent)' }}>
</p> {recommendation}
</div> </h3>
<p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)' }}>
<div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}> Basierend auf Ihren Antworten empfehlen wir Ihnen diesen Kurs als Einstieg.
<p style={{ marginBottom: '20px', fontSize: '17px' }}> Dieser Kurs ist speziell für Quereinsteiger konzipiert und führt Sie Schritt
Möchten Sie mehr über diesen Kurs erfahren oder haben Sie Fragen? Kontaktieren Sie uns! für Schritt in die IT-Welt ein.
</p> </p>
<div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}> </div>
<Link href="/quereinsteiger/kurse" className="btn btn-primary">
Zum Kurskatalog <div style={{ marginTop: '40px', paddingTop: '30px', borderTop: '1px solid rgba(255, 255, 255, 0.1)' }}>
</Link> {!showContactForm ? (
<Link href="/kontakt" className="btn btn-secondary"> <>
Kontakt aufnehmen <p style={{ marginBottom: '20px', fontSize: '17px' }}>
</Link> Möchten Sie diesen Lernpfad per E-Mail erhalten? Füllen Sie das Kontaktformular aus und wir senden Ihnen die Empfehlung zu.
<button </p>
onClick={resetQuiz} <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
className="btn btn-secondary" <button
> onClick={() => setShowContactForm(true)}
Quiz erneut starten className="btn btn-primary btn-large"
</button> >
</div> Lernpfad per E-Mail senden
</div> </button>
</motion.div> <Link href="/quereinsteiger/kurse" className="btn btn-secondary btn-large">
)} Zum Kurskatalog
</div> </Link>
</div> <button
</section> onClick={resetQuiz}
</main> className="btn btn-secondary btn-large"
<Footer /> >
</> 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>
)}
</div>
</div>
</section>
</main>
<Footer />
</>
)
}

1
app/quereinsteiger/page.tsx Executable file → Normal file
View File

@@ -135,7 +135,6 @@ export default function Quereinsteiger() {
className="feature-card-large" className="feature-card-large"
style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }} style={{ maxWidth: '600px', margin: '40px auto', textAlign: 'center' }}
> >
<div className="feature-icon" style={{ fontSize: '64px' }}>🎯</div>
<h3>Lernpfad-Finder</h3> <h3>Lernpfad-Finder</h3>
<p style={{ marginBottom: '30px' }}> <p style={{ marginBottom: '30px' }}>
Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT. Beantworten Sie ein paar Fragen und wir empfehlen Ihnen den passenden Kurs für Ihren Einstieg in die IT.

125
app/testimonials/page.tsx
View File

@@ -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' }}>
&ldquo;{testimonial.quote}&rdquo;
</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 />
</>
)
}

318
app/ueber-uns/page.tsx Executable file → Normal file
View File

@@ -1,220 +1,98 @@
'use client' 'use client'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Link from 'next/link' import Link from 'next/link'
import Navigation from '@/components/Navigation' import Image from 'next/image'
import Footer from '@/components/Footer' import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'
export default function UeberUns() {
return ( export default function UeberUns() {
<> return (
<Navigation /> <>
<main> <Navigation />
{/* Hero Section */} <main>
<section className="page-hero"> <section className="page-hero">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="container" className="container"
> >
<h1>Über uns</h1> <h1>Über uns</h1>
<p className="page-hero-subtitle"> <p className="page-hero-subtitle">
Ihre Experten für IT-Weiterbildung IT für alle verständlich machen
</p> </p>
</motion.div> </motion.div>
</section> </section>
{/* Main Content */} <section className="page-content">
<section className="page-content"> <div className="container">
<div className="container"> <motion.div
<motion.div initial={{ opacity: 0, y: 30 }}
initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }}
whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
viewport={{ once: true }} transition={{ duration: 0.6 }}
transition={{ duration: 0.6 }} className="content-block"
className="content-block" >
> <h2>Unsere Mission</h2>
<h2>Unsere Mission</h2> <p>
<p> 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.
doing-it.de wurde mit dem Ziel gegründet, IT-Weiterbildung für jeden zugänglich zu machen. </p>
Wir glauben daran, dass jeder – unabhängig von Vorkenntnissen – die Möglichkeit haben sollte, </motion.div>
sich in der IT weiterzubilden und neue Karrierewege einzuschlagen.
</p> <motion.div
</motion.div> initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
<motion.div viewport={{ once: true }}
initial={{ opacity: 0, y: 30 }} transition={{ duration: 0.6, delay: 0.2 }}
whileInView={{ opacity: 1, y: 0 }} style={{
viewport={{ once: true }} maxWidth: '800px',
transition={{ duration: 0.6 }} margin: '80px auto',
className="content-block" textAlign: 'center',
> position: 'relative',
<h2>Was uns auszeichnet</h2> zIndex: 1
<p> }}
Unser Ansatz ist individuell, praxisnah und ergebnisorientiert. Wir schulen nicht nur >
theoretisch, sondern direkt an der realen IT-Infrastruktur. So wird Wissen sofort <Image
anwendbar und nachhaltig verankert. src="/motorrad.png"
</p> alt="Motorradfahren"
</motion.div> width={800}
height={600}
<div className="features-grid"> style={{
<motion.div width: '100%',
initial={{ opacity: 0, y: 30 }} height: 'auto',
whileInView={{ opacity: 1, y: 0 }} display: 'block',
viewport={{ once: true }} borderRadius: '20px',
transition={{ duration: 0.6, delay: 0.1 }} border: '1px solid rgba(255, 255, 255, 0.1)'
className="feature-card" }}
> />
<div className="feature-icon">🎯</div> <p style={{
<h3>Individuell</h3> marginTop: '30px',
<p>Jede Schulung wird auf Ihre spezifischen Bedürfnisse zugeschnitten</p> fontSize: '19px',
</motion.div> color: 'var(--color-text-secondary)',
lineHeight: '1.7'
<motion.div }}>
initial={{ opacity: 0, y: 30 }} Neben der IT teilen wir beide die Leidenschaft für das Motorradfahren.
whileInView={{ opacity: 1, y: 0 }} </p>
viewport={{ once: true }} </motion.div>
transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card" <motion.div
> initial={{ opacity: 0, y: 30 }}
<div className="feature-icon">💼</div> whileInView={{ opacity: 1, y: 0 }}
<h3>Praxisnah</h3> viewport={{ once: true }}
<p>Lernen direkt an Ihrer eigenen IT-Infrastruktur</p> transition={{ duration: 0.6 }}
</motion.div> className="cta-section"
>
<motion.div <h2>Kontaktieren Sie uns</h2>
initial={{ opacity: 0, y: 30 }} <p>Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren?</p>
whileInView={{ opacity: 1, y: 0 }} <Link href="/kontakt" className="btn btn-primary btn-large">
viewport={{ once: true }} Jetzt Kontakt aufnehmen
transition={{ duration: 0.6, delay: 0.3 }} </Link>
className="feature-card" </motion.div>
> </div>
<div className="feature-icon">👥</div> </section>
<h3>Experten-Team</h3> </main>
<p>Erfahrene IT-Profis mit jahrelanger Branchenerfahrung</p> <Footer />
</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.
</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" 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.
</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 }}
viewport={{ once: true }}
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">
Jetzt Kontakt aufnehmen
</Link>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}

44
app/unternehmen/coming-soon/page.tsx Normal file
View 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
View File

@@ -2,6 +2,8 @@
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Link from 'next/link' 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 Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
@@ -48,7 +50,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
className="feature-card-large" 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> <h3>Infrastruktur-Erfassung</h3>
<p> <p>
Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke, Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke,
@@ -64,7 +68,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card-large" className="feature-card-large"
> >
<div className="feature-icon">🛡️</div> <AnimatedIcon delay={0.2}>
<FaShieldAlt size={32} color="var(--color-red)" />
</AnimatedIcon>
<h3>Sicherheitsanalyse</h3> <h3>Sicherheitsanalyse</h3>
<p> <p>
Wir identifizieren Sicherheitslücken, veraltete Systeme und Wir identifizieren Sicherheitslücken, veraltete Systeme und
@@ -80,7 +86,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
className="feature-card-large" 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> <h3>Schulungsbedarfs-Analyse</h3>
<p> <p>
Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche
@@ -112,6 +120,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
className="feature-card" className="feature-card"
> >
<AnimatedIcon delay={0.1}>
<FaMapMarkerAlt size={28} color="var(--color-red)" />
</AnimatedIcon>
<h3>Vor-Ort-Begehungen</h3> <h3>Vor-Ort-Begehungen</h3>
<p>Persönliche Inspektion Ihrer IT-Infrastruktur</p> <p>Persönliche Inspektion Ihrer IT-Infrastruktur</p>
</motion.div> </motion.div>
@@ -123,6 +134,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card" className="feature-card"
> >
<AnimatedIcon delay={0.2}>
<FaComments size={28} color="var(--color-red)" />
</AnimatedIcon>
<h3>Interviews mit Mitarbeitern</h3> <h3>Interviews mit Mitarbeitern</h3>
<p>Gespräche zur Ermittlung des Wissensstands</p> <p>Gespräche zur Ermittlung des Wissensstands</p>
</motion.div> </motion.div>
@@ -134,6 +148,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
className="feature-card" className="feature-card"
> >
<AnimatedIcon delay={0.3}>
<FaNetworkWired size={28} color="var(--color-red)" />
</AnimatedIcon>
<h3>Technische Scans</h3> <h3>Technische Scans</h3>
<p>Automatisierte Analyse von Systemen und Netzwerken</p> <p>Automatisierte Analyse von Systemen und Netzwerken</p>
</motion.div> </motion.div>
@@ -145,6 +162,9 @@ export default function ITInfrastrukturanalyse() {
transition={{ duration: 0.6, delay: 0.4 }} transition={{ duration: 0.6, delay: 0.4 }}
className="feature-card" className="feature-card"
> >
<AnimatedIcon delay={0.4}>
<FaFileAlt size={28} color="var(--color-red)" />
</AnimatedIcon>
<h3>Dokumentenanalyse</h3> <h3>Dokumentenanalyse</h3>
<p>Auswertung bestehender Dokumentationen</p> <p>Auswertung bestehender Dokumentationen</p>
</motion.div> </motion.div>
@@ -222,7 +242,7 @@ export default function ITInfrastrukturanalyse() {
> >
<h2>Starten Sie mit der Analyse</h2> <h2>Starten Sie mit der Analyse</h2>
<p>Kontaktieren Sie uns für eine unverbindliche Beratung</p> <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 IT-Analyse anfordern
</Link> </Link>
</motion.div> </motion.div>
@@ -233,4 +253,3 @@ export default function ITInfrastrukturanalyse() {
</> </>
) )
} }

141
app/unternehmen/page.tsx Executable file → Normal file
View File

@@ -2,6 +2,8 @@
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import Link from 'next/link' 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 Navigation from '@/components/Navigation'
import Footer from '@/components/Footer' import Footer from '@/components/Footer'
@@ -10,7 +12,6 @@ export default function Unternehmen() {
<> <>
<Navigation /> <Navigation />
<main> <main>
{/* Hero Section */}
<section className="page-hero"> <section className="page-hero">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -25,7 +26,6 @@ export default function Unternehmen() {
</motion.div> </motion.div>
</section> </section>
{/* Main Content */}
<section className="page-content"> <section className="page-content">
<div className="container"> <div className="container">
<motion.div <motion.div
@@ -41,13 +41,13 @@ export default function Unternehmen() {
</p> </p>
</motion.div> </motion.div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px', marginBottom: '100px' }}> <div className="features-grid">
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
className="feature-card-large" className="feature-card"
> >
<div className="feature-number">1</div> <div className="feature-number">1</div>
<h3>Analyse Ihrer IT</h3> <h3>Analyse Ihrer IT</h3>
@@ -64,7 +64,7 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card-large" className="feature-card"
> >
<div className="feature-number">2</div> <div className="feature-number">2</div>
<h3>Maßgeschneiderte Schulungskonzepte</h3> <h3>Maßgeschneiderte Schulungskonzepte</h3>
@@ -80,7 +80,7 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
className="feature-card-large" className="feature-card"
> >
<div className="feature-number">3</div> <div className="feature-number">3</div>
<h3>Aufbau interner Experten</h3> <h3>Aufbau interner Experten</h3>
@@ -98,6 +98,7 @@ export default function Unternehmen() {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="content-block" className="content-block"
style={{ marginTop: '80px' }}
> >
<h2>Ihre Vorteile</h2> <h2>Ihre Vorteile</h2>
<p> <p>
@@ -112,9 +113,11 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }} 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> <h3>IT-Analyse</h3>
<p> <p>
Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren
@@ -127,9 +130,11 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }} 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> <h3>Schulung auf Ihrer Infrastruktur</h3>
<p> <p>
Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur. Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur.
@@ -142,9 +147,11 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }} 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> <h3>Interne Experten aufbauen</h3>
<p> <p>
Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie
@@ -157,37 +164,28 @@ export default function Unternehmen() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }} 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> <h3>IT-Sensibilisierung</h3>
<p> <p>
Wir schulen Ihre Mitarbeiter in generellen IT-Themen als Sensibilisierung Wir schulen Ihre Mitarbeiter in generellen IT-Themen als Sensibilisierung
für verschiedenste Bereiche. Von Sicherheit bis Cloud-Computing. für verschiedenste Bereiche. Von Sicherheit bis Cloud-Computing.
</p> </p>
</motion.div> </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 <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.5 }}
className="feature-card" className="feature-card"
> >
<div className="feature-icon">💰</div> <AnimatedIcon delay={0.5}>
<FaDollarSign size={32} color="var(--color-red)" />
</AnimatedIcon>
<h3>Kosteneinsparung</h3> <h3>Kosteneinsparung</h3>
<p> <p>
Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte
@@ -199,76 +197,18 @@ export default function Unternehmen() {
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.6 }}
className="feature-card" className="feature-card"
> >
<div className="feature-icon">⚡</div> <AnimatedIcon delay={0.6}>
<FaBolt size={32} color="var(--color-red)" />
</AnimatedIcon>
<h3>Schnellere Reaktionszeiten</h3> <h3>Schnellere Reaktionszeiten</h3>
<p> <p>
Interne Experten können Probleme schneller lösen, ohne auf externe Interne Experten können Probleme schneller lösen, ohne auf externe
Unterstützung warten zu müssen. Unterstützung warten zu müssen.
</p> </p>
</motion.div> </motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
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> </div>
<motion.div <motion.div
@@ -285,7 +225,7 @@ export default function Unternehmen() {
</p> </p>
</motion.div> </motion.div>
<div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}> <div className="features-grid">
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -293,10 +233,12 @@ export default function Unternehmen() {
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
className="feature-card" className="feature-card"
> >
<div className="feature-icon">📋</div> <AnimatedIcon delay={0.1}>
<FaClipboardCheck size={32} color="var(--color-red)" />
</AnimatedIcon>
<h3>IT-Checkliste</h3> <h3>IT-Checkliste</h3>
<p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit</p> <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 Tool öffnen
</Link> </Link>
</motion.div> </motion.div>
@@ -308,10 +250,12 @@ export default function Unternehmen() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="feature-card" className="feature-card"
> >
<div className="feature-icon">📊</div> <AnimatedIcon delay={0.2}>
<FaCalculator size={32} color="var(--color-red)" />
</AnimatedIcon>
<h3>Schulungsbedarfs-Rechner</h3> <h3>Schulungsbedarfs-Rechner</h3>
<p>Schätzen Sie den Umfang Ihrer IT-Schulung</p> <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 Tool öffnen
</Link> </Link>
</motion.div> </motion.div>
@@ -326,9 +270,9 @@ export default function Unternehmen() {
> >
<h2>Bereit für die IT-Analyse?</h2> <h2>Bereit für die IT-Analyse?</h2>
<p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p> <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 IT-Analyse anfordern
</a> </Link>
</motion.div> </motion.div>
</div> </div>
</section> </section>
@@ -337,4 +281,3 @@ export default function Unternehmen() {
</> </>
) )
} }

0
app/unternehmen/schulungsthemen/page.tsx Executable file → Normal file
View File

0
app/unternehmen/tools/it-checkliste/page.tsx Executable file → Normal file
View File

0
app/unternehmen/tools/schulungsbedarf/page.tsx Executable file → Normal file
View File

0
app/wiki/page.tsx Executable file → Normal file
View File

25
components/AnimatedIcon.tsx Normal file
View 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
View File

@@ -1,4 +1,5 @@
import Link from 'next/link' import Link from 'next/link'
import { FaInstagram, FaYoutube, FaTiktok } from 'react-icons/fa'
export default function Footer() { export default function Footer() {
return ( return (
@@ -8,38 +9,57 @@ export default function Footer() {
<div className="footer-section"> <div className="footer-section">
<h3>doing-it</h3> <h3>doing-it</h3>
<p>IT Weiterbildung und Schulungen</p> <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>
<div className="footer-section"> <div className="footer-section">
<h4>Kontakt</h4> <h4>Kontakt</h4>
<a href="mailto:info@doing-it.de">info@doing-it.de</a> <a href="mailto:info@doing-it.de">info@doing-it.de</a>
<Link href="/kontakt" style={{ display: 'block', marginTop: '10px' }}>
Kontaktformular
</Link>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Social Media</h4> <h4>Social Media</h4>
<div className="footer-social"> <div className="footer-social">
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="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' }}>
LinkedIn <FaInstagram style={{ fontSize: '18px' }} /> Instagram
</a> </a>
<a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="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' }}>
Xing <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> </a>
</div> </div>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Navigation</h4> <h4>Navigation</h4>
<Link href="/">Home</Link> <Link href="/">Startseite</Link>
<Link href="/unternehmen">Für Unternehmen</Link> <Link href="/quereinsteiger">Quereinsteiger</Link>
<Link href="/quereinsteiger">Für Quereinsteiger</Link> <Link href="/unternehmen">Unternehmen</Link>
<Link href="/ueber-uns">Über uns</Link> <Link href="/quereinsteiger/kurse">Kurskatalog</Link>
<Link href="/kontakt">Kontakt</Link> <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer">
Wiki
</a>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Rechtliches</h4> <h4>Rechtliches</h4>
<Link href="/impressum">Impressum</Link> <Link href="/impressum">Impressum</Link>
<Link href="/datenschutz">Datenschutzerklärung</Link> <Link href="/datenschutz">Datenschutzerklärung</Link>
<Link href="/agb">AGB</Link> <Link href="/kontakt">Kontakt</Link>
</div> </div>
</div> </div>
@@ -50,4 +70,3 @@ export default function Footer() {
</footer> </footer>
) )
} }

308
components/Navigation.tsx Executable file → Normal file
View File

@@ -6,6 +6,11 @@ import { motion, AnimatePresence } from 'framer-motion'
export default function Navigation() { export default function Navigation() {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [openDropdown, setOpenDropdown] = useState<string | null>(null)
const toggleDropdown = (dropdown: string) => {
setOpenDropdown(openDropdown === dropdown ? null : dropdown)
}
return ( return (
<nav className="nav"> <nav className="nav">
@@ -17,26 +22,171 @@ export default function Navigation() {
{/* Desktop Menu */} {/* Desktop Menu */}
<div className="nav-menu"> <div className="nav-menu">
<Link href="/" className="nav-link"> <Link href="/" className="nav-link">
Home Startseite
</Link> </Link>
<Link href="/unternehmen" className="nav-link">
Für Unternehmen {/* Quereinsteiger Dropdown */}
</Link> <div
<Link href="/quereinsteiger" className="nav-link"> className="nav-dropdown"
Für Quereinsteiger onMouseEnter={() => setOpenDropdown('quereinsteiger')}
</Link> onMouseLeave={() => setOpenDropdown(null)}
<Link href="/ueber-uns" className="nav-link"> >
Über uns <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="/unternehmen/tools/it-checkliste" className="nav-dropdown-link">
Checkliste
</Link>
<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> </Link>
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link"> <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link">
Wiki Wiki
</a> </a>
<Link href="/kontakt" className="nav-link">
Kontakt {/* Projekte Dropdown */}
</Link> <div
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}> className="nav-dropdown"
<span aria-label="LinkedIn">🔗</span> onMouseEnter={() => setOpenDropdown('projekte')}
</a> 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>
<Link href="/ueber-uns" className="nav-dropdown-link">
Über uns
</Link>
</motion.div>
)}
</AnimatePresence>
</div>
</div> </div>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
@@ -61,27 +211,129 @@ export default function Navigation() {
className="nav-mobile" className="nav-mobile"
> >
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Home Startseite
</Link> </Link>
<Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Für Unternehmen <div className="nav-mobile-dropdown">
</Link> <button
<Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}> className="nav-mobile-link nav-mobile-dropdown-toggle"
Für Quereinsteiger onClick={() => toggleDropdown('quereinsteiger-mobile')}
</Link> >
<Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}> Quereinsteiger {openDropdown === 'quereinsteiger-mobile' ? '▼' : '▶'}
Über uns </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="/unternehmen/tools/it-checkliste" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
Checkliste
</Link>
<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> </Link>
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Wiki Wiki
</a> </a>
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Kontakt <div className="nav-mobile-dropdown">
</Link> <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> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
</nav> </nav>
) )
} }

0
docker-compose.yml Executable file → Normal file
View File

19
next.config.js Executable file → Normal file
View File

@@ -1,8 +1,11 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
output: 'standalone', output: 'standalone',
reactStrictMode: true, reactStrictMode: true,
} images: {
unoptimized: true,
module.exports = nextConfig },
}
module.exports = nextConfig

3
package.json Executable file → Normal file
View File

@@ -12,7 +12,8 @@
"next": "14.0.4", "next": "14.0.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"framer-motion": "^10.16.16" "framer-motion": "^10.16.16",
"react-icons": "^4.12.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.10.6", "@types/node": "^20.10.6",

BIN
public/motorrad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/site.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

4
quartz-setup/.dockerignore
View File

@@ -1,4 +0,0 @@
node_modules
.next
.git

36
quartz-setup/Dockerfile
View File

@@ -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"]

165
quartz-setup/entrypoint.sh
View File

@@ -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

18
quartz-setup/init-quartz.sh
View File

@@ -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!"

21
quartz-setup/nginx.conf
View File

@@ -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";
}
}

16
quartz-setup/package.json
View File

@@ -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"
}
}

2
quartz-setup/public/Doing IT!.md
View File

@@ -1,2 +0,0 @@
This Knowledge Database is about to get greatly organized and will grow soon for you!

12
quartz-setup/public/Home.md
View File

@@ -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]]

23
quartz-setup/public/IT-Grundlagen.md
View File

@@ -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]]

24
quartz-setup/public/Ressourcen.md
View File

@@ -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]]

22
quartz-setup/public/Schulungsmethoden.md
View File

@@ -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]]

5
quartz-setup/public/Test Note linked.md
View File

@@ -1,5 +0,0 @@
this note is linked to a test note :D
[[Welcome]]

5
quartz-setup/public/Welcome.md
View File

@@ -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.

76
quartz-setup/public/index.html
View File

@@ -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>

89
quartz-setup/quartz.config.ts
View File

@@ -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
View File

1
wiki-vault/.obsidian/app.json vendored
View File

@@ -1 +0,0 @@
{}

1
wiki-vault/.obsidian/appearance.json vendored
View File

@@ -1 +0,0 @@
{}

33
wiki-vault/.obsidian/core-plugins.json vendored
View File

@@ -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
View File

@@ -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
View File

@@ -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"
]
}

2
wiki-vault/Doing IT!.md
View File

@@ -1,2 +0,0 @@
This Knowledge Database is about to get greatly organized and will grow soon for you!

12
wiki-vault/Home.md
View File

@@ -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]]

23
wiki-vault/IT-Grundlagen.md
View File

@@ -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]]

24
wiki-vault/Ressourcen.md
View File

@@ -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]]

22
wiki-vault/Schulungsmethoden.md
View File

@@ -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]]

5
wiki-vault/Test Note linked.md
View File

@@ -1,5 +0,0 @@
this note is linked to a test note :D
[[Welcome]]

5
wiki-vault/Welcome.md
View File

@@ -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.