> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-detect-table-modification.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Explorador de guías de inicio rápido

> Explora las guías de inicio rápido para empezar a usar ClickHouse

export const quickStartsData = [{
  "id": "connect-your-iceberg-catalog",
  "title": "Cómo conectar tu catálogo Iceberg en ClickHouse Cloud",
  "description": "Aprende a conectar ClickHouse Cloud a tu catálogo de datos y a consultar tablas Iceberg.",
  "href": "/es/get-started/quickstarts/connect-your-iceberg-catalog",
  "useCases": ["data-warehousing"],
  "products": ["cloud"]
}, {
  "id": "create-your-first-materialized-view",
  "title": "Crea tu primera vista materializada",
  "description": "Aprende a usar las vistas materializadas en ClickHouse para precalcular y almacenar resultados de consultas con un orden diferente, lo que permite búsquedas rápidas en columnas que no forman parte de tu clave primaria.",
  "href": "/es/get-started/quickstarts/create-your-first-materialized-view",
  "useCases": ["real-time-analytics", "data-warehousing"],
  "products": ["cloud"]
}, {
  "id": "create-your-first-mergetree-table",
  "title": "Crea tu primera tabla MergeTree",
  "description": "Aprende cómo funciona el principal motor de tablas de ClickHouse creando una tabla MergeTree, cargando datos sobre precios de viviendas del Reino Unido y observando cómo las partes y las fusiones afectan al almacenamiento y al rendimiento de las consultas.",
  "href": "/es/get-started/quickstarts/create-your-first-mergetree-table",
  "useCases": ["all"],
  "products": ["cloud"]
}, {
  "id": "create-your-first-projection",
  "title": "Crea tu primera proyección",
  "description": "Aprende a usar las proyecciones en ClickHouse para almacenar una copia ordenada adicional de tus datos en la misma tabla, lo que permite búsquedas rápidas en columnas no incluidas en tu clave primaria.",
  "href": "/es/get-started/quickstarts/create-your-first-projection",
  "useCases": ["real-time-analytics", "data-warehousing"],
  "products": ["cloud"]
}, {
  "id": "create-your-first-service-on-cloud",
  "title": "Crea tu primer servicio de ClickHouse Cloud y carga datos de ejemplo",
  "description": "Crea un servicio de ClickHouse Cloud, explora la consola SQL y carga un conjunto de datos de ejemplo para empezar a consultar datos reales en minutos.",
  "href": "/es/get-started/quickstarts/create-your-first-service-on-cloud",
  "useCases": ["all"],
  "products": ["cloud"]
}, {
  "id": "creating-tables",
  "title": "Creación de tablas en ClickHouse",
  "description": "Aprende a crear tablas en ClickHouse",
  "href": "/es/get-started/quickstarts/creating-tables",
  "useCases": ["all"],
  "products": ["self-managed"]
}, {
  "id": "insert-data-using-clickhouse-client",
  "title": "Insertar datos en ClickHouse Cloud con clickhouse-client",
  "description": "Aprende a usar clickhouse-client para insertar datos desde archivos CSV y Parquet locales en un servicio de ClickHouse Cloud desde la línea de comandos.",
  "href": "/es/get-started/quickstarts/insert-data-using-clickhouse-client",
  "useCases": ["all"],
  "products": ["cloud"]
}, {
  "id": "mutations",
  "title": "Actualización y eliminación de datos de ClickHouse",
  "description": "Describe cómo realizar operaciones de actualización y eliminación en ClickHouse",
  "href": "/es/get-started/quickstarts/mutations",
  "useCases": ["data-warehousing"],
  "products": ["self-managed"]
}, {
  "id": "obtain-your-cloud-connection-details",
  "title": "Obtén los detalles de conexión de tu servicio en Cloud",
  "description": "Aprende a encontrar el hostname, el puerto y las credenciales de tu servicio de ClickHouse Cloud para conectarte desde clientes externos, CLI y aplicaciones.",
  "href": "/es/get-started/quickstarts/obtain-your-cloud-connection-details",
  "useCases": ["all"],
  "products": ["cloud"]
}, {
  "id": "tutorial",
  "title": "Tutorial avanzado",
  "description": "Aprende a ingestar y consultar datos en ClickHouse con un conjunto de datos de ejemplo de taxis de la ciudad de Nueva York.",
  "href": "/es/get-started/quickstarts/tutorial",
  "useCases": ["real-time-analytics", "data-warehousing"],
  "products": ["cloud", "self-managed"]
}, {
  "id": "working-with-the-map-type",
  "title": "Uso del tipo Map en ClickHouse",
  "description": "Aprenda a usar el tipo Map en ClickHouse para almacenar, consultar y agregar datos dinámicos de clave-valor, usando atributos de recurso de OTel como ejemplo práctico.",
  "href": "/es/get-started/quickstarts/working-with-the-map-type",
  "useCases": ["observability"],
  "products": ["self-managed"]
}, {
  "id": "writing-queries",
  "title": "Seleccionar datos de ClickHouse",
  "description": "Aprende a seleccionar datos de ClickHouse",
  "href": "/es/get-started/quickstarts/writing-queries",
  "useCases": ["all"],
  "products": ["self-managed"]
}];

