From bc70d3dd4497c448621ab0c6256ad02cfc15a254 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Tue, 4 Nov 2025 21:08:59 -0600
Subject: [PATCH] Corregir discrepancias estructurales NIVEL 1 - Issue #57
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementación de correcciones críticas de estructura HTML base según template RDash index.html.

**Cambios en header.php:**
- Agregado botón "Let's Talk" dentro de navbar collapse (líneas 315-317 template)
- Botón con data-bs-toggle="modal" data-bs-target="#contactModal"
- Icono bi-lightning-charge-fill
- Agregados atributos ScrollSpy a body tag: data-bs-spy="scroll", data-bs-target=".toc-container", data-bs-offset="100"

**Cambios en front-page.php:**
- REESCRITO completamente con estructura hero section (líneas 322-345 template)
- Implementado div.container-fluid.py-5.mb-4.hero-title
- Category badges con estructura correcta: d-flex gap-2, a.category-badge.category-badge-hero
- H1 con clases: display-5 fw-bold text-center
- Container Bootstrap wrapper correcto

**Archivos creados:**
- template-parts/modal-contact.php: Modal Bootstrap 5 para contacto
- Estructura completa con form, labels, inputs
- Compatible con botón "Let's Talk" y CTA Box

**Cambios en footer.php:**
- Integrado get_template_part para modal-contact en modalContainer

**Validación:**
- Sintaxis PHP validada en todos los archivos: ✅ Sin errores
- Estructura HTML replica líneas exactas del template

**Discrepancias corregidas:**
✅ Botón "Let's Talk" AUSENTE → IMPLEMENTADO
✅ Body tag sin ScrollSpy → ATRIBUTOS AGREGADOS
✅ Hero Section AUSENTE → IMPLEMENTADO
✅ Category badges AUSENTES → IMPLEMENTADOS
✅ H1 clases incorrectas → CORREGIDAS (display-5 fw-bold text-center)
✅ Modal contacto AUSENTE → CREADO

**Siguiente paso:** Implementar issues #58-64 (estilos CSS)

Relacionado con: #57

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 wp-content/themes/apus-theme/footer.php       |   4 +-
 wp-content/themes/apus-theme/front-page.php   | 209 +++++++++---------
 wp-content/themes/apus-theme/header.php       |   7 +-
 .../template-parts/modal-contact.php          |  61 +++++
 4 files changed, 173 insertions(+), 108 deletions(-)
 create mode 100644 wp-content/themes/apus-theme/template-parts/modal-contact.php

