import { useState } from 'react'; import { Menu, X, ChevronLeft, ChevronRight } from 'lucide-react'; export default function InteractiveNavbar() { const [currentPage, setCurrentPage] = useState(0); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const pages = [ { name: 'Home', color: 'from-blue-500 to-purple-600' }, { name: 'Über uns', color: 'from-purple-500 to-pink-600' }, { name: 'Leistungen', color: 'from-pink-500 to-red-600' }, { name: 'Portfolio', color: 'from-red-500 to-orange-600' }, { name: 'Kontakt', color: 'from-orange-500 to-yellow-600' } ]; const nextPage = () => { setCurrentPage((prev) => (prev + 1) % pages.length); }; const prevPage = () => { setCurrentPage((prev) => (prev - 1 + pages.length) % pages.length); }; return (
{/* Navbar */}
{/* Logo */}
MeineLogo
{/* Desktop Navigation mit Slider */}
{pages.map((page, index) => (
setCurrentPage(index)} className={`px-4 py-2 rounded-full transition-all duration-300 ${ currentPage === index ? 'bg-gradient-to-r ' + page.color + ' text-white scale-110' : 'text-gray-300 hover:text-white hover:bg-gray-600' }`} > {page.name}
))}
{/* Mobile Menu Button */}
setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-white hover:bg-gray-700 p-2 rounded-md" > {isMobileMenuOpen ?
:
}
{/* Mobile Menu */} {isMobileMenuOpen && (
{pages.map((page, index) => (
{ setCurrentPage(index); setIsMobileMenuOpen(false); }} className={`w-full text-left px-3 py-2 rounded-md transition-all duration-200 ${ currentPage === index ? 'bg-gradient-to-r ' + page.color + ' text-white' : 'text-gray-300 hover:bg-gray-600 hover:text-white' }`} > {page.name}
))}
)}
{/* Content Area */}
{pages[currentPage].name}
Seite {currentPage + 1} von {pages.length}
Zurück
Weiter
{/* Page Indicators */}
{pages.map((_, index) => (
setCurrentPage(index)} className={`w-3 h-3 rounded-full transition-all duration-200 ${ currentPage === index ? 'bg-white scale-125' : 'bg-white bg-opacity-40 hover:bg-opacity-60' }`} aria-label={`Gehe zu Seite ${index + 1}`} /> ))}
); }
4,9 von 5 basierend auf 1.000 Bewertungen
Dein perfekter Plan für alles, was du vorhast.
Onepage ist super flexibel und passt sich genau deinen Bedürfnissen an. Wir haben viele vorgefertigte Abschnitte, damit du sofort loslegen und kreativ sein kannst.
€450
Call-to-Action button
Bewertungen lesen
Hauptmerkmale
Unternehmensanalyse fokussiert auf Ihre Ziele
Einzelberatung mit Expertenbegleitung
Zusammenfassungsbericht mit Empfehlungen
Hosting Paketauswahl
Hosting Paketauswahl
Monatlich
Jährlich
15% sparen
Basic Hosting & Maintenance
25,49€
/Monat
spare 4,50€/Monat
Hosting
SSL-Zertifikat
Monitoring
1x monatliche Inhaltsänderung
Support per E-Mail
Premium Hosting & Maintenance
46,74€
/Monat
spare 8,25€/Monat
x5 Inhaltsänderungen pro Monat
Technischer Support innerhalb von 24 Stunden
Monthly Performance-Checks
Monitoring + Ausfallbenachrichtigung
Monthly SEO-Tracking (Ranking-Reports)
Monatlicher Analysebericht
10% Rabatt auf zukünftige Impactify Media Dienstleistungen
Business Hosting
127,49€
/Monat
spare 22,50€/Monat
x10 Inhaltsänderungen pro Monat
Technischer Support innerhalb von 6 Stunden
Weekly Performance-Checks
Monitoring + Ausfallbenachrichtigung
Weekly SEO-Tracking (Ranking-Reports)
Detaillierter Monatlicher Analysebericht
20% Rabatt auf zukünftige Impactify Media Dienstleistungen
