Feat/home header banners

assets-src/sass/components/_home-header.scss

@@ -1,23 +1,32 @@
 .hero-banner {
+  --home-header-gap: 2rem;
+  --home-header-banner-gap: 1rem;
   background-color: #2F4795;
   color: white;
   width: 100%;
 
   &__content {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
+    grid-template-areas: "text banners";
     align-items: stretch;
+    justify-content: center;
+    gap: var(--home-header-gap);
     width: 100%;
     height: 100%;
 
     @media (max-width: 768px) {
-      flex-direction: column;
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "text"
+        "banners";
+      gap: 1.5rem;
       height: auto;
     }
   }
 
   &__text {
-    flex: 1;
+    grid-area: text;
     padding: 2rem 2rem 2rem 3rem;
     display: flex;
     flex-direction: column;
@@ -78,6 +87,60 @@
     }
   }
 
+  .home-header__banners {
+    grid-area: banners;
+    width: min(100%, 28rem);
+    justify-self: center;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--home-header-banner-gap);
+    padding: 2rem 3rem 2rem 0;
+    min-height: 100%;
+
+    @media (max-width: 1200px) {
+      width: min(100%, 24rem);
+      padding-right: 2rem;
+    }
+
+    @media (max-width: 768px) {
+      width: 100%;
+      padding: 0 2rem 2rem;
+      min-height: auto;
+    }
+  }
+
+  .home-header__banner {
+    flex: 0 0 calc((100% - (2 * var(--home-header-banner-gap))) / 3);
+    min-height: 0;
+
+    &:only-child {
+      flex-basis: calc((100% - (2 * var(--home-header-banner-gap))) / 3);
+    }
+
+    @media (max-width: 768px) {
+      flex-basis: auto;
+    }
+
+    a,
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    a {
+      overflow: hidden;
+      border-radius: 1rem;
+    }
+
+    img {
+      object-fit: cover;
+      border-radius: 1rem;
+    }
+  }
+
   &__image {
     width: 664px;
 

components/home-header/README.md

@@ -0,0 +1,16 @@
+# Componente `<home-header>`
+Componente header da página inicial
+Background, Banner e Link do banner podem ser configurados no arquivo home-header.php
+
+### Importando componente
+```PHP
+<?php 
+$this->import('home-header');
+?>
+```
+### Exemplos de uso
+```HTML
+<!-- utilizaçao básica -->
+<home-header></home-header>
+
+```

components/home-header/init.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * @var MapasCulturais\App $app
+ * @var MapasCulturais\Themes\BaseV2\Theme $this
+ */
+
+$background_asset = $app->config['homeHeader.background'] ? $app->config['homeHeader.background'] : $app->config['module.home']['home-header'];
+
+$this->jsObject['config']['homeHeader'] = [
+    'background' => $this->asset($background_asset, false),
+    'banner' => $app->config['homeHeader.banner'] ? $this->asset($app->config['homeHeader.banner'], false) : '',
+    'bannerLink' => $app->config['homeHeader.bannerLink'],
+    'downloadableLink' => $app->config['homeHeader.downloadableLink'],
+    'secondBanner' => $app->config['homeHeader.secondBanner'] ? $this->asset($app->config['homeHeader.secondBanner'], false) : '',
+    'secondBannerLink' => $app->config['homeHeader.secondBannerLink'],
+    'secondDownloadableLink' => $app->config['homeHeader.secondDownloadableLink'],
+    'thirdBanner' => $app->config['homeHeader.thirdBanner'] ? $this->asset($app->config['homeHeader.thirdBanner'], false) : '',
+    'thirdBannerLink' => $app->config['homeHeader.thirdBannerLink'],
+    'thirdDownloadableLink' => $app->config['homeHeader.thirdDownloadableLink'],
+];

components/home-header/script.js

@@ -0,0 +1,35 @@
+app.component('home-header', {
+    template: $TEMPLATES['home-header'],
+
+    setup() { 
+        // os textos estão localizados no arquivo texts.php deste componente 
+        const text = Utils.getTexts('home-header')
+        return { text }
+    },
+
+    data() {
+        return {
+            subsite: $MAPAS.subsite ?? {},
+
+            banner: $MAPAS.config.homeHeader.banner,
+            bannerLink: $MAPAS.config.homeHeader.bannerLink,
+            downloadableLink: $MAPAS.config.homeHeader.downloadableLink,
+
+            secondBanner: $MAPAS.config.homeHeader.secondBanner,
+            secondBannerLink: $MAPAS.config.homeHeader.secondBannerLink,
+            secondDownloadableLink: $MAPAS.config.homeHeader.secondDownloadableLink,
+
+            thirdBanner: $MAPAS.config.homeHeader.thirdBanner,
+            thirdBannerLink: $MAPAS.config.homeHeader.thirdBannerLink,
+            thirdDownloadableLink: $MAPAS.config.homeHeader.thirdDownloadableLink,
+        }
+    },
+    computed: {
+        background(){
+            if(this.subsite?.files?.header){
+                return this.subsite.files.header.url;
+            }
+            return $MAPAS.config.homeHeader.background;
+        }
+    },
+});

components/home-header/template.php

@@ -1,12 +1,25 @@
 <?php
+/**
+ * @var MapasCulturais\App $app
+ * @var MapasCulturais\Themes\BaseV2\Theme $this
+ */
+
+use MapasCulturais\i;
+
+$this->import('
+    home-search
+');
+
 /**
  * @var MapasCulturais\App $app
  * @var MapasCulturais\Themes\BaseV2\Theme $this
  */
 $banner_url = $app->view->asset('img/home/home-main-header/banner.png', false);
 $logos_url = $app->view->asset('img/home/home-main-header/logos.png', false);
-?>
 
+/* <div :class="['home-header', {'home-header--withBanner' : banner}] "> */
+/*     <div class="home-header__content"> */
+?>
 <section class="hero-banner">
   <div class="hero-banner__content">
     <div class="hero-banner__text">
@@ -25,8 +38,31 @@
 
     </div>
 
-    <div class="hero-banner__image">
-      <img src="<?= $banner_url ?>" alt="Formas gráficas coloridas" />
+    <div v-if="banner || secondBanner" class="home-header__banners">
+        <div v-if="banner" class="home-header__banner">
+            <a v-if="bannerLink" :href="bannerLink" :download="downloadableLink ? '' : undefined"  :target="!downloadableLink ? '_blank' : null">
+                <img :src="banner" />
+            </a>
+            <img v-if="!bannerLink" :src="banner" />
+        </div>
+
+        <div v-if="secondBanner" class="home-header__banner">
+            <a v-if="secondBannerLink" :href="secondBannerLink" :download="secondDownloadableLink ? '' : undefined"  :target="!secondDownloadableLink ? '_blank' : null">
+                <img :src="secondBanner" />
+            </a>
+            <img v-if="!secondBannerLink" :src="secondBanner" />
+        </div>
+
+        <div v-if="thirdBanner" class="home-header__banner">
+            <a v-if="thirdBannerLink" :href="thirdBannerLink" :download="thirdDownloadableLink ? '' : undefined"  :target="!thirdDownloadableLink ? '_blank' : null">
+                <img :src="thirdBanner" />
+            </a>
+            <img v-if="!thirdBannerLink" :src="thirdBanner" />
+        </div>
     </div>
+
+    <!--div class="hero-banner__image">
+      <img src="<?= $banner_url ?>" alt="Formas gráficas coloridas" />
+    </div-->
   </div>
 </section>

config.php

@@ -18,6 +18,15 @@
     ex: `img/meu-home-header-background.jpg` (pasta assets/img/meu-home-header-background.jpg do tema)
     */
     //'homeHeader.background' => 'img/banner.png',
+    'homeHeader.banner' => 'https://rededasartes.cultura.gov.br/files/opportunity/7164/mapadasartes-plataforma-capa-05-1.png',
+    'homeHeader.bannerLink' => 'https://rededasartes.cultura.gov.br/oportunidade/7164/',
+    'homeHeader.downloadableLink' => false,
+    /* 'homeHeader.secondBanner' => 'https://placehold.co/640x240/png?text=Banner+2+Funarte', */
+    /* 'homeHeader.secondBannerLink' => 'https://example.com/banner-2', */
+    /* 'homeHeader.secondDownloadableLink' => false, */
+    /* 'homeHeader.thirdBanner' => 'https://placehold.co/640x240/png?text=Banner+3+Funarte', */
+    /* 'homeHeader.thirdBannerLink' => 'https://example.com/banner-3', */
+    /* 'homeHeader.thirdDownloadableLink' => false, */
 
     'text:home-header.title' => 'Boas-vindas à Plataforma Rede das Artes',
     'text:home-header.description' => 'Aqui você encontra e participa de uma rede artística de eventos, circuitos, grupos, coletivos e espaços, entre outros elos das artes visuais, do circo, da dança, da música, do teatro e das artes integradas, de todas as regiões do Brasil.<br><br>🚧 Versão Beta – Teste e Avalie 🚧<br><br>Esta é uma versão preliminar da plataforma, disponível para testes. Se encontrar qualquer divergência ou tiver dúvidas, entre em contato com o suporte. Seu feedback é essencial para melhorias!',