formha/templates/methodology/methodology.html

{% extends 'template.html' %}
{% block css %}
<link rel="stylesheet" href="{{url_for('static', filename='methodology/methodology.css')}}">



{% endblock css %}

{% block navbar %}
{% include 'comps/navbar.html' %}
{% endblock navbar %}

{% block body %}



<style>
  .methodology-section {
      padding: 5rem 0;
      background-color: #f9fafb;
  }
  
  .section-title {
      text-align: center;
      margin-bottom: 4rem;
  }
  
  .section-title h2 {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
  }
  
  .section-title h2:after {
      content: '';
      display: block;
      width: 50px;
      height: 3px;
      background: #4f46e5;
      margin: 10px auto 0;
  }
  
  .section-title .lead {
      color: #4a5568;
      max-width: 700px;
      margin: 0 auto;
      font-size: 1.1rem;
  }
  
  .methodology-card {
      background: white;
      border-radius: 8px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      height: 100%;
      border-left: 4px solid #4f46e5;
  }
  
  .methodology-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  }
  
  .card-icon {
      font-size: 2rem;
      color: #4f46e5;
      margin-bottom: 1.5rem;
  }
  
  .card-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.25rem;
  }
  
  .card-text {
      color: #4a5568;
      line-height: 1.6;
  }
  
  .highlight-card {
      border-left-color: #10b981;
  }
  
  .highlight-card .card-icon {
      color: #10b981;
  }
</style>
    <section class="methodology-section">
        <div class="container">
            <div class="section-title">
                <h2>METODOLOGÍA</h2>
                <p class="lead">Evaluamos cada solución para asegurar que generamos valor en tiempo, costos, calidad y/o productividad</p>
            </div>
            
            <div class="row">
                <!-- Tarjeta 1 -->
                <div class="col-md-6 col-lg-4">
                    <div class="methodology-card">
                        <div class="card-icon">
                            <i class="bi bi-bar-chart-line"></i>
                        </div>
                        <h3 class="card-title">ANÁLISIS DE DATOS</h3>
                        <p class="card-text">Identificamos información clave que nos permita comprender las necesidades, metas y retos de tu empresa. Así como datos estratégicos.</p>
                    </div>
                </div>
                
                <!-- Tarjeta 2 -->
                <div class="col-md-6 col-lg-4">
                    <div class="methodology-card highlight-card">
                        <div class="card-icon">
                            <i class="bi bi-sliders"></i>
                        </div>
                        <h3 class="card-title">PERSONALIZACIÓN</h3>
                        <p class="card-text">Diseñamos e implementamos estrategias personalizadas para potenciar el valor de tu empresa, combinando metodologías especializadas y tecnología.</p>
                    </div>
                </div>
                
                <!-- Tarjeta 3 -->
                <div class="col-md-6 col-lg-4">
                    <div class="methodology-card">
                        <div class="card-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="card-title">EXPERIENCIA DE SERVICIO</h3>
                        <p class="card-text">Aseguraremos que cada solución, proyecto o implementación cuente con una asesoría cercana, con una experiencia de servicio ágil y personalizada tanto para nuestros clientes como usuarios.</p>
                    </div>
                </div>
                
                <!-- Tarjeta 4 -->
                <div class="col-md-6 col-lg-4">
                    <div class="methodology-card">
                        <div class="card-icon">
                            <i class="bi bi-graph-up-arrow"></i>
                        </div>
                        <h3 class="card-title">IMPACTO</h3>
                        <p class="card-text">Mostramos resultados tangibles de nuestra intervención con métricas claras y objetivos alcanzables.</p>
                    </div>
                </div>
                
                <!-- Tarjeta 5 -->
                <div class="col-md-6 col-lg-4">
                    <div class="methodology-card">
                        <div class="card-icon">
                            <i class="bi bi-arrow-repeat"></i>
                        </div>
                        <h3 class="card-title">SOSTENIBILIDAD DEL CAMBIO</h3>
                        <p class="card-text">Damos seguimiento a la implementación, reforzando capacidades internas y midiendo avances. Buscamos que cada intervención deje capacidades instaladas y valor.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>






{% endblock body %}