{/* Top Bar */}

Partner GIS Cloud • QGIS • Datos Geoespaciales

{/* Header / Nav */}

{/* Hero */}

Plataforma y Servicios GIS

Datos, mapas y decisiones
en tiempo real

Implementamos soluciones geoespaciales para gobiernos y empresas: geosegmentación, catastro, visores, aplicaciones móviles y analítica territorial. Todo, con una experiencia moderna y segura.

Seguridad y respaldo

Escalable en la nube

Integración con sistemas

{[ { icon: , text: "Mobile Data Collection" }, { icon: , text: "Heatmaps & KPI" }, { icon: , text: "Geoportales" }, ].map((i, idx) => (

{i.icon} {i.text}

))}

{/* Logos */}

Instituciones y empresas que confían en nosotros

{["Carabineros de Chile","Ejército de Chile","Municipio de Torres del Paine","Municipio de Casablanca","Universidades","Retail & Logística"].map((name, i)=> (

{name}

))}

{/* Soluciones */}

{[ { icon: , title: "Geosegmentación", desc: "Segmenta clientes y territorios con variables socioeconómicas, movilidad y consumo.", bullets: ["Capas oficiales y privadas","Modelos de scoring","Exportación a CRM"], cta: "Ver solución" }, { icon: , title: "SIG Municipal", desc: "Inventarios, catastro, permisos y participación ciudadana en un único geoportal.", bullets: ["Catastro y catastros temáticos","Visor público/privado","Integración con ERP"], cta: "Explorar" }, { icon: , title: "Vecino Reporta", desc: "App móvil para incidentes, baches, luminarias y mantención urbana con SLA.", bullets: ["Tickets georreferenciados","Panel de gestión","KPIs en tiempo real"], cta: "Solicitar demo" }, { icon: , title: "Geoportal Corporativo", desc: "Visores 2D/3D, mapas temáticos y analítica para tus equipos y clientes.", bullets: ["Perfiles y permisos","Historias de mapa","Embebidos y API"], cta: "Ver ejemplos" }, { icon: , title: "Geocodificación & Routing", desc: "Direcciones limpias, normalizadas y rutas óptimas para logística.", bullets: ["Batch & API","Calidad y cobertura","Matrices OD"], cta: "Conectar" }, { icon: , title: "Analítica Territorial", desc: "Dashboard de KPI, heatmaps y reportes ejecutivos.", bullets: ["Indicadores clave","Alertas","Descarga de datos"], cta: "Ver demo" }, ].map((s, idx) => ( {s.icon} {s.title}

{s.desc}

))}

{/* Productos (Suite) */}

{[ { title: "Map Editor", desc: "Edición colaborativa en la nube con control de versiones.", tag: "Cloud" }, { title: "Mobile Data Collection", desc: "Levantamiento en terreno sin conexión.", tag: "Field" }, { title: "Map Viewer", desc: "Visualización rápida y segura para equipos y clientes.", tag: "Viewer" }, { title: "Map Portal", desc: "Geoportal público/privado con branding corporativo.", tag: "Portal" }, ].map((p, idx) => (

{p.title} {p.tag}

{p.desc}

))}

{/* Casos de éxito */}

{[ { name: "Seguridad Pública", impact: "+40% tiempo de respuesta", detail: "Visor delictual y analítica por cuadrantes.", tag: "Gobierno" }, { name: "Gestión Municipal", impact: "-30% tiempos de trámite", detail: "Catastro y permisos en línea.", tag: "Municipal" }, { name: "Retail & Logística", impact: "-18% costo por entrega", detail: "Ruteo óptimo y geocodificación masiva.", tag: "Empresa" }, ].map((c, i) => (

{c.name} {c.tag}

Impacto: {c.impact}

{c.detail}

))}

{/* CTA Banner */}

Solicita una demo guiada

Te mostramos cómo Teramaps integra datos, mapas y procesos para tu organización en menos de 30 minutos.

{/* Clientes */}

{[1,2,3,4,5,6,7,8].map((i)=> (

Logo cliente #{i}

))}

{/* Recursos */}

{["Mapa Socioeconómico de Santiago","Cómo diseñar un Geoportal","Checklist de levantamiento en terreno"].map((t, i) => ( {t}

Artículo introductorio con mejores prácticas y ejemplos aplicados.

))}

{/* Contacto */}

Escríbenos

<div className="flex items-center gap-3">
                  <Button className="bg-sky-600 hover:bg-sky-700 rounded-xl">Enviar</Button>
                  <p className="text-xs text-neutral-500">Al enviar aceptas nuestra política de privacidad.</p>
                </div>
              </form>
            </CardContent>
          </Card>

