maps

app/page.tsx

@@ -6,6 +6,7 @@ import Texnika from "@/components/pageParts/texnika";
 import Offer from "@/components/pageParts/offer";
 import Faq from "@/components/pageParts/faq";
 import Partners from "@/components/pageParts/partners";
+import Map from "@/components/pageParts/map";
 
 export default function Home() {
   return (
@@ -19,6 +20,7 @@ export default function Home() {
       <Offer/>
       <Faq/>
       <Partners/>
+      <Map/>
     </div>
   );
 }

components/google.map.tsx

@@ -0,0 +1,77 @@
+"use client";
+/// <reference types="google.maps" />
+
+import { useEffect, useRef } from "react";
+import Script from "next/script";
+
+declare global {
+  interface Window {
+    initMap?: () => void;
+    google?: typeof google;
+  }
+}
+
+type Props = { lat?: number; lng?: number; zoom?: number };
+
+export default function GoogleMap({
+  lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
+  lng = 69.2191111,
+  zoom = 17,
+}: Props) {
+  const mapRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    window.initMap = () => {
+      if (!mapRef.current || !window.google) return;
+
+      const center = new google.maps.LatLng(lat, lng);
+      const map = new google.maps.Map(mapRef.current, {
+        center,
+        zoom,
+        mapTypeControl: true,          // 🛰 Satellite tugmasi
+        streetViewControl: true,      // Street View tugmasi
+        fullscreenControl: true,      // Fullscreen
+        zoomControl: true,            // Zoom tugmalari
+        mapTypeControlOptions: {
+          style: google.maps.MapTypeControlStyle.DEFAULT,
+          position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
+        },
+      });
+
+      // 📌 Marker
+      new google.maps.Marker({
+        position: center,
+        map,
+        title: "Bizning manzil",
+      });
+
+      // 🧭 Koordinata oynasini yaratamiz
+      const coordDiv = document.createElement("div");
+      coordDiv.style.background = "#fff";
+      coordDiv.style.padding = "15px 30px";
+      coordDiv.style.margin = "15px 30px";
+      coordDiv.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
+      coordDiv.innerHTML = `
+        <div style="font-size: 14px; font-weight: 500;">
+          41°15'46.1"N 69°13'08.8"E<br/>
+          <a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank" style="color: #1a73e8; text-decoration: none;">View larger map</a>
+        </div>
+      `;
+      map.controls[google.maps.ControlPosition.TOP_LEFT].push(coordDiv);
+    };
+
+    if (window.google && window.google.maps && typeof window.initMap === "function") {
+      window.initMap();
+    }
+  }, [lat, lng, zoom]);
+
+  return (
+    <>
+      <Script
+        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
+        strategy="afterInteractive"
+      />
+      <div ref={mapRef} style={{ width: "100%", height: "500px", overflow: "hidden" }} />
+    </>
+  );
+}

components/pageParts/faq.tsx

@@ -1,7 +1,7 @@
 import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
 import Text from "../text";
