Add contactos page

assets/scripts/site.js

@@ -1,5 +1,6 @@
-// Modal vídeos
 document.addEventListener('DOMContentLoaded', function() {
+
+    // modal videos
     const videoModal = document.getElementById('videoModal');
     const modalIframe = document.getElementById('modalVideoIframe');
     const modalTitle = document.getElementById('videoModalLabel');

page.php

@@ -14,9 +14,17 @@ $context = Timber::context();
 Timber::render( 'templates/page.twig', $context );*/
 
 $context = Timber::context();
-
 $timber_post     = Timber::get_post();
 $context['post'] = $timber_post;
+
 //Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
 
-Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig' ), $context );
+// Verificar si es subpágina de contactos
+$parent = get_post($timber_post->post_parent);
+if ($parent && $parent->post_name === 'contactos') {
+    // Para subpáginas de contactos, usar page-contactos.twig
+    Timber::render('templates/page-contactos.twig', $context);
+} else {
+    // Para el resto, usar la lógica original
+    Timber::render(array('templates/page-' . $timber_post->post_name . '.twig'), $context);
+}

src/StarterSite.php

@@ -21,18 +21,18 @@ class StarterSite extends Site {
 		add_action( 'after_setup_theme', [ $this, 'theme_supports' ] );
 		add_action( 'init', [ $this, 'register_post_types' ] );
 		add_action( 'init', [ $this, 'register_taxonomies' ] );
-
+		
 		add_action('wp_enqueue_scripts', [$this,'load_assets']);
 		
 		add_filter( 'timber/context', [ $this, 'add_to_context' ] );
 		add_filter( 'timber/twig/filters', [ $this, 'add_filters_to_twig' ] );
 		add_filter( 'timber/twig/functions', [ $this, 'add_functions_to_twig' ] );
 		add_filter( 'timber/twig/environment/options', [ $this, 'update_twig_environment_options' ] );
-
+		
         add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
         add_filter('timber/context', [$this, 'add_global_context']); // variables globales
 		add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed
-
+		
 		parent::__construct();
 	}
 
@@ -518,10 +518,40 @@ class StarterSite extends Site {
 		return $subpaginas;
 	}
 
-	private function formContact() {
-		$form_test = do_shortcode('[contact-form-7 id="5ed613c" title="Formulario de contacto 1"]');
+	public function getContactoFields() {
+		$post = Timber::get_post();
+		$form_shortcode = get_field('etiqueta_formulario', $post->ID); // o el campo ACF donde esté el shortcode
 
-		return $form_test;
+		$contactsFields = [
+			'nombre' => get_field('nombre_contacto', $post->ID),
+			'direccion' => get_field('direccion', $post->ID),
+			'url_mapa' => get_field('url_mapa', $post->ID),
+			'forma_contacto' => get_field('forma_contacto', $post->ID),
+			'url_web' => get_field('url_web', $post->ID),
+			'url_facebook' => get_field('url_facebook', $post->ID),
+			'url_twitter' => get_field('url_twitter', $post->ID),
+			'form' => !empty($form_shortcode) ? do_shortcode($form_shortcode) : '',
+		];
+
+		return $contactsFields;
+		
+	}
+
+	public function getAfiliateFields() {
+		$post = Timber::get_post();
+		
+
+		$afiliateFields = [
+			'imagen_afiliate' => get_field('imagen_afiliate', $post->ID),
+			'enlace_boton_afiliate' => get_field('enlace_boton_afiliate', $post->ID),
+			'texto_boton' => get_field('texto_boton', $post->ID),
+		];
+
+		if (empty($afiliateFields['imagen_afiliate']) && empty($afiliateFields['enlace_boton_afiliate'])) {
+        	return null;
+    	}
+
+		return $afiliateFields;
 	}
 
 	//Global variables
@@ -541,7 +571,8 @@ class StarterSite extends Site {
 		$context['enlaces'] = $this->getEnlaces();
 		$context['subpaginas_servicios_publicos'] = $this->getPaginasServiciosPublicos();
 		$context['subpaginas_servicios_privados'] = $this->getPaginasServiciosPrivados();
-		$context['form_test'] = $this->formContact();;
+		$context['contacto_info'] = $this->getContactoFields();
+		$context['afiliate_fields'] = $this->getAfiliateFields();
 
         return $context;
     }

style.css

@@ -6,7 +6,9 @@
 
 :root {
   --rojo-cnt: #dc2d30;
-  --color-secundario: #6C757D;
+  --rojo-cnt-dark: #9d1b1d;
+  --rojo-cnt-light: #d6453f;
+  --reset: #7b7b7b;
 }
 
 @font-face {
@@ -17,6 +19,80 @@
     font-display: swap;
 }
 
+/* Botón primario */
+.btn-primary-cnt {
+    border-radius: 75px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón primario - hover */
+.btn-primary-cnt:hover {
+    background-color: var(--rojo-cnt-dark);
+    border-color: var(--rojo-cnt-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Botón primario - active */
+.btn-primary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+button[type="reset"] {
+    background-color: var(--reset);
+}
+
+/* Botón secundario */
+.btn-secondary-cnt {
+    border-radius: 10px !important;
+    background-color: var(--rojo-cnt-light);
+    border: 2px solid var(--rojo-cnt-light);
+    color: white;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón secundario - hover */
+.btn-secondary-cnt:hover {
+    background-color: var(--rojo-cnt-light);
+    border-color: var(--rojo-cnt-light);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Botón secundario - active */
+.btn-secondary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Quitar el focus/active de todos los elementos del menú */
+.nav-link:focus,
+.nav-link:active,
+.btn:focus,
+.btn:active,
+.dropdown-item:focus,
+.dropdown-item:active {
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: var(--rojo-cnt) !important;
+    color: white !important;
+    opacity: 0.5;
+}
+
 /* HEADER sindikatua */
 .text-sindikatua {
     font-family: 'Yaro', Arial, sans-serif;
@@ -50,8 +126,7 @@
     opacity: 1;
 }
 
-
-/* PORTADA -> CARDS RECENt POSTS NOTICIAS */
+/* PORTADA -> CARDS recent posts 'noticias' */
 .recent-posts .card-img-overlay {
     top: auto !important;  /* Anula el top: 0 por defecto de Bootstrap */
     bottom: 0;
@@ -126,8 +201,7 @@
 }
 
 /* PORTADA -> Titles */
-.page-portada .sp-module-title::after,
-.contacto-barakaldo .sp-module-title::after {
+.sp-module-title::after{
   background: var(--rojo-cnt);
   content: "";
   height: 1px;
@@ -137,8 +211,7 @@
   width: 150px;
 }
 
-.page-portada .sp-module-title::before,
-.contacto-barakaldo .sp-module-title::before {
+.sp-module-title::before{
   background: var(--rojo-cnt);
   content: "";
   height: 1px;
@@ -208,4 +281,141 @@
 .enlaces button:active {
   outline: none;
   box-shadow: none;
-}
+}
+
+/* FORM */
+/* Contenedor principal del formulario */
+.formulario-contacto {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Formulario centrado */
+.formulario-contacto .wpcf7-form {
+    width: 100%;
+    max-width: 500px; /* Ajusta según necesites */
+    margin: 0 auto;
+}
+
+/* Estilos para todos los inputs y textareas */
+.formulario-contacto input[type="text"],
+.formulario-contacto input[type="email"],
+.formulario-contacto input[type="tel"],
+.formulario-contacto input[type="url"],
+.formulario-contacto input[type="number"],
+.formulario-contacto textarea,
+.formulario-contacto select {
+    border-radius: 25px !important; /* Bordes redondos */
+    border: 2px solid #e9ecef !important;
+    padding: 12px 20px !important;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: none !important;
+    margin-bottom: 15px;
+}
+
+/* Efecto hover y focus en inputs */
+.formulario-contacto input[type="text"]:focus,
+.formulario-contacto input[type="email"]:focus,
+.formulario-contacto input[type="tel"]:focus,
+.formulario-contacto input[type="url"]:focus,
+.formulario-contacto input[type="number"]:focus,
+.formulario-contacto textarea:focus,
+.formulario-contacto select:focus {
+    border-color: var(--rojo-cnt) !important;
+    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
+    outline: none;
+}
+
+.formulario-contacto input {
+    width: 100% !important;
+}
+
+/* Estilo específico para textarea */
+.formulario-contacto textarea {
+    resize: vertical;
+    min-height: 120px;
+    width: 100% !important;
+}
+
+/* Botón submit - ancho completo y redondeado */
+.formulario-contacto input[type="submit"] {
+    width: 100% !important;
+    border-radius: 25px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: white;
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Efectos hover del botón */
+.formulario-contacto input[type="submit"]:hover {
+    background-color: var(--rojo-cnt-dark);
+    border-color: var(--rojo-cnt-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Efectos active del botón */
+.formulario-contacto input[type="submit"]:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Estilos para labels */
+.formulario-contacto label {
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #495057;
+    display: block;
+}
+
+/* Mensajes de error de CF7 */
+.formulario-contacto .wpcf7-not-valid-tip {
+    color: var(--rojo-cnt-dark);
+    font-size: 14px;
+    margin-top: 5px;
+}
+
+/* Mensaje de validación */
+.formulario-contacto .wpcf7-validation-errors {
+    border: 1px solid var(--rojo-cnt-dark);
+    background: #f8d7da;
+    color: #721c24;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Mensaje de éxito */
+.formulario-contacto .wpcf7-mail-sent-ok {
+    border: 1px solid #28a745;
+    background: #d4edda;
+    color: #155724;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Responsive - pantallas pequeñas */
+@media (max-width: 768px) {
+    .formulario-contacto {
+        padding: 15px;
+    }
+    
+    .formulario-contacto .wpcf7-form {
+        max-width: 100%;
+    }
+    
+    .formulario-contacto input[type="submit"] {
+        font-size: 16px;
+        padding: 12px 25px;
+    }
+}

views/layouts/base.twig

@@ -19,7 +19,7 @@
                     </div>
 
                     <!-- nav -->
-                    <div class="d-flex align-items-center justify-content-around bg-body-tertiary">
+                    <div class="align-items-center justify-content-around bg-body-tertiary d-none d-lg-flex">
                         <div>
                             <nav class="navbar navbar-expand-lg">
                                 <div class="container-fluid">
@@ -33,7 +33,7 @@
                             {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
                         </div> #}
                         <div>
-                            {% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items, 'burger_id': 'menu-burger-desktop'} %}
                         </div>
                     </div>
                     <!-- end nav -->

views/partials/comment-form.twig

@@ -1,32 +1,57 @@
-<div class="comment-form">
-    <h3>Add comment</h3>
-    <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
-        {% if user %}
-            <input type="hidden" name="email" value="{{ user.email }}" />
-            <input type="hidden" name="author" value="{{ user.name }}" />
-            <input type="hidden" name="url" value="{{ user.link }}" />
-        {% else %}
-            <label>
-                Email<br />
-                <input required name="email" type="email" id="email" />
-            </label>
-            <label>
-                Name<br />
-                <input required name="author" type="text" />
-            </label>
-            <label>
-                Website<br />
-                <input name="url" type="url" />
-            </label>
-        {% endif %}
-        <label>
-            Comment<br />
-            <textarea placeholder="Leave a comment..." name="comment" cols="60" rows="3"></textarea>
-        </label>
-        <input name="comment_post_ID" value="{{ post.id }}" type="hidden" />
-        <input name="comment_parent" value="{{ comment.id|default('0') }}" type="hidden" />
-        <button type="submit" name="Submit" class="btn">Send</button>
-        <button type="reset">Cancel</button>
-        <p>Your comment will be revised by the site if needed.</p>
-    </form>
+<div class="comment-form my-5">
+    <p class="position-relative fs-4 fw-bold sp-module-title">Añadir Comentario</p>
+    
+    <div class="container mt-4">
+    <div class="row justify-content-center">
+        <div class="col-lg-6 col-md-8 col-12">
+            <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
+                {% if user %}
+
+                    <div class="mb-3 row">
+                        <label for="nombre" class="form-label">Nombre</label>
+                        <input class="form-control form-control-sm" type="text" name="author" value="{{ user.name }}" />
+                    </div>
+
+                    <div class="mb-3 row">
+                        <label for="nombre" class="form-label">Email</label>
+                        <input class="form-control form-control-sm" type="email" name="email" value="{{ user.email }}" />
+                    </div>
+
+                    <input type="hidden" name="url" value="{{ user.link }}" />
+
+                {% else %}
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Email</label>
+                        <input class="form-control form-control-sm" required name="email" type="email" id="email" />
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Nombre</label>
+                        <input class="form-control form-control-sm" required name="author" type="text" />
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Website</label>
+                        <input class="form-control form-control-sm" name="url" type="url" />
+                    </div>
+                {% endif %}
+                <div class="mb-3 row">
+                    <label for="comment" class="form-label">Comentario</label>
+                    <textarea class="form-control form-control-sm" placeholder="Deja un comentario..." name="comment" cols="60" rows="3">
+                    </textarea>
+                </div>
+
+                <input name="comment_post_ID" value="{{ post.id }}" type="hidden" />
+                <input name="comment_parent" value="{{ comment.id|default('0') }}" type="hidden" />
+
+                <button type="submit" name="Submit" class="btn btn-primary-cnt">Enviar</button>
+                <button type="reset" class="btn btn-primary-cnt">Cancelar</button>
+                
+                <div class="alert alert-warning mt-5" role="alert">
+                    <p>Tu comentario será revisado por el administrador antes de ser publicado.</p>
+                </div>
+            </form>
+        </div>
+    </div>
+    </div>
 </div>

views/partials/comment.twig

@@ -6,7 +6,7 @@
         {% include 'partials/comment-form.twig' %}
 
         {% if post.comments %}
-            <h4>replies</h4>
+            <h4>Replicar</h4>
             <div class="comments">
                 {% for cmt in comment.children %}
                     {% include 'partials/comment.twig' with {

views/partials/logos-header.twig

@@ -1,31 +1,39 @@
 {# Sección Logos #}
-<a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+
 {% if logos_header %}
     <div class="row g-3">
         {% for logo in logos_header %}
             {% if loop.first %}
                 {# Primera columna #}
                 <div class="col-lg-5 col-12 mb-3 mb-md-0">
-                    <div class="d-flex align-items-center justify-content-center">
-                        <img src="{{ logo.logo.sizes.medium }}"
-                            alt="{{ logo.logo.alt }}"
-                            class="img-fluid mb-2 mb-sm-0 mb-md-2 mb-lg-0 me-sm-3 me-md-0 me-lg-3"
-                            style="max-height: 100px; flex-shrink: 0;">
-                        <h1 class="mb-0 text-center text-sindikatua text-uppercase">{{ logo.texto }}</h1>
+                    <div class="d-flex align-items-center justify-content-between">
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+                            <div class="d-flex align-items-center">
+                                <img src="{{ logo.logo.sizes.medium }}"
+                                    alt="{{ logo.logo.alt }}"
+                                    class="img-fluid me-3"
+                                    style="max-height: 100px; flex-shrink: 0;">
+                                <h1 class="mb-0 text-sindikatua text-uppercase">{{ logo.texto }}</h1>
+                            </div>
+                        </a>
+                        <div class="d-block d-lg-none">  
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items, 'burger_id': 'menu-burger-mobile'} %}
+                        </div>
                     </div>
                 </div>
             {% else %}
                 {# Segunda columna #}
-                <div class="col-lg-7 col-12">
+                <div class="col-lg-7 col-12 d-none d-lg-block">
                     <div class="d-flex align-items-center justify-content-center justify-content-md-start h-100">
-                        <img src="{{ logo.logo.sizes.large }}"
-                            alt="{{ logo.logo.alt }}"
-                            class="img-fluid"
-                            style="max-width: 100%; height: auto;">
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+                            <img src="{{ logo.logo.sizes.large }}"
+                                alt="{{ logo.logo.alt }}"
+                                class="img-fluid"
+                                style="max-width: 100%; height: auto;">
+                        </a>
                     </div>
                 </div>
             {% endif %}
         {% endfor %}
     </div>
 {% endif %}
-</a>

views/partials/menu-burger.twig

@@ -1,11 +1,15 @@
 {% if menu %}
 <nav class="navbar justify-content-center menu-burger">
     {#<a class="navbar-brand" href="#"></a>#}
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" 
+			data-bs-toggle="offcanvas" 
+			data-bs-target="#{{ burger_id|default('menu-burger') }}" 
+			aria-controls="{{ burger_id|default('menu-burger') }}" 
+			aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="{{ burger_id|default('menu-burger') }}" aria-labelledby="offcanvasNavbarLabel">
       <div class="offcanvas-header">
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>

views/partials/menu.twig

@@ -32,7 +32,9 @@
 							{% if item.target %}target="{{ item.target }}"{% endif %}>
 						{{ item.title }}
 					</a>
-					{% include 'partials/menu.twig' with {items: item.children} %}
+					<div class="d-block d-lg-none">
+						{% include 'partials/menu.twig' with {items: item.children} %}
+					</div>
 				</li>
 			{% endif %}
 		{% endfor %}

views/partials/top-bar.twig

@@ -27,7 +27,6 @@
                         {% endif %}
                     </a>
                 {% endfor %}
-                </a>
             </div>
         </div>
 

views/templates/page-acerca-de-la-cnt.twig

@@ -1,52 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-    {% include 'partials/breadcrumb.twig' %}
-
-    <div class="container mt-4">
-        <div class="row">
-            <!-- Columna izquierda: títulos -->
-            <div class="col-md-4 border-end">
-                <ul id="post-list" class="list-group">
-                    {% for pagina in paginas_acerca %}
-
-                    <li class="list-group-item {% if pagina.id == post.id %}active{% endif %}" data-post-id="{{ pagina.id }}">
-                        <a href="#"
-                            data-post-id="{{ pagina.id }}"
-                            class="text-decoration-none d-block w-100 {% if pagina.id == post.id %}text-white{% endif %}">
-                            {{ pagina.title }}
-                        </a>
-                    </li>
-
-                    {% endfor %}
-                </ul>
-            </div>
-
-            <!-- Columna derecha: contenido dinámico del post (se llena con el primer post) -->
-            <div class="col-md-8" id="post-content">
-            <!-- Aquí se inyectará dinámicamente el primer post con JS -->
-            </div>
-        </div>
-
-    <!-- Plantilla oculta con el contenido completo de cada post -->
-    <div id="post-templates" class="d-none">
-        {% for pagina in paginas_acerca %}
-            <div class="post-template" data-post-id="{{ pagina.id }}">
-
-                <div class="card mb-3">
-                    <div class="card-header">
-                        <h5 class="card-title">{{ pagina.title }}</h5>
-                    </div>
-                    <div class="card-body" style="padding-bottom: 60px;">
-                        <p class="card-text">
-                            {{ pagina.content }}
-                        </p>          
-                    </div>
-                    
-                </div>
-            </div>
-        {% endfor %}
-    </div>
-
-
-{% endblock %}

views/templates/page-barakaldo.twig

@@ -1,49 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<p class="alert alert-info" role="alert">
-    <i class="bi bi-envelope-at"></i>  
-    Barakaldo</p>
-
-<section class="contacto-barakaldo">
-    <div class="container my-5">
-        <div class="row">
-            
-            <!-- Column map -->
-            <div class="col-md-6 mb-4 mb-md-0">
-            <div class="ratio ratio-4x3">
-                {# Aquí puedes incrustar un iframe o un mapa generado #}
-                 <iframe width="425" 
-                    height="350" 
-                    src="https://www.openstreetmap.org/export/embed.html?bbox=-2.986932098865509%2C43.29429552013704%2C-2.984805107116699%2C43.29620671523328&amp;layer=mapnik" 
-                    style="border: 1px solid black">
-                 </iframe><br/>
-                 
-            </div>
-                 <small><a href="https://www.openstreetmap.org/?#map=19/43.295251/-2.985869">Ver el mapa más grande</a></small>
-            </div>
-
-            <!-- Column content -->
-            <div class="col-md-6">
-            <div class="content">
-                {{ page.content }}
-            </div>
-            </div>
-
-        </div>
-
-        <!-- formulario -->
-        <div class="row mt-5">
-            <div class="col-12">
-                <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">Contacto</p>
-
-                <div class="formulario-contacto">
-                {{ form_test | raw }}
-
-                </div>
-            </div>
-        </div>
-
-    </div>
-</section>
-{% endblock %}

views/templates/page-bilbao.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">BILBAO</h1>
-
-{% endblock %}

views/templates/page-contactos.twig

@@ -0,0 +1,85 @@
+{% extends 'layouts/base.twig' %}
+
+{% block content %}
+    <!-- <p class="alert alert-info" role="alert">
+        <i class="bi bi-envelope-at"></i>  
+        PLANTILLA CONTACTOS</p> -->
+
+    <section class="contacto-barakaldo">
+        <div class="container my-5">
+
+            <!-- mapa & contacts -->
+            <div class="row">
+                <!-- Column map -->
+                <div class="col-md-6 mb-4 mb-md-0">
+                    {% set url_mapa = contacto_info.url_mapa %}
+                    {% if url_mapa %}
+                        {% set coordenadas = url_mapa|split('/')|slice(-2) %}
+                        {% set latitud = coordenadas[0] %}
+                        {% set longitud = coordenadas[1] %}
+
+                        <div class="ratio ratio-4x3">
+                            <iframe width="425" 
+                                    height="350" 
+                                    src="https://www.openstreetmap.org/export/embed.html?bbox={{ longitud }}%2C{{ latitud }}%2C{{ longitud }}%2C{{ latitud }}&amp;layer=mapnik&amp;marker={{ latitud }}%2C{{ longitud }}" 
+                                    style="border: 1px solid black">
+                            </iframe>
+                        </div>
+
+                        <small>
+                            <a href="https://www.openstreetmap.org/?#map=19/{{ latitud }}/{{ longitud }}">
+                                Ver el mapa más grande
+                            </a>
+                        </small>
+                    {% endif %}
+                </div>
+
+                <!-- Column content -->
+                <div class="col-md-6">
+                    <div class="content">
+                        <h2>{{ contacto_info.nombre }}</h2>
+                        <p>{{ contacto_info.direccion }}</p>
+                        <p>{{ contacto_info.forma_contacto }}</p>
+                   
+                        <div class="btn-group m-1" role="group" aria-label="First group">
+                            {% if contacto_info.url_facebook %}
+                                <a href="{{ contacto_info.url_facebook }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-facebook"></i></a>
+                            {% endif %}
+                            {% if contacto_info.url_twitter %}
+                                <a href="{{ contacto_info.url_twitter }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-twitter-x"></i></a>
+                            {% endif %}
+                            {% if contacto_info.url_web %}
+                                <a href="{{ contacto_info.url_web }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-globe"></i></a>
+                            {% endif %}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <!-- form -->
+            <div class="row mt-5">
+                <div class="col-12">
+                    <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">Contacto</p>
+                    <div class="formulario-contacto">
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-md-8 col-lg-6">
+                                    {{ contacto_info.form | raw }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                {{ page.content }}
+            </div>
+
+        </div>
+    </section>
+{% endblock %}

views/templates/page-documentos.twig

@@ -1,9 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<p class="alert alert-info" role="alert">
-    <i class="bi bi-folder-fill"></i>   
-    Dokumentuak / Documentos</p>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">DOCUMENTOS</p>
 
     <section class="documentos">
         <div class="container">
@@ -40,14 +38,14 @@
                                     <div>
                                         {% if doc.documento_url %}
                                             <a href="{{ doc.documento_url }}" 
-                                                class="btn btn-primary btn-sm me-2" 
+                                                class="btn btn-sm me-2 btn-primary-cnt" 
                                                 target="_blank">
                                                     <i class="bi bi-eye-fill"></i>
                                                     Ver documento
                                             </a>
 
                                             <a href="{{ doc.documento_url }}" download
-                                                class="btn btn-primary btn-sm me-2" >
+                                                class="btn btn-sm me-2 btn-primary-cnt" >
                                                     <i class="bi bi-cloud-download-fill"></i>
                                                     Descargar
                                             </a>

views/templates/page-donosti.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">DONOSTI</h1>
-
-{% endblock %}

views/templates/page-enlaces.twig

@@ -1,9 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <p class="alert alert-info" role="alert">
-    <i class="bi bi-link-45deg"></i>  
-    Enlaces</p>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">ENLACES</p>
 
     {% if enlaces %}
     <div class="enlaces">

views/templates/page-industria.twig

@@ -1,8 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<p class="alert alert-info" role="alert">
-    <i class="bi bi-folder-fill"></i>   
-    Industria</p>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">INDUSTRIA</p>
+
 
 {% endblock %}

views/templates/page-irunea.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">IRUÑA</h1>
-
-{% endblock %}

views/templates/page-noticias.twig

@@ -1,41 +1,44 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    {% include 'partials/breadcrumb.twig' %}
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">NOTICIAS</p>
 
-    {% if recent_posts_noticias %}
-        {% for noticias in recent_posts_noticias %}
+    <section class="posts-noticias">
+        {% if recent_posts_noticias %}
+            {% for noticias in recent_posts_noticias %}
 
-            <div class="card my-3 position-relative">
-            <div class="row g-0">
-                <div class="col-md-4">
-                    <img src="{{ noticias.thumbnail.src }}" 
-                            class="rounded-start object-fit-cover w-100 h-100" 
-                            alt="{{ noticias.thumbnail.alt }}"
-                            style="min-height: 200px;"
-                            />
-                </div>
-                <div class="col-md-8">
-                <div class="card-body" style="padding-bottom: 60px;">
-                    <h5 class="card-title">{{ noticias.title }}</h5>
-                    <p class="card-text"> {{
-                            noticias.excerpt({
-                                words: 50,
-                                read_more: ''
-                            })
-                        }}</p>
-                    <p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
-                    <a href="{{ noticias.link  }}" 
-                            class="btn btn-secondary position-absolute"
-                            style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
-                            >Sigue leyendo...</a>
+                <div class="card my-3 position-relative">
+                <div class="row g-0">
+                    <div class="col-md-4">
+                        <img src="{{ noticias.thumbnail.src }}" 
+                                class="rounded-start object-fit-cover w-100 h-100" 
+                                alt="{{ noticias.thumbnail.alt }}"
+                                style="min-height: 200px;"
+                                />
+                    </div>
+                    <div class="col-md-8">
+                    <div class="card-body" style="padding-bottom: 60px;">
+                        <h5 class="card-title">{{ noticias.title }}</h5>
+                        <p class="card-text"> {{
+                                noticias.excerpt({
+                                    words: 50,
+                                    read_more: ''
+                                })
+                            }}</p>
+                        <p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
+                        <a href="{{ noticias.link  }}" 
+                                class="btn position-absolute btn-secondary-cnt"
+                                style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
+                                >Sigue leyendo...</a>
+                    </div>
+                    </div>
                 </div>
                 </div>
-            </div>
-            </div>
 
-        {% endfor %}
-    {% else %}
-        <h2>no hay artículos</h2>
-    {% endif %}
+            {% endfor %}
+        {% else %}
+            <h2>no hay artículos</h2>
+        {% endif %}
+    </section>
+
 {% endblock %}

views/templates/page-quieres-afiliarte.twig

@@ -1,6 +1,43 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class="text-bg-primary text-wrap">AFILIATE</h1>
+<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">AFÍLIATE</p>
 
+<div class="affiliate-section">
+    <div class="container">
+        <div class="row align-items-center p-5">
+            <!-- Primera columna - Imagen -->
+            <div class="col-md-6">
+                {% if afiliate_fields.imagen_afiliate %}
+                    <div class="affiliate-image">
+                        <img src="{{ afiliate_fields.imagen_afiliate }}" 
+                             class="img-fluid rounded">
+                    </div>
+                {% endif %}
+            </div>
+            
+            <!-- Segunda columna - Contenido y botón -->
+            <div class="col-md-6">
+                <div class="affiliate-content">
+                    <!-- Contenido de la página -->
+                    <div class="page-content">
+                        {{ post.content }}
+                    </div>
+                    
+                    <!-- Botón de afiliado -->
+                    {% if afiliate_fields.enlace_boton_afiliate %}
+                        <div class="affiliate-button-container mt-4">
+                            <a href="{{ afiliate_fields.enlace_boton_afiliate }}" 
+                               class="btn btn-lg btn-primary-cnt" 
+                               target="_blank" 
+                               rel="noopener noreferrer">
+                                {{ afiliate_fields.texto_boton }}
+                            </a>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}

views/templates/page-servicios-privados.twig

@@ -1,9 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <p class="alert alert-info" role="alert">
-    <i class="bi bi-folder-fill"></i>   
-    Servicios Privados</p>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PRIVADOS</p>
 
     <section class="grid servicios-privados">
         <div class="container">

views/templates/page-servicios-publicos.twig

@@ -1,9 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <p class="alert alert-info" role="alert">
-    <i class="bi bi-folder-fill"></i>   
-    Servicios Públicos</p>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PÚBLICOS</p>
 
     <section class="grid servicios-publicos">
         <div class="container">

views/templates/page-videos.twig

@@ -1,7 +1,8 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    {% include 'partials/breadcrumb.twig' %}
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">VÍDEOS</p>
+
 
     <div class="container text-center">
         <div class="row">

views/templates/single-acerca.twig

@@ -1,6 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">ACERCA DE LA CNT</p>
 
 <div class="container mt-4">
     <div class="row">

views/templates/single.twig

@@ -1,23 +1,29 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="content-wrapper">
+    <div class="container">
         <article class="post-type-{{ post.type }}" id="post-{{ post.id }}">
-            <img src="{{ post.thumbnail.src|resize(1200, 300) }}" />
-            <section class="article-content">
+            <!-- <img src="{{ post.thumbnail.src|resize(1200, 300) }}" /> -->
+
+            <section class="article-content mt-5 border-dark border-top">
+
                 <h1 class="article-h1">{{ post.title }}</h1>
-                <p class="blog-author">
-                    <span>By</span>
+                <p class="blog-author mt-3 mb-5 border-dark border-bottom">
+                    <span>Autor:</span>
                     <a href="{{ post.author.path }}">{{ post.author.name }}</a>
                     <span>&bull;</span>
                     <time datetime="{{ post.date|date('Y-m-d H:i:s') }}">{{ post.date }}</time>
                 </p>
+
                 <div class="article-body">{{ post.content }}</div>
             </section>
-            <section class="comment-box">
+            
+            <!-- comments -->
+            <section class="comment-box mt-5 p-2 border-dark border-top">
                 <div class="comments">
                     {% if post.comments %}
-                        <h3>comments</h3>
+                        <!-- <h2>Comentarios</h2>  -->
+                        
                         {% for cmt in post.comments %}
                             {% include 'partials/comment.twig' with {
                                 comment: cmt
@@ -27,7 +33,7 @@
                 </div>
 
                 {% if post.comment_status == 'closed' %}
-                    <p>comments for this post are closed by gus</p>
+                    <p>No se puede comentar.</p>
                 {% else %}
                     {% include 'partials/comment-form.twig' %}
                 {% endif %}