289 lines
12 KiB
PHP
289 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<title>Contacto - TRIMAPE</title>
|
|
|
|
<?php
|
|
|
|
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
|
|
$host = $_SERVER['HTTP_HOST'];
|
|
$basePath = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\') . "/";
|
|
$baseURL = $protocol . $host . $basePath;
|
|
$Titulo = "Contacto";
|
|
$sitioURL = $baseURL . "contacto";
|
|
$fileURL = $baseURL . "assets/img/trimape-1200.webp";
|
|
$descrip = "Contáctanos para servicios de mantenimiento industrial, comercial y residencial . ¡Expertos a tu disposición!";
|
|
?>
|
|
<meta property="og:title" content="<?php echo $Titulo; ?>" />
|
|
<meta property="og:url" content="<?php echo $sitioURL; ?>" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:image" content="<?php echo $fileURL; ?>" />
|
|
<meta property="og:site_name" content="trimape.mx" />
|
|
<meta property="og:description" content="<?php echo $descrip; ?>" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@trimape">
|
|
<meta name="twitter:title" content="<?php echo $Titulo ?>">
|
|
<meta name="twitter:description" content="<?php echo $descrip ?>">
|
|
<meta name="twitter:creator" content="@trimape">
|
|
<meta name="twitter:image" content="<?php echo $fileURL; ?>">
|
|
<meta name="twitter:domain" content="trimape.mx">
|
|
<meta name="twitter:url" content="<?php echo $sitioURL; ?>">
|
|
<link rel="canonical" href=<?php echo $sitioURL; ?> />
|
|
<?php include 'css-columna.htm'; ?>
|
|
|
|
<link rel="icon" href="https://trimape.mx/assets/img/trimape-logo-512-150x150.png" sizes="32x32" />
|
|
<link rel="icon" href="https://trimape.mx/assets/img/trimape-logo-512-300x300.png" sizes="192x192" />
|
|
<link rel="apple-touch-icon" href="https://trimape.mx/assets/img/trimape-logo-512-300x300.png" />
|
|
<meta name="msapplication-TileImage" content="https://trimape.mx/assets/img/trimape-logo-512-300x300.png" />
|
|
<style>
|
|
.col-derecha-imagen-back {
|
|
background-image: url(<?php echo $fileURL; ?>);
|
|
}
|
|
|
|
.brillodiv {
|
|
background: #000;
|
|
background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%);
|
|
background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%);
|
|
background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 25%, rgba(0, 181, 250, .4) 50%, rgba(2, 0, 96, .5) 100%);
|
|
background-size: 400% 400%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100vw;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
position: relative;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.animate {
|
|
animation: gradientAnimation 5s ease forwards;
|
|
}
|
|
|
|
@keyframes gradientAnimation {
|
|
0% {
|
|
background-position: 0 0;
|
|
text-shadow: none;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 100%;
|
|
text-shadow: 0 0 20px #000;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0 0;
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
|
|
#imagenFirts{
|
|
background-color: #222e57;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?php include 'menu-general.htm'; ?>
|
|
<div class="container-fluid" id="divFirst">
|
|
<div class="row ">
|
|
<div class="col-12 mx-0 px-0">
|
|
<div class="video-hero">
|
|
<video autoplay muted loop>
|
|
<source src="./assets/videos/contacto.webm" type="video/mp4">
|
|
Tu navegador no soporta video.
|
|
</video>
|
|
<div class="hero-overlay-box">
|
|
<div class="hero-img-top-left">
|
|
<img src="./assets/img/cuadrado-azul-top.svg" height="70">
|
|
</div>
|
|
<div class="hero-img-bottom-right">
|
|
<img src="./assets/img/cuadrado-orange-down.svg" height="70">
|
|
</div>
|
|
<h1 class="fw-bold text-titulo">CONTACTO</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-12 pt-3">
|
|
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" aria-label="breadcrumb">
|
|
<ol class="breadcrumb texto-bread fw-bold">
|
|
<li class="breadcrumb-item texto-bread"><a href="./" class="link-dark">Portada</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Contacto</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-md-2"></div>
|
|
<div class="col-12 col-md-8">
|
|
|
|
|
|
<div class="row ">
|
|
|
|
<div class="col-12 py-3">
|
|
<h3 class=" p-2 fw-bold text-uppercase cuadrado-azul-seccion bg-color-blue-sky-medium text-blue-dark">Contacto</h3>
|
|
</div>
|
|
<div class="col-12 px-2 justificado">
|
|
<p>¡Contáctenos para obtener soluciones de <strong>mantenimiento industrial</strong> confiables
|
|
y eficientes! Estamos comprometidos a brindarle el mejor servicio, sin importar su ubicación
|
|
en México. <strong>Cotice sin compromiso</strong> y deje que nuestros expertos cuiden de su
|
|
negocio. ¡Su satisfacción es nuestra prioridad!</p>
|
|
</div>
|
|
<div class="col-12 ">
|
|
<div class="row">
|
|
<h4 class="mt-2 text-center">Llena el formulario para contactarnos</h2>
|
|
<form id="formulario-contacto" action="/contacto-action" method="post">
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<label for="nombre" class="form-label">Nombre:</label>
|
|
<input type="text" id="nombre" name="nombre" class="form-control" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Email:</label>
|
|
<input type="email" id="email" name="email" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<label for="ciudad" class="form-label">Ciudad del Proyecto:</label>
|
|
<input type="text" id="ciudad" name="ciudad" class="form-control" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="telefono" class="form-label">Teléfono:</label>
|
|
<input type="tel" id="telefono" name="telefono" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<label for="descripcion" class="form-label">Describe tus
|
|
necesidades:</label>
|
|
<textarea id="descripcion" name="descripcion" class="form-control" rows="4" required></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-12 text-end">
|
|
<input type="submit" value="Enviar" class="btn btn-primary">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="mensaje-envio"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col py-5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#25D366" class="bi bi-whatsapp" viewBox="0 0 16 16">
|
|
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
|
|
</svg>
|
|
También vía Whatsapp al <a href="https://wa.me/522299152330?text=Hola!%20Los%20estoy%20cont%C3%A1ctando%20desde%20su%20sitio%20web" class="link-offset-2 link-underline link-underline-opacity-25 link-dark fw-bold">
|
|
+52 229 915 2330</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="col-12 col-md-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid bg-body-secondary">
|
|
<div class="container py-2">
|
|
<div class="row py-4">
|
|
<div class="col-12 col-md-2 "></div>
|
|
<div class="col-12 col-md-5">
|
|
<h3 class="fw-bold pt-4">UBICACIÓN</h3>
|
|
<p class="pt-3"><b>Dirección</b>: Calle Bugambilia #45 entre av Jardines de Virginia y Calle del Parque, Fraccionamiento Jardines de Virginia</p>
|
|
<p><b>Ciudad</b>: Boca del Río, Veracruz</p>
|
|
<p><b>Teléfono</b>: +52 2299 215242</p>
|
|
<p><b>Código postal</b>: 94294</p>
|
|
</div>
|
|
<div class="col-12 col-md-5">
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.9192615011407!2d-96.11631622533294!3d19.15501114948846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85c3411f1d16648d%3A0x33327bbf461394e9!2sBugambilia%2045%2C%20Jardines%20del%20Virginia%2C%2094294%20Veracruz%2C%20Ver.!5e0!3m2!1ses-419!2smx!4v1746036110106!5m2!1ses-419!2smx" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
</div>
|
|
<div class="col-12 col-md-2 "></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<a href="https://wa.me/+522299152330"><div class=" whatsapp rounded-pill py-2 px-4 "><img src="./assets/img/logo-whatsapp.svg"> <b> Whatsapp</b></div></a>
|
|
|
|
<?php include 'footer.php'; ?>
|
|
<?php include 'footer-scripts.htm'; ?>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('formulario-contacto').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Mostrar mensaje de carga
|
|
document.getElementById('mensaje-envio').innerHTML = "<div class='alert alert-info'>Enviando mensaje...</div>";
|
|
|
|
// Obtener los datos del formulario
|
|
var formData = new FormData(this);
|
|
|
|
fetch(this.getAttribute('action'), {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(function(response) {
|
|
return response.text(); // Primero obtenemos el texto para debugging
|
|
})
|
|
.then(function(rawData) {
|
|
console.log("Respuesta cruda del servidor:", rawData);
|
|
|
|
try {
|
|
// Intentamos parsear como JSON
|
|
var data = JSON.parse(rawData);
|
|
|
|
// Mostrar mensaje de éxito o error según la respuesta
|
|
if (data.success) {
|
|
document.getElementById('mensaje-envio').innerHTML = "<div class='alert alert-success'>" + data.message + "</div>";
|
|
document.getElementById('formulario-contacto').reset();
|
|
} else {
|
|
document.getElementById('mensaje-envio').innerHTML = "<div class='alert alert-danger'>" + data.message + "</div>";
|
|
}
|
|
} catch (e) {
|
|
// Si no es JSON válido, mostramos la respuesta cruda
|
|
console.error("Error al parsear JSON:", e);
|
|
document.getElementById('mensaje-envio').innerHTML = "<div class='alert alert-warning'>Respuesta del servidor no válida: " + rawData + "</div>";
|
|
}
|
|
})
|
|
.catch(function(error) {
|
|
console.error("Error en fetch:", error);
|
|
document.getElementById('mensaje-envio').innerHTML = "<div class='alert alert-danger'>Error de conexión: " + error.message + "</div>";
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|