new car added and added some new features to header location icon and again added show case section

2025-11-14 15:14:41 +05:00
parent 8827f612a5
commit 8a2708a03a
81 changed files with 1147 additions and 476 deletions
--- a/components/cards/innerProductcard.tsx
+++ b/components/cards/innerProductcard.tsx
@@ -24,12 +24,12 @@ export default function InnerProductcard({ data }: { data: innerCardTypes }) {
        boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
      }}
      whileTap={{ scale: 0.97 }}
-      className="rounded-lg overflow-hidden bg-white transition-all"
+      className="h-[420px] rounded-lg overflow-hidden bg-white transition-all"
    >
      <Link
        href={`/${route.lang}/${route.carType}/${data.name}`}
        onClick={() => setDetail(data)}
-        className="flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
+        className="h-full flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
      >
        {/* Rasm qismi */}
        <div className="rounded-t-lg bg-white">
--- a/components/cards/productCard.tsx
+++ b/components/cards/productCard.tsx
@@ -17,34 +17,37 @@ export default function ProductCard({ data }: { data: ProductTypes }) {
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.3, ease: "easeOut" }}
      whileHover={{
-        scale: 1.05,
-        boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
+        boxShadow: "0px 0px 15px rgba(0,0,0,0.8)",
      }}
      whileTap={{ scale: 0.98 }}
+      className="rounded-xl border-2 border-primary h-[430px]"
    >
      <Link
        href={`/${lang}/${data.path}`}
-        className="h-[400px] flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
+        className="h-full flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
      >
        {/* Yuqori qism - rasm */}
        <div className="rounded-t-lg bg-white py-10 px-2 flex justify-center items-center">
          <Image
            src={data.image}
            alt={data.truck_name}
-            width={200}
+            width={260}
            height={200}
-            className="object-contain max-h-[200px] h-full"
+            className="object-contain max-h-[200px] h-full rounded-xl"
          />
        </div>

        {/* Pastki qism - matn */}
        <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
-          <div className="font-medium text-gray-800 text-lg text-center">
+          <div className="font-medium text-primary text-xl text-center">
            <Text txt={data.truck_name} />
          </div>
-          <div className="text-secondary text-sm text-center">
+          <div className="text-secondary text-md font-extrabold text-center">
            <Text txt={data.desc} />
          </div>
+          <div className="text-center text-secondary bg-primary max-w-[200px] w-full rounded-xl text-lg py-2 hover:cursor-pointer">
+            <Text txt="more" />
+          </div>
        </div>
      </Link>
    </motion.div>
--- a/components/lib_components/google.map.tsx
+++ b/components/lib_components/google.map.tsx
@@ -2,64 +2,115 @@

 import React, { useEffect, useRef } from "react";