export const QuickStartsGrid = ({quickStartsData = [], featured = []}) => {
  const featuredIds = featured.map(f => f.id);
  const data = quickStartsData || [];
  const assetBase = typeof window !== 'undefined' && window.location.pathname.startsWith('/docs') ? '/docs' : '';
  const withBase = p => p && p.startsWith('/') ? assetBase + p : p;
  const useCaseOptions = [{
    value: 'real-time-analytics',
    label: "Analítica en tiempo real"
  }, {
    value: 'data-warehousing',
    label: "Almacén de datos"
  }, {
    value: 'observability',
    label: "Observabilidad"
  }, {
    value: 'ai-ml',
    label: "AI/ML"
  }];
  const productOptions = [{
    value: 'self-managed',
    label: 'ClickHouse (código abierto)'
  }, {
    value: 'cloud',
    label: 'ClickHouse Cloud'
  }, {
    value: 'clickpipes',
    label: "ClickPipes"
  }, {
    value: 'language-clients',
    label: "Clientes por lenguaje"
  }, {
    value: 'clickstack',
    label: "ClickStack"
  }, {
    value: 'chdb',
    label: "chDB"
  }];
  const explorable = data.filter(qs => !featuredIds.includes(qs.id));
  const visibleUseCaseOptions = useCaseOptions.filter(o => explorable.some(qs => {
    const u = qs.useCases || [];
    return u.includes('all') || u.includes(o.value);
  }));
  const visibleProductOptions = productOptions.filter(o => explorable.some(qs => (qs.products || []).includes(o.value)));
  const readStored = key => {
    if (typeof window === 'undefined') return null;
    try {
      return localStorage.getItem(key);
    } catch {
      return null;
    }
  };
  const writeStored = (key, value) => {
    if (typeof window === 'undefined') return;
    try {
      localStorage.setItem(key, value);
    } catch {}
  };
  const readStoredSelection = (key, options) => {
    const raw = readStored(key);
    if (!raw) return [];
    try {
      const parsed = JSON.parse(raw);
      if (!Array.isArray(parsed)) return [];
      return parsed.filter(v => options.some(o => o.value === v));
    } catch {
      return [];
    }
  };
  const [searchTerm, setSearchTerm] = useState(() => readStored('quickstarts-search') || '');
  const [selectedUseCases, setSelectedUseCases] = useState(() => readStoredSelection('quickstarts-usecases', visibleUseCaseOptions));
  const [selectedProducts, setSelectedProducts] = useState(() => readStoredSelection('quickstarts-products', visibleProductOptions));
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 6;
  const [showFilters, setShowFilters] = useState(() => readStored('quickstarts-show-filters') !== 'false');
  const [isDesktop, setIsDesktop] = useState(true);
  useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return;
    const mq = window.matchMedia('(min-width: 1024px)');
    const update = () => setIsDesktop(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, []);
  useEffect(() => {
    writeStored('quickstarts-search', searchTerm);
  }, [searchTerm]);
  useEffect(() => {
    writeStored('quickstarts-usecases', JSON.stringify(selectedUseCases));
  }, [selectedUseCases]);
  useEffect(() => {
    writeStored('quickstarts-products', JSON.stringify(selectedProducts));
  }, [selectedProducts]);
  useEffect(() => {
    writeStored('quickstarts-show-filters', String(showFilters));
  }, [showFilters]);
  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, selectedUseCases, selectedProducts]);
  const makeToggle = setter => value => {
    setter(prev => prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]);
  };
  const toggleUseCase = makeToggle(setSelectedUseCases);
  const toggleProduct = makeToggle(setSelectedProducts);
  const resetFilters = () => {
    setSearchTerm('');
    setSelectedUseCases([]);
    setSelectedProducts([]);
  };
  const hasActiveFilters = searchTerm !== '' || selectedUseCases.length > 0 || selectedProducts.length > 0;
  const filteredQuickStarts = useMemo(() => {
    const term = searchTerm.toLowerCase();
    return data.filter(quickStart => {
      if (featuredIds.includes(quickStart.id)) return false;
      const matchesSearch = term === '' || quickStart.title.toLowerCase().includes(term) || (quickStart.description || '').toLowerCase().includes(term);
      const useCases = quickStart.useCases || [];
      const matchesUseCases = selectedUseCases.length === 0 || useCases.includes('all') || useCases.some(uc => selectedUseCases.includes(uc));
      const products = quickStart.products || [];
      const matchesProducts = selectedProducts.length === 0 || products.some(p => selectedProducts.includes(p));
      return matchesSearch && matchesUseCases && matchesProducts;
    });
  }, [data, searchTerm, selectedUseCases, selectedProducts, featuredIds]);
  const handleCardClick = (e, href) => {
    if (e.defaultPrevented) return;
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
    e.preventDefault();
    window.location.assign(withBase(href));
  };
  const featuredQuickStarts = featured.map(f => {
    const qs = data.find(q => q.id === f.id);
    return {
      id: f.id,
      href: qs && qs.href || `/es/get-started/quickstarts/${f.id}`,
      title: qs && qs.title || ''
    };
  }).filter(f => f.title);
  const FilterGroup = ({label, options, selectedOptions, onToggle}) => {
    const activeCount = selectedOptions.length;
    const displayLabel = activeCount > 0 ? `${label} (${activeCount})` : label;
    return <div style={{
      minWidth: '160px'
    }}>
        <div className="text-sm font-semibold text-black dark:text-white" style={{
      padding: '4px 0'
    }}>
          {displayLabel}
        </div>
        <div className="mt-1">
          {options.map(option => <label key={option.value} className="flex items-center gap-2 py-1.5 cursor-pointer transition-colors" onClick={e => {
      e.preventDefault();
      onToggle(option.value);
    }}>
              <span className="flex items-center justify-center w-4 h-4 rounded border flex-shrink-0" style={{
      borderColor: selectedOptions.includes(option.value) ? '#FAFF69' : 'rgba(156, 163, 175, 0.6)',
      backgroundColor: selectedOptions.includes(option.value) ? '#FAFF69' : 'transparent'
    }}>
                {selectedOptions.includes(option.value) && <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L4 7L8 3" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>}
              </span>
              <span className="text-sm text-black dark:text-white">{option.label}</span>
            </label>)}
        </div>
      </div>;
  };
  return <>
      <div style={{
    maxWidth: '1312px',
    marginLeft: 'max(0px, calc((100vw - 1312px) / 2 - 19rem))',
    marginRight: 'auto',
    paddingLeft: '1.75rem',
    paddingRight: '1.75rem'
  }}>
        <div className="my-8">
          {}
          {featuredQuickStarts.length > 0 && <div className="mb-12">
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-6">Guías de inicio rápido destacadas</h2>
              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                {featuredQuickStarts.map(quickStart => <a key={quickStart.id} href={quickStart.href} onClick={e => handleCardClick(e, quickStart.href)} className="group block rounded-xl overflow-hidden border border-gray-200 dark:border-white/10 transition-all hover:border-black dark:hover:border-[#FAFF69] hover:shadow-md">
                    {}
                    <div className="relative w-full aspect-[3/1] lg:aspect-[16/9] overflow-hidden bg-[#FAFF69] flex flex-col justify-center px-6 transition-transform duration-200 group-hover:scale-[1.02]">
                      {}
                      <div className="pointer-events-none absolute inset-y-0 right-6 flex items-center gap-2.5" aria-hidden="true">
                        <span className="w-3 rounded-sm bg-[#C4CB54]" style={{
    height: '42%',
    transform: 'translateY(-12%)'
  }} />
                        <span className="w-3 rounded-sm bg-[#C4CB54]" style={{
    height: '34%',
    transform: 'translateY(18%)'
  }} />
                        <span className="w-3 rounded-sm bg-[#C4CB54]" style={{
    height: '64%',
    transform: 'translateY(-14%)'
  }} />
                        <span className="w-3 rounded-sm bg-[#C4CB54]" style={{
    height: '46%',
    transform: 'translateY(20%)'
  }} />
                      </div>
                      <span className="relative z-10 pr-24 text-[15px] lg:text-lg font-bold leading-snug text-black line-clamp-4">
                        {quickStart.title}
                      </span>
                      <svg viewBox="0 0 161 34" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" className="hidden">
                        <rect width="3.77758" height="33.9982" rx="0.918881" fill="currentColor" />
                        <rect x="7.55554" width="3.77758" height="33.9982" rx="0.918881" fill="currentColor" />
                        <rect x="15.1112" width="3.77758" height="33.9982" rx="0.918881" fill="currentColor" />
                        <rect x="22.6649" width="3.77758" height="33.9982" rx="0.918881" fill="currentColor" />
                        <rect x="30.2223" y="13.2227" width="3.77758" height="7.55515" rx="0.918881" fill="currentColor" />
                        <path d="M59.464 25.208C58.472 25.864 57.096 26.192 55.336 26.192C52.92 26.192 50.944 25.44 49.408 23.936C47.872 22.432 47.104 20.416 47.104 17.888C47.104 15.44 47.872 13.448 49.408 11.912C50.96 10.376 52.92 9.608 55.288 9.608C57.016 9.608 58.4 9.904 59.44 10.496V12.92C58.736 12.536 58.096 12.272 57.52 12.128C56.96 11.968 56.24 11.888 55.36 11.888C53.744 11.888 52.392 12.44 51.304 13.544C50.232 14.632 49.696 16.08 49.696 17.888C49.696 19.728 50.232 21.192 51.304 22.28C52.376 23.368 53.792 23.912 55.552 23.912C57.104 23.912 58.408 23.512 59.464 22.712V25.208ZM64.6593 26H62.2833V9.032H64.6593V26ZM70.5421 26H68.1661V13.832H70.5421V26ZM70.8301 10.112C70.8301 10.512 70.6861 10.856 70.3981 11.144C70.1101 11.432 69.7581 11.576 69.3421 11.576C68.9261 11.576 68.5741 11.44 68.2861 11.168C68.0141 10.88 67.8781 10.528 67.8781 10.112C67.8781 9.696 68.0141 9.344 68.2861 9.056C68.5741 8.768 68.9261 8.624 69.3421 8.624C69.7581 8.624 70.1101 8.768 70.3981 9.056C70.6861 9.344 70.8301 9.696 70.8301 10.112ZM82.5449 25.52C81.7609 26 80.7609 26.24 79.5449 26.24C77.6409 26.24 76.1209 25.64 74.9849 24.44C73.8489 23.24 73.2809 21.744 73.2809 19.952C73.2809 18.208 73.8489 16.72 74.9849 15.488C76.1369 14.24 77.6889 13.616 79.6409 13.616C80.6969 13.616 81.6649 13.84 82.5449 14.288V16.448C81.7609 15.952 80.8729 15.704 79.8809 15.704C78.6169 15.704 77.6009 16.104 76.8329 16.904C76.0809 17.704 75.7049 18.728 75.7049 19.976C75.7369 21.208 76.1129 22.224 76.8329 23.024C77.5529 23.808 78.5609 24.2 79.8569 24.2C80.8169 24.2 81.7129 23.936 82.5449 23.408V25.52ZM87.6018 26H85.2498V9.2H87.6018V26ZM90.4098 19.64L95.1858 26H92.3778L87.6978 19.64L92.2818 13.832H95.0418L90.4098 19.64ZM109.562 26H107.09V18.92H99.8178V26H97.3458V9.824H99.8178V16.784H107.09V9.824H109.562V26ZM122.384 15.44C123.392 16.608 123.896 18.104 123.896 19.928C123.896 21.752 123.376 23.256 122.336 24.44C121.312 25.624 119.896 26.216 118.088 26.216C116.296 26.216 114.888 25.632 113.864 24.464C112.84 23.296 112.328 21.816 112.328 20.024C112.328 18.2 112.856 16.688 113.912 15.488C114.968 14.272 116.36 13.664 118.088 13.664C119.944 13.664 121.376 14.256 122.384 15.44ZM114.776 19.952C114.776 21.152 115.072 22.168 115.664 23C116.256 23.816 117.064 24.224 118.088 24.224C119.176 24.224 120 23.824 120.56 23.024C121.136 22.224 121.424 21.208 121.424 19.976C121.424 18.712 121.152 17.68 120.608 16.88C120.064 16.064 119.216 15.656 118.064 15.656C117.024 15.656 116.216 16.072 115.64 16.904C115.064 17.72 114.776 18.736 114.776 19.952ZM136.459 26H134.107V23.912C133.467 25.4 132.203 26.144 130.315 26.144C129.115 26.144 128.163 25.792 127.459 25.088C126.755 24.368 126.403 23.384 126.403 22.136V13.832H128.779V21.56C128.779 22.392 128.979 23.032 129.379 23.48C129.795 23.912 130.363 24.128 131.083 24.128C131.995 24.128 132.723 23.808 133.267 23.168C133.827 22.528 134.107 21.624 134.107 20.456V13.832H136.459V26ZM147.373 22.64C147.373 23.728 146.989 24.584 146.221 25.208C145.453 25.816 144.413 26.12 143.101 26.12C141.661 26.12 140.461 25.88 139.501 25.4V23.168C140.621 23.856 141.781 24.2 142.981 24.2C143.605 24.2 144.085 24.072 144.421 23.816C144.773 23.56 144.949 23.224 144.949 22.808C144.949 22.456 144.813 22.144 144.541 21.872C144.269 21.584 143.989 21.376 143.701 21.248C143.429 21.104 142.957 20.888 142.285 20.6C140.381 19.816 139.429 18.664 139.429 17.144C139.429 16.072 139.829 15.232 140.629 14.624C141.429 14.016 142.429 13.712 143.629 13.712C144.941 13.712 145.965 13.888 146.701 14.24V16.376C145.917 15.912 144.909 15.68 143.677 15.68C143.117 15.68 142.669 15.808 142.333 16.064C142.013 16.32 141.853 16.656 141.853 17.072C141.853 17.184 141.861 17.296 141.877 17.408C141.909 17.504 141.957 17.608 142.021 17.72C142.085 17.816 142.141 17.904 142.189 17.984C142.253 18.048 142.349 18.12 142.477 18.2C142.605 18.28 142.701 18.352 142.765 18.416C142.845 18.464 142.965 18.528 143.125 18.608C143.301 18.688 143.429 18.752 143.509 18.8C143.589 18.832 143.725 18.896 143.917 18.992C144.125 19.072 144.269 19.128 144.349 19.16C145.293 19.576 146.029 20.048 146.557 20.576C147.101 21.088 147.373 21.776 147.373 22.64ZM158.892 25.352C157.996 25.864 156.812 26.12 155.34 26.12C153.452 26.12 151.948 25.552 150.828 24.416C149.708 23.28 149.148 21.792 149.148 19.952C149.148 18 149.66 16.472 150.684 15.368C151.708 14.248 153.012 13.688 154.596 13.688C156.148 13.688 157.38 14.176 158.292 15.152C159.204 16.112 159.66 17.504 159.66 19.328C159.66 19.824 159.612 20.344 159.516 20.888H151.524C151.684 21.944 152.132 22.752 152.868 23.312C153.604 23.872 154.532 24.152 155.652 24.152C156.948 24.152 158.028 23.848 158.892 23.24V25.352ZM154.644 15.632C153.844 15.632 153.156 15.928 152.58 16.52C152.004 17.096 151.644 17.936 151.5 19.04H157.38V18.608C157.348 17.696 157.1 16.976 156.636 16.448C156.172 15.904 155.508 15.632 154.644 15.632Z" fill="currentColor" />
                      </svg>
                    </div>
                  </a>)}
              </div>
            </div>}

          {}
          <div className="flex flex-col lg:flex-row gap-8">
            {}
            <div className={isDesktop ? "flex-shrink-0 transition-[width] duration-300 ease-in-out" : "w-full"} style={isDesktop ? {
    width: showFilters ? '16rem' : '0px'
  } : undefined}>
              <div className="lg:sticky relative" style={isDesktop ? {
    top: '8.5rem'
  } : undefined}>
                {}
                <div aria-hidden="true" className="absolute bg-gray-200 dark:bg-white/10" style={isDesktop ? {
    left: '100%',
    top: 0,
    bottom: 0,
    width: '1px'
  } : {
    top: '100%',
    left: 0,
    right: 0,
    height: '1px'
  }} />
                {}
                <button onClick={() => setShowFilters(prev => !prev)} aria-label={showFilters ? "Ocultar filtros" : "Mostrar filtros"} title={showFilters ? "Ocultar filtros" : "Mostrar filtros"} className="flex items-center justify-center absolute z-20 cursor-pointer rounded-full border transition-colors border-gray-300 dark:border-white/20 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18] text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-[#FAFF69] shadow-sm" style={isDesktop ? {
    left: '100%',
    top: '50%',
    width: '28px',
    height: '28px',
    transform: 'translate(-50%, -50%)'
  } : {
    top: '100%',
    left: '50%',
    width: '28px',
    height: '28px',
    transform: 'translate(-50%, -50%)'
  }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="transition-transform duration-300" style={{
    transform: `rotate(${isDesktop ? showFilters ? 0 : 180 : showFilters ? 90 : -90}deg)`
  }}>
                    <path d="M7.5 2.5L4 6L7.5 9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>

                {}
                <div className="overflow-hidden transition-all duration-300" style={isDesktop ? {
    width: '16rem',
    paddingRight: '1.5rem',
    opacity: showFilters ? 1 : 0,
    pointerEvents: showFilters ? 'auto' : 'none'
  } : {
    width: '100%',
    maxHeight: showFilters ? '1500px' : '0px',
    paddingBottom: showFilters ? '1.5rem' : '0px',
    opacity: showFilters ? 1 : 0,
    pointerEvents: showFilters ? 'auto' : 'none'
  }}>
                <div className="space-y-6">
                {}
                <div>
                  <label className="block text-sm font-semibold text-gray-900 dark:text-zinc-50 mb-3">
                    Búsqueda
                  </label>
                  <div className="relative w-full">
                    <svg className="absolute pointer-events-none z-10" style={{
    left: '12px',
    top: '50%',
    transform: 'translateY(-50%)',
    width: '16px',
    height: '16px',
    color: '#666'
  }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <input type="text" placeholder="Buscar guías de inicio rápido..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full text-sm border rounded-xl focus:outline-none bg-white dark:bg-[#1B1B18] text-black dark:text-white border-gray-300 dark:border-gray-600 focus:border-black dark:focus:border-[#FAFF69]" style={{
    height: '42px',
    padding: '0.5rem 0.75rem 0.5rem 2.75rem',
    lineHeight: '1.4',
    boxSizing: 'border-box'
  }} />
                  </div>
                </div>

                {}
                <div>
                  <div className="space-y-5">
                    <FilterGroup label="Casos de uso" options={visibleUseCaseOptions} selectedOptions={selectedUseCases} onToggle={toggleUseCase} />
                    <FilterGroup label="Área de producto" options={visibleProductOptions} selectedOptions={selectedProducts} onToggle={toggleProduct} />
                  </div>
                </div>

                {}
                {hasActiveFilters && <button onClick={resetFilters} className="w-full text-sm font-medium px-4 py-2 rounded-lg transition-all cursor-pointer border border-gray-300 dark:border-white/20 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18] text-black dark:text-white">
                    Restablecer filtros
                  </button>}
                </div>
                </div>
              </div>
            </div>

            {}
            <div className="flex-1 min-w-0">
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-6">Explorar guías de inicio rápido</h2>

              {filteredQuickStarts.length > 0 ? <>
                  <div className="flex flex-col gap-2">
                    {filteredQuickStarts.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map(quickStart => <a key={quickStart.id} href={quickStart.href} onClick={e => handleCardClick(e, quickStart.href)} className="group block rounded-lg border px-4 py-3 transition-all border-gray-200 dark:border-white/10 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18]">
                          <div className="text-sm font-semibold text-gray-900 dark:text-zinc-50">
                            {quickStart.title}
                          </div>
                          <div className="text-sm text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2">
                            {quickStart.description}
                          </div>
                        </a>)}
                  </div>
                  {}
                  {(() => {
    const totalPages = Math.ceil(filteredQuickStarts.length / itemsPerPage);
    if (totalPages <= 1) return null;
    const hasPrev = currentPage > 1;
    const hasNext = currentPage < totalPages;
    return <div className="flex items-center justify-center gap-3 mt-8">
                        <button onClick={() => hasPrev && setCurrentPage(prev => prev - 1)} disabled={!hasPrev} className={`p-2 rounded-lg border transition-all ${hasPrev ? 'border-gray-300 dark:border-white/20 bg-white dark:bg-[#1B1B18] text-black dark:text-white hover:border-[#FAFF69] cursor-pointer' : 'border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-[#1B1B18]/50 text-gray-300 dark:text-white/20 cursor-not-allowed'}`} aria-label="Página anterior">
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 12L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          Página {currentPage} / {totalPages}
                        </span>
                        <button onClick={() => hasNext && setCurrentPage(prev => prev + 1)} disabled={!hasNext} className={`p-2 rounded-lg border transition-all ${hasNext ? 'border-gray-300 dark:border-white/20 bg-white dark:bg-[#1B1B18] text-black dark:text-white hover:border-[#FAFF69] cursor-pointer' : 'border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-[#1B1B18]/50 text-gray-300 dark:text-white/20 cursor-not-allowed'}`} aria-label="Página siguiente">
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                      </div>;
  })()}
                </> : <div className="text-center py-12 flex flex-col items-center">
                  <p className="text-gray-600 dark:text-gray-400 text-lg block">
                    No se encontraron guías de inicio rápido que coincidan con los criterios indicados.
                  </p>
                  <p className="text-gray-500 dark:text-gray-500 text-sm mt-2 block">
                    Pruebe ajustando los filtros o el término de búsqueda.
                  </p>
                </div>}
            </div>
          </div>
        </div>
      </div>
    </>;
};

export const featuredQuickstarts = [{
  id: 'create-your-first-service-on-cloud'
}, {
  id: 'insert-data-using-clickhouse-client'
}, {
  id: 'obtain-your-cloud-connection-details'
}];

<div className="relative overflow-hidden">
  <div className="absolute top-0 left-0 right-0 opacity-80">
    <img src="https://mintcdn.com/private-7c7dfe99-detect-table-modification/pgldaX9p0_FSNkx0/images/background-light.svg?fit=max&auto=format&n=pgldaX9p0_FSNkx0&q=85&s=88e4361caf950c0f1ee7a2c42f1c477f" className="block dark:hidden pointer-events-none w-full h-auto" alt="Imagen de fondo decorativa." width="1152" height="388" data-path="images/background-light.svg" />

    <img src="https://mintcdn.com/private-7c7dfe99-detect-table-modification/pgldaX9p0_FSNkx0/images/background-dark.svg?fit=max&auto=format&n=pgldaX9p0_FSNkx0&q=85&s=69e3c5c719ccf03c7b853356de2726c4" className="hidden dark:block pointer-events-none w-full h-auto" alt="Imagen de fondo decorativa." width="1152" height="388" data-path="images/background-dark.svg" />
  </div>

  <QuickStartsGrid quickStartsData={quickStartsData} featured={featuredQuickstarts} />
</div>