diff --git a/wp-content/themes/apus-theme/footer.php b/wp-content/themes/apus-theme/footer.php
index adbf00b4..7c43d5d1 100644
--- a/wp-content/themes/apus-theme/footer.php
+++ b/wp-content/themes/apus-theme/footer.php
@@ -179,7 +179,9 @@
 </div><!-- #page -->
 
 <!-- Modal Container - Carga dinámica del modal de contacto (Issue #34) -->
-<div id="modalContainer"></div>
+<div id="modalContainer">
+	<?php get_template_part( 'template-parts/modal', 'contact' ); ?>
+</div>
 
 <?php wp_footer(); ?>
 
diff --git a/wp-content/themes/apus-theme/front-page.php b/wp-content/themes/apus-theme/front-page.php
index 09345bd4..eb7a063e 100644
--- a/wp-content/themes/apus-theme/front-page.php
+++ b/wp-content/themes/apus-theme/front-page.php
@@ -2,8 +2,7 @@
 /**
  * The template for displaying the static front page
  *
- * This template is used when a static page is set as the front page
- * in WordPress Settings > Reading.
+ * Structure replicates template index.html lines 322-345 (Hero Section)
  *
  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#front-page
  *
@@ -14,118 +13,116 @@
 get_header();
 ?>
 
+	<!-- Hero Title Section (Template líneas 322-345) -->
+	<div class="container-fluid py-5 mb-4 hero-title">
+		<div class="container">
+			<?php
+			while ( have_posts() ) :
+				the_post();
+
+				// Categories Section
+				$categories = get_the_category();
+				if ( ! empty( $categories ) && count( $categories ) > 0 ) :
+					?>
+					<div class="mb-3 d-flex justify-content-center">
+						<div class="d-flex gap-2 flex-wrap justify-content-center">
+							<?php
+							// Limit to 3 categories max
+							$cat_count = 0;
+							foreach ( $categories as $category ) :
+								if ( $cat_count >= 3 ) break;
+								if ( $category->slug === 'uncategorized' ) continue;
+								?>
+								<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="category-badge category-badge-hero">
+									<i class="bi bi-folder-fill me-1"></i>
+									<?php echo esc_html( $category->name ); ?>
+								</a>
+								<?php
+								$cat_count++;
+							endforeach;
+							?>
+						</div>
+					</div>
+				<?php endif; ?>
+
+				<!-- Page Title -->
+				<h1 class="display-5 fw-bold text-center">
+					<?php the_title(); ?>
+				</h1>
+			<?php endwhile; ?>
+		</div><!-- .container -->
+	</div><!-- .hero-title -->
+
 	<main id="main-content" class="site-main front-page" role="main">
 
-		<div class="content-wrapper">
-
-			<!-- Primary Content Area -->
-			<div id="primary" class="content-area">
-
-				<?php
-				while ( have_posts() ) :
-					the_post();
-					?>
-
-					<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-
-						<!-- Featured Image (Hero Section) -->
-						<?php if ( has_post_thumbnail() ) : ?>
-							<div class="hero-section">
-								<?php
-								the_post_thumbnail(
-									'full',
-									array(
-										'alt' => the_title_attribute(
-											array(
-												'echo' => false,
-											)
-										),
-										'loading' => 'eager',
-									)
-								);
-								?>
-							</div>
-						<?php endif; ?>
-
-						<!-- Front Page Header -->
-						<header class="entry-header">
-							<h1 class="entry-title">
-								<?php the_title(); ?>
-							</h1>
-						</header><!-- .entry-header -->
-
-						<!-- Front Page Content -->
-						<div class="entry-content">
-							<?php
-							the_content();
-
-							// Display page links for paginated pages
-							wp_link_pages(
-								array(
-									'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'apus-theme' ),
-									'after'  => '</div>',
-								)
-							);
-							?>
-						</div><!-- .entry-content -->
-
-						<!-- Front Page Footer -->
-						<?php if ( get_edit_post_link() ) : ?>
-							<footer class="entry-footer">
-								<?php
-								// Edit post link for logged-in users with permission
-								edit_post_link(
-									sprintf(
-										wp_kses(
-											/* translators: %s: Page title. Only visible to screen readers. */
-											__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'apus-theme' ),
-											array(
-												'span' => array(
-													'class' => array(),
-												),
-											)
-										),
-										get_the_title()
-									),
-									'<span class="edit-link">',
-									'</span>'
-								);
-								?>
-							</footer><!-- .entry-footer -->
-						<?php endif; ?>
-
-					</article><!-- #post-<?php the_ID(); ?> -->
-
-					<?php
-					// Display comments section if enabled
-					if ( comments_open() || get_comments_number() ) :
-						comments_template();
-					endif;
-
-				endwhile; // End of the loop.
-				?>
-
-				<?php
-				/**
-				 * Hook to display additional content on front page
-				 * This can be used to add featured posts, testimonials, etc.
-				 */
-				do_action( 'apus_front_page_content' );
-				?>
-
-			</div><!-- #primary -->
+		<!-- Container Bootstrap (Template línea 347) -->
+		<div class="container">
 
 			<?php
+			while ( have_posts() ) :
+				the_post();
+				?>
+
+				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+
+					<!-- Front Page Content -->
+					<div class="entry-content">
+						<?php
+						the_content();
+
+						// Display page links for paginated pages
+						wp_link_pages(
+							array(
+								'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'apus-theme' ),
+								'after'  => '</div>',
+							)
+						);
+						?>
+					</div><!-- .entry-content -->
+
+					<!-- Front Page Footer -->
+					<?php if ( get_edit_post_link() ) : ?>
+						<footer class="entry-footer">
+							<?php
+							// Edit post link for logged-in users with permission
+							edit_post_link(
+								sprintf(
+									wp_kses(
+										/* translators: %s: Page title. Only visible to screen readers. */
+										__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'apus-theme' ),
+										array(
+											'span' => array(
+												'class' => array(),
+											),
+										)
+									),
+									get_the_title()
+								),
+								'<span class="edit-link">',
+								'</span>'
+							);
+							?>
+						</footer><!-- .entry-footer -->
+					<?php endif; ?>
+
+				</article><!-- #post-<?php the_ID(); ?> -->
+
+				<?php
+				// Display comments section if enabled
+				if ( comments_open() || get_comments_number() ) :
+					comments_template();
+				endif;
+
+			endwhile; // End of the loop.
+
 			/**
-			 * Sidebar on Front Page
-			 * Only display if sidebar is active
+			 * Hook to display additional content on front page
+			 * This can be used to add featured posts, testimonials, etc.
 			 */
