323 lines
11 KiB
JavaScript
323 lines
11 KiB
JavaScript
// import { useState, useEffect } from 'react'
|
|
// import { Link } from 'react-router-dom'
|
|
// import logo from '../assets/images/logo200x50.png'
|
|
// import { ScrollRestoration } from 'react-router-dom';
|
|
|
|
// export default function Header() {
|
|
// const [isScrolled, setIsScrolled] = useState(false)
|
|
|
|
// useEffect(() => {
|
|
// const handleScroll = () => {
|
|
// const isFullScreenPassed = window.scrollY > window.innerHeight
|
|
// setIsScrolled(isFullScreenPassed)
|
|
// }
|
|
|
|
// window.addEventListener('scroll', handleScroll)
|
|
// return () => window.removeEventListener('scroll', handleScroll)
|
|
// }, [])
|
|
|
|
// return (
|
|
// <header
|
|
// className={`
|
|
// fixed top-0 left-0 w-full z-50
|
|
// transition-all duration-300
|
|
// ${isScrolled
|
|
// ? 'bg-white bg-opacity-90 backdrop-blur-md'
|
|
// : 'bg-transparent backdrop-blur-md bg-opacity-30'
|
|
// }
|
|
// `}
|
|
// >
|
|
// <div className="container mx-auto px-4">
|
|
// <div className="flex items-center justify-between h-16">
|
|
// <div className="flex items-center">
|
|
// <a href="#">
|
|
// <img
|
|
// src={logo}
|
|
// alt="Logo"
|
|
// className="h-12 w-auto"
|
|
// />
|
|
// </a>
|
|
// </div>
|
|
|
|
// <nav className="hidden md:flex space-x-8">
|
|
// <Link
|
|
// to="/pricing"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// Тарифный план
|
|
// </Link>
|
|
// <a
|
|
// href="#contacts-section"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// Обратная связь
|
|
// </a>
|
|
// </nav>
|
|
// </div>
|
|
// </div>
|
|
// </header>
|
|
// )
|
|
// }
|
|
|
|
// import { useState, useEffect } from 'react';
|
|
// import { Link } from 'react-router-dom';
|
|
// import logo from '../assets/images/logo200x50.png';
|
|
// import translations from '../translations.json';
|
|
// import { useLanguage } from '../contexts/LanguageContext';
|
|
// import { CustomLink } from './CustomLink';
|
|
|
|
// export default function Header() {
|
|
// const [isScrolled, setIsScrolled] = useState(false);
|
|
// const { language, toggleLanguage } = useLanguage();
|
|
// const t = translations.header[language];
|
|
|
|
// useEffect(() => {
|
|
// const handleScroll = () => {
|
|
// const isFullScreenPassed = window.scrollY > window.innerHeight;
|
|
// setIsScrolled(isFullScreenPassed);
|
|
// };
|
|
|
|
// window.addEventListener('scroll', handleScroll);
|
|
// return () => window.removeEventListener('scroll', handleScroll);
|
|
// }, []);
|
|
|
|
// return (
|
|
// <header
|
|
// className={`
|
|
// fixed top-0 left-0 w-full z-50
|
|
// transition-all duration-300
|
|
// ${isScrolled
|
|
// ? 'bg-white bg-opacity-90 backdrop-blur-md'
|
|
// : 'bg-transparent backdrop-blur-md bg-opacity-30'
|
|
// }
|
|
// `}
|
|
// >
|
|
// <div className="container mx-auto px-4">
|
|
// <div className="flex items-center justify-between h-16">
|
|
// <div className="flex items-center">
|
|
// <CustomLink to="/">
|
|
// <img
|
|
// src={logo}
|
|
// alt="Logo"
|
|
// className="h-12 w-auto"
|
|
// />
|
|
// </CustomLink>
|
|
// </div>
|
|
|
|
// <nav className="hidden md:flex items-center space-x-8">
|
|
// <CustomLink
|
|
// to="/pricing"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// {t.pricing}
|
|
// </CustomLink>
|
|
// <a
|
|
// href="#contacts-section"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// {t.feedback}
|
|
// </a>
|
|
// <button
|
|
// onClick={toggleLanguage}
|
|
// className={`text-lg font-semibold transition-colors duration-200 px-3 py-1 rounded-md border-2 ${
|
|
// isScrolled
|
|
// ? 'text-gray-800 hover:text-gray-600 border-gray-800'
|
|
// : 'text-white hover:text-gray-200 border-white'
|
|
// }`}
|
|
// >
|
|
// {t.langButton}
|
|
// </button>
|
|
// </nav>
|
|
// </div>
|
|
// </div>
|
|
// </header>
|
|
// );
|
|
// }
|
|
|
|
|
|
// import { useState, useEffect } from 'react';
|
|
// import logo from '../assets/images/logo200x50.png';
|
|
// import translations from '../translations.json';
|
|
// import { useLanguage } from '../contexts/LanguageContext';
|
|
// import { CustomLink } from './CustomLink';
|
|
// import LanguageSwitcher from './LanguageSwitcher';
|
|
// import { ScrollLink } from './ScrollLink';
|
|
|
|
// export default function Header() {
|
|
// const [isScrolled, setIsScrolled] = useState(false);
|
|
// const { language } = useLanguage();
|
|
// const t = translations.header[language];
|
|
|
|
// useEffect(() => {
|
|
// const handleScroll = () => {
|
|
// const isFullScreenPassed = window.scrollY > window.innerHeight;
|
|
// setIsScrolled(isFullScreenPassed);
|
|
// };
|
|
|
|
// window.addEventListener('scroll', handleScroll);
|
|
// return () => window.removeEventListener('scroll', handleScroll);
|
|
// }, []);
|
|
|
|
// return (
|
|
// <header
|
|
// className={`
|
|
// fixed top-0 left-0 w-full z-50
|
|
// transition-all duration-300
|
|
// ${isScrolled
|
|
// ? 'bg-white bg-opacity-90 backdrop-blur-md'
|
|
// : 'bg-transparent backdrop-blur-md bg-opacity-30'
|
|
// }
|
|
// `}
|
|
// >
|
|
// <div className="container mx-auto px-4">
|
|
// <div className="flex items-center justify-between h-16">
|
|
// <div className="flex items-center">
|
|
// <CustomLink to="/">
|
|
// <img
|
|
// src={logo}
|
|
// alt="Logo"
|
|
// className="h-12 w-auto"
|
|
// />
|
|
// </CustomLink>
|
|
// </div>
|
|
|
|
// <nav className="hidden md:flex items-center space-x-8">
|
|
// <CustomLink
|
|
// to="/pricing"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// {t.pricing}
|
|
// </CustomLink>
|
|
// <ScrollLink
|
|
// to="#contacts-section"
|
|
// className={`text-lg font-light transition-colors duration-200 ${
|
|
// isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
|
|
// }`}
|
|
// >
|
|
// {t.feedback}
|
|
// </ScrollLink>
|
|
// <LanguageSwitcher isScrolled={isScrolled} />
|
|
// </nav>
|
|
// </div>
|
|
// </div>
|
|
// </header>
|
|
// );
|
|
// }
|
|
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { Menu, X } from 'lucide-react';
|
|
import logo from '../assets/images/logo200x50.png';
|
|
import translations from '../translations.json';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
import { CustomLink } from './CustomLink';
|
|
import LanguageSwitcher from './LanguageSwitcher';
|
|
import { ScrollLink } from './ScrollLink';
|
|
|
|
export default function Header() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const { language } = useLanguage();
|
|
const t = translations.header[language];
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const isFullScreenPassed = window.scrollY > window.innerHeight;
|
|
setIsScrolled(isFullScreenPassed);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
// Закрываем мобильное меню при смене маршрута
|
|
useEffect(() => {
|
|
setIsMobileMenuOpen(false);
|
|
}, [location]);
|
|
|
|
const headerBg = isScrolled
|
|
? 'bg-white bg-opacity-90 backdrop-blur-md'
|
|
: 'bg-transparent backdrop-blur-md bg-opacity-30';
|
|
|
|
const textColor = isScrolled
|
|
? 'text-gray-800 hover:text-gray-600'
|
|
: 'text-white hover:text-gray-200';
|
|
|
|
return (
|
|
<header className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${headerBg}`}>
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Логотип */}
|
|
<div className="flex items-center">
|
|
<CustomLink to="/">
|
|
<img src={logo} alt="Logo" className="h-12 w-auto" />
|
|
</CustomLink>
|
|
</div>
|
|
|
|
{/* Десктопная навигация */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<CustomLink
|
|
to="/pricing"
|
|
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
|
>
|
|
{t.pricing}
|
|
</CustomLink>
|
|
<ScrollLink
|
|
to="#contacts-section"
|
|
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
|
>
|
|
{t.feedback}
|
|
</ScrollLink>
|
|
<LanguageSwitcher isScrolled={isScrolled} />
|
|
</nav>
|
|
|
|
{/* Кнопка мобильного меню */}
|
|
<button
|
|
className="md:hidden p-2 rounded-lg focus:outline-none"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? (
|
|
<X className={textColor} size={24} />
|
|
) : (
|
|
<Menu className={textColor} size={24} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Мобильное меню */}
|
|
{isMobileMenuOpen && (
|
|
<div className={`md:hidden ${headerBg} px-4 py-2`}>
|
|
<div className="flex flex-col space-y-4 pb-4">
|
|
<CustomLink
|
|
to="/pricing"
|
|
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
|
>
|
|
{t.pricing}
|
|
</CustomLink>
|
|
<ScrollLink
|
|
to="#contacts-section"
|
|
className={`text-lg font-light transition-colors duration-200 ${textColor}`}
|
|
>
|
|
{t.feedback}
|
|
</ScrollLink>
|
|
<div className="pt-2">
|
|
<LanguageSwitcher isScrolled={isScrolled} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
} |