-interface YandexMapProps {
+interface GoogleMapProps {
  lat?: number;
  lng?: number;
  zoom?: number;
 }

-export default function YandexMap({
+export default function GoogleMap({
  lat = 41.263731,
  lng = 69.219434,
-  zoom = 12,
-}: YandexMapProps) {
-  const mapRef = useRef<HTMLDivElement>(null);
+  zoom = 17,
+}: GoogleMapProps) {
+  const mapRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
-    // Yandex Map scriptini dinamik yuklash
-    if (!window.ymaps) {
+    let map: google.maps.Map | null = null;
+    let marker: google.maps.Marker | null = null;
+
+    // 🔹 Google script yuklash funksiyasi
+    function loadGoogleMapsScript(callback: () => void) {
+      if (typeof window.google === "object" && window.google.maps) {
+        callback();
+        return;
+      }
+
+      const existingScript = document.getElementById("googleMaps");
+      if (existingScript) {
+        existingScript.addEventListener("load", callback);
+        return;
+      }
+
      const script = document.createElement("script");
-      script.src = "https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=5169ae9d-529a-43f8-9cb1-30e1a3360dac";
+      script.id = "googleMaps";
+      script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiq6iQrcZX6jJMkK_8eT56IeeZDY0LUYo`;
      script.async = true;
-      script.onload = () => initMap();
+      script.defer = true;
+      script.onload = callback;
      document.body.appendChild(script);
-    } else {
-      initMap();
    }

+    // 🔹 Google Mapni ishga tushirish
    function initMap() {
-      if (!mapRef.current || !window.ymaps) return;
+      if (!mapRef.current || !window.google) return;

-      window.ymaps.ready(() => {
-        const map = new window.ymaps.Map(mapRef.current!, {
-          center: [lat, lng],
-          zoom,
-          controls: ["zoomControl", "typeSelector", "fullscreenControl"],
-        });
+      map = new window.google.maps.Map(mapRef.current, {
+        center: { lat, lng },
+        zoom,
+        mapTypeControl: false,
+        streetViewControl: false,
+        fullscreenControl: true,
+      });

-        const placemark = new window.ymaps.Placemark(
-          [lat, lng],
-          {
-            balloonContent: `
-              <div style="font-size:14px">
-                <b>Bizning joylashuv:</b><br/>
-                Toshkent sh., Mustaqillik maydoni<br/>
-                <a href="https://yandex.uz/maps/?ll=${lng}%2C${lat}&z=14" target="_blank">Yandex xaritada ochish</a>
-              </div>
-            `,
-          },
-          {
-            iconColor: "#ff0000",
-            draggable: false,
-          }
-        );
+      // 🔸 Custom marker (svg yoki png)
+      marker = new window.google.maps.Marker({
+        position: { lat, lng },
+        map,
+        title: "Bizning joylashuv",
+        icon: {
+          url: "/custom-marker.svg", // 📍 custom icon
+          scaledSize: new window.google.maps.Size(45, 45),
+          anchor: new window.google.maps.Point(22, 45),
+        },
+      });

-        map.geoObjects.add(placemark);
+      // 🔸 Marker click eventi
+      marker.addListener("click", () => {
+        console.log("Marker clicked!");
+        new window.google.maps.InfoWindow({
+          content: `
+            <div style="font-size:14px; line-height:1.5;">
+              <b>Bizning joylashuv:</b><br/>
+              Toshkent sh., Mustaqillik maydoni<br/>
+              <a href="https://www.google.com/maps?q=${lat},${lng}" target="_blank">Google xaritada ochish</a>
+            </div>
+          `,
+        }).open(map!, marker!);
+      });
+
+      // 🔸 Xarita ustida click qilinsa
+      map.addListener("click", (event: google.maps.MapMouseEvent) => {
+        if (!event.latLng) return;
+        const coords = event.latLng.toJSON();
+        console.log("Map clicked at:", coords);
+
+        // Markazni o‘zgartirish
+        map!.setCenter(coords);
+
+        // Zoomni saqlab qolish (setZoom ishlatish mumkin)
+        const currentZoom = map!.getZoom() ?? 17;
+        map!.setZoom(currentZoom);
+
+        // Marker joyini o‘zgartirish
+        marker!.setPosition(coords);
      });
    }
+
+    // 🔹 Scriptni yuklash
+    loadGoogleMapsScript(initMap);
+
+    return () => {
+      // tozalash
+      if (map) map = null;
+      if (marker) marker = null;
+    };
  }, [lat, lng, zoom]);

  return (
-    <div className="w-full h-[500px] rounded-lg shadow-md overflow-hidden" ref={mapRef}></div>
+    <div
+      ref={mapRef}
+      className="w-full h-[400px] rounded-lg shadow-md overflow-hidden"
+    />
  );
 }
--- a/components/nav_foot/header.tsx
+++ b/components/nav_foot/header.tsx
@@ -1,4 +1,5 @@
 import { FaLocationDot } from "react-icons/fa6";
+import Text from "../lib_components/text";

 export default function Header() {
  return (
@@ -7,12 +8,21 @@ export default function Header() {
      className="bg-primary  py-3 flex items-center sm:justify-around justify-center px-4"
    >
      <div className="max-w-[1500px] w-full mx-auto flex items-center sm:justify-between justify-center gap-4 flex-wrap ">
-
-        <div className="flex justify-center items-center text-white max-w-[250px] w-full ">
+        <div className="flex justify-center items-center gap-2 text-white max-w-[250px] w-full ">
          Uzbekistan , Tashkent
-          <span className="text-[#f2a01c] text-[20px]">
+          <a href="#map" className="text-[#f2a01c] text-[20px]">
            <FaLocationDot />
-          </span>
+          </a>
+        </div>
+
+        <div className="flex flex-col items-center justify-center">
+          <div className="text-white text-lg">
+            <Text txt="work_day_title" />
+          </div>
+          <div className="text-secondary text-xl">
+            <Text txt="work_day" />
+          </div>
+          <p className="text-xl text-secondary">24/7</p>
        </div>

        <div>
@@ -24,7 +34,6 @@ export default function Header() {
            +998 33 252 00 00
          </a>
        </div>
-
      </div>
    </div>
  );
--- a/components/pageParts/hero.tsx
+++ b/components/pageParts/hero.tsx
@@ -2,53 +2,51 @@

 import { motion } from "framer-motion";
 import Image from "next/image";
+import Text from "../lib_components/text";

 export default function HeroSection() {
  return (
    <section
      dir="ltr"
-      className="relative w-full md:h-[300px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-center"
+      className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
    >
-      <Image
+      {/* <Image
        src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
        alt="SpetsTexnika"
        width={800}
        height={400}
        className="object-contain rounded-3xl"
-      />
-
+      /> */}

      {/* 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">
-        <div className="absolute inset-0 z-10">
-          <Image
-            src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
-            alt="SpetsTexnika"
-            fill
-            className="object-cover opacity-30"
-            priority
-          />
-        </div>
+      {/* <div className="absolute inset-0 -z-10 mx-auto w-full h-full">
+        <Image
+          src="/2.jpg" 
+          alt="SpetsTexnika"
+          fill
+          className="object-cover"
+          priority
+        />
+      </div> */}

-        Chap tomondagi matn
+      <div className="relative z-20 max-w-7xl w-full 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"
+          className="space-y-3 max-w-xl backdrop-blur-3xl bg-[#ffffff4a] rounded-xl py-6 px-4"
          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>
+          <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
+            <Text txt="hero_title"/>
+          </div>

-          <p className="text-lg text-gray-600">
-            Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish
-            uskunalarini qulay narxda taqdim etamiz.
-          </p>
+          <div className="text-xl font-medium text-secondary">
+            <Text txt="hero_desc"/>
+          </div>
        </motion.div>

-        O‘ng tomondagi texnika rasmi
+        {/* O‘ng tomondagi texnika rasmi */}
        <motion.div
          className="hidden md:block"
          initial={{ opacity: 0, x: 80 }}
@@ -63,7 +61,7 @@ export default function HeroSection() {
            className="drop-shadow-2xl rounded-xl"
          />
        </motion.div>
-      </div> */}
+      </div>

      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
      {/* <motion.div
--- a/components/pageParts/map.tsx
+++ b/components/pageParts/map.tsx
@@ -18,23 +18,23 @@ export default function Map() {
        <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] ">
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[18px] ">
          <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] ">
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[18px] ">
          <span className="text-secondary">
            <FaTelegram />
          </span>
          spes-texnika
        </div>
-        <div className="flex items-center justify-start gap-2 text-gray-500 text-[20px] ">
+        <div className="flex items-center justify-start gap-2 text-gray-500 text-[18px] ">
          <span className="text-secondary">
            <BiTargetLock />
          </span>
-          Yakkasaroy , Toshkent
+          Toshkent , Yakkasaroy , Xushtepa 6
        </div>
      </div>
    </div>
--- a/components/pageParts/products.tsx
+++ b/components/pageParts/products.tsx
@@ -26,30 +26,30 @@ const productFilterTypesMainPage: productFilterTypes[] = [
 ];

 export default function Products() {
-  const [productFilter, setProductFilter] = useState<string | null>(null);
+  //const [productFilter, setProductFilter] = useState<string | null>(null);

  const [cars, setCars] = useState(allProducts);

  // execute filetr function
-  useEffect(() => {
-    if (productFilter === "trucks") {
-      setCars(trucks);
-    } else if (productFilter === "cranes") {
-      setCars(cranes);
-    } else if (productFilter === "forklift-trucks") {
-      setCars(forklift);
-    } else if (productFilter === "excavators") {
-      setCars(excavators);
-    } else if (productFilter === "road-repairs") {
-      setCars(road_repairs);
-    } else {
-      setCars(allProducts);
-    }
-  }, [productFilter]);
+  // useEffect(() => {
+  //   if (productFilter === "trucks") {
+  //     setCars(trucks);
+  //   } else if (productFilter === "cranes") {
+  //     setCars(cranes);
+  //   } else if (productFilter === "forklift-trucks") {
+  //     setCars(forklift);
+  //   } else if (productFilter === "excavators") {
+  //     setCars(excavators);
+  //   } else if (productFilter === "road-repairs") {
+  //     setCars(road_repairs);
+  //   } else {
+  //     setCars(allProducts);
+  //   }
+  // }, [productFilter]);
  return (
    <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
      {/* title part */}
-      <div className="flex flex-col">
+      <div className="flex flex-col mb-10">
        <div className="flex items-center justify-center w-full ">
          <div className="text-secondary px-2 text-[18px] font-semibold ">
            <Text txt="katalog" />
@@ -59,7 +59,7 @@ export default function Products() {
      </div>

      {/* product filters */}
-      <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
+      {/* <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
        {productFilterTypesMainPage.map((item, index) => (
          <button
            key={index}
@@ -80,7 +80,7 @@ export default function Products() {
            )}
          </button>
        ))}
-      </div>
+      </div> */}

      {/* products */}
      <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">