-			if ( is_active_sidebar( 'sidebar-1' ) ) :
-				get_sidebar();
-			endif;
+			do_action( 'apus_front_page_content' );
 			?>
 
-		</div><!-- .content-wrapper -->
+		</div><!-- .container -->
 
 	</main><!-- #main-content -->
 
diff --git a/wp-content/themes/apus-theme/header.php b/wp-content/themes/apus-theme/header.php
index 0559ffd2..d582f951 100644
--- a/wp-content/themes/apus-theme/header.php
+++ b/wp-content/themes/apus-theme/header.php
@@ -19,7 +19,7 @@
 	<?php wp_head(); ?>
 </head>
 
-<body <?php body_class(); ?>>
+<body <?php body_class(); ?> data-bs-spy="scroll" data-bs-target=".toc-container" data-bs-offset="100">
 <?php wp_body_open(); ?>
 
 <!-- Skip to main content link para accesibilidad -->
@@ -111,6 +111,11 @@
 					<?php
 				}
 				?>
+
+				<!-- Let's Talk Button (Template líneas 315-317) -->
+				<button class="btn btn-lets-talk ms-lg-3" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
+					<i class="bi bi-lightning-charge-fill me-2"></i><?php esc_html_e( 'Let\'s Talk', 'apus-theme' ); ?>
+				</button>
 			</div>
 
 		</div><!-- .container -->
diff --git a/wp-content/themes/apus-theme/template-parts/modal-contact.php b/wp-content/themes/apus-theme/template-parts/modal-contact.php
new file mode 100644
index 00000000..f2fb2e26
--- /dev/null
+++ b/wp-content/themes/apus-theme/template-parts/modal-contact.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * Modal de Contacto - Bootstrap 5
+ *
+ * Modal activado por botón "Let's Talk" y CTA Box Sidebar
+ *
+ * @package Apus_Theme
+ * @since 1.0.0
+ */
+?>
+
+<!-- Contact Modal -->
+<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="contactModalLabel">
+					<i class="bi bi-envelope-fill me-2" style="color: #FF8600;"></i>
+					<?php esc_html_e( '¿Tienes alguna pregunta?', 'apus-theme' ); ?>
+				</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php esc_attr_e( 'Cerrar', 'apus-theme' ); ?>"></button>
+			</div>
+			<div class="modal-body">
+				<p class="mb-4">
+					<?php esc_html_e( 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.', 'apus-theme' ); ?>
+				</p>
+
+				<form id="modalContactForm">
+					<div class="row g-3">
+						<div class="col-md-6">
+							<label for="modalFullName" class="form-label"><?php esc_html_e( 'Nombre completo', 'apus-theme' ); ?> *</label>
+							<input type="text" class="form-control" id="modalFullName" name="fullName" required>
+						</div>
+						<div class="col-md-6">
+							<label for="modalCompany" class="form-label"><?php esc_html_e( 'Empresa', 'apus-theme' ); ?></label>
+							<input type="text" class="form-control" id="modalCompany" name="company">
+						</div>
+						<div class="col-md-6">
+							<label for="modalWhatsapp" class="form-label"><?php esc_html_e( 'WhatsApp', 'apus-theme' ); ?> *</label>
+							<input type="tel" class="form-control" id="modalWhatsapp" name="whatsapp" required>
+						</div>
+						<div class="col-md-6">
+							<label for="modalEmail" class="form-label"><?php esc_html_e( 'Correo electrónico', 'apus-theme' ); ?> *</label>
+							<input type="email" class="form-control" id="modalEmail" name="email" required>
+						</div>
+						<div class="col-12">
+							<label for="modalComments" class="form-label"><?php esc_html_e( '¿En qué podemos ayudarte?', 'apus-theme' ); ?></label>
+							<textarea class="form-control" id="modalComments" name="comments" rows="4"></textarea>
+						</div>
+						<div class="col-12">
+							<button type="submit" class="btn btn-primary w-100">
+								<i class="bi bi-send-fill me-2"></i><?php esc_html_e( 'Enviar Mensaje', 'apus-theme' ); ?>
+							</button>
+						</div>
+						<div id="modalFormMessage" class="col-12 mt-2 alert" style="display: none;"></div>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>