✨ Added initial code for the grid and map section.

🚗 Implemented car card rendering.
🗺️ Integrated Google Maps API for location display.
📅 Added date and filter components.
📈 Implemented pagination functionality.
🌟 Improved hover effect for car cards.
🪙 Fixed responsive design issues.
📝 Updated comments and code documentation.
🎨 Improved styling for a better user experience.

src/app/(car-listings)/SectionGridHasMap.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import React, { FC, useState } from "react";
+import GoogleMapReact from "google-map-react";
+import { DEMO_CAR_LISTINGS } from "@/data/listings";
+import ButtonClose from "@/shared/ButtonClose";
+import Checkbox from "@/shared/Checkbox";
+import Pagination from "@/shared/Pagination";
+import TabFilters from "./TabFilters";
+import Heading2 from "@/shared/Heading2";
+import CarCardH from "@/components/CarCardH";
+import AnyReactComponent from "@/components/AnyReactComponent/AnyReactComponent";
+
+const DEMO_CARS = DEMO_CAR_LISTINGS.filter((_, i) => i < 12);
+
+export interface SectionGridHasMapProps {}
+
+const SectionGridHasMap: FC<SectionGridHasMapProps> = () => {
+  const [currentHoverID, setCurrentHoverID] = useState<string | number>(-1);
+  const [showFullMapFixed, setShowFullMapFixed] = useState(false);
+
+  return (
+    <div>
+      <div className="relative flex min-h-screen">
+        {/* CARDSSSS */}
+        <div className="min-h-screen w-full xl:w-[780px] 2xl:w-[880px] flex-shrink-0 xl:px-8 ">
+          <Heading2
+            heading="Cars in Tokyo"
+            subHeading={
+              <span className="block text-neutral-500 dark:text-neutral-400 mt-3">
+                233 cars
+                <span className="mx-2">·</span>
+                Aug 12 - 18
+              </span>
+            }
+          />
+          <div className="mb-8 lg:mb-11">
+            <TabFilters />
+          </div>
+          <div className="grid grid-cols-1 gap-8">
+            {DEMO_CARS.map((item) => (
+              <div
+                key={item.id}
+                onMouseEnter={() => setCurrentHoverID((_) => item.id)}
+                onMouseLeave={() => setCurrentHoverID((_) => -1)}
+              >
+                <CarCardH data={item} />
+              </div>
+            ))}
+          </div>
+          <div className="flex mt-16 justify-center items-center">
+            <Pagination />
+          </div>
+        </div>
+
+        <div
+          className="flex xl:hidden items-center justify-center fixed bottom-8 left-1/2 transform -translate-x-1/2 px-6 py-2 bg-neutral-900 text-white shadow-2xl rounded-full z-30  space-x-3 text-sm cursor-pointer"
+          onClick={() => setShowFullMapFixed(true)}
+        >
+          <i className="text-lg las la-map"></i>
+          <span>Show map</span>
+        </div>
+
+        {/* MAPPPPP */}
+        <div
+          className={`xl:flex-grow xl:static xl:block ${
+            showFullMapFixed ? "fixed inset-0 z-50" : "hidden"
+          }`}
+        >
+          {showFullMapFixed && (
+            <ButtonClose
+              onClick={() => setShowFullMapFixed(false)}
+              className="bg-white absolute z-50 left-3 top-3 shadow-lg rounded-xl w-10 h-10"
+            />
+          )}
+
+          <div className="fixed xl:sticky top-0 xl:top-[88px] left-0 w-full h-full xl:h-[calc(100vh-88px)] rounded-md overflow-hidden">
+            <div className="absolute bottom-5 left-3 lg:bottom-auto lg:top-2.5 lg:left-1/2 transform lg:-translate-x-1/2 py-2 px-4 bg-white shadow-xl z-10 rounded-2xl min-w-max">
+              <Checkbox
+                className="text-xs xl:text-sm text-neutral-800"
+                name="xx"
+                label="Search ass I move the map"
+              />
+            </div>
+            {/* BELLOW IS MY GOOGLE API KEY -- PLEASE DELETE AND TYPE YOUR API KEY */}
+
+            <GoogleMapReact
+              bootstrapURLKeys={{
+                key: "AIzaSyAGVJfZMAKYfZ71nzL_v5i3LjTTWnCYwTY",
+              }}
+              yesIWantToUseGoogleMapApiInternals
+              defaultZoom={12}
+              defaultCenter={DEMO_CARS[0].map}
+            >
+              {DEMO_CARS.map((item) => (
+                <AnyReactComponent
+                  isSelected={currentHoverID === item.id}
+                  key={item.id}
+                  lat={item.map.lat}
+                  lng={item.map.lng}
+                  car={item}
+                />
+              ))}
+            </GoogleMapReact>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridHasMap;