add partner to brisa page

ResidenciaTICBrisa · Jan 31, 2024 · 6e39345 · 6e39345
1 parent 7e4de26
commit 6e39345
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 7 deletions.
diff --git a/_css/main.scss b/_css/main.scss
@@ -78,6 +78,7 @@ $blending: hard-light;
         "method",
         "about-lab",
         "layout-mobile",
-        "materials"
+        "materials",
+        "partners"
 ;
 
diff --git a/_includes/partners.html b/_includes/partners.html
@@ -0,0 +1,46 @@
+<div class="partners-content">
+    <div class="partners-wrapper">
+        <div class="partners-timeline">
+            <div class="timeline-content-wrapper">
+                <div class="icons-wrapper">
+                    <i class="fas fa-lightbulb" style="color:#262626; font-size:25px;"></i>
+                </div>
+                <p>Idealize um projeto</p>
+            </div>
+            <div class="line"></div>
+            <div class="timeline-content-wrapper content-shine">
+                <div class="icons-wrapper shine">
+                    <i class="fas fa-handshake" style="color:#262626; font-size:35px;"></i>
+                </div>
+                <p>Se torne um parceiro da Brisa</p>
+            </div>
+            <div class="line"></div>
+            <div class="timeline-content-wrapper">
+                <div class="icons-wrapper">
+                    <i class="fas fa-laptop-code" style="color:#262626; font-size:25px;"></i>
+                </div>
+                <p>Desenvolvimento do seu projeto por alunos da imersão Brisa</p>
+            </div>
+            <div class="line"></div>
+            <div class="timeline-content-wrapper">
+                <div class="icons-wrapper">
+                    <i class="fas fa-cube" style="color:#262626; font-size:25px;"></i>
+                </div>
+                <p>Sua ideia se torna realidade</p>
+            </div>
+        </div>
+
+        <div class="partners-text-wrapper">
+            <h1 class="partners-title">Participe do Brisa como Parceiro</h1>
+            <div class="partners-content-text" style="display: flex;">
+                <div class="partners-text" style="padding-right: 25px;">
+                    <p>Estamos à procura de empresas parceiras que desejem apresentar desafios estimulantes, comprometendo-se a colaborar com um grupo seleto de estudantes. Em contrapartida, esses alunos receberão bolsas do programa, bem como computadores dedicados ao desenvolvimento de seus projetos.</p>
+                    <button href="https://docs.google.com/forms/d/e/1FAIpQLSeYPfpuIGUiUDgU3sPGJQf1jEXSjcvQi9Loa6Ts_0AE16ZSKw/viewform">Seja um parceiro</button>
+                </div>
+                <div class="partners-text" style="padding-left: 25px;">
+                    <p>Ressaltamos a relevância dessas parcerias, pois acreditamos que a imersão em projetos reais oferece aos estudantes uma oportunidade única de crescimento e aprendizado. Nesse contexto, convidamos sua empresa a propor um projeto, permitindo-nos avaliar a viabilidade do escopo em relação ao tempo e ao perfil dos participantes. Estamos ansiosos para consolidar uma parceria que promova resultados positivos, beneficiando tanto a empresa quanto a Universidade, enquanto contribuímos para a formação de futuros profissionais na área de Tecnologia da Informação.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -7,5 +7,6 @@
 {% include institutions.html  %}
 {% include testimony.html  %}
 {% include method.html  %}
+{% include partners.html  %}
 {% include about_lab.html  %}
 
diff --git a/_sass/_about-lab.scss b/_sass/_about-lab.scss
@@ -1,6 +1,5 @@
 .about-lab-wrapper {
     display: flex;
-    min-height: 80vh;
     width: 100%;
 
     background-color: #14193d;
@@ -45,7 +44,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
     padding: 0px 30px;
 
     .about-text {
@@ -55,11 +53,10 @@
     }
 
     h1 {
-        text-align: center;
         color: white;
         margin: 0;
-        margin-bottom: 20px;
-        font-size: 35px;
+        margin-bottom: 60px;
+        font-size: 40px;
         font-weight: 600;
     }
 }
diff --git a/_sass/_layout-mobile.scss b/_sass/_layout-mobile.scss
@@ -122,4 +122,38 @@
         width: auto;
         margin: 60px 0px;
     }
+
+    // Seção de parceiro
+    .partners-timeline {
+        display: none !important;
+    }
+
+    .partners-content-text {
+        flex-direction: column;
+    }
+
+    .partners-wrapper {
+        padding: 60px 20px;
+        margin: 0px !important;
+    }
+
+    .partners-timeline {
+        max-width: -webkit-calc(#{$on-palm} - (#{$spacing-unit} * 2)) !important;
+        max-width: calc(#{$on-palm} - (#{$spacing-unit} * 2)) !important;
+    }
+
+    .partners-text-wrapper {
+        max-width: -webkit-calc(#{$on-palm} - (#{$spacing-unit} * 2)) !important;
+        max-width: calc(#{$on-palm} - (#{$spacing-unit} * 2)) !important;
+    }
+
+    .partners-text {
+        width: 100% !important;
+        padding: 0px !important;
+
+        button {
+            margin: 20px 0px;
+        }
+    }
+
 }
diff --git a/_sass/_partners.scss b/_sass/_partners.scss
@@ -0,0 +1,137 @@
+.partners-content {
+    width: 100%;
+    background-color: #262626;
+
+    display: flex;
+}
+
+.partners-wrapper {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin: 60px;
+}
+
+.partners-timeline {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+}
+
+.line { 
+    width: 80px;
+    height: 1px;
+    opacity: 60%;
+
+    background-color: white;
+}
+
+.icons-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 50%;
+
+    background-color: white;
+
+    opacity: 60%;
+
+    width: 60px;
+    height: 60px;
+}
+
+.shine {
+    opacity: 100%;
+    width: 80px;
+    height: 80px;
+}
+
+.timeline-content-wrapper {
+    width: 120px;
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    color: white;
+
+    p {
+        height: 90px;
+        margin-top: 10px;
+
+        font-size: 14px;
+        opacity: 60%;
+    }
+
+}
+
+.content-shine p {
+    font-size: 15px;
+    opacity: 100%;
+}
+
+.partners-text-wrapper {
+    width: 100%;
+
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+}
+
+.partners-text {
+    width: 50%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    p {
+        font-size: 14px;
+        color: white;
+        margin: 0px;
+    }
+
+    button {
+        cursor: pointer;
+
+        background-color: rgba(0, 193, 252, 0.8);
+        color: white;
+        opacity: 100%;
+
+        padding: 15px 20px;
+        border: none;
+        border-radius: 10px;
+
+        font-size: 15px;
+
+        &:hover {
+            opacity: 80%;
+        }
+    }
+}
+
+.partners-button {
+    width: 50%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.partners-title {
+    color: white;
+    margin: 0;
+    margin-bottom: 60px;
+    font-size: 40px;
+    font-weight: 600;
+}
diff --git a/_sass/materials.scss b/_sass/materials.scss
@@ -21,7 +21,7 @@
             height: 70px;
 
             border-radius: 50%;
-            border: 4px solid white;
+            border: 5px solid white;
         }
     }