<div className="space-y-6">
            <div>
              <h4 className="text-lg font-semibold">Oficinas</h4>
              <p className="text-neutral-600">Santiago, Chile • Atención LATAM</p>
            </div>
            <div className="space-y-3 text-neutral-700">
              <a href="mailto:contacto@teramaps.cl" className="flex items-center gap-2"><Mail size={18}/> contacto@teramaps.cl</a>
              <a href="tel:+56212345678" className="flex items-center gap-2"><Phone size={18}/> +56 2 1234 5678</a>
            </div>
            <div className="rounded-2xl border bg-neutral-50 p-4">
              <p className="text-sm text-neutral-600">¿Buscas una alianza estratégica? Escríbenos y te contactamos para explorar oportunidades de partnership y proyectos especiales.</p>
            </div>
          </div>
        </div>
      </Section>

{/* Footer */}
      <footer className="border-t bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-3">
                <div className="w-8 h-8 rounded-2xl bg-sky-600" />
                <span className="font-bold">Teramaps</span>
              </div>
              <p className="text-sm text-neutral-600">Soluciones geoespaciales para organizaciones que toman decisiones con datos.</p>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Empresa</h5>
              <ul className="space-y-2 text-sm text-neutral-700">
                <li><a href="#soluciones" className="hover:text-sky-700">Soluciones</a></li>
                <li><a href="#productos" className="hover:text-sky-700">Productos</a></li>
                <li><a href="#casos" className="hover:text-sky-700">Casos de éxito</a></li>
                <li><a href="#recursos" className="hover:text-sky-700">Recursos</a></li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Legal</h5>
              <ul className="space-y-2 text-sm text-neutral-700">
                <li><a href="#" className="hover:text-sky-700">Términos</a></li>
                <li><a href="#" className="hover:text-sky-700">Privacidad</a></li>
                <li><a href="#" className="hover:text-sky-700">Seguridad</a></li>
              </ul>
            </div>
            <div>
              <h5 className="font-semibold mb-3">Contacto</h5>
              <p className="text-sm text-neutral-700">Santiago, Chile</p>
              <p className="text-sm text-neutral-700">contacto@teramaps.cl</p>
              <p className="text-sm text-neutral-700">+56 2 1234 5678</p>
            </div>
          </div>
          <div className="mt-8 pt-8 border-t text-xs text-neutral-500 flex items-center justify-between">
            <span>© {new Date().getFullYear()} Teramaps SpA. Todos los derechos reservados.</span>
            <div className="flex items-center gap-4">
              <a href="#" className="hover:text-black">LinkedIn</a>
              <a href="#" className="hover:text-black">YouTube</a>
              <a href="#" className="hover:text-black">X</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
