development/68b2295f-417e-4c9c-b8e8-e6cae3d7587b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitalijmulika
2025-12-29 13:58:15 +02:00
commit e0801b0982
89 changed files with 2556 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/Header.js Normal file
View File

@@ -0,0 +1,95 @@
import React, { useState } from 'react';
import { Menu, X, ChevronDown } from 'lucide-react';
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isServicesOpen, setIsServicesOpen] = useState(false);
return (
<header className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-100 z-50">
<div className="container-custom">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-sm">S</span>
</div>
<span className="text-xl font-bold text-gray-900">Sargas</span>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-8">
<div className="relative">
<button
className="flex items-center space-x-1 text-gray-700 hover:text-blue-600 transition-colors"
onMouseEnter={() => setIsServicesOpen(true)}
onMouseLeave={() => setIsServicesOpen(false)}
>
<span>Services</span>
<ChevronDown className="w-4 h-4" />
</button>
{isServicesOpen && (
<div
className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-100 py-2"
onMouseEnter={() => setIsServicesOpen(true)}
onMouseLeave={() => setIsServicesOpen(false)}
>
<a href="#web-dev" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Web Development</a>
<a href="#mobile-dev" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Mobile Development</a>
<a href="#support" className="block px-4 py-2 text-gray-700 hover:bg-gray-50">Support and Maintenance</a>
</div>
)}
</div>
<a href="#portfolio" className="text-gray-700 hover:text-blue-600 transition-colors">Portfolio</a>
<a href="#about" className="text-gray-700 hover:text-blue-600 transition-colors">About</a>
<a href="#contacts" className="text-gray-700 hover:text-blue-600 transition-colors">Contacts</a>
</nav>
{/* Clutch Rating */}
<div className="hidden md:flex items-center space-x-3">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
<span className="text-white font-bold text-xs">C</span>
</div>
<div>
<div className="flex items-center space-x-1">
<span className="font-semibold text-gray-900">4.9</span>
<div className="flex text-orange-400">
{[...Array(5)].map((_, i) => (
<span key={i} className="text-xs">★</span>
))}
</div>
</div>
<p className="text-xs text-gray-600">Based on 6 Clutch reviews</p>
</div>
</div>
<button className="btn-secondary">Book a Call</button>
</div>
{/* Mobile Menu Button */}
<button
className="md:hidden p-2"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
</div>
{/* Mobile Menu */}
{isMenuOpen && (
<div className="md:hidden border-t border-gray-100 py-4">
<nav className="flex flex-col space-y-4">
<a href="#services" className="text-gray-700 hover:text-blue-600 transition-colors">Services</a>
<a href="#portfolio" className="text-gray-700 hover:text-blue-600 transition-colors">Portfolio</a>
<a href="#about" className="text-gray-700 hover:text-blue-600 transition-colors">About</a>
<a href="#contacts" className="text-gray-700 hover:text-blue-600 transition-colors">Contacts</a>
<button className="btn-secondary w-full mt-4">Book a Call</button>
</nav>
</div>
)}
</div>
</header>
);
};
export default Header;