maps

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
@@ -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) => (

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 (