<meta property="og:url" content="https://teramaps-gc-qgis.webnode.page/home2/"><meta property="og:title" content="Home2"><meta property="og:type" content="article"><meta property="og:description" content="SIG, GIS, catastro, cartografia, geografia, mapas, mapping, geografico"><meta property="og:site_name" content="teramaps.cl"><meta property="og:article:published_time" content="2026-07-01 00:00:00"><meta name="robots" content="index,follow"><link rel="canonical" href="https://teramaps-gc-qgis.webnode.page/home2/"><script>window.checkAndChangeSvgColor=function(c){try{var a=document.getElementById(c);if(a){c=[["border","borderColor"],["outline","outlineColor"],["color","color"]];for(var h,b,d,f=[],e=0,m=c.length;e<m;e++)if(h=window.getComputedStyle(a)[c[e][1]].replace(/\s/g,"").match(/^rgb[a]?\(([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})/i)){b="";for(var g=1;3>=g;g++)b+=("0"+parseInt(h[g],10).toString(16)).slice(-2);"0"===b.charAt(0)&&(d=parseInt(b.substr(0,2),16),d=Math.max(16,d),b=d.toString(16)+b.slice(-4));f.push(c[e][0]+"="+b)}if(f.length){var k=a.getAttribute("data-src"),l=k+(0>k.indexOf("?")?"?":"&")+f.join("&");a.src!=l&&(a.src=l,a.outerHTML=a.outerHTML)}}}catch(n){}};</script></head>
<body class="l wt-page l-default l-d-none b-btn-fr b-btn-s-m b-btn-dn b-btn-bw-1 img-d-n img-t-u img-h-n line-solid b-e-ds lbox-d c-s-l  wnd-free-bar-limited  wnd-fe"><noscript>
				<iframe
				 src="https://www.googletagmanager.com/ns.html?id=GTM-542MMSL"
				 height="0"
				 width="0"
				 style="display:none;visibility:hidden"
				 >
				 </iframe>
			</noscript>

</a>
	</div>
</div>
							<div class="l-s logo-slogan claim"><span class="sit b claim-default claim-nb open-sans slogan-15">
	<span class="sit-w"><span class="sit-c"><strong>   teramaps</strong></span></span>
</span></div>
						</div>

<div id="menu-slider">
							<div id="menu-block">
								<nav id="menu"><div class="menu-font menu-wrapper">
	<a href="#" class="menu-close" rel="nofollow" title="Close Menu"></a>
	<ul role="menubar" aria-label="Menú" class="level-1">
		<li role="none" class="wnd-homepage">
			<a class="menu-item" role="menuitem" href="/"><span class="menu-item-text">Inicio</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/productos-qgis-suite-gis-cloud/"><span class="menu-item-text">Productos</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/servicios/"><span class="menu-item-text">Servicios</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/contacto/"><span class="menu-item-text">Contacto</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/blog/"><span class="menu-item-text">Blog</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/soluciones/"><span class="menu-item-text">Soluciones</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/servicio-de-catastro-activos-publicos-terreno/"><span class="menu-item-text">Catastro Activos Públicos</span></a>
			
		</li><li role="none">
			<a class="menu-item" role="menuitem" href="/ia-en-gis/"><span class="menu-item-text">IA en GIS</span></a>
			
		</li>
	</ul>
	<span class="more-text">Más</span>
</div></nav>
							</div>
						</div>

</div>
		</div>
	</div>
</section></div>
</div>
        </header>
        <main class="l-m cf">
            <div class="sw cf">
	<div class="sw-c cf"><section class="s s-hm s-hm-hidden wnd-h-hidden cf sc-w   hn-slogan"><div></div></section><section class="s s-basic cf sc-w   wnd-w-wider wnd-s-higher wnd-h-auto">
	<div class="s-w cf">
		<div class="s-o s-fs cf">
			<div class="s-bg cf">
				<div class="s-bg-l">
                    
					
				</div>
			</div>
			<div class="s-c s-fs cf">
				<div class="ez cf wnd-no-cols">
	<div class="ez-c"><div class="b b-text cf">
	<div class="b-c b-text-c b-s b-s-t60 b-s-b60 b-cs cf"><h1 class="wnd-align-center"><strong>Home2</strong></h1>

<p>Introduce un texto aquí...</p>
</div>
</div></div>
</div>
			</div>
		</div>
	</div>
</section></div>
</div>
        </main>
        <footer class="l-f cf">
            <div class="sw cf">
	<div class="sw-c cf"><section data-wn-border-element="s-f-border" class="s s-f s-f-edit sc-d   wnd-w-wider wnd-s-higher wnd-h-auto">
	<div class="s-w">
		<div class="s-o">
			<div class="s-bg">
                <div class="s-bg-l">
                    
                    
                </div>
			</div>
			<div class="s-f-ez">
				<div class="s-c s-f-border">
					<div>
						<div class="ez cf">
	<div class="ez-c"><div class="cw cf">
	<div class="cw-c cf"><div class="c cf" style="width:33.334%;">
	<div class="c-c cf"><div class="b b-text cf">
	<div class="b-c b-text-c b-s b-s-t60 b-s-b60 b-cs cf"><h2><strong>Teramaps </strong></h2><h2><span style="font-size: 16px;"><strong>Inteligencia Geoespacial</strong></span></h2><p><strong>Email: </strong>patricio@teramaps.cl, contacto@teramaps.cl</p>
</div>
</div></div>
</div><div class="c cf" style="width:33.334%;">
	<div class="c-c cf"><div class="b b-text cf">
	<div class="b-c b-text-c b-s b-s-t60 b-s-b60 b-cs cf"><h2><strong><font class="wnd-font-size-60">Empresa</font></strong></h2><p><strong style="font-size: 1.1875rem; color: rgb(204, 204, 204); letter-spacing: 0px;"><a href="https://www.teramaps.cl/productos/">Producto</a>s</strong></p><p><strong style="font-size: 1.1875rem; color: rgb(204, 204, 204); letter-spacing: 0px;"><a href="https://www.teramaps.cl/servicios/">Servicios</a></strong></p><p><strong style="font-size: 1.1875rem; letter-spacing: 0px;"><a href="/blog/">Blog</a></strong></p><div><span style="font-size: 19px;"><a href="https://www.teramaps.cl/soluciones/">Soluciones</a></span></div>
</div>
</div></div>
</div><div class="c cf" style="width:33.332%;">
	<div class="c-c cf"><div class="form b b-s b-form-default f-rh-normal f-rg-normal f-br-none default cf">
	<form action="" method="post">

<fieldset class="form-fieldset">
			<div><div class="form-input form-email cf wnd-form-field wnd-required">
	<label for="field-wnd_EmailField_697489236"><span class="it b link">
	<span class="it-c">Contacto</span>
</span></label>
	<input id="field-wnd_EmailField_697489236" name="wnd_EmailField_697489236" required value="@" type="email" maxlength="255">
</div><div class="form-input form-text cf wnd-form-field wnd-required">
	<label for="field-wnd_ShortTextField_83611774476503066449"><span class="it b link">
	<span class="it-c">Solicitud</span>
</span></label>
	<input id="field-wnd_ShortTextField_83611774476503066449" name="wnd_ShortTextField_83611774476503066449" required value="" type="text" maxlength="150">
</div></div>
		</fieldset>

<div class="form-submit b-btn cf b-btn-fs b-btn-1">
			<button class="b-btn-l" type="submit" name="send" value="wnd_FormBlock_293026389">
				<span class="form-submit-text b-btn-t">Enviar</span>
			</button>
		</div>

</form>

</div></div>
</div></div>
</div></div>
</div>
					</div>
				</div>
			</div>
			<div class="s-c s-f-l-w">
				<div class="s-f-l b-s b-s-t0 b-s-b0">
					<div class="s-f-l-c s-f-l-c-first">
						<div class="s-f-sf">
                            <span class="sf b">
<span class="sf-content sf-c link">Creado con <a href="https://www.webnode.es/?utm_source=text&utm_medium=footer&utm_content=wnd2&utm_campaign=signature" rel="noopener nofollow" target="_blank">Webnode</a></span>
</span>
                            <span class="sf-cbr link">
    <a href="#" rel="nofollow">Cookies</a>
</span>
                            
                            
                            
						</div>
					</div>
					<div class="s-f-l-c s-f-l-c-last">
						<div class="s-f-lang lang-select cf">
	
</div>
					</div>
                    <div class="s-f-l-c s-f-l-c-currency">
                        <div class="s-f-ccy ccy-select cf">
	
</div>
                    </div>
				</div>
			</div>
		</div>
	</div>
	<div class="s-f-bg-stripe"></div>
</section></div>
</div>
        </footer>
    </div>
    <div class="wnd-free-stripe">
    <a class="wnd-free-stripe-link" target="_blank" href="https://www.webnode.com/es/?utm_source=text&utm_medium=footer&utm_content=wnd2&utm_campaign=signature" rel="noopener nofollow">
        <span class="wnd-free-stripe-text">¡Crea tu página web gratis!</span>
        <span class="wnd-free-stripe-logo">
            <svg xmlns="https://www.w3.org/2000/svg" width="99" height="20" viewbox="0, 0, 99, 20">
                <path d="M18.545 5.867L14.23 18.882h-1.885L9.373 9.166 6.4 18.882H4.514L.2 5.902h1.994l3.3 10.044L8.5 5.903h1.813l3.01 10.043 3.3-10.043h1.92v-.036zM57.52 10.4v8.482h-1.886v-8.447c0-1.233-.363-2.9-3.48-2.9-1.342 0-2.538.253-3.41.507v10.84H46.86V6.918c.617-.326 2.792-1.27 5.51-1.27 3.3 0 5.15 1.742 5.15 4.75zm14.5 1.957c0 5.547-3.334 6.707-6.126 6.707-2.792 0-6.09-1.16-6.09-6.707S63.1 5.65 65.893 5.65s6.127 1.16 6.127 6.707zm-1.848 0c0-3.48-1.27-5.004-4.242-5.004-2.936 0-4.205 1.523-4.205 5.004 0 3.48 1.27 5.003 4.205 5.003 2.937 0 4.242-1.523 4.242-5.003zM25.362 5.65c-5.91 0-5.693 5.51-5.693 6.888 0 5.402 3.226 6.526 5.945 6.526 1.85 0 3.37-.327 4.64-.907v-1.92c-1.087.65-2.537.978-4.46.978-2.682 0-4.277-1.088-4.277-4.677 0-3.843 1.305-5.112 3.843-5.112 3.59 0 3.808 3.77 3.808 4.387H23.62c0 .217-.036.47-.036.725 0 .326 0 .652.037.942h7.397s.036-.398.036-.906c.036-.507.218-6.925-5.692-6.925zm67.76 0c-5.91 0-5.692 5.51-5.692 6.888 0 5.402 3.226 6.526 5.945 6.526 1.85 0 3.372-.327 4.64-.907v-1.92c-1.087.65-2.537.978-4.458.978-2.683 0-4.278-1.088-4.278-4.677 0-3.843 1.304-5.112 3.842-5.112 3.59 0 3.806 3.77 3.806 4.387H91.38c0 .217-.035.47-.035.725 0 .326.036.652.036.942h7.397s.037-.398.037-.906c.036-.507.217-6.925-5.692-6.925zm-54.71 0c-.434 0-.906.036-1.34.108v1.777c.434-.073.87-.11 1.34-.11 2.865 0 4.098 1.415 4.098 4.823 0 4.64-2.212 5.148-3.843 5.148-2.285 0-3.445-.76-3.445-2.284V.936h-1.885v14.067c0 .98.363 4.097 5.293 4.097 2.14 0 5.73-.87 5.73-6.888 0-5.44-3.228-6.563-5.947-6.563zM83.297.9v14.176c0 1.522-1.16 2.284-3.444 2.284-1.63 0-3.843-.508-3.843-5.148 0-3.372 1.232-4.822 4.096-4.822.435 0 .906.036 1.34.108V5.722c-.434-.073-.87-.11-1.34-.11-2.72 0-5.946 1.16-5.946 6.563 0 5.982 3.59 6.89 5.728 6.89 4.93 0 5.294-3.155 5.294-4.098V.9h-1.886z" fill="#FFF"></path>
            </svg>
        </span>
    </a>
</div>
</div>
<section class="cb cb-dark" id="cookiebar" style="display:none;" id="cookiebar" style="display:none;">
	<div class="cb-bar cb-scrollable">
		<div class="cb-bar-c">
			<div class="cb-bar-text">Utilizamos cookies para permitir un correcto funcionamiento y seguro en nuestra página web, y para ofrecer la mejor experiencia posible al usuario.</div>
			<div class="cb-bar-buttons">
				<button class="cb-button cb-close-basic" data-action="accept-necessary">
					<span class="cb-button-content">Aceptar solo lo necesario</span>
				</button>
				<button class="cb-button cb-close-basic" data-action="accept-all">
					<span class="cb-button-content">Aceptar todo</span>
				</button>
				
			</div>
		</div>
        <div class="cb-close cb-close-basic" data-action="accept-necessary"></div>
	</div>

<div class="cb-popup cb-light close">
		<div class="cb-popup-c">
			<div class="cb-popup-head">
				<h3 class="cb-popup-title">Configuración avanzada</h3>
				<p class="cb-popup-text">Puedes personalizar tus preferencias de cookies aquí. Habilita o deshabilita las siguientes categorías y guarda tu selección.</p>
			</div>
			<div class="cb-popup-options cb-scrollable">
				<div class="cb-option">
					<input class="cb-option-input" type="checkbox" id="necessary" name="necessary" readonly="readonly" disabled="disabled" checked="checked">
                    <div class="cb-option-checkbox"></div>
                    <label class="cb-option-label" for="necessary">Cookies esenciales</label>
					<div class="cb-option-text">Las cookies esenciales son imprescindibles para que la página y el sistema de registro funcionen de forma correcta y segura.</div>
				</div><div class="cb-option">
					<input class="cb-option-input" type="checkbox" id="functional" name="functional">
                    <div class="cb-option-checkbox"></div>
                    <label class="cb-option-label" for="functional">Cookies funcionales</label>
					<div class="cb-option-text">Las cookies funcionales recuerdan tus preferencias para nuestra web y permiten su personalización.</div>
				</div><div class="cb-option">
					<input class="cb-option-input" type="checkbox" id="performance" name="performance">
                    <div class="cb-option-checkbox"></div>
                    <label class="cb-option-label" for="performance">Cookies de rendimiento</label>
					<div class="cb-option-text">Las cookies de rendimiento regulan el comportamiento de nuestra página web.</div>
				</div><div class="cb-option">
					<input class="cb-option-input" type="checkbox" id="marketing" name="marketing">
                    <div class="cb-option-checkbox"></div>
                    <label class="cb-option-label" for="marketing">Cookies de marketing/de terceros</label>
					<div class="cb-option-text">Las cookies de marketing nos permiten medir y analizar el rendimiento de nuestra página web.</div>
				</div>
			</div>
			<div class="cb-popup-footer">
				<button class="cb-button cb-save-popup" data-action="advanced-save">
					<span class="cb-button-content">Guardar</span>
				</button>
			</div>
			<div class="cb-close cb-close-popup" data-action="close"></div>
		</div>
	</div>
</section>
import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { CheckCircle2, MapPinned, LineChart, Smartphone, ShieldCheck, Network, Workflow, Mail, Phone, Map, Globe2, Building2, ChevronRight } from "lucide-react";

// Palette: Celeste (sky-500 / sky-600), Blanco, Negro
// Typography and layout aim for a clean, corporate look with generous spacing and soft shadows.

const container = {
  hidden: { opacity: 0, y: 12 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6 } },
};

