wagtail-enap-designsystem 1.2.1.145__py3-none-any.whl → 1.2.1.146__py3-none-any.whl

enap_designsystem/static/enap_designsystem/blocks/carousel_responsivo_snippet.css

@@ -0,0 +1,294 @@
+.carousel-responsivo {
+    position: relative;
+    width: 100%;
+    margin-bottom: 2rem;
+}
+
+.carousel-responsivo__title {
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--enap-primary-color, #1976d2);
+}
+
+.carousel-responsivo__container {
+    position: relative;
+    width: 100%;
+    height: var(--carousel-height-mobile);
+    overflow: hidden;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__container {
+        height: var(--carousel-height-desktop);
+    }
+}
+
+.carousel-responsivo__slides {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.carousel-responsivo__slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.6s ease-in-out;
+    display: flex;
+    align-items: center;
+}
+
+.carousel-responsivo__slide[data-active="true"] {
+    opacity: 1;
+}
+
+/* Efeito Fade */
+.carousel-responsivo[data-efeito="fade"] .carousel-responsivo__slide {
+    transition: opacity 0.8s ease-in-out;
+}
+
+/* Efeito Slide */
+.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide {
+    transform: translateX(100%);
+    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
+}
+
+.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide[data-active="true"] {
+    transform: translateX(0);
+}
+
+.carousel-responsivo__picture {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.carousel-responsivo__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.carousel-responsivo__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg, 
+        rgba(0, 0, 0, 0.6) 0%, 
+        rgba(0, 0, 0, 0.3) 50%, 
+        rgba(0, 0, 0, 0.1) 100%
+    );
+    z-index: 2;
+}
+
+.carousel-responsivo__content {
+    position: relative;
+    z-index: 3;
+    width: 100%;
+    padding: 2rem 0;
+}
+
+.carousel-responsivo__text-wrapper {
+    max-width: 600px;
+    color: white;
+}
+
+.carousel-responsivo__slide--left .carousel-responsivo__text-wrapper {
+    margin-left: 0;
+    text-align: left;
+}
+
+.carousel-responsivo__slide--center .carousel-responsivo__text-wrapper {
+    margin: 0 auto;
+    text-align: center;
+}
+
+.carousel-responsivo__slide--right .carousel-responsivo__text-wrapper {
+    margin-left: auto;
+    text-align: right;
+}
+
+.carousel-responsivo__slide-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-title {
+        font-size: 2.5rem;
+    }
+}
+
+.carousel-responsivo__slide-subtitle {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    opacity: 0.95;
+    line-height: 1.4;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-subtitle {
+        font-size: 1.25rem;
+    }
+}
+
+.carousel-responsivo__slide-text {
+    font-size: 0.875rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+@media (min-width: 768px) {
+    .carousel-responsivo__slide-text {
+        font-size: 1rem;
+    }
+}
+
+
+
+.carousel-responsivo__slide-button:hover,
+.carousel-responsivo__slide-button:focus {
+    background: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    outline: 2px solid var(--enap-primary-color, #1976d2);
+    outline-offset: 2px;
+}
+
+.carousel-responsivo__slide-button-icon {
+    transition: transform 0.3s ease;
+}
+
+.carousel-responsivo__slide-button:hover .carousel-responsivo__slide-button-icon {
+    transform: translateX(4px);
+}
+
+/* Navegação */
+.carousel-responsivo__nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    color: var(--enap-primary-color, #1976d2);
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(10px);
+}
+
+.carousel-responsivo__nav:hover,
+.carousel-responsivo__nav:focus {
+    background: white;
+    transform: translateY(-50%) scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    outline: 2px solid var(--enap-primary-color, #1976d2);
+    outline-offset: 2px;
+}
+
+.carousel-responsivo__nav--prev {
+    left: 1rem;
+}
+
+.carousel-responsivo__nav--next {
+    right: 1rem;
+}
+
+/* Indicadores */
+.carousel-responsivo__indicators {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 0.5rem;
+    z-index: 4;
+}
+
+.carousel-responsivo__indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.carousel-responsivo__indicator[aria-selected="true"] {
+    background: white;
+    border-color: white;
+}
+
+.carousel-responsivo__indicator:hover,
+.carousel-responsivo__indicator:focus {
+    border-color: white;
+    transform: scale(1.2);
+    outline: 2px solid rgba(255, 255, 255, 0.8);
+    outline-offset: 2px;
+}
+
+/* Utilitários */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+    .container {
+        padding: 0 2rem;
+    }
+}
+
+/* Temas de cores */
+.carousel-responsivo__slide--primary {
+    --theme-color: var(--enap-primary-color, #1976d2);
+}
+
+.carousel-responsivo__slide--secondary {
+    --theme-color: var(--enap-secondary-color, #424242);
+}
+
+.carousel-responsivo__slide--light {
+    --theme-color: #ffffff;
+}
+
+.carousel-responsivo__slide--dark {
+    --theme-color: #1a1a1a;
+}

enap_designsystem/static/enap_designsystem/blocks/clientes_block.css

@@ -0,0 +1,146 @@
+.clientes-section {
+    padding: 80px 0;
+    background: linear-gradient(0deg, #FFFFFF 88%, #F5F7FA 96%);
+    position: relative;
+}
+
+.clientes-button{
+    margin: 40px auto;
+    display: flex;
+    justify-content: center;
+}
+
+.clientes-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
+    background-size: 30px 30px;
+    pointer-events: none;
+}
+
+.container {
+    max-width: 1142px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.clientes-header {
+    margin-bottom: 60px;
+}
+
+.clientes-header__titulo {
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: #024248;
+    margin-bottom: 16px;
+    line-height: 1.2;
+}
+
+.clientes-section p{
+    font-size: 1.125rem;
+    color: #333840;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-left .clientes-header__subtitulo {
+    margin-left: 0;
+}
+
+.clientes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 40px;
+    align-items: center;
+    justify-items: center;
+}
+
+.cliente-logo {
+    padding: 12px;
+    height: 120px;
+    width: 100%;
+    max-width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cliente-logo__imagem {
+    max-width: 100%;
+    max-height: 60px;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    transition: all 0.3s ease;
+}
+
+.cliente-logo:hover .cliente-logo__imagem {
+    filter: grayscale(0);
+    opacity: 1;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .clientes-section {
+        padding: 60px 0;
+    }
+    
+    .clientes-header {
+        margin-bottom: 40px;
+    }
+    
+    .clientes-header__titulo {
+        font-size: 2rem;
+    }
+    
+    .clientes-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 24px;
+    }
+    
+    .cliente-logo {
+        padding: 24px;
+        max-width: 150px;
+        height: 100px;
+    }
+    
+    .cliente-logo__imagem {
+        max-height: 50px;
+    }
+}
+
+@media (max-width: 480px) {
+    .clientes-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+    
+    .cliente-logo {
+        padding: 20px;
+        height: 90px;
+    }
+    
+    .cliente-logo__imagem {
+        max-height: 40px;
+    }
+}
+
+/* Variação para muitos logos */
+@media (min-width: 1200px) {
+    .clientes-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}

enap_designsystem/templates/enap_designsystem/base.html

@@ -19,8 +19,9 @@
 		<!-- End Google Tag Manager -->
 			
 		{% block title %}
-		<title>{% if page.page_title and page.page_title|length > 0 %}{{ page.page_title }}{% else %}ENAP - Escola Nacional de Administração Pública{% endif %}</title>
+		<title>{% if page.page_title and page.page_title|length > 0 %}{{ page.page_title }}{% else %}{{ page.title }}{% endif %}</title>
 		{% endblock %}
+
 		
 		{% block styleinline %} {% endblock %}
 		{% block stylecss %} {% endblock %}
@@ -81,6 +82,12 @@
 		
 		<!-- CSS Componentes -->
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/lia.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/carousel_images.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/apresentacao_block.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/cards_section.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/cards_titles.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/carousel_responsive.css' %}">
+		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/clientes_block.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/semana.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/accordions.css' %}">
 		<link rel="stylesheet" href="{% static 'enap_designsystem/blocks/accordionsv2.css' %}">

enap_designsystem/templates/enap_designsystem/blocks/apresentacao_block.html

@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 
 <section class="apresentacao-secao py-16" 
-         style="background-color: {{ value.cor_fundo }};">
+        style="background-color: {{ value.cor_fundo }};">
     
     <div class="apresentacao-container mx-auto px-4">
         <div class="apresentacao-wrapper mx-auto text-center">
@@ -15,7 +15,7 @@
 
             <!-- Quadrado de conteúdo -->
             <div class="apresentacao-conteudo-box rounded-lg text-left"
-                 style="background-color: {{ value.cor_quadrado }};">
+                style="background-color: {{ value.cor_quadrado }};">
                 <div style="color: {{value.cor_texto}}" class="apresentacao-texto leading-relaxed">
                     {{ value.conteudo|richtext }}
                 </div>
@@ -25,13 +25,12 @@
             {% if value.botao_texto and value.botao_url %}
                 <div class="apresentacao-botao-wrapper flex justify-center">
                     <a href="{{ value.botao_url }}" 
-                       class="apresentacao-botao inline-flex items-center justify-center 
-                              px-8 font-semibold rounded-full 
-                              text-white transition-all duration-300"
-                       style="background-color: {{ value.cor_botao }};"
-                       onmouseover="this.style.backgroundColor='{{ value.cor_botao_hover }}'"
-                       onmouseout="this.style.backgroundColor='{{ value.cor_botao }}'">
-                        
+                        class="apresentacao-botao inline-flex items-center justify-center 
+                                px-8 font-semibold rounded-full 
+                                text-white transition-all duration-300"
+                        style="background-color: {{ value.cor_botao }};"
+                        onmouseover="this.style.backgroundColor='{{ value.cor_botao_hover }}'"
+                        onmouseout="this.style.backgroundColor='{{ value.cor_botao }}'">
                         {% if value.botao_icone %}
                             <i class="apresentacao-icone {{ value.botao_icone }} mr-2"></i>
                         {% endif %}
@@ -51,6 +50,7 @@
         padding: 12px 36px;
         border-radius: 32px;
         font-weight: 500;
+        background-color: {{ value.cor_botao }};
     }
 
     .apresentacao-titulo {
@@ -71,18 +71,22 @@
     }
 
     .apresentacao-conteudo-box {
-        padding: 60px 120px;
+        padding: 60px;
     }
 
     @media (min-width: 768px) {
         .apresentacao-conteudo-box {
-            padding: 3rem;
+            padding: 3rem 8rem;
         }
     }
     
     .apresentacao-botao:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0,0,0,0.05);
+        background-color: {{ value.cor_botao_hover }};
+    }
+    .apresentacao-botao:active {
+        background-color: {{ value.cor_botao_active }};
     }
     
     /* Forçar cores do richtext */
@@ -95,8 +99,8 @@
         padding: 90px 0;
     }
 