-import Title from "../tools/title";
+import Title from "../title";
 
 const FaqTexts: CollapseProps["items"] = [
   {

components/pageParts/map.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Title from "../title";
+import { FaPhoneAlt, FaTelegram } from "react-icons/fa";
+import { BiTargetLock } from "react-icons/bi";
+import GoogleMap from "../google.map";
+
+export default function Map() {
+  return (
+    <div dir="ltr" className="relative">
+      {/* map */}
+      <div className="w-full ">
+        <GoogleMap />
+      </div>
+
+      {/* contact information */}
+      <div className="absolute flex flex-col gap-3 top-20 right-20 z-50 bg-white rounded-[15px] p-5 px-10 max-w-[400px] w-full text-left ">
+        <div className="text-left flex w-full justify-start">
+          <Title text="contacts" />
+        </div>
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[20px] ">
+          <span className="text-secondary">
+            <FaPhoneAlt />
+          </span>
+          +998 33 252-00-00
+        </div>
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[20px] ">
+          <span className="text-secondary">
+            <FaTelegram />
+          </span>
+          spes-texnika
+        </div>
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[20px] ">
+          <span className="text-secondary">
+            <BiTargetLock />
+          </span>
+          Yakkasaroy , Toshkent
+        </div>
+      </div>
+    </div>
+  );
+}

components/pageParts/offer.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Title from "../tools/title";
+import Title from "../title";
 import Text from "../text";
 import { Ekskavator_offer } from "@/assets";
 

components/pageParts/partners.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Title from "../tools/title";
+import Title from "../title";
 
 import React from "react";
 // Import Swiper React components
@@ -43,6 +43,11 @@ export default function Partners() {
           }}
           modules={[Autoplay]}
           slidesPerView={4}
+          breakpoints={{
+            320: { slidesPerView: 1 },
+            640: { slidesPerView: 2 },
+            1024: { slidesPerView: 4 },
+          }}
           className="mySwiper flex items-center justify-center"
         >
           {images.map((item, index) => (

components/pageParts/products.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import Title from "../tools/title";
+import Title from "../title";
 import Text from "../text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";

components/pageParts/texnika.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Title from "../tools/title";
+import Title from "../title";
 import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
 import Image, { StaticImageData } from "next/image";
 
@@ -28,30 +28,33 @@ const slideImage: StaticImageData[] = [
 
 export default function Texnika() {
   return (
-    <div className="flex flex-col items-center justify-center gap-20 mt-20 max-w-[1200px] w-full mx-auto">
+    <div className="my-20 max-w-[1100px] w-full mx-auto">
       {/* title */}
       <div className="mb-4">
         <Title text="brand-h2" />
       </div>
 
       {/* slider */}
-      <div className="my-10">
+      <div className="my-20">
         <Swiper
           autoplay={{
             reverseDirection: true,
             delay: 2500,
             disableOnInteraction: false,
           }}
+          loop={true}
           modules={[Autoplay]}
           slidesPerView={4}
-          className="mySwiper flex items-center justify-center"
+          className="mySwiper flex items-center justify-around"
         >
           {slideImage.map((item, index) => (
-            <SwiperSlide key={index}>
+            <SwiperSlide key={index} className="!w-[200px] mx-10 " >
               <Image
                 src={item}
                 alt="Partner images"
-                className="w-[200px] h-[200px] object-contain"
+                width={200}
+                height={200}
+                className="object-contain mx-auto max-w-[200px] h-auto"
               />
             </SwiperSlide>
           ))}

components/title.tsx

@@ -1,6 +1,6 @@
 import { TitleType } from '@/types'
 import React from 'react'
-import Text from '../text'
+import Text from './text'
 
 export default function Title({text}:TitleType) {
   return (

package-lock.json

@@ -13,18 +13,21 @@
         "i18next-browser-languagedetector": "^8.2.0",
         "i18next-http-backend": "^3.0.2",
         "i18next-resources-to-backend": "^1.2.1",
+        "leaflet": "^1.9.4",
         "next": "15.5.4",
         "next-i18next": "^15.4.2",
         "react": "19.1.0",
         "react-dom": "19.1.0",
-        "react-fast-marquee": "^1.6.5",
         "react-i18next": "^16.0.0",
         "react-icons": "^5.5.0",
+        "react-leaflet": "^5.0.0",
         "react-scroll": "^1.9.3",
         "swiper": "^12.0.2"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
+        "@types/google.maps": "^3.58.1",
+        "@types/leaflet": "^1.9.20",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -949,6 +952,17 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1234,6 +1248,20 @@
         "tailwindcss": "4.1.14"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
@@ -1246,6 +1274,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.20",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.20.tgz",
+      "integrity": "sha512-rooalPMlk61LCaLOvBF2VIf9M47HgMQqi5xQ9QRi7c8PkdIe0WrIi5IxXUXQjAdL0c+vcQ01mYWbthzmp9GHWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.19.19",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.19.tgz",
@@ -1690,6 +1728,12 @@
         "string-convert": "^0.2.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -2846,16 +2890,6 @@
         "react": "^19.1.0"
       }
     },
-    "node_modules/react-fast-marquee": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz",
-      "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">= 16.8.0 || ^18.0.0",
-        "react-dom": ">= 16.8.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-i18next": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.0.0.tgz",
@@ -2897,6 +2931,20 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-scroll": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.3.tgz",

package.json

@@ -13,18 +13,21 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "i18next-resources-to-backend": "^1.2.1",
+    "leaflet": "^1.9.4",
     "next": "15.5.4",
     "next-i18next": "^15.4.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-fast-marquee": "^1.6.5",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
+    "react-leaflet": "^5.0.0",
     "react-scroll": "^1.9.3",
     "swiper": "^12.0.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",
+    "@types/google.maps": "^3.58.1",
+    "@types/leaflet": "^1.9.20",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",