diff --git a/assets/css/aboutus.scss b/assets/css/aboutus.scss index 9783bc22..2c1a6237 100644 --- a/assets/css/aboutus.scss +++ b/assets/css/aboutus.scss @@ -6,7 +6,7 @@ } } -.lighter-banner{ +.lighter-banner { display: flex; flex-direction: column; text-align: center; @@ -18,10 +18,10 @@ background-blend-mode: multiply; .banner-img { - z-index: -1; - position: absolute; - width: 100vw; - height: 260px; + z-index: -1; + position: absolute; + width: 100vw; + height: 260px; } } @@ -64,7 +64,7 @@ } .know-content { - width: 100vw; + width: 100vw; padding: 0px 20px; margin-top: 40px; } @@ -221,7 +221,7 @@ } img { - order: 2; + order: 2; width: 100%; } @@ -251,4 +251,4 @@ height: 100%; z-index: -1; } -} \ No newline at end of file +} diff --git a/assets/css/app.scss b/assets/css/app.scss index 1cf71721..5fc3167e 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -173,6 +173,7 @@ footer { // Sem autenticação @import "./pages/login.scss"; @import "./aboutus.scss"; +@import "./cooperativas.scss"; @import "./agenda.scss"; @import "./contact.scss"; diff --git a/assets/css/cooperativas.scss b/assets/css/cooperativas.scss new file mode 100644 index 00000000..5ac07e4c --- /dev/null +++ b/assets/css/cooperativas.scss @@ -0,0 +1,87 @@ +.cooperativas-wrapper { + @apply flex flex-col; + + .cooperativas-container { + @apply flex flex-col; + gap: 5rem; + margin-bottom: 5rem; + + .header { + @apply relative; + + .header-content { + img { + width: 100%; + height: auto; + } + + h2 { + @apply absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + } + } + } + + .block { + @apply flex flex-row; + gap: 3.5rem; + margin: 0 2.5rem 0 2.5rem; + + .block-content { + @apply flex flex-col; + gap: 2.5rem; + width: 50%; + } + + img { + width: 50%; + } + } + } +} + +@media (max-width: 768px) { + .cooperativas-wrapper { + .cooperativas-container { + @apply flex flex-wrap; + gap: 4rem; + + .header { + height: 16.25rem; + + .header-content { + img { + height: 16.25rem; + object-fit: none; + } + } + } + + .block { + @apply flex-wrap; + gap: 4rem; + margin: 0 1rem 0 1rem; + + .block-content { + width: 100%; + + h1 { + font-size: 2rem; + } + } + + img { + width: 100%; + border-radius: 0.5rem; + } + + &:nth-child(3) { + @apply flex flex-col-reverse; + } + } + } + } +} diff --git a/assets/css/get_in_touch.scss b/assets/css/get_in_touch.scss index db6862b7..88c7e3bd 100644 --- a/assets/css/get_in_touch.scss +++ b/assets/css/get_in_touch.scss @@ -1,19 +1,25 @@ .onde-nos-encontrar-wrapper { @apply flex bg-orange-100; + grid-area: onde-nos-encontrar; flex-direction: column; justify-content: center; align-items: center; + text-align: center; gap: 5rem; - padding: 5rem; + padding: 5rem 0 5rem 0; + width: 100vw; .redes-sociais-wrapper { @apply flex; flex-direction: column; justify-content: center; align-items: center; + text-align: center; .redes-sociais-links-wrapper { - @apply flex; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; padding-top: 2.5rem; .redes-sociais-link { @@ -50,6 +56,7 @@ flex-direction: column; justify-content: center; align-items: center; + text-align: center; gap: 2.5rem; .contact-btn { @@ -74,3 +81,56 @@ } } } + +@media (max-width: 767px) { + .onde-nos-encontrar-wrapper { + .redes-sociais-wrapper { + margin: 1rem; + + .redes-sociais-links-wrapper { + @apply flex; + + .redes-sociais-link { + padding: 0; + + .redes-sociais-icon { + width: 60px; + height: 60px; + } + } + } + } + } +} + +@media (min-width: 768px) { + .onde-nos-encontrar-wrapper { + .redes-sociais-wrapper { + .redes-sociais-links-wrapper { + /* 2 colunas em telas médias */ + @apply grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto; + column-gap: 80px; + min-height: auto; + margin-top: 2.5rem; + } + } + } +} + +@media (min-width: 1024px) { + .onde-nos-encontrar-wrapper { + .redes-sociais-wrapper { + .redes-sociais-links-wrapper { + /* 3 colunas em telas grandes */ + @apply grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto; + column-gap: 80px; + min-height: auto; + margin-top: 2.5rem; + } + } + } +} \ No newline at end of file diff --git a/assets/css/landing.scss b/assets/css/landing.scss index b4bdb2ab..f62dff1e 100644 --- a/assets/css/landing.scss +++ b/assets/css/landing.scss @@ -1,121 +1,394 @@ .landing-grid { - overflow: scroll; - overflow-x: hidden; display: grid; + /* Ajuste automático das colunas */ + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-areas: - "top-banner" - "glide" - "links" - "about" + "landing-carousel" + "landing-links" + "project" "news" - "bottom-banner"; -} - -.top-banner { - @apply w-full; + "gallery-carousel" + "onde-nos-encontrar"; width: 100%; - min-height: 25rem; - grid-area: top-banner; -} + gap: 5rem; + overflow: scroll; + overflow-x: hidden; -.land-carousel { - margin-bottom: 70px; + .landing-carousel { + grid-area: landing-carousel; + grid-column: 1 / -1; - .glide1 { - max-width: 100vw; - max-height: 600px; - } + .glide__slide { + max-width: 100%; + height: 100%; - .glide__slide { - max-width: 100%; - height: 100%; + img { + width: 100%; + height: 100%; + background-size: cover; + } + } - img { - width: 100%; - height: 100%; - max-width: 1100px; - max-height: 600px; - background-size: cover; - margin: 0 auto; + .glide__bullets { + display: flex; + justify-content: center; + margin-top: 40px; + margin-bottom: 40px; + } + + .glide__bullet { + @apply bg-black-10; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 0 5px; + } + + .glide__bullet.active { + @apply bg-blue-80; } } - .glide__bullets { - display: flex; - justify-content: center; - margin-top: 40px; + .landing-links { + @apply flex flex-wrap justify-center; + grid-area: landing-links; + width: 100%; + gap: 1rem; + + .links-item { + @apply flex flex-col justify-start items-start bg-blue-100; + width: 13.333rem; + height: 6.5rem; + padding: 1.5rem; + border-radius: 0.5rem; + + a { + @apply flex flex-col; + gap: 1rem; + } + + img { + @apply hidden; + } + + h3 { + font-size: 1.5rem; + font-style: normal; + font-weight: 700; + line-height: 1.75rem; + } + + button { + @apply flex; + margin: 0; + padding: 0; + gap: 0.5rem; + background-color: transparent; + + p { + @apply text-white-100; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 1.125rem; + } + } + } + + @media (max-width: 768px) { + padding: 1rem 1rem; + + .links-item { + position: relative; + width: 100%; + box-sizing: border-box; + background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%); + + img { + @apply block absolute; + width: inherit; + height: inherit; + border-radius: 0.5rem; + object-fit: cover; + + top: 0; + left: 0; + right: 0; + bottom: 0; + + z-index: -10; + } + } + } } - .glide__bullet { - @apply bg-black-10; - height: 10px; - width: 10px; - border-radius: 50%; - margin: 0 5px; + .project { + @apply flex justify-between; + grid-area: project; + /* width: 100%; */ + padding: 0 2.5rem; + + .project-content { + @apply flex flex-col; + gap: 0.94rem; + width: 50%; + + p { + font-size: 0.75rem; + font-style: normal; + font-weight: 700; + line-height: 1.125rem; + color: #9f9f9f; + } + + .project-body { + @apply flex flex-col; + gap: 2.5rem; + width: 90%; + + a button { + @apply flex; + height: 3rem; + padding: 1rem 1.5rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + + p { + @apply text-white-100; + font-size: 1rem; + font-weight: 500; + } + } + } + } + + img { + width: 50%; + border-radius: 0.5rem; + } + + @media (max-width: 768px) { + @apply flex flex-col-reverse; + padding: 0 1rem; + + .project-content { + width: 100%; + + .project-body { + width: 100%; + + a button { + width: 100%; + } + } + } + + img { + width: 100%; + margin-bottom: 2.5rem; + } + } } - .glide__bullet.active { - @apply bg-blue-80; + .news { + grid-area: news; + + h2 { + display: flex; + justify-content: center; + margin-top: 40px; + margin-bottom: 5rem; + } + + .news-cards { + @apply flex flex-wrap justify-center md:mt-10; + + .news-item { + @apply flex flex-col max-w-sm; + border-radius: 0.5rem; + border: 1px solid #66a2de; + margin: 0 2.5rem 2.5rem 2.5rem; + width: 20.125rem; + + img { + border-radius: 0.5rem 0.5rem 0 0; + width: 100%; + min-height: 242px; + max-height: 242px; + } + + h2 { + display: flex; + justify-content: center; + } + } + } } -} -.bottom-banner { - @apply w-full; + .gallery-carousel { + grid-area: gallery-carousel; + grid-column: 1 / -1; - height: 30rem; - grid-area: bottom-banner; -} + h2 { + display: flex; + justify-content: center; + margin-bottom: 2.5rem; + } -.links-landing { - @apply flex flex-wrap justify-center; + .glide__slides { + @apply flex justify-center items-center; + margin: 0; + padding: 0; + list-style: none; - .links-item { - @apply flex flex-col justify-start items-start m-8; - width: 20.125rem; - height: 20.875rem; - border-radius: 8px; - box-sizing: border-box; - background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%); + .glide__slide { + @apply flex justify-center items-center; + max-width: 41.75rem; + height: auto; + transition: transform 0.25s ease-out; - a { - @apply flex flex-col mt-auto; + &:not(.glide__slide--active) { + max-width: 33.125rem; + } + + img { + width: 100%; + height: auto; + border-radius: 8px; + object-fit: cover; + max-width: 100%; + max-height: 100%; + } + } } - img { - @apply absolute; - z-index: -10; - height: inherit; - width: inherit; + .glide__progress { + max-width: 660px; + margin: 56px auto 0; + height: 4px; + background-color: #ddd; + border-radius: 2px; } - h3 { - padding-left: 1rem; + .glide__progress-bar { + @apply bg-blue-80; + height: 4px; + width: 0; + border-radius: 2px; } + } +} + - p { - text-wrap: wrap; - margin-top: 0.5rem; - padding: 0 1rem 1.5rem 1rem; +@media (max-width: 768px) { + .landing-grid { + .news { + .news-cards { + @apply flex-nowrap; + overflow-x: auto; + scroll-snap-type: x mandatory; + + .news-item { + margin: 0 1.5rem 0 0; + scroll-snap-align: start; + } + } } - button { - width: 100%; - padding: 0 1rem 1.5rem 0; - background-color: transparent; + .gallery-carousel { + .glide__slide { + max-width: 100%; + width: 80%; + height: auto; - p { - display: inline-flex; - width: inherit; + transition: transform 0.3s ease, width 0.3s ease; + transform: scale(0.8); + border-radius: 8px; + overflow: hidden; - &:hover { - text-decoration: underline; + img { + width: 100%; + height: 100%; + background-size: cover; + border-radius: 8px; } } + + .glide__slide--active { + width: 100%; + transform: scale(1.2); + z-index: 2; + border-radius: 16px; + } + + .glide__bullets { + display: flex; + justify-content: center; + margin-top: 40px; + margin-bottom: 40px; + } + + .glide__bullet { + @apply bg-black-10; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 0 5px; + } + + .glide__bullet.active { + @apply bg-blue-80; + } } } } +@media (min-width: 768px) { + .landing-grid { + /* 2 colunas em telas médias */ + grid-template-columns: repeat(2, 1fr); + grid-template-areas: + "landing-carousel landing-carousel" + "landing-links landing-links" + "project project" + "news news" + "gallery-carousel gallery-carousel" + "onde-nos-encontrar onde-nos-encontrar"; + } +} + +@media (min-width: 1024px) { + .landing-grid { + /* 3 colunas em telas grandes */ + grid-template-columns: repeat(3, 1fr); + grid-template-areas: + "landing-carousel landing-carousel landing-carousel" + "landing-links landing-links landing-links" + "project project project" + "news news news" + "gallery-carousel gallery-carousel gallery-carousel" + "onde-nos-encontrar onde-nos-encontrar onde-nos-encontrar"; + } +} + +.top-banner { + @apply w-full; + + width: 100%; + min-height: 25rem; + grid-area: top-banner; +} + + +.bottom-banner { + @apply w-full; + + height: 30rem; + grid-area: bottom-banner; +} + .about { @apply flex justify-center; padding: 2rem; @@ -144,7 +417,6 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; .publications-main-text { margin: 5rem 30rem; @@ -179,42 +451,6 @@ } } -.news { - h2 { - display: flex; - justify-content: center; - margin-bottom: 5rem; - } - - .news-cards { - @apply flex flex-wrap justify-center md:mt-10; - - .news-item { - @apply max-w-sm; - border-radius: 0.5rem; - border: 1px solid #66a2de; - margin: 0 2.5rem 2.5rem 2.5rem; - width: 20.125rem; - - img { - border-radius: 0.5rem 0.5rem 0 0; - width: 100%; - min-height: 242px; - max-height: 242px; - } - - h2 { - display: flex; - justify-content: center; - } - - button { - margin-top: 1rem; - } - } - } -} - .input-space { display: flex; @@ -225,56 +461,6 @@ } } -.gallery-carousel { - padding: 56px 0; - - h2 { - display: flex; - justify-content: center; - margin-bottom: 2.5rem; - } - - .glide2 { - max-width: 100vw; - max-height: 500px; - } - - .glide__slides { - margin: 0; - padding: 0; - list-style: none; - } - - .glide__slide { - @apply flex justify-center items-center; - width: 670px !important; - height: 380px; - transition: transform 0.25s ease-out; - } - - .glide__slide img { - height: 100%; - width: 100%; - border-radius: 8px; - object-fit: cover; - } - - .glide__progress { - max-width: 660px; - margin: 56px auto 0; - height: 4px; - background-color: #ddd; - border-radius: 2px; - } - - .glide__progress-bar { - @apply bg-blue-80; - height: 4px; - width: 0; - border-radius: 2px; - } -} - .equipes-wrapper { @apply flex; flex-direction: column; @@ -496,114 +682,4 @@ .nossas-equipes-container { width: 1360px; } -} - -@media (min-width: 530px) and (max-width: 770px){ - .links-landing { - @apply flex flex-col justify-center items-center ; - width: 100%; - - .links-item { - @apply flex flex-col justify-start items-start m-8; - width: 60%; - height: 16rem; - border-radius: 8px; - box-sizing: border-box; - background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%); - - a { - @apply flex flex-col mt-auto; - } - - img { - border-radius: 8px; - width: inherit; - height: inherit; - @apply absolute; - z-index: -10; - } - - h3 { - padding-left: 1rem; - } - - p { - text-wrap: wrap; - margin-top: 0.5rem; - padding: 0 1rem 1.5rem 1rem; - } - - button { - width: 100%; - padding: 0 1rem 1.5rem 0; - background-color: transparent; - - p { - display: inline-flex; - width: inherit; - - &:hover { - text-decoration: underline; - } - } - } - } - } - -} - -@media (min-width: 350px) and (max-width: 529px){ - - - - .links-landing { - @apply flex flex-col justify-center items-center; - width: 100%; - - .links-item { - @apply flex flex-col justify-start items-start m-8; - width: 70%; - height: 13rem; - border-radius: 8px; - box-sizing: border-box; - background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%); - - a { - @apply flex flex-col mt-auto; - } - - img { - border-radius: 8px; - width: inherit; - height: inherit; - @apply absolute; - z-index: -10; - } - - h3 { - padding-left: 1rem; - } - - p { - text-wrap: wrap; - margin-top: 0.5rem; - padding: 0 1rem 1.5rem 1rem; - } - - button { - width: 100%; - padding: 0 1rem 1.5rem 0; - background-color: transparent; - - p { - display: inline-flex; - width: inherit; - - &:hover { - text-decoration: underline; - } - } - } - } - } -} +} \ No newline at end of file diff --git a/assets/css/navbar.scss b/assets/css/navbar.scss index e7c52a40..6cb12eb3 100644 --- a/assets/css/navbar.scss +++ b/assets/css/navbar.scss @@ -4,7 +4,11 @@ height: 98px; .logo { - margin: 24px 0px 24px 100px; + margin: 1.5rem 0 1.5rem 6.25rem; + + @media screen and (max-width: 768px) { + margin: 1.5rem 1.5rem; + } } .login-button { @@ -13,7 +17,7 @@ } .nav-menu { - @apply flex justify-between items-center; + @apply justify-between items-center; gap: 3rem; margin: 21px 0; @@ -37,6 +41,40 @@ } } } + + .hamburger-button { + @apply md:hidden; + margin: 1.5rem; + } +} + +#navbar { + @apply relative; + z-index: 20; + + .hamburger-container { + @apply absolute bg-white-100; + margin-top: 8px; + padding: 24px 24px; + top: calc(100% + 8px); + left: 0; + width: 100%; + z-index: 10; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + + transform: translateY(-20px); + transition: opacity 0.3s ease, transform 0.3s ease; + + .nav-menu { + @apply flex; + flex-direction: column; + gap: 32px; + } + + a button { + margin-top: 16px; + } + } } .arrow-open, @@ -166,4 +204,4 @@ width: 12.25rem; height: 3.8rem; } -} +} \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/app.js index ce48ec1e..1a368306 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -35,9 +35,9 @@ document.querySelectorAll(`[data-component="navbar-dropdown"]`).forEach(el => { dropdown.addEventListener("mouseleave", e => hide()); }); -window.addEventListener("phx:js-exec", ({detail}) => { +window.addEventListener("phx:js-exec", ({ detail }) => { document.querySelectorAll(detail.to).forEach(el => { - liveSocket.execJS(el, el.getAttribute(detail.attr)) + liveSocket.execJS(el, el.getAttribute(detail.attr)) }) }) diff --git a/assets/js/glide.js b/assets/js/glide.js index 54760430..c24796ab 100644 --- a/assets/js/glide.js +++ b/assets/js/glide.js @@ -3,15 +3,15 @@ import Glide from "@glidejs/glide/dist/glide.esm"; const glide1 = new Glide('.glide1', { type: 'slider', gap: 20, - perview: 1, - autoplay: 35 * 10 * 10, + perView: 1, + autoplay: 3500, hoverpause: true, - animationDuration: 15 * 100, + animationDuration: 1500, direction: 'ltr' }); -glide1.on('run', function () { - const bullets = document.querySelectorAll('.glide__bullet'); +glide1.on('run', function() { + const bullets = document.querySelectorAll('.glide1 .glide__bullet'); bullets.forEach((bullet, index) => { if (index === glide1.index) { bullet.classList.add('active'); @@ -21,7 +21,6 @@ glide1.on('run', function () { }); }); - const glide2 = new Glide('.glide2', { type: 'carousel', autoplay: 5000, @@ -31,6 +30,17 @@ const glide2 = new Glide('.glide2', { peek: 107 }); +glide2.on('run', function() { + const bullets = document.querySelectorAll('.glide2 .glide__bullet'); + bullets.forEach((bullet, index) => { + if (index === glide2.index) { + bullet.classList.add('active'); + } else { + bullet.classList.remove('active'); + } + }); +}); + if (window.location.pathname === '/') { glide1.mount(); glide2.mount(); diff --git a/assets/package-lock.json b/assets/package-lock.json index c12b5e66..b187a0d3 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -22,7 +22,7 @@ "phoenix_live_view": "file:../deps/phoenix_live_view", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", - "topbar": "^1.0.1" + "topbar": "^3.0.0" } }, "../deps/phoenix": { @@ -644,19 +644,6 @@ "url": "https://github.com/sponsors/rawify" } }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -879,7 +866,6 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", - "license": "MIT", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -1710,9 +1696,9 @@ } }, "node_modules/topbar": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/topbar/-/topbar-1.0.1.tgz", - "integrity": "sha512-HZqQSMBiG29vcjOrqKCM9iGY/h69G5gQH7ae83ZCPz5uPmbQKwK0sMEqzVDBiu64tWHJ+kk9NApECrF+FAAvRA==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/topbar/-/topbar-3.0.0.tgz", + "integrity": "sha512-mhczD7KfYi1anfoMPKRdl0wPSWiYc0YOK4KyycYs3EaNT15pVVNDG5CtfgZcEBWIPJEdfR7r8K4hTXDD2ECBVQ==" }, "node_modules/ts-interface-checker": { "version": "0.1.13", diff --git a/assets/package.json b/assets/package.json index b24ea46e..4717719b 100644 --- a/assets/package.json +++ b/assets/package.json @@ -20,6 +20,6 @@ "phoenix_live_view": "file:../deps/phoenix_live_view", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", - "topbar": "^1.0.1" + "topbar": "^3.0.0" } } diff --git a/flake.nix b/flake.nix index 1de4fa79..b38d28de 100644 --- a/flake.nix +++ b/flake.nix @@ -31,7 +31,7 @@ mkShell { name = "peapescarte"; packages = with pkgs; - [beam.elixir_1_16 nodejs supabase-cli ghostscript zlib postgresql flyctl] + [beam.elixir_1_16 nodejs supabase-cli ghostscript zlib postgresql flyctl pass] ++ lib.optional stdenv.isLinux [inotify-tools chromium] ++ lib.optional stdenv.isDarwin [ darwin.apple_sdk.frameworks.CoreServices diff --git a/lib/pescarte_web/design_system/navbar.ex b/lib/pescarte_web/design_system/navbar.ex index ce088631..5de8b23d 100644 --- a/lib/pescarte_web/design_system/navbar.ex +++ b/lib/pescarte_web/design_system/navbar.ex @@ -13,24 +13,76 @@ defmodule PescarteWeb.DesignSystem.Navbar do - - - <.button style="primary" class="login-button"> - - <.text size="base" color="text-white-100">Acessar - - + + <.menu /> + + <.hamburger_button /> + <.hamburger_menu /> """ end + defp hamburger_button(assigns) do + ~H""" +
+ <.button + style="link" + click={JS.toggle(to: "#hamburger-container", in: "fade-in-scale", out: "fade-out-scale")} + > + <.icon name={:menu} class="text-blue-100" /> + +
+ """ + end + + attr(:current_path, :string, default: "/") + + defp menu(assigns) do + ~H""" + + + + """ + end + + attr(:current_path, :string, default: "/") + + defp hamburger_menu(assigns) do + ~H""" + + """ + end + + attr(:current_path, :string, default: "/") + + defp links(assigns) do + ~H""" + <.navlink label="Sobre" navigate={~p"/sobre"} current_path={@current_path} /> + <.navlink label="Equipes" navigate={~p"/equipes"} current_path={@current_path} /> + <.navlink label="Sedes" navigate={~p"/sedes"} current_path={@current_path} /> + <.navlink label="Cooperativas" navigate={~p"/cooperativas"} current_path={@current_path} /> + <.navlink label="Contato" navigate={~p"/contato"} current_path={@current_path} /> + """ + end + attr(:label, :string, required: true) attr(:navigate, :string, default: "/") attr(:current_path, :string, default: "/") diff --git a/lib/pescarte_web/router.ex b/lib/pescarte_web/router.ex index e926d28b..1cefe2b2 100644 --- a/lib/pescarte_web/router.ex +++ b/lib/pescarte_web/router.ex @@ -39,7 +39,7 @@ defmodule PescarteWeb.Router do get "/censo", CensoController, :show get "/confirmar", TokenController, :confirm get "/noticias", NoticiasController, :show - get "/pgtrs", PGTRController, :show + get "/pgtr", PGTRController, :show get "/sedes", SedesController, :show get "/aplicativos", AplicativosController, :show diff --git a/lib/pescarte_web/templates/cooperativas_html/show.html.heex b/lib/pescarte_web/templates/cooperativas_html/show.html.heex index c8b5166b..a02a72ec 100644 --- a/lib/pescarte_web/templates/cooperativas_html/show.html.heex +++ b/lib/pescarte_web/templates/cooperativas_html/show.html.heex @@ -1,58 +1,67 @@ -
+
<.flash :if={@error_message} id="login-error" kind={:error}> <%= @error_message %> -
-
- - <.text size="h1" color="text-blue-100"> - O Laço Entre Cooperativas e Pescarte +
+
+
+ + <.text size="h2" color="text-white-100">Cooperativas +
+
+ +
+
+ + <.text size="h1" color="text-blue-100"> + O Laço Entre Cooperativas e Pescarte + + + <.text size="lg" color="text-black-80"> + Junto às comunidades de pesca artesanal, o PEA Pescarte promove ações colaborativas e democráticas pautadas na economia solidária e no cooperativismo, para a construção de Projetos de Geração de Trabalho e Renda (PGTR’s), que são empreendimentos socioeconômicos, ambientalmente responsáveis para a atuação de pessoas pescadoras e suas famílias em 10 municípios da Bacia de Campos. +
+
+ Os Projetos de Geração de Trabalho e Renda (PGTR's) foram iniciados na segunda fase do projeto Pescarte e resultam na materialização para os Estudos de Viabilidade Técnica, Econômica, Ambiental e Social (EVTEAS) de seis tipos de empreendimentos, previstos para serem implantados de acordo com o Plano de Trabalho do projeto e a particularidade de cada comunidade de pesca. - - <.text size="lg" color="text-black-80"> - Junto às comunidades de pesca artesanal, o PEA Pescarte promove ações colaborativas e democráticas pautadas na economia solidária e no cooperativismo, para a construção de Projetos de Geração de Trabalho e Renda (PGTR’s), que são empreendimentos socioeconômicos, ambientalmente responsáveis para a atuação de pessoas pescadoras e suas famílias em 10 municípios da Bacia de Campos. -
-
- Os Projetos de Geração de Trabalho e Renda (PGTR's) foram iniciados na segunda fase do projeto Pescarte e resultam na materialização para os Estudos de Viabilidade Técnica, Econômica, Ambiental e Social (EVTEAS) de seis tipos de empreendimentos, previstos para serem implantados de acordo com o Plano de Trabalho do projeto e a particularidade de cada comunidade de pesca. - - <.text size="lg" color="text-blue-100"> - - Visite também Organização das Cooperativas do Brasil (OCB) - - -
- -
+ <.text size="lg" color="text-blue-100"> + + Visite também Organização das Cooperativas do Brasil (OCB) + + + + + -
- -
- - <.text size="h1" color="text-blue-100"> - Estudo de Viabilidade Técnica, Econômica, Ambiental e Social +
+ +
+ + <.text size="h1" color="text-blue-100"> + Estudo de Viabilidade Técnica, Econômica, Ambiental e Social + + + <.text size="lg" color="text-black-80"> + O EVTEAS busca identificar as vantagens e desvantagens dos PGTR’s que serão implantados pelo Pescarte. Cada foco do estudo busca investigar aspectos específicos: +
    +
  • Técnico: se o projeto tem suporte técnico para existir;
  • +
  • + Econômico: + como o projeto pode render o suficiente para pagar seus custos e gerar lucro para dividir entre as pessoas trabalhadoras. +
  • +
  • + Ambiental: + possibilidades e alternativas para criar um empreendimento que gere nenhuma poluição ou dano ao meio ambiente. +
  • +
  • + Social: + se os projetos têm um número suficiente de pessoas interessadas em criar e manter um PGTR. Assim, a junção de todos estes termos avalia se o empreendimento pode ou não ser implantando. +
  • +
- - <.text size="lg" color="text-black-80"> - O EVTEAS busca identificar as vantagens e desvantagens dos PGTR’s que serão implantados pelo Pescarte. Cada foco do estudo busca investigar aspectos específicos: -
    -
  • Técnico: se o projeto tem suporte técnico para existir;
  • -
  • - Econômico: - como o projeto pode render o suficiente para pagar seus custos e gerar lucro para dividir entre as pessoas trabalhadoras. -
  • -
  • - Ambiental: - possibilidades e alternativas para criar um empreendimento que gere nenhuma poluição ou dano ao meio ambiente. -
  • -
  • - Social: - se os projetos têm um número suficiente de pessoas interessadas em criar e manter um PGTR. Assim, a junção de todos estes termos avalia se o empreendimento pode ou não ser implantando. -
  • -
- -
+
+ diff --git a/lib/pescarte_web/templates/landing_html/show.html.heex b/lib/pescarte_web/templates/landing_html/show.html.heex index 1f6e0ce8..84d7558d 100644 --- a/lib/pescarte_web/templates/landing_html/show.html.heex +++ b/lib/pescarte_web/templates/landing_html/show.html.heex @@ -2,8 +2,8 @@ <.flash :if={@error_message} id="login-error" kind={:error}> <%= @error_message %> - - +
<.text size="h2" color="text-blue-100">Notícias
@@ -286,10 +264,9 @@
- +