const Section = ({ id, title, subtitle, children }: any) => (
  <section id={id} className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
    {title && (
      <motion.div variants={container} initial="hidden" whileInView="show" viewport={{ once: true, amount: 0.2 }} className="mb-10 text-center">
        <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-black">{title}</h2>
        {subtitle && (
          <p className="mt-3 text-lg text-neutral-600 max-w-3xl mx-auto">{subtitle}</p>
        )}
      </motion.div>
    )}
    {children}
  </section>
);

export default function TeramapsCorporate() {
  return (
    <div className="min-h-screen bg-white text-neutral-900">
      {/* Top Bar */}
      <div className="w-full bg-black text-white text-sm">
        <div className="max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 lg:px-8 py-2">
          <span className="opacity-90">Partner GIS Cloud • QGIS • Datos Geoespaciales</span>
          <div className="flex items-center gap-6 opacity-90">
            <a href="mailto:contacto@teramaps.cl" className="flex items-center gap-2 hover:opacity-100 transition"><Mail size={16}/> contacto@teramaps.cl</a>
            <a href="tel:+56212345678" className="flex items-center gap-2 hover:opacity-100 transition"><Phone size={16}/> +56 2 1234 5678</a>
          </div>
        </div>
      </div>

{/* Header / Nav */}
      <header className="sticky top-0 z-40 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/70 border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <a href="#inicio" className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-2xl bg-sky-600" />
              <span className="font-bold tracking-tight text-xl">Teramaps</span>
            </a>
            <nav className="hidden md:flex items-center gap-8 text-sm">
              <a className="hover:text-sky-700" href="#soluciones">Soluciones</a>
              <a className="hover:text-sky-700" href="#productos">Productos</a>
              <a className="hover:text-sky-700" href="#casos">Casos de éxito</a>
              <a className="hover:text-sky-700" href="#clientes">Clientes</a>
              <a className="hover:text-sky-700" href="#recursos">Recursos</a>
              <a className="hover:text-sky-700" href="#contacto">Contacto</a>
            </nav>
            <div className="flex items-center gap-3">
              <Button className="bg-sky-600 hover:bg-sky-700 rounded-2xl px-5">Solicitar demo</Button>
            </div>
          </div>
        </div>
      </header>

{/* Hero */}
      <section id="inicio" className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-sky-50 via-white to-white" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
              <Badge className="bg-black text-white rounded-full">Plataforma y Servicios GIS</Badge>
              <h1 className="mt-4 text-4xl md:text-5xl font-extrabold tracking-tight text-black">
                Datos, mapas y decisiones<br className="hidden md:block"/> en tiempo real
              </h1>
              <p className="mt-4 text-lg text-neutral-700 max-w-xl">
                Implementamos soluciones geoespaciales para gobiernos y empresas: geosegmentación, catastro, visores, aplicaciones móviles y analítica territorial. Todo, con una experiencia moderna y segura.
              </p>
              <div className="mt-8 flex flex-wrap gap-4">
                <Button className="bg-sky-600 hover:bg-sky-700 rounded-2xl px-6">Probar demo</Button>
                <Button variant="outline" className="rounded-2xl border-black">Hablar con un especialista</Button>
              </div>
              <div className="mt-6 flex items-center gap-4 text-sm text-neutral-600">
                <div className="flex items-center gap-2"><ShieldCheck size={18}/> Seguridad y respaldo</div>
                <div className="flex items-center gap-2"><Network size={18}/> Escalable en la nube</div>
                <div className="flex items-center gap-2"><Workflow size={18}/> Integración con sistemas</div>
              </div>
            </motion.div>
            <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.9 }}>
              <div className="relative p-2 rounded-2xl bg-white shadow-xl ring-1 ring-black/5">
                <div className="aspect-[16/10] w-full rounded-xl bg-gradient-to-br from-sky-100 to-white flex items-center justify-center">
                  <MapPinned className="w-24 h-24"/>
                </div>
                <div className="grid grid-cols-3 gap-3 mt-3">
                  {[
                    { icon: <Smartphone className="w-5 h-5"/>, text: "Mobile Data Collection" },
                    { icon: <LineChart className="w-5 h-5"/>, text: "Heatmaps & KPI" },
                    { icon: <Map className="w-5 h-5"/>, text: "Geoportales" },
                  ].map((i, idx) => (
                    <div key={idx} className="flex items-center gap-2 text-xs bg-sky-50 rounded-xl px-3 py-2">
                      {i.icon}
                      <span className="truncate">{i.text}</span>
                    </div>
                  ))}
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

