2026-01-09 21:47:45 +03:00
|
|
|
// import React, { useState, useEffect } from "react";
|
|
|
|
|
// import styled from "styled-components";
|
|
|
|
|
// import { useTranslation } from "react-i18next";
|
|
|
|
|
// import { Link, animateScroll as scroll } from "react-scroll";
|
|
|
|
|
|
|
|
|
|
// const SunIcon = ({ className }) => (
|
|
|
|
|
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
|
|
|
|
// <path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
|
|
|
|
|
// </svg>
|
|
|
|
|
// );
|
|
|
|
|
// const MoonIcon = ({ className }) => (
|
|
|
|
|
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
|
|
|
|
// <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// </svg>
|
|
|
|
|
// );
|
|
|
|
|
// const GlobeIcon = ({ className }) => (
|
|
|
|
|
// <svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
|
|
|
|
// <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// <path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
// </svg>
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
// const StyledWrapper = styled.div`
|
|
|
|
|
// /* Base Styles */
|
|
|
|
|
// .switch {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// /* reduced a bit */
|
|
|
|
|
// width: 5.2em;
|
|
|
|
|
// height: 2.6em;
|
|
|
|
|
// position: relative;
|
|
|
|
|
// font-size: 16px;
|
|
|
|
|
// user-select: none;
|
|
|
|
|
// margin: 0;
|
|
|
|
|
// transform-origin: center;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Hide default HTML checkbox */
|
|
|
|
|
// .switch input {
|
|
|
|
|
// opacity: 0;
|
|
|
|
|
// width: 0;
|
|
|
|
|
// height: 0;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Slider */
|
|
|
|
|
// .slider {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// top: 0;
|
|
|
|
|
// left: 0;
|
|
|
|
|
// right: 0;
|
|
|
|
|
// bottom: 0;
|
|
|
|
|
// background: linear-gradient(to right, #87ceeb, #e0f6ff);
|
|
|
|
|
// border-radius: 50px;
|
|
|
|
|
// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// 0 4px 8px rgba(0, 0, 0, 0.1),
|
|
|
|
|
// inset 0 -5px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Inner slider for additional styling */
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// top: 0.28em;
|
|
|
|
|
// left: 0.28em;
|
|
|
|
|
// height: 2.1em;
|
|
|
|
|
// width: 2.1em;
|
|
|
|
|
// border-radius: 50%;
|
|
|
|
|
// background-color: #ffd700;
|
|
|
|
|
// transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// 0 2px 4px rgba(0, 0, 0, 0.2),
|
|
|
|
|
// inset 0 -2px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Checked state */
|
|
|
|
|
// .switch input:checked + .slider {
|
|
|
|
|
// background: linear-gradient(to right, #1a237e, #3949ab);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner {
|
|
|
|
|
// transform: translateX(2.6em);
|
|
|
|
|
// background-color: #ffffff;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Focus state */
|
|
|
|
|
// .switch input:focus + .slider {
|
|
|
|
|
// outline: none;
|
|
|
|
|
// box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Hover and active states */
|
|
|
|
|
// .switch:hover .slider {
|
|
|
|
|
// background: linear-gradient(to right, #64b5f6, #e3f2fd);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked:hover + .slider {
|
|
|
|
|
// background: linear-gradient(to right, #283593, #5c6bc0);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Animation for slider inner */
|
|
|
|
|
// @keyframes sunPulse {
|
|
|
|
|
// 0%,
|
|
|
|
|
// 100% {
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// 0 0 0 0 rgba(255, 215, 0, 0.7),
|
|
|
|
|
// 0 0 0 0 rgba(255, 215, 0, 0.4);
|
|
|
|
|
// }
|
|
|
|
|
// 50% {
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// 0 0 20px 10px rgba(255, 215, 0, 0.7),
|
|
|
|
|
// 0 0 40px 20px rgba(255, 215, 0, 0.4);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// @keyframes moonPhase {
|
|
|
|
|
// 0%,
|
|
|
|
|
// 100% {
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// inset -10px -5px 0 0 #ddd,
|
|
|
|
|
// 0 0 20px rgba(255, 255, 255, 0.5);
|
|
|
|
|
// }
|
|
|
|
|
// 50% {
|
|
|
|
|
// box-shadow:
|
|
|
|
|
// inset 0 0 0 0 #ddd,
|
|
|
|
|
// 0 0 20px rgba(255, 255, 255, 0.5);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:not(:checked) + .slider .slider-inner {
|
|
|
|
|
// animation: sunPulse 3s infinite;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner {
|
|
|
|
|
// animation: moonPhase 5s infinite;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Stars effect */
|
|
|
|
|
// @keyframes twinkle {
|
|
|
|
|
// 0%,
|
|
|
|
|
// 100% {
|
|
|
|
|
// opacity: 0.2;
|
|
|
|
|
// }
|
|
|
|
|
// 50% {
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider::before,
|
|
|
|
|
// .slider::after {
|
|
|
|
|
// content: "";
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// width: 4px;
|
|
|
|
|
// height: 4px;
|
|
|
|
|
// background-color: #ffffff;
|
|
|
|
|
// border-radius: 50%;
|
|
|
|
|
// transition: all 0.6s ease;
|
|
|
|
|
// opacity: 0;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider::before {
|
|
|
|
|
// top: 20%;
|
|
|
|
|
// left: 30%;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider::after {
|
|
|
|
|
// bottom: 25%;
|
|
|
|
|
// right: 25%;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider::before,
|
|
|
|
|
// .switch input:checked + .slider::after {
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// animation: twinkle 2s infinite;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider::before {
|
|
|
|
|
// animation-delay: 0.5s;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* 3D effect */
|
|
|
|
|
// .slider {
|
|
|
|
|
// transform-style: preserve-3d;
|
|
|
|
|
// perspective: 500px;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// transform: translateZ(5px);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner {
|
|
|
|
|
// transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Cloud effect for day mode */
|
|
|
|
|
// .slider-inner::before,
|
|
|
|
|
// .slider-inner::after {
|
|
|
|
|
// content: "";
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// background-color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
// border-radius: 50%;
|
|
|
|
|
// transition: all 0.6s ease;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner::before {
|
|
|
|
|
// width: 1em;
|
|
|
|
|
// height: 1em;
|
|
|
|
|
// top: -0.5em;
|
|
|
|
|
// left: -0.2em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner::after {
|
|
|
|
|
// width: 1.2em;
|
|
|
|
|
// height: 1.2em;
|
|
|
|
|
// bottom: -0.6em;
|
|
|
|
|
// right: -0.3em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner::before,
|
|
|
|
|
// .switch input:checked + .slider .slider-inner::after {
|
|
|
|
|
// opacity: 0;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Crater effect for night mode */
|
|
|
|
|
// .switch input:checked + .slider .slider-inner::before {
|
|
|
|
|
// width: 0.6em;
|
|
|
|
|
// height: 0.6em;
|
|
|
|
|
// background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
// top: 0.3em;
|
|
|
|
|
// left: 0.3em;
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner::after {
|
|
|
|
|
// width: 0.4em;
|
|
|
|
|
// height: 0.4em;
|
|
|
|
|
// background-color: rgba(0, 0, 0, 0.15);
|
|
|
|
|
// bottom: 0.5em;
|
|
|
|
|
// right: 0.5em;
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Accessibility improvements */
|
|
|
|
|
// .switch input:focus + .slider {
|
|
|
|
|
// outline: 2px solid #4a90e2;
|
|
|
|
|
// outline-offset: 2px;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Responsive adjustments */
|
|
|
|
|
// @media (max-width: 768px) {
|
|
|
|
|
// .switch {
|
|
|
|
|
// width: 4.6em;
|
|
|
|
|
// height: 2.3em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// height: 1.85em;
|
|
|
|
|
// width: 1.85em;
|
|
|
|
|
// top: 0.23em;
|
|
|
|
|
// left: 0.23em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner {
|
|
|
|
|
// transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// @media (max-width: 480px) {
|
|
|
|
|
// .switch {
|
|
|
|
|
// width: 3.8em;
|
|
|
|
|
// height: 1.9em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// height: 1.5em;
|
|
|
|
|
// width: 1.5em;
|
|
|
|
|
// top: 0.2em;
|
|
|
|
|
// left: 0.2em;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner {
|
|
|
|
|
// transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* High contrast mode */
|
|
|
|
|
// @media (forced-colors: active) {
|
|
|
|
|
// .slider {
|
|
|
|
|
// background: Canvas;
|
|
|
|
|
// border: 2px solid ButtonText;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider {
|
|
|
|
|
// background: Highlight;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// background-color: ButtonFace;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch::before,
|
|
|
|
|
// .switch::after {
|
|
|
|
|
// color: ButtonText;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Reduced motion preference */
|
|
|
|
|
// @media (prefers-reduced-motion: reduce) {
|
|
|
|
|
// .switch,
|
|
|
|
|
// .slider,
|
|
|
|
|
// .slider-inner {
|
|
|
|
|
// transition: none;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .switch input:checked + .slider .slider-inner,
|
|
|
|
|
// .switch input:not(:checked) + .slider .slider-inner,
|
|
|
|
|
// .switch input:checked + .slider::before,
|
|
|
|
|
// .switch input:checked + .slider::after {
|
|
|
|
|
// animation: none;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// `;
|
|
|
|
|
|
|
|
|
|
// const ThemeToggle = ({ theme, setTheme }) => {
|
|
|
|
|
// const isDark = theme === "dark";
|
|
|
|
|
|
|
|
|
|
// const toggle = () => {
|
|
|
|
|
// const next = isDark ? "light" : "dark";
|
|
|
|
|
// setTheme(next);
|
|
|
|
|
// if (next === "dark") document.documentElement.classList.add("dark");
|
|
|
|
|
// else document.documentElement.classList.remove("dark");
|
|
|
|
|
// try {
|
|
|
|
|
// localStorage.setItem("theme", next);
|
|
|
|
|
// } catch (e) {}
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
|
// <StyledWrapper>
|
|
|
|
|
// <label
|
|
|
|
|
// role="switch"
|
|
|
|
|
// aria-checked={isDark}
|
|
|
|
|
// tabIndex={0}
|
|
|
|
|
// className="switch"
|
|
|
|
|
// onKeyDown={(e) => {
|
|
|
|
|
// if (e.key === "Enter" || e.key === " ") {
|
|
|
|
|
// e.preventDefault();
|
|
|
|
|
// toggle();
|
|
|
|
|
// }
|
|
|
|
|
// }}
|
|
|
|
|
// >
|
|
|
|
|
// <input
|
|
|
|
|
// type="checkbox"
|
|
|
|
|
// checked={isDark}
|
|
|
|
|
// onChange={toggle}
|
|
|
|
|
// aria-hidden="false"
|
|
|
|
|
// />
|
|
|
|
|
// <span className="slider" aria-hidden="true">
|
|
|
|
|
// <span className="slider-inner" />
|
|
|
|
|
// </span>
|
|
|
|
|
// </label>
|
|
|
|
|
// </StyledWrapper>
|
|
|
|
|
// );
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const LanguageToggle = ({ i18n }) => {
|
|
|
|
|
// const isAr = i18n.language === "ar";
|
|
|
|
|
// const toggle = () => {
|
|
|
|
|
// const next = isAr ? "en" : "ar";
|
|
|
|
|
// i18n.changeLanguage(next);
|
|
|
|
|
// if (next === "ar") {
|
|
|
|
|
// document.documentElement.dir = "rtl";
|
|
|
|
|
// document.documentElement.lang = "ar";
|
|
|
|
|
// } else {
|
|
|
|
|
// document.documentElement.dir = "ltr";
|
|
|
|
|
// document.documentElement.lang = next;
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
|
// <button
|
|
|
|
|
// onClick={toggle}
|
|
|
|
|
// className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
|
|
|
|
|
// aria-label="Toggle language"
|
|
|
|
|
// title={isAr ? "Switch to English" : "التبديل للعربية"}
|
|
|
|
|
// >
|
|
|
|
|
// <GlobeIcon className="w-4 h-4" />
|
|
|
|
|
// <span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
|
|
|
|
|
// <span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
|
|
|
|
|
// </button>
|
|
|
|
|
// );
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const Navbar = () => {
|
|
|
|
|
// const { t, i18n } = useTranslation();
|
|
|
|
|
// const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
|
// const [activeSection, setActiveSection] = useState("home");
|
|
|
|
|
// const [theme, setTheme] = useState("light");
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// try {
|
|
|
|
|
// const saved = localStorage.getItem("theme");
|
|
|
|
|
// if (saved) setTheme(saved);
|
|
|
|
|
// else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
|
|
|
|
|
// } catch (e) {
|
|
|
|
|
// if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
|
|
|
|
|
// }
|
|
|
|
|
// }, []);
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (theme === "dark") document.documentElement.classList.add("dark");
|
|
|
|
|
// else document.documentElement.classList.remove("dark");
|
|
|
|
|
// }, [theme]);
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// const handleScroll = () => {
|
|
|
|
|
// const sections = ["home", "services", "about", "contact"];
|
|
|
|
|
// const scrollPosition = window.scrollY + 140;
|
|
|
|
|
// for (const section of sections) {
|
|
|
|
|
// const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
|
|
|
|
|
// if (element) {
|
|
|
|
|
// const offsetTop = element.offsetTop;
|
|
|
|
|
// const offsetHeight = element.offsetHeight;
|
|
|
|
|
// if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
|
|
|
|
// setActiveSection(section);
|
|
|
|
|
// break;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
// handleScroll();
|
|
|
|
|
// window.addEventListener("scroll", handleScroll, { passive: true });
|
|
|
|
|
// return () => window.removeEventListener("scroll", handleScroll);
|
|
|
|
|
// }, []);
|
|
|
|
|
|
|
|
|
|
// const navItems = [
|
|
|
|
|
// { key: "home", label: t("nav.home") || "Home" },
|
|
|
|
|
// { key: "services", label: t("nav.services") || "Services" },
|
|
|
|
|
// { key: "about", label: t("nav.about") || "About" },
|
|
|
|
|
// { key: "contact", label: t("nav.contact") || "Contact" },
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
// return (
|
|
|
|
|
// <>
|
|
|
|
|
// <style>{`
|
|
|
|
|
// /* background and glass */
|
|
|
|
|
// .glass-nav {
|
|
|
|
|
// background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
|
|
|
|
|
// color: #e6e6e6;
|
|
|
|
|
// border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
|
|
|
// backdrop-filter: blur(8px);
|
|
|
|
|
// -webkit-backdrop-filter: blur(8px);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* nav links */
|
|
|
|
|
// .nav-link {
|
|
|
|
|
// position: relative;
|
|
|
|
|
// padding-bottom: 6px;
|
|
|
|
|
// transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
|
|
|
|
|
// color: rgba(229,231,235,0.95);
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// }
|
|
|
|
|
// .nav-link::after {
|
|
|
|
|
// content: '';
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
// transform: translateX(-50%) scaleX(0);
|
|
|
|
|
// bottom: -8px;
|
|
|
|
|
// height: 3px;
|
|
|
|
|
// width: 64%;
|
|
|
|
|
// border-radius: 999px;
|
|
|
|
|
// transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
|
|
|
|
|
// opacity: 0;
|
|
|
|
|
// }
|
|
|
|
|
// .nav-link:hover {
|
|
|
|
|
// transform: translateY(-6px) scale(1.03);
|
|
|
|
|
// color: #fff;
|
|
|
|
|
// text-shadow: 0 10px 30px rgba(2,6,23,0.5);
|
|
|
|
|
// box-shadow: 0 8px 24px rgba(2,6,23,0.25);
|
|
|
|
|
// }
|
|
|
|
|
// .nav-link:hover::after {
|
|
|
|
|
// background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
|
|
|
|
// transform: translateX(-50%) scaleX(1);
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
// .nav-link.active {
|
|
|
|
|
// color: #fff;
|
|
|
|
|
// font-weight: 700;
|
|
|
|
|
// }
|
|
|
|
|
// .nav-link.active::after {
|
|
|
|
|
// background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
|
|
|
|
// transform: translateX(-50%) scaleX(1);
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* NEW: pill / circular orange background for the active/pressed link */
|
|
|
|
|
// .nav-pill {
|
|
|
|
|
// display: inline-flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
// padding: 0.32rem 0.6rem; /* vertical horizontal */
|
|
|
|
|
// border-radius: 999px;
|
|
|
|
|
// transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
|
|
|
|
|
// background: transparent;
|
|
|
|
|
// color: inherit;
|
|
|
|
|
// line-height: 1;
|
|
|
|
|
// font-weight: 600;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* active (current) */
|
|
|
|
|
// .nav-link.active .nav-pill,
|
|
|
|
|
// .nav-link:active .nav-pill,
|
|
|
|
|
// .nav-link:focus-visible .nav-pill {
|
|
|
|
|
// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
|
|
|
|
|
// color: #0b0b0b; /* dark text for contrast on orange */
|
|
|
|
|
// box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
|
|
|
|
|
// transform: translateY(-4px) scale(1.03);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Make press feedback snappier */
|
|
|
|
|
// .nav-link:active .nav-pill {
|
|
|
|
|
// transform: translateY(-2px) scale(0.995);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* mobile drawer */
|
|
|
|
|
// .mobile-drawer {
|
|
|
|
|
// background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
|
|
|
|
|
// backdrop-filter: blur(6px);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* ensure mobile pill doesn't stretch full width — make it inline inside block */
|
|
|
|
|
// .mobile-drawer .nav-pill {
|
|
|
|
|
// display: inline-flex;
|
|
|
|
|
// padding: 0.4rem 0.8rem;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* adjust mobile active color */
|
|
|
|
|
// .mobile-drawer .nav-pill.active,
|
|
|
|
|
// .mobile-drawer a[aria-current="page"] .nav-pill {
|
|
|
|
|
// background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
|
|
|
|
|
// color: #0b0b0b;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// /* Enhanced button hover (more professional) */
|
|
|
|
|
// .glass-nav button, .mobile-drawer button {
|
|
|
|
|
// transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
|
|
|
|
|
// will-change: transform, box-shadow;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .glass-nav button:hover, .mobile-drawer button:hover {
|
|
|
|
|
// transform: translateY(-3px);
|
|
|
|
|
// box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .glass-nav button:active, .mobile-drawer button:active {
|
|
|
|
|
// transform: translateY(-1px) scale(0.995);
|
|
|
|
|
// box-shadow: 0 6px 18px rgba(2,6,23,0.2);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// .glass-nav button:focus {
|
|
|
|
|
// outline: none;
|
|
|
|
|
// box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// `}</style>
|
|
|
|
|
|
|
|
|
|
// <nav
|
|
|
|
|
// className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
|
|
|
|
|
// aria-label="Main navigation"
|
|
|
|
|
// role="navigation"
|
|
|
|
|
// >
|
|
|
|
|
// <div className="mx-auto max-w-screen-xl">
|
|
|
|
|
// <div className="flex items-center justify-between h-14 px-2 md:px-4">
|
|
|
|
|
// <div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
|
|
|
|
|
// <ul className="flex items-center gap-6">
|
|
|
|
|
// {navItems.map((item) => {
|
|
|
|
|
// const isActive = activeSection === item.key;
|
|
|
|
|
// return (
|
|
|
|
|
// <li key={item.key}>
|
|
|
|
|
// <Link
|
|
|
|
|
// to={item.key}
|
|
|
|
|
// smooth
|
|
|
|
|
// duration={600}
|
|
|
|
|
// spy={true}
|
|
|
|
|
// offset={-110}
|
|
|
|
|
// onSetActive={() => setActiveSection(item.key)}
|
|
|
|
|
// onClick={() => {
|
|
|
|
|
// if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
|
|
|
|
// if (menuOpen) setMenuOpen(false);
|
|
|
|
|
// }}
|
|
|
|
|
// className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
|
|
|
|
|
// aria-current={isActive ? "page" : undefined}
|
|
|
|
|
// >
|
|
|
|
|
// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
|
|
|
|
// </Link>
|
|
|
|
|
// </li>
|
|
|
|
|
// );
|
|
|
|
|
// })}
|
|
|
|
|
// </ul>
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
// {/* controls */}
|
|
|
|
|
// <div className="flex items-center gap-3 md:gap-5">
|
|
|
|
|
// <div className="hidden md:flex items-center gap-3">
|
|
|
|
|
// <LanguageToggle i18n={i18n} />
|
|
|
|
|
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
// <div className="md:hidden flex items-center gap-2">
|
|
|
|
|
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
|
|
|
|
// <button
|
|
|
|
|
// onClick={() => setMenuOpen((s) => !s)}
|
|
|
|
|
// aria-controls="mobile-menu"
|
|
|
|
|
// aria-expanded={menuOpen}
|
|
|
|
|
// className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
|
|
|
|
|
// >
|
|
|
|
|
// <span className="sr-only">Open main menu</span>
|
|
|
|
|
// <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
|
|
|
|
// {menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
|
|
|
|
// </svg>
|
|
|
|
|
// </button>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
// {/* mobile drawer */}
|
|
|
|
|
// <div
|
|
|
|
|
// id="mobile-menu"
|
|
|
|
|
// className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
|
|
|
|
|
// >
|
|
|
|
|
// <div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
|
|
|
|
|
// <div className="flex items-center justify-between mb-3">
|
|
|
|
|
// <div className="flex items-center gap-3"></div>
|
|
|
|
|
// <div className="flex items-center gap-2">
|
|
|
|
|
// <LanguageToggle i18n={i18n} />
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
|
|
|
|
|
// <ul className="flex flex-col gap-2">
|
|
|
|
|
// {navItems.map((item) => {
|
|
|
|
|
// const isActive = activeSection === item.key;
|
|
|
|
|
// return (
|
|
|
|
|
// <li key={item.key}>
|
|
|
|
|
// <Link
|
|
|
|
|
// to={item.key}
|
|
|
|
|
// smooth
|
|
|
|
|
// duration={600}
|
|
|
|
|
// spy={true}
|
|
|
|
|
// offset={-110}
|
|
|
|
|
// onSetActive={() => setActiveSection(item.key)}
|
|
|
|
|
// onClick={() => {
|
|
|
|
|
// if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
|
|
|
|
// setMenuOpen(false);
|
|
|
|
|
// }}
|
|
|
|
|
// className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
|
|
|
|
// aria-current={isActive ? "page" : undefined}
|
|
|
|
|
// >
|
|
|
|
|
// {/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
|
|
|
|
|
// <span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
|
|
|
|
// </Link>
|
|
|
|
|
// </li>
|
|
|
|
|
// );
|
|
|
|
|
// })}
|
|
|
|
|
// </ul>
|
|
|
|
|
|
|
|
|
|
// <div className="mt-4 flex items-center gap-3">
|
|
|
|
|
// <ThemeToggle theme={theme} setTheme={setTheme} />
|
|
|
|
|
// <button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
|
|
|
|
|
// {t("nav.getQuote") || "Get Quote"}
|
|
|
|
|
// </button>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </div>
|
|
|
|
|
// </nav>
|
|
|
|
|
// </>
|
|
|
|
|
// );
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// export default Navbar;
|
|
|
|
|
|
|
|
|
|
|
2025-12-23 17:09:40 +03:00
|
|
|
import React, { useState, useEffect } from "react";
|
2026-01-09 20:12:38 +03:00
|
|
|
import styled from "styled-components";
|
2025-12-23 17:09:40 +03:00
|
|
|
import { useTranslation } from "react-i18next";
|
2026-01-09 20:12:38 +03:00
|
|
|
import { Link, animateScroll as scroll } from "react-scroll";
|
2026-01-09 21:47:45 +03:00
|
|
|
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
|
2025-12-23 17:09:40 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
const SunIcon = ({ className }) => (
|
|
|
|
|
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
|
|
|
|
<path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
|
|
|
|
|
</svg>
|
|
|
|
|
);
|
|
|
|
|
const MoonIcon = ({ className }) => (
|
|
|
|
|
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
|
|
|
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
|
|
|
</svg>
|
|
|
|
|
);
|
2025-12-23 22:00:31 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
const StyledWrapper = styled.div`
|
|
|
|
|
/* Base Styles */
|
|
|
|
|
.switch {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 5.2em;
|
|
|
|
|
height: 2.6em;
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
user-select: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide default HTML checkbox */
|
|
|
|
|
.switch input {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Slider */
|
|
|
|
|
.slider {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: linear-gradient(to right, #87ceeb, #e0f6ff);
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 4px 8px rgba(0, 0, 0, 0.1),
|
|
|
|
|
inset 0 -5px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Inner slider for additional styling */
|
|
|
|
|
.slider-inner {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0.28em;
|
|
|
|
|
left: 0.28em;
|
|
|
|
|
height: 2.1em;
|
|
|
|
|
width: 2.1em;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: #ffd700;
|
|
|
|
|
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 2px 4px rgba(0, 0, 0, 0.2),
|
|
|
|
|
inset 0 -2px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Checked state */
|
|
|
|
|
.switch input:checked + .slider {
|
|
|
|
|
background: linear-gradient(to right, #1a237e, #3949ab);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner {
|
|
|
|
|
transform: translateX(2.6em);
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Focus state */
|
|
|
|
|
.switch input:focus + .slider {
|
|
|
|
|
outline: none;
|
|
|
|
|
box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
|
|
|
|
|
}
|
2026-01-09 00:07:39 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
/* Hover and active states */
|
|
|
|
|
.switch:hover .slider {
|
|
|
|
|
background: linear-gradient(to right, #64b5f6, #e3f2fd);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked:hover + .slider {
|
|
|
|
|
background: linear-gradient(to right, #283593, #5c6bc0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Animation for slider inner */
|
|
|
|
|
@keyframes sunPulse {
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 0 0 rgba(255, 215, 0, 0.7),
|
|
|
|
|
0 0 0 0 rgba(255, 215, 0, 0.4);
|
2025-12-23 22:00:31 +03:00
|
|
|
}
|
2026-01-09 20:12:38 +03:00
|
|
|
50% {
|
|
|
|
|
box-shadow:
|
|
|
|
|
0 0 20px 10px rgba(255, 215, 0, 0.7),
|
|
|
|
|
0 0 40px 20px rgba(255, 215, 0, 0.4);
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-12-23 17:09:40 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
@keyframes moonPhase {
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset -10px -5px 0 0 #ddd,
|
|
|
|
|
0 0 20px rgba(255, 255, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
box-shadow:
|
|
|
|
|
inset 0 0 0 0 #ddd,
|
|
|
|
|
0 0 20px rgba(255, 255, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:not(:checked) + .slider .slider-inner {
|
|
|
|
|
animation: sunPulse 3s infinite;
|
|
|
|
|
}
|
2026-01-09 00:33:54 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
.switch input:checked + .slider .slider-inner {
|
|
|
|
|
animation: moonPhase 5s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Stars effect */
|
|
|
|
|
@keyframes twinkle {
|
|
|
|
|
0%,
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider::before,
|
|
|
|
|
.slider::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 4px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: all 0.6s ease;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider::before {
|
|
|
|
|
top: 20%;
|
|
|
|
|
left: 30%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider::after {
|
|
|
|
|
bottom: 25%;
|
|
|
|
|
right: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider::before,
|
|
|
|
|
.switch input:checked + .slider::after {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
animation: twinkle 2s infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider::before {
|
|
|
|
|
animation-delay: 0.5s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 3D effect */
|
|
|
|
|
.slider {
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
perspective: 500px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner {
|
|
|
|
|
transform: translateZ(5px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner {
|
|
|
|
|
transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Cloud effect for day mode */
|
|
|
|
|
.slider-inner::before,
|
|
|
|
|
.slider-inner::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
transition: all 0.6s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner::before {
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
top: -0.5em;
|
|
|
|
|
left: -0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner::after {
|
|
|
|
|
width: 1.2em;
|
|
|
|
|
height: 1.2em;
|
|
|
|
|
bottom: -0.6em;
|
|
|
|
|
right: -0.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner::before,
|
|
|
|
|
.switch input:checked + .slider .slider-inner::after {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Crater effect for night mode */
|
|
|
|
|
.switch input:checked + .slider .slider-inner::before {
|
|
|
|
|
width: 0.6em;
|
|
|
|
|
height: 0.6em;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
top: 0.3em;
|
|
|
|
|
left: 0.3em;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner::after {
|
|
|
|
|
width: 0.4em;
|
|
|
|
|
height: 0.4em;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
|
|
|
bottom: 0.5em;
|
|
|
|
|
right: 0.5em;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Accessibility improvements */
|
|
|
|
|
.switch input:focus + .slider {
|
|
|
|
|
outline: 2px solid #4a90e2;
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Responsive adjustments */
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.switch {
|
|
|
|
|
width: 4.6em;
|
|
|
|
|
height: 2.3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner {
|
|
|
|
|
height: 1.85em;
|
|
|
|
|
width: 1.85em;
|
|
|
|
|
top: 0.23em;
|
|
|
|
|
left: 0.23em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner {
|
|
|
|
|
transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
|
|
.switch {
|
|
|
|
|
width: 3.8em;
|
|
|
|
|
height: 1.9em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner {
|
|
|
|
|
height: 1.5em;
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
top: 0.2em;
|
|
|
|
|
left: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner {
|
|
|
|
|
transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* High contrast mode */
|
|
|
|
|
@media (forced-colors: active) {
|
|
|
|
|
.slider {
|
|
|
|
|
background: Canvas;
|
|
|
|
|
border: 2px solid ButtonText;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider {
|
|
|
|
|
background: Highlight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider-inner {
|
|
|
|
|
background-color: ButtonFace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch::before,
|
|
|
|
|
.switch::after {
|
|
|
|
|
color: ButtonText;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Reduced motion preference */
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
.switch,
|
|
|
|
|
.slider,
|
|
|
|
|
.slider-inner {
|
|
|
|
|
transition: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.switch input:checked + .slider .slider-inner,
|
|
|
|
|
.switch input:not(:checked) + .slider .slider-inner,
|
|
|
|
|
.switch input:checked + .slider::before,
|
|
|
|
|
.switch input:checked + .slider::after {
|
|
|
|
|
animation: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
2026-01-09 21:47:45 +03:00
|
|
|
const ThemeToggle = ({ currentTheme, toggleTheme }) => {
|
|
|
|
|
const isDark = currentTheme === "dark";
|
2025-12-23 17:09:40 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
return (
|
|
|
|
|
<StyledWrapper>
|
|
|
|
|
<label
|
|
|
|
|
role="switch"
|
|
|
|
|
aria-checked={isDark}
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
className="switch"
|
|
|
|
|
onKeyDown={(e) => {
|
|
|
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
|
|
|
e.preventDefault();
|
2026-01-09 21:47:45 +03:00
|
|
|
toggleTheme();
|
2026-01-09 20:12:38 +03:00
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
checked={isDark}
|
2026-01-09 21:47:45 +03:00
|
|
|
onChange={toggleTheme}
|
2026-01-09 20:12:38 +03:00
|
|
|
aria-hidden="false"
|
|
|
|
|
/>
|
|
|
|
|
<span className="slider" aria-hidden="true">
|
|
|
|
|
<span className="slider-inner" />
|
|
|
|
|
</span>
|
|
|
|
|
</label>
|
|
|
|
|
</StyledWrapper>
|
|
|
|
|
);
|
|
|
|
|
};
|
2026-01-09 00:07:39 +03:00
|
|
|
|
2026-01-09 21:47:45 +03:00
|
|
|
const Navbar = ({ toggleTheme, currentTheme }) => {
|
2026-01-09 20:12:38 +03:00
|
|
|
const { t, i18n } = useTranslation();
|
|
|
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
|
const [activeSection, setActiveSection] = useState("home");
|
2025-12-23 17:09:40 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
useEffect(() => {
|
|
|
|
|
const handleScroll = () => {
|
|
|
|
|
const sections = ["home", "services", "about", "contact"];
|
|
|
|
|
const scrollPosition = window.scrollY + 140;
|
2026-01-09 21:47:45 +03:00
|
|
|
|
2025-12-23 17:09:40 +03:00
|
|
|
for (const section of sections) {
|
2026-01-09 20:12:38 +03:00
|
|
|
const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
|
2025-12-23 17:09:40 +03:00
|
|
|
if (element) {
|
|
|
|
|
const offsetTop = element.offsetTop;
|
|
|
|
|
const offsetHeight = element.offsetHeight;
|
2026-01-09 00:07:39 +03:00
|
|
|
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
2025-12-23 17:09:40 +03:00
|
|
|
setActiveSection(section);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
2026-01-09 21:47:45 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
handleScroll();
|
|
|
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
2025-12-23 17:09:40 +03:00
|
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
|
|
|
}, []);
|
|
|
|
|
|
2026-01-09 21:47:45 +03:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (i18n.language === "ar") {
|
|
|
|
|
document.documentElement.dir = "rtl";
|
|
|
|
|
document.documentElement.lang = "ar";
|
|
|
|
|
} else {
|
|
|
|
|
document.documentElement.dir = "ltr";
|
|
|
|
|
document.documentElement.lang = i18n.language;
|
|
|
|
|
}
|
|
|
|
|
}, [i18n.language]);
|
|
|
|
|
|
2025-12-23 17:09:40 +03:00
|
|
|
const navItems = [
|
2026-01-09 20:12:38 +03:00
|
|
|
{ key: "home", label: t("nav.home") || "Home" },
|
|
|
|
|
{ key: "services", label: t("nav.services") || "Services" },
|
|
|
|
|
{ key: "about", label: t("nav.about") || "About" },
|
|
|
|
|
{ key: "contact", label: t("nav.contact") || "Contact" },
|
2025-12-23 17:09:40 +03:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
2026-01-09 20:12:38 +03:00
|
|
|
<>
|
|
|
|
|
<style>{`
|
|
|
|
|
/* background and glass */
|
|
|
|
|
.glass-nav {
|
|
|
|
|
background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
|
|
|
|
|
color: #e6e6e6;
|
|
|
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
|
|
|
backdrop-filter: blur(8px);
|
|
|
|
|
-webkit-backdrop-filter: blur(8px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* nav links */
|
|
|
|
|
.nav-link {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
|
|
|
|
|
color: rgba(229,231,235,0.95);
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
.nav-link::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%) scaleX(0);
|
|
|
|
|
bottom: -8px;
|
|
|
|
|
height: 3px;
|
|
|
|
|
width: 64%;
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
.nav-link:hover {
|
|
|
|
|
transform: translateY(-6px) scale(1.03);
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 10px 30px rgba(2,6,23,0.5);
|
|
|
|
|
box-shadow: 0 8px 24px rgba(2,6,23,0.25);
|
|
|
|
|
}
|
|
|
|
|
.nav-link:hover::after {
|
|
|
|
|
background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
|
|
|
|
transform: translateX(-50%) scaleX(1);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
.nav-link.active {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.nav-link.active::after {
|
|
|
|
|
background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
|
|
|
|
transform: translateX(-50%) scaleX(1);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* NEW: pill / circular orange background for the active/pressed link */
|
|
|
|
|
.nav-pill {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 0.32rem 0.6rem; /* vertical horizontal */
|
|
|
|
|
border-radius: 999px;
|
|
|
|
|
transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
|
|
|
|
|
background: transparent;
|
|
|
|
|
color: inherit;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* active (current) */
|
|
|
|
|
.nav-link.active .nav-pill,
|
|
|
|
|
.nav-link:active .nav-pill,
|
|
|
|
|
.nav-link:focus-visible .nav-pill {
|
|
|
|
|
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
|
|
|
|
|
color: #0b0b0b; /* dark text for contrast on orange */
|
|
|
|
|
box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
|
|
|
|
|
transform: translateY(-4px) scale(1.03);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Make press feedback snappier */
|
|
|
|
|
.nav-link:active .nav-pill {
|
|
|
|
|
transform: translateY(-2px) scale(0.995);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* mobile drawer */
|
|
|
|
|
.mobile-drawer {
|
|
|
|
|
background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
|
|
|
|
|
backdrop-filter: blur(6px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ensure mobile pill doesn't stretch full width — make it inline inside block */
|
|
|
|
|
.mobile-drawer .nav-pill {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
padding: 0.4rem 0.8rem;
|
|
|
|
|
}
|
2026-01-09 00:07:39 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
/* adjust mobile active color */
|
|
|
|
|
.mobile-drawer .nav-pill.active,
|
|
|
|
|
.mobile-drawer a[aria-current="page"] .nav-pill {
|
|
|
|
|
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
|
|
|
|
|
color: #0b0b0b;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Enhanced button hover (more professional) */
|
|
|
|
|
.glass-nav button, .mobile-drawer button {
|
|
|
|
|
transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
|
|
|
|
|
will-change: transform, box-shadow;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.glass-nav button:hover, .mobile-drawer button:hover {
|
|
|
|
|
transform: translateY(-3px);
|
|
|
|
|
box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.glass-nav button:active, .mobile-drawer button:active {
|
|
|
|
|
transform: translateY(-1px) scale(0.995);
|
|
|
|
|
box-shadow: 0 6px 18px rgba(2,6,23,0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.glass-nav button:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
|
<nav
|
|
|
|
|
className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
|
|
|
|
|
aria-label="Main navigation"
|
|
|
|
|
role="navigation"
|
|
|
|
|
>
|
|
|
|
|
<div className="mx-auto max-w-screen-xl">
|
|
|
|
|
<div className="flex items-center justify-between h-14 px-2 md:px-4">
|
2026-01-09 21:47:45 +03:00
|
|
|
{/* Logo - from second code */}
|
|
|
|
|
<img
|
|
|
|
|
src="/src/assets/TPS-logo.png"
|
|
|
|
|
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
|
|
|
|
alt="TPS Logo"
|
|
|
|
|
/>
|
|
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
<div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
|
|
|
|
|
<ul className="flex items-center gap-6">
|
|
|
|
|
{navItems.map((item) => {
|
|
|
|
|
const isActive = activeSection === item.key;
|
|
|
|
|
return (
|
|
|
|
|
<li key={item.key}>
|
2026-01-09 00:07:39 +03:00
|
|
|
<Link
|
|
|
|
|
to={item.key}
|
|
|
|
|
smooth
|
2026-01-09 20:12:38 +03:00
|
|
|
duration={600}
|
2026-01-09 00:07:39 +03:00
|
|
|
spy={true}
|
2026-01-09 20:12:38 +03:00
|
|
|
offset={-110}
|
2026-01-09 00:07:39 +03:00
|
|
|
onSetActive={() => setActiveSection(item.key)}
|
|
|
|
|
onClick={() => {
|
2026-01-09 20:12:38 +03:00
|
|
|
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
|
|
|
|
if (menuOpen) setMenuOpen(false);
|
2026-01-09 00:07:39 +03:00
|
|
|
}}
|
2026-01-09 20:12:38 +03:00
|
|
|
className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
|
|
|
|
|
aria-current={isActive ? "page" : undefined}
|
2026-01-09 00:07:39 +03:00
|
|
|
>
|
2026-01-09 20:12:38 +03:00
|
|
|
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
2026-01-09 00:07:39 +03:00
|
|
|
</Link>
|
|
|
|
|
</li>
|
2026-01-09 20:12:38 +03:00
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* controls */}
|
|
|
|
|
<div className="flex items-center gap-3 md:gap-5">
|
|
|
|
|
<div className="hidden md:flex items-center gap-3">
|
2026-01-09 21:47:45 +03:00
|
|
|
{/* LanguageSwitcher from second code */}
|
|
|
|
|
<LanguageSwitcher />
|
|
|
|
|
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
2026-01-09 00:07:39 +03:00
|
|
|
</div>
|
2026-01-09 00:33:54 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
<div className="md:hidden flex items-center gap-2">
|
2026-01-09 21:47:45 +03:00
|
|
|
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
2026-01-09 20:12:38 +03:00
|
|
|
<button
|
|
|
|
|
onClick={() => setMenuOpen((s) => !s)}
|
|
|
|
|
aria-controls="mobile-menu"
|
|
|
|
|
aria-expanded={menuOpen}
|
|
|
|
|
className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
|
|
|
|
|
>
|
|
|
|
|
<span className="sr-only">Open main menu</span>
|
|
|
|
|
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
|
|
|
|
{menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
2026-01-09 00:33:54 +03:00
|
|
|
</div>
|
2026-01-09 00:07:39 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
{/* mobile drawer */}
|
|
|
|
|
<div
|
|
|
|
|
id="mobile-menu"
|
|
|
|
|
className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
|
|
|
|
|
>
|
|
|
|
|
<div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
|
|
|
|
|
<div className="flex items-center justify-between mb-3">
|
|
|
|
|
<div className="flex items-center gap-3"></div>
|
|
|
|
|
<div className="flex items-center gap-2">
|
2026-01-09 21:47:45 +03:00
|
|
|
<LanguageSwitcher />
|
2026-01-09 20:12:38 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-23 17:09:40 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
<ul className="flex flex-col gap-2">
|
|
|
|
|
{navItems.map((item) => {
|
|
|
|
|
const isActive = activeSection === item.key;
|
|
|
|
|
return (
|
|
|
|
|
<li key={item.key}>
|
|
|
|
|
<Link
|
|
|
|
|
to={item.key}
|
|
|
|
|
smooth
|
|
|
|
|
duration={600}
|
|
|
|
|
spy={true}
|
|
|
|
|
offset={-110}
|
|
|
|
|
onSetActive={() => setActiveSection(item.key)}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
|
|
|
|
setMenuOpen(false);
|
|
|
|
|
}}
|
|
|
|
|
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
|
|
|
|
aria-current={isActive ? "page" : undefined}
|
|
|
|
|
>
|
|
|
|
|
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
|
|
|
|
</Link>
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
2026-01-09 00:07:39 +03:00
|
|
|
|
2026-01-09 20:12:38 +03:00
|
|
|
<div className="mt-4 flex items-center gap-3">
|
2026-01-09 21:47:45 +03:00
|
|
|
<ThemeToggle currentTheme={currentTheme} toggleTheme={toggleTheme} />
|
2026-01-09 20:12:38 +03:00
|
|
|
<button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
|
|
|
|
|
{t("nav.getQuote") || "Get Quote"}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</>
|
2025-12-23 17:09:40 +03:00
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2026-01-08 21:12:26 +03:00
|
|
|
export default Navbar;
|
