maps

2025-10-08 15:11:25 +05:00
parent 1b3b79c217
commit cdc6633091
11 changed files with 204 additions and 24 deletions
--- a/app/page.tsx
+++ b/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>
  );
 }
--- a/components/google.map.tsx
+++ b/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" }} />
+    </>
+  );
+}
--- a/components/pageParts/faq.tsx
+++ b/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"] = [
  {
--- a/components/pageParts/map.tsx
+++ b/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>
+  );
+}
--- a/components/pageParts/offer.tsx
+++ b/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";

--- a/components/pageParts/partners.tsx
+++ b/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
@@ -37,12 +37,17 @@ export default function Partners() {
      <div className="my-10">
        <Swiper
          autoplay={{
-            reverseDirection:true,
+            reverseDirection: true,
            delay: 2500,
            disableOnInteraction: false,
          }}
          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) => (
--- a/components/pageParts/products.tsx
+++ b/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";
--- a/components/pageParts/texnika.tsx
+++ b/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>
          ))}
--- a/components/tools/title.tsx
+++ b/components/tools/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 (
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",