Initial commit with essential code files only

2025-07-18 16:13:09 +02:00
commit 8e9b0ef8a8
33 changed files with 1703 additions and 0 deletions
--- a/components/templates/navigation.js
+++ b/components/templates/navigation.js
@@ -0,0 +1,130 @@
+import { useState, useEffect } from "react";
+
+export default function Navigation() {
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			setIsScrolled(window.scrollY > 10);
+		};
+
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+
+	const scrollToSection = (sectionId) => {
+		const element = document.getElementById(sectionId);
+		if (element) {
+			element.scrollIntoView({ behavior: "smooth" });
+		}
+		setIsMobileMenuOpen(false);
+	};
+
+	return (
+		<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+			isScrolled ? "bg-white shadow-lg" : "bg-transparent"
+		}`}>
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div className="flex justify-between items-center py-4">
+					{/* Logo */}
+					<div className="flex-shrink-0">
+						<img 
+							src="./logo.png" 
+							alt="Wastpol Logo" 
+							className={`h-12 transition-all duration-300 ${
+								isScrolled ? "filter-none" : "brightness-0 invert"
+							}`}
+						/>
+					</div>
+
+					{/* Desktop Menu */}
+					<div className="hidden md:flex items-center space-x-8">
+						<button 
+							onClick={() => scrollToSection("uslugi")}
+							className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
+								isScrolled ? "text-gray-700" : "text-white"
+							}`}
+						>
+							Usługi
+						</button>
+						<button 
+							onClick={() => scrollToSection("onas")}
+							className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
+								isScrolled ? "text-gray-700" : "text-white"
+							}`}
+						>
+							O nas
+						</button>
+						<button 
+							onClick={() => scrollToSection("kontakt")}
+							className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
+								isScrolled ? "text-gray-700" : "text-white"
+							}`}
+						>
+							Kontakt
+						</button>
+						<a 
+							href="tel:18442022044"
+							className={`font-semibold px-4 py-2 rounded-md transition-all duration-300 ${
+								isScrolled 
+									? "bg-blue-600 text-white hover:bg-blue-700" 
+									: "bg-white text-blue-600 hover:bg-gray-100"
+							}`}
+						>
+							18 442 02 44
+						</a>
+					</div>
+
+					{/* Mobile menu button */}
+					<div className="md:hidden">
+						<button
+							onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+							className={`inline-flex items-center justify-center p-2 rounded-md transition-colors duration-300 ${
+								isScrolled ? "text-gray-700 hover:bg-gray-100" : "text-white hover:bg-white hover:bg-opacity-10"
+							}`}
+						>
+							<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								{isMobileMenuOpen ? (
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+								) : (
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+								)}
+							</svg>
+						</button>
+					</div>
+				</div>
+
+				{/* Mobile menu */}
+				{isMobileMenuOpen && (
+					<div className="md:hidden bg-white shadow-lg rounded-lg mt-2 py-2">
+						<button 
+							onClick={() => scrollToSection("uslugi")}
+							className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
+						>
+							Usługi
+						</button>
+						<button 
+							onClick={() => scrollToSection("onas")}
+							className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
+						>
+							O nas
+						</button>
+						<button 
+							onClick={() => scrollToSection("kontakt")}
+							className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
+						>
+							Kontakt
+						</button>
+						<a 
+							href="tel:18442022044"
+							className="block px-4 py-2 text-blue-600 font-semibold hover:bg-gray-100"
+						>
+							18 442 02 44
+						</a>
+					</div>
+				)}
+			</div>
+		</nav>
+	);
+}