-    .apresentacao-texto {
-        font-size: 1.125rem;
+    .apresentacao-texto p {
+        font-size: 21px;
     }
     
     .apresentacao-secao .apresentacao-texto p,

enap_designsystem/templates/enap_designsystem/blocks/apresentacao_simple_block.html

@@ -2,7 +2,7 @@
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
 <section class="secao-display py-16" 
-         style="background-color: {{ value.cor_fundo }};">
+        style="background-color: {{ value.cor_fundo }};">
     
     <div class="container mx-auto px-4">
         <div class="max-w-6xl mx-auto">
@@ -15,9 +15,9 @@
 
             <!-- Quadrado de conteúdo -->
             <div class="secao-conteudo-cartoes rounded-lg p-8 mb-12 shadow-lg"
-                 style="background-color: {{ value.cor_quadrado }};">
+                style="background-color: {{ value.cor_quadrado }};">
                 <div class="secao-texto text-lg leading-relaxed"
-                     style="color: {{ value.cor_texto }};">
+                    style="color: {{ value.cor_texto }};">
                     {{ value.conteudo|richtext }}
                 </div>
 

enap_designsystem/templates/enap_designsystem/blocks/banner.html

@@ -15,5 +15,18 @@
         </div>
     </div>
 </div>
-{% endif%}
+{% else %}
+<div class="banner" style="background-image: url({% static 'enap_designsystem/blocks/suap/default_1.png' %})">
+    {% if self.overlay %}
+    <div class="banner__overlay"></div>
+    {% endif %}
+    <div class="banner__content">
+        <div class="wrapper-texts-banner">
+            <img src="{% static 'enap_designsystem/icons/grafismo.svg' %}" alt="Grafismo" class="grafismo">
+            <h1 class="banner__title">{{ self.title }}</h1>
+            <h2 class="banner__description">{{ self.description }}</h2>
+        </div>
+    </div>
+</div>
+{% endif %}
 {% endblock %}

enap_designsystem/templates/enap_designsystem/blocks/banner_logo.html

@@ -16,5 +16,19 @@
         </div>
     </div>
 </div>
-{% endif%}
+{% else %}
+<div class="banner" style="background-image: url({% static 'enap_designsystem/blocks/suap/default_1.png' %})">
+    <div class="banner__content">
+        <div class="wrapper-texts-banner">
+            <img src="{% static 'enap_designsystem/icons/grafismo.svg' %}" alt="Grafismo" class="grafismo">
+            <h1 class="banner__title">{{ self.title }}</h1>
+            <h2 class="banner__description">{{ self.description }}</h2>
+            {% if self.logo_image %}
+                {% image self.logo_image original as logo_img %}
+                <img src="{{ logo_img.url }}" alt="Logo {{ self.title }}" class="banner-logo-bannner">
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}
 {% endblock %}

enap_designsystem/templates/enap_designsystem/blocks/card_block.html

@@ -16,7 +16,7 @@
                             {% with button_value=link_block.value %}
                                 {% if button_value.link_url %}
                                     <a href="{{ button_value.link_url }}" class="card-overlay-link" 
-                                       {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
+                                        {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                                 {% elif button_value.link_page %}
                                     <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                                 {% endif %}
@@ -66,7 +66,7 @@
                         {% with button_value=link_block.value %}
                             {% if button_value.link_url %}
                                 <a href="{{ button_value.link_url }}" class="card-overlay-link" 
-                                   {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
+                                    {% if button_value.link_target %}target="{{ button_value.link_target }}"{% endif %}></a>
                             {% elif button_value.link_page %}
                                 <a href="{{ button_value.link_page.url }}" class="card-overlay-link"></a>
                             {% endif %}