{/* Logos */}
      <div className="py-8 border-y bg-neutral-50/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-xs uppercase tracking-widest text-neutral-500 mb-4">Instituciones y empresas que confían en nosotros</p>
          <div className="grid grid-cols-2 md:grid-cols-6 gap-6 items-center opacity-80">
            {["Carabineros de Chile","Ejército de Chile","Municipio de Torres del Paine","Municipio de Casablanca","Universidades","Retail & Logística"].map((name, i)=> (
              <div key={i} className="h-10 rounded-lg bg-neutral-200 flex items-center justify-center text-[10px] text-neutral-600 px-2 text-center">{name}</div>
            ))}
          </div>
        </div>
      </div>

{/* Soluciones */}
      <Section id="soluciones" title="Soluciones" subtitle="Paquetes listos para implementar que resuelven problemas reales del territorio.">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            { icon: <Globe2/>, title: "Geosegmentación", desc: "Segmenta clientes y territorios con variables socioeconómicas, movilidad y consumo.", bullets: ["Capas oficiales y privadas","Modelos de scoring","Exportación a CRM"], cta: "Ver solución" },
            { icon: <Building2/>, title: "SIG Municipal", desc: "Inventarios, catastro, permisos y participación ciudadana en un único geoportal.", bullets: ["Catastro y catastros temáticos","Visor público/privado","Integración con ERP"], cta: "Explorar" },
            { icon: <Smartphone/>, title: "Vecino Reporta", desc: "App móvil para incidentes, baches, luminarias y mantención urbana con SLA.", bullets: ["Tickets georreferenciados","Panel de gestión","KPIs en tiempo real"], cta: "Solicitar demo" },
            { icon: <Map/>, title: "Geoportal Corporativo", desc: "Visores 2D/3D, mapas temáticos y analítica para tus equipos y clientes.", bullets: ["Perfiles y permisos","Historias de mapa","Embebidos y API"], cta: "Ver ejemplos" },
            { icon: <Network/>, title: "Geocodificación & Routing", desc: "Direcciones limpias, normalizadas y rutas óptimas para logística.", bullets: ["Batch & API","Calidad y cobertura","Matrices OD"], cta: "Conectar" },
            { icon: <LineChart/>, title: "Analítica Territorial", desc: "Dashboard de KPI, heatmaps y reportes ejecutivos.", bullets: ["Indicadores clave","Alertas","Descarga de datos"], cta: "Ver demo" },
          ].map((s, idx) => (
            <Card key={idx} className="rounded-2xl shadow-md border-neutral-200 hover:shadow-lg transition">
              <CardHeader>
                <CardTitle className="flex items-center gap-3 text-xl">
                  <span className="p-2 rounded-xl bg-sky-50 text-sky-700">{s.icon}</span>
                  {s.title}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-neutral-600 mb-4">{s.desc}</p>
                <ul className="space-y-2 mb-4 text-sm text-neutral-700">
                  {s.bullets.map((b,i)=> (
                    <li key={i} className="flex items-center gap-2"><CheckCircle2 size={16} className="shrink-0"/> {b}</li>
                  ))}
                </ul>
                <Button variant="outline" className="rounded-xl">
                  {s.cta} <ChevronRight className="ml-1 w-4 h-4"/>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

{/* Productos (Suite) */}
      <Section id="productos" title="Productos" subtitle="Suite de herramientas para el ciclo completo de datos geoespaciales.">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[
            { title: "Map Editor", desc: "Edición colaborativa en la nube con control de versiones.", tag: "Cloud" },
            { title: "Mobile Data Collection", desc: "Levantamiento en terreno sin conexión.", tag: "Field" },
            { title: "Map Viewer", desc: "Visualización rápida y segura para equipos y clientes.", tag: "Viewer" },
            { title: "Map Portal", desc: "Geoportal público/privado con branding corporativo.", tag: "Portal" },
          ].map((p, idx) => (
            <Card key={idx} className="rounded-2xl border-neutral-200 hover:shadow-lg transition">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-xl">{p.title}</CardTitle>
                  <Badge className="rounded-full bg-black text-white">{p.tag}</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-neutral-600 mb-4">{p.desc}</p>
                <div className="aspect-[16/10] rounded-xl bg-neutral-100"/>
                <div className="mt-4 flex gap-3">
                  <Button className="bg-sky-600 hover:bg-sky-700 rounded-xl">Ver demo</Button>
                  <Button variant="outline" className="rounded-xl">Ficha técnica</Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

{/* Casos de éxito */}
      <Section id="casos" title="Casos de éxito" subtitle="Resultados medibles con instituciones públicas y privadas.">
        <div className="grid md:grid-cols-3 gap-6">
          {[
            { name: "Seguridad Pública", impact: "+40% tiempo de respuesta", detail: "Visor delictual y analítica por cuadrantes.", tag: "Gobierno" },
            { name: "Gestión Municipal", impact: "-30% tiempos de trámite", detail: "Catastro y permisos en línea.", tag: "Municipal" },
            { name: "Retail & Logística", impact: "-18% costo por entrega", detail: "Ruteo óptimo y geocodificación masiva.", tag: "Empresa" },
          ].map((c, i) => (
            <Card key={i} className="rounded-2xl border-neutral-200 hover:shadow-lg transition">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle>{c.name}</CardTitle>
                  <Badge className="rounded-full bg-sky-600">{c.tag}</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="aspect-[16/10] rounded-xl bg-gradient-to-br from-sky-50 to-white mb-4"/>
                <p className="font-semibold text-black">Impacto: {c.impact}</p>
                <p className="text-neutral-600">{c.detail}</p>
                <Button variant="outline" className="mt-4 rounded-xl">Ver historia <ChevronRight className="ml-1 w-4 h-4"/></Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

{/* CTA Banner */}
      <div className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-black text-white rounded-2xl p-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <div>
              <h3 className="text-2xl font-bold">Solicita una demo guiada</h3>
              <p className="text-neutral-300 mt-2 max-w-2xl">Te mostramos cómo Teramaps integra datos, mapas y procesos para tu organización en menos de 30 minutos.</p>
            </div>
            <Button className="bg-sky-600 hover:bg-sky-700 rounded-2xl px-6">Agendar ahora</Button>
          </div>
        </div>
      </div>

{/* Clientes */}
      <Section id="clientes" title="Clientes" subtitle="Experiencia en Chile y Latinoamérica, con alto estándar de servicio.">
        <div className="grid md:grid-cols-4 gap-6">
          {[1,2,3,4,5,6,7,8].map((i)=> (
            <Card key={i} className="rounded-2xl border-neutral-200">
              <CardContent className="p-6">
                <div className="h-16 bg-neutral-100 rounded-xl mb-3"/>
                <p className="text-sm text-neutral-600">Logo cliente #{i}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

{/* Recursos */}
      <Section id="recursos" title="Recursos" subtitle="Guías, tutoriales y noticias para sacar el máximo de tu inversión GIS.">
        <div className="grid md:grid-cols-3 gap-6">
          {["Mapa Socioeconómico de Santiago","Cómo diseñar un Geoportal","Checklist de levantamiento en terreno"].map((t, i) => (
            <Card key={i} className="rounded-2xl border-neutral-200 hover:shadow-lg transition">
              <CardHeader>
                <CardTitle>{t}</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="aspect-[16/10] bg-neutral-100 rounded-xl mb-3"/>
                <p className="text-neutral-600 text-sm">Artículo introductorio con mejores prácticas y ejemplos aplicados.</p>
                <Button variant="outline" className="mt-4 rounded-xl">Leer <ChevronRight className="ml-1 w-4 h-4"/></Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

{/* Contacto */}
      <Section id="contacto" title="Contacto" subtitle="Cuéntanos tu necesidad y te respondemos a la brevedad.">
        <div className="grid md:grid-cols-2 gap-10">
          <Card className="rounded-2xl border-neutral-200">
            <CardHeader>
              <CardTitle>Escríbenos</CardTitle>
            </CardHeader>
            <CardContent>
              <form className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Input placeholder="Nombre" />
                  <Input placeholder="Email" type="email" />
                </div>
                <Input placeholder="Teléfono" />
                <Textarea placeholder="Cuéntanos sobre tu proyecto" rows={5} />
                <div className="flex items-center gap-3">
                  <Button className="bg-sky-600 hover:bg-sky-700 rounded-xl">Enviar</Button>
                  <p className="text-xs text-neutral-500">Al enviar aceptas nuestra política de privacidad.</p>
                </div>
              </form>
            </CardContent>
          </Card>

{title}

Datos, mapas y decisiones en tiempo real

Solicita una demo guiada

Datos, mapas y decisiones
en tiempo real