hero section done

app/[lang]/page.tsx

@@ -6,11 +6,13 @@ import Partners from "@/components/pageParts/partners";
 import Map from "@/components/pageParts/map";
 import CustomSlider from "@/components/pageParts/newsSlider";
 import Footer from "@/components/nav_foot/footer";
+import HeroSection from "@/components/pageParts/hero";
 
 export default function Home() {
   return (
     <div>
-      <section id="products" className="mt-50 mb-10">
+      <HeroSection/>
+      <section id="products" className="mt-10 mb-10">
         <Products />
       </section>
       <Texnika />

components/nav_foot/header.tsx

@@ -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 252 00 00
-            +998 33 232 00 00
-            {/* <span className="text-[#f2a01c] text-[20px]">
-              <FaLocationDot />
-            </span> */}
           </a>
         </div>
 

components/nav_foot/navbar.tsx

@@ -1,15 +1,15 @@
 // src/components/nav_foot/navbar.tsx
 "use client";
 
-import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
-import { 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">
+      {toggle && (
-        <div className="flex items-center gap-5">
+        <div
-          <button
+          onClick={changeToggler}
-            onClick={() => handleChangeLang("uz")}
+          className="fixed inset-0 bg-black/30 bg-opacity-50 z-[900]"
-            className={`hover:cursor-pointer ${
+        ></div>
-              lang === "uz" && "bg-secondary text-primary rounded-[8px]"
+      )}
-            } px-2 py-1 text-[20px] ${
+      <div className="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
-              lang !== "uz" && "border-l-2 border-b-2 border-primary"
+        <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
-            UZ
+              onClick={() => handleChangeLang("uz")}
-          </button>
+              className={`hover:cursor-pointer ${
-          <button
+                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
-            onClick={() => handleChangeLang("ru")}
+              } px-2 py-1 text-[20px] ${
-            className={`hover:cursor-pointer ${
+                lang !== "uz" && "border-l-2 border-b-2 border-primary"
-              lang === "ru" && "bg-secondary text-primary rounded-[8px]"
+              } `}
-            } px-2 py-1 text-[20px]  ${
+            >
-              lang !== "ru" && "border-r-2 border-b-2 border-primary"
+              UZ
-            }`}
+            </button>
-          >
+            <button
-            RU
+              onClick={() => handleChangeLang("ru")}
-          </button>
+              className={`hover:cursor-pointer ${
-        </div>
+                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
-
+              } px-2 py-1 text-[20px]  ${
-        <div className="flex items-center gap-5">
+                lang !== "ru" && "border-r-2 border-b-2 border-primary"
-          <div className="nav_link_group hidden lg:flex gap-5">
+              }`}
-            <LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
+            >
-            <LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
+              RU
-            <LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
+            </button>
           </div>
 
-          <div onClick={changeToggler} className={togglerIcon}>
+          <div className="flex items-center gap-5">
-            <div className="toggle_item1"></div>
+            <div className="nav_link_group hidden min-[540px]:flex gap-5">
-            <div className="toggle_item2"></div>
+              <LinkButton
-            <div className="toggle_item3"></div>
+                txt="products"
-          </div>
+                id="products"
-
+                scrollFunc={scrollOrRoute}
-          <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} />
               <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">
+          <div
-          <span className="flex max-[770px]:hidden text-2xl font-bold">SPES-TEXNIKA</span>
+            onClick={goHome}
-          <Image src={logoImg} alt="logo" width={100} height={100} priority />
+            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>
+    </>
   );
 }
 

components/pageParts/hero.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+export default function HeroSection() {
+  return (
+    <section dir="ltr" className="relative w-full md:h-[400px] max-md:py-10 overflow-hidden flex items-center justify-center">
+
+      {/* Asosiy kontent */}
+      <div className="relative z-20 max-w-6xl mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
+        {/* Chap tomondagi matn */}
+        <motion.div
+          className="space-y-6 max-w-xl"
+          initial={{ opacity: 0, x: -60 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <h1 className="text-2xl lg:text-4xl font-extrabold leading-tight">
+            Ishonchli <span className="text-yellow-400">SpesTexnika</span> —
+            sizning loyihangiz uchun eng yaxshi tanlov!
+          </h1>
+
+          <p className="text-lg text-gray-600">
+            Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish
+            uskunalarini qulay narxda taqdim etamiz.
+          </p>
+        </motion.div>
+
+        {/* O‘ng tomondagi texnika rasmi */}
+        <motion.div
+          className="hidden md:block"
+          initial={{ opacity: 0, x: 80 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
+        >
+          <Image
+            src="/2.jpg" // texnika rasmi (public/truck.png)
+            alt="SpetsTexnika yuk mashinasi"
+            width={420}
+            height={300}
+            className="drop-shadow-2xl rounded-xl"
+          />
+        </motion.div>
+      </div>
+
+      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
+      <motion.div
+        className="absolute bottom-0 left-0 w-full h-[100px]"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1.2 }}
+      />
+    </section>
+  );
+}