v1 production
This commit is contained in:
25
components/AnimatedIcon.tsx
Normal file
25
components/AnimatedIcon.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface AnimatedIconProps {
|
||||
children: ReactNode
|
||||
delay?: number
|
||||
}
|
||||
|
||||
export default function AnimatedIcon({ children, delay = 0 }: AnimatedIconProps) {
|
||||
return (
|
||||
<motion.div
|
||||
className="animation-icon"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay }}
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
41
components/Footer.tsx
Executable file → Normal file
41
components/Footer.tsx
Executable file → Normal file
@@ -1,4 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
import { FaInstagram, FaYoutube, FaTiktok } from 'react-icons/fa'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
@@ -8,38 +9,57 @@ export default function Footer() {
|
||||
<div className="footer-section">
|
||||
<h3>doing-it</h3>
|
||||
<p>IT Weiterbildung und Schulungen</p>
|
||||
<p style={{ fontSize: '14px', color: 'var(--color-text-secondary)', marginTop: '15px' }}>
|
||||
Doing-IT – ein Projekt von{' '}
|
||||
<a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
|
||||
matzefixit
|
||||
</a>
|
||||
{' '}&{' '}
|
||||
<a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
|
||||
hoerter-tech
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Kontakt</h4>
|
||||
<a href="mailto:info@doing-it.de">info@doing-it.de</a>
|
||||
<Link href="/kontakt" style={{ display: 'block', marginTop: '10px' }}>
|
||||
Kontaktformular
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Social Media</h4>
|
||||
<div className="footer-social">
|
||||
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
|
||||
LinkedIn
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaInstagram style={{ fontSize: '18px' }} /> Instagram
|
||||
</a>
|
||||
<a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing">
|
||||
Xing
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" aria-label="YouTube" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaYoutube style={{ fontSize: '18px' }} /> YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="TikTok" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<FaTiktok style={{ fontSize: '18px' }} /> TikTok
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Navigation</h4>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/unternehmen">Für Unternehmen</Link>
|
||||
<Link href="/quereinsteiger">Für Quereinsteiger</Link>
|
||||
<Link href="/ueber-uns">Über uns</Link>
|
||||
<Link href="/kontakt">Kontakt</Link>
|
||||
<Link href="/">Startseite</Link>
|
||||
<Link href="/quereinsteiger">Quereinsteiger</Link>
|
||||
<Link href="/unternehmen">Unternehmen</Link>
|
||||
<Link href="/quereinsteiger/kurse">Kurskatalog</Link>
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer">
|
||||
Wiki
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="footer-section">
|
||||
<h4>Rechtliches</h4>
|
||||
<Link href="/impressum">Impressum</Link>
|
||||
<Link href="/datenschutz">Datenschutzerklärung</Link>
|
||||
<Link href="/agb">AGB</Link>
|
||||
<Link href="/kontakt">Kontakt</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,4 +70,3 @@ export default function Footer() {
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
308
components/Navigation.tsx
Executable file → Normal file
308
components/Navigation.tsx
Executable file → Normal file
@@ -6,6 +6,11 @@ import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
export default function Navigation() {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null)
|
||||
|
||||
const toggleDropdown = (dropdown: string) => {
|
||||
setOpenDropdown(openDropdown === dropdown ? null : dropdown)
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="nav">
|
||||
@@ -17,26 +22,171 @@ export default function Navigation() {
|
||||
{/* Desktop Menu */}
|
||||
<div className="nav-menu">
|
||||
<Link href="/" className="nav-link">
|
||||
Home
|
||||
Startseite
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="nav-link">
|
||||
Für Unternehmen
|
||||
</Link>
|
||||
<Link href="/quereinsteiger" className="nav-link">
|
||||
Für Quereinsteiger
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-link">
|
||||
Über uns
|
||||
|
||||
{/* Quereinsteiger Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('quereinsteiger')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Quereinsteiger
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'quereinsteiger' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="nav-dropdown-link">
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
<Link href="/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>
|
||||
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link">
|
||||
Wiki
|
||||
</a>
|
||||
<Link href="/kontakt" className="nav-link">
|
||||
Kontakt
|
||||
</Link>
|
||||
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
|
||||
<span aria-label="LinkedIn">🔗</span>
|
||||
</a>
|
||||
|
||||
{/* Projekte Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('projekte')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Projekte
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'projekte' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/projekte/youtube-website" className="nav-dropdown-link">
|
||||
YouTube Website
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon-2" className="nav-dropdown-link">
|
||||
Coming soon
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Socials Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('socials')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Socials
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'socials' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
Instagram
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
||||
TikTok
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Kontakt Dropdown */}
|
||||
<div
|
||||
className="nav-dropdown"
|
||||
onMouseEnter={() => setOpenDropdown('kontakt')}
|
||||
onMouseLeave={() => setOpenDropdown(null)}
|
||||
>
|
||||
<button className="nav-link nav-dropdown-toggle">
|
||||
Kontakt
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{openDropdown === 'kontakt' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="nav-dropdown-menu"
|
||||
>
|
||||
<Link href="/kontakt" className="nav-dropdown-link">
|
||||
Kontakt
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-dropdown-link">
|
||||
Über uns
|
||||
</Link>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
@@ -61,27 +211,129 @@ export default function Navigation() {
|
||||
className="nav-mobile"
|
||||
>
|
||||
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Home
|
||||
Startseite
|
||||
</Link>
|
||||
<Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Für Unternehmen
|
||||
</Link>
|
||||
<Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Für Quereinsteiger
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Über uns
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('quereinsteiger-mobile')}
|
||||
>
|
||||
Quereinsteiger {openDropdown === 'quereinsteiger-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'quereinsteiger-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/quereinsteiger/lernpfad-finder" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Lernpfadfinder
|
||||
</Link>
|
||||
<Link href="/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>
|
||||
|
||||
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Wiki
|
||||
</a>
|
||||
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Kontakt
|
||||
</Link>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('projekte-mobile')}
|
||||
>
|
||||
Projekte {openDropdown === 'projekte-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'projekte-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/projekte/youtube-website" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
YouTube Website
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
<Link href="/projekte/coming-soon-2" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Coming soon
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('socials-mobile')}
|
||||
>
|
||||
Socials {openDropdown === 'socials-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'socials-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Instagram
|
||||
</a>
|
||||
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
YouTube
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
TikTok
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="nav-mobile-dropdown">
|
||||
<button
|
||||
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
||||
onClick={() => toggleDropdown('kontakt-mobile')}
|
||||
>
|
||||
Kontakt {openDropdown === 'kontakt-mobile' ? '▼' : '▶'}
|
||||
</button>
|
||||
{openDropdown === 'kontakt-mobile' && (
|
||||
<div className="nav-mobile-dropdown-menu">
|
||||
<Link href="/kontakt" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Kontakt
|
||||
</Link>
|
||||
<Link href="/ueber-uns" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
||||
Über uns
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user