Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero section done

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2025-11-12 11:51:29 +05:00
parent faff1e1138
commit bf7b869dd4
6 changed files with 157 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/nav_foot/header.tsx
View File

@@ -18,13 +18,10 @@ export default function Header() {
<div>
<a
href="tel:+998332520000"
target="_blanck"
className="hover:cursor-pointer text-white flex flex-wrap justify-center items-center max-w-[250px] w-full "
>
+998 33 232 00 00
{/* <span className="text-[#f2a01c] text-[20px]">
<FaLocationDot />
</span> */}
+998 33 252 00 00
</a>
</div>

144
components/nav_foot/navbar.tsx
View File

@@ -1,15 +1,15 @@
// src/components/nav_foot/navbar.tsx
"use client";
import { useTranslation } from "react-i18next";
import { useState } from "react";
import { useEffect, useState } from "react";
import i18n from "@/i18n";
import { Link, animateScroll as scroll } from "react-scroll";
import { animateScroll as scroll } from "react-scroll";
import Text from "../lib_components/text";
import "./navbar.css";
import { logoImg } from "@/assets";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { X } from "lucide-react"; // ❗ exit icon
export default function Navbar() {
const router = useRouter();
@@ -46,60 +46,108 @@ export default function Navbar() {
router.push(`/${lang}`);
};
// ❗ Scrollni bloklash uchun effect
useEffect(() => {
if (toggle) {
document.body.style.overflow = "hidden"; // orqa scrollni o‘chir
} else {
document.body.style.overflow = "auto"; // qayta yoq
}
}, [toggle]);
return (
<div className="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
<div className="container max-w-[1500px] w-full px-[10px] mx-auto flex justify-between items-center">
<div className="flex items-center gap-5">
<button
onClick={() => handleChangeLang("uz")}
className={`hover:cursor-pointer ${
lang === "uz" && "bg-secondary text-primary rounded-[8px]"
} px-2 py-1 text-[20px] ${
lang !== "uz" && "border-l-2 border-b-2 border-primary"
} `}
>
UZ
</button>
<button
onClick={() => handleChangeLang("ru")}
className={`hover:cursor-pointer ${
lang === "ru" && "bg-secondary text-primary rounded-[8px]"
} px-2 py-1 text-[20px] ${
lang !== "ru" && "border-r-2 border-b-2 border-primary"
}`}
>
RU
</button>
</div>
<div className="flex items-center gap-5">
<div className="nav_link_group hidden lg:flex gap-5">
<LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
<LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
<LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
<>
{toggle && (
<div
onClick={changeToggler}
className="fixed inset-0 bg-black/30 bg-opacity-50 z-[900]"
></div>
)}
<div className="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
<div className="container max-w-[1500px] w-full px-[10px] mx-auto flex justify-between items-center">
<div className="flex items-center gap-5">
<button
onClick={() => handleChangeLang("uz")}
className={`hover:cursor-pointer ${
lang === "uz" && "bg-secondary text-primary rounded-[8px]"
} px-2 py-1 text-[20px] ${
lang !== "uz" && "border-l-2 border-b-2 border-primary"
} `}
>
UZ
</button>
<button
onClick={() => handleChangeLang("ru")}
className={`hover:cursor-pointer ${
lang === "ru" && "bg-secondary text-primary rounded-[8px]"
} px-2 py-1 text-[20px] ${
lang !== "ru" && "border-r-2 border-b-2 border-primary"
}`}
>
RU
</button>
</div>
<div onClick={changeToggler} className={togglerIcon}>
<div className="toggle_item1"></div>
<div className="toggle_item2"></div>
<div className="toggle_item3"></div>
</div>
<div className={toggle ? "nav_link_group_phone active" : "nav_link_group_phone"}>
<div className="flex flex-col gap-5 items-end">
<LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
<div className="flex items-center gap-5">
<div className="nav_link_group hidden min-[540px]:flex gap-5">
<LinkButton
txt="products"
id="products"
scrollFunc={scrollOrRoute}
/>
<LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
<LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
<LinkButton
txt="contact"
id="contact"
scrollFunc={scrollOrRoute}
/>
</div>
<div onClick={changeToggler} className={togglerIcon}>
<div className="toggle_item1"></div>
<div className="toggle_item2"></div>
<div className="toggle_item3"></div>
</div>
<div
className={
toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
}
>
<div className="flex flex-col gap-5 items-end justify-start w-full px-5">
<button
onClick={changeToggler}
className="w-full text-right text-gray-600 hover:text-primary"
>
<X size={22} />
</button>
<LinkButton
txt="products"
id="products"
scrollFunc={scrollOrRoute}
/>
<LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
<LinkButton
txt="contact"
id="contact"
scrollFunc={scrollOrRoute}
/>
</div>
</div>
</div>
</div>
<div onClick={goHome} className="flex items-center gap-2 cursor-pointer">
<span className="flex max-[770px]:hidden text-2xl font-bold">SPES-TEXNIKA</span>
<Image src={logoImg} alt="logo" width={100} height={100} priority />
<div
onClick={goHome}
className="flex items-center gap-2 cursor-pointer"
>
<span className="flex max-[770px]:hidden text-2xl font-bold">
SPES-TEXNIKA
</span>
<Image src={logoImg} alt="logo" width={100} height={100} priority />
</div>
</div>
</div>
</div>
</>
);
}