Update chilean map responsivness

Author: MariferVL

src/components/ChileMap.js

@@ -1,52 +1,54 @@
 "use client";
-
 import { useState } from "react";
 import Link from "next/link";
 
 export default function ChileMap({ cities }) {
   const [activeCity, setActiveCity] = useState(null);
-
+  
   return (
-    <div className="relative mx-auto w-1/3">
-      <div className="aspect-[3/6] w-full bg-white/10 backdrop-blur-sm rounded-lg p-4 relative">
-        {/* SVG simplificado del mapa de Chile */}
-        <svg viewBox="0 0 100 300" className="w-full h-full">
-          <path
-            d="M50,20 Q60,50 55,100 Q50,150 60,200 Q70,250 50,280"
-            fill="none"
-            stroke="white"
-            strokeWidth="2"
-            className="opacity-50"
-          />
-
-          {cities.map((city) => (
-            <g
-              key={city.slug}
-              onClick={() => setActiveCity(city.slug)}
-              className="cursor-pointer"
-            >
-              <circle
-                cx={city.mapCoords.x}
-                cy={city.mapCoords.y}
-                r={activeCity === city.slug ? 6 : 4}
-                fill={activeCity === city.slug ? "#FFD700" : "#8A2BE2"}
-                className="transition-all duration-300"
-              />
-              <text
-                x={city.mapCoords.x + 8}
-                y={city.mapCoords.y + 4}
-                fontSize="8"
-                fill="white"
-                className="pointer-events-none"
+    <div className="flex flex-col md:flex-row justify-between gap-8 mx-auto max-w-6xl px-4">
+      {/* Mapa SVG - Más grande en móvil y adaptativo en escritorio */}
+      <div className="w-full md:w-1/2 lg:w-2/5 mx-auto">
+        <div className="aspect-[3/6] w-full bg-white/10 backdrop-blur-sm rounded-lg p-4 relative">
+          {/* SVG simplificado del mapa de Chile */}
+          <svg viewBox="0 0 100 300" className="w-full h-full">
+            <path
+              d="M50,20 Q60,50 55,100 Q50,150 60,200 Q70,250 50,280"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              className="opacity-50"
+            />
+            {cities.map((city) => (
+              <g
+                key={city.slug}
+                onClick={() => setActiveCity(city.slug)}
+                className="cursor-pointer"
               >
-                {city.name}
-              </text>
-            </g>
-          ))}
-        </svg>
+                <circle
+                  cx={city.mapCoords.x}
+                  cy={city.mapCoords.y}
+                  r={activeCity === city.slug ? 6 : 4}
+                  fill={activeCity === city.slug ? "#FFD700" : "#8A2BE2"}
+                  className="transition-all duration-300"
+                />
+                <text
+                  x={city.mapCoords.x + 8}
+                  y={city.mapCoords.y + 4}
+                  fontSize="8"
+                  fill="white"
+                  className="pointer-events-none"
+                >
+                  {city.name}
+                </text>
+              </g>
+            ))}
+          </svg>
+        </div>
       </div>
-
-      <div className="mt-6 space-y-4">
+      
+      {/* Lista de ciudades - A la derecha en desktop, abajo en móvil */}
+      <div className="w-full md:w-1/2 mt-6 md:mt-0 space-y-4">
         {cities.map((city) => (
           <Link
             href={`/${city.slug}`}
@@ -75,4 +77,4 @@ export default function ChileMap({ cities }) {
       </div>
     </div>
   );
-}
+}