Merge pull request #42 from FredericoBresani/gh-pages

Design improvements
manguezal · May 7, 2024 · affb308 · affb308
2 parents f4a2d3f + 6aae112
commit affb308
Show file tree

Hide file tree

Showing 26 changed files with 233 additions and 63 deletions.
diff --git a/2024/src/app/about/about.component.html b/2024/src/app/about/about.component.html
@@ -4,19 +4,12 @@
         <div class="section">
             <div class="text">
                 <a>
-                    O Mangue.bit é a maior conferência de startups organizada por uma comunidade voluntária no Brasil, a 
-                    comunidade Manguezal. Em sua 8ª edição, este evento anual reúne startups, investidores e empreendedores 
+                    O Mangue.bit é a maior conferência de startups organizada por uma comunidade voluntária no Brasil, 
+                    a comunidade Manguezal. Em sua 8ª edição, este evento anual reúne startups, investidores e empreendedores 
                     de todo o país, destacando o vibrante ecossistema de Recife. Aqui, as conexões se formam e as ideias ganham vida.
                 </a>
             </div>
-            <div class="text">
-                <a>
-                    Estamos no maior parque tecnológico urbano e aberto da América Latina, e a energia é contagiante. Com todos 
-                    os agentes de inovação presentes, desde grandes empresas até investidores ávidos por novidades, o Mangue.bit 
-                    não é apenas um evento, é um marco no calendário de inovação. É aqui que o ecossistema de startups de Recife 
-                    se expõe ao país, demonstrando seu potencial e sua capacidade de liderar a vanguarda tecnológica. 
-                </a>
-            </div>
+            <img class="decoration" src="../../assets/images/IDV-Mangue_PONTE.png" style="transform: rotate(1.8deg);" *ngIf="!mobile">
         </div>
         <div class="section">
             <div class="title">
@@ -29,14 +22,8 @@
                     palco aberto para brilhar e captar a atenção de investidores e grandes empresas.
                 </a>
             </div>
-            <div class="text" style="margin: 0;">
-                <a>
-                    Venha fazer parte do Mangue.bit! Conecte-se com as estrelas do empreendedorismo, inspire-se com as 
-                    histórias de sucesso e descubra como sua startup pode decolar no vibrante ecossistema de Recife. Te 
-                    esperamos aqui, onde o passado histórico encontra o futuro da inovação!
-                </a>
-            </div>
-            <img class="decoration" src="../../assets/images/IDV-Mangue_PONTE.png">
+            <img class="subscribe" src="../../assets/images/subscribe-here-button.png">
+            <img class="hidden-decoration" src="../../assets/images/IDV-Mangue_PONTE.png" style="transform: rotate(1.8deg);" *ngIf="mobile">
         </div>
     </div>
 </div>
diff --git a/2024/src/app/about/about.component.scss b/2024/src/app/about/about.component.scss
@@ -6,6 +6,10 @@
     flex-direction: column;
     align-items: center;
     background-repeat: no-repeat;
+    padding: 0 0 2rem 0;
+    @media (max-width: 700px) {
+        padding: 0;
+    }
     .logo {
         width: 20rem;
         margin: 4rem 0;
@@ -35,23 +39,28 @@
             align-items: center;
             flex: 1;
             width: 80%;
+            margin: 0 0 2rem 0;
             @media (max-width: 450px) {
                 width: 90%;
             }
             .text, .title, .button {
                 flex: 1;
-                width: 85%;
+                width: 75%;
+                text-align: center;
+                @media (max-width: 1024px) {
+                    width: 80%;
+                }
             }
             .text {
-                margin: 0 0 2rem 0;
+                margin: 0 0 0rem 0;
                 @media (max-width: 1024px) {
                     text-align: center;
                 }
                 a {
                     color: $main-purple;
                     font-family: $inter;
-                    font-size: 12px;
-                    font-weight: 400;
+                    font-size: 13px;
+                    font-weight: 500;
                     @media (max-width: 1024px) {
                         font-size: 16px;
                     }
@@ -68,7 +77,7 @@
                 a {
                     color: $main-purple;
                     font-family: $inter;
-                    font-size: 12px;
+                    font-size: 13px;
                     font-weight: 700;
                     @media (max-width: 1024px) {
                         font-size: 16px;
@@ -87,6 +96,31 @@
                     width: 10rem;
                 }
             }
+            .hidden-decoration {
+                width: 60%;
+                @media (max-width: 1024px) {
+                    width: 30%;
+                }
+                @media (max-width: 700px) {
+                    width: 100%;
+                }
+                @media (max-width: 300px) {
+                    width: 70%;
+                }
+            }
+            .subscribe {
+                width: 45%; 
+                margin: 2rem 0 0 0;
+                @media (max-width: 1024px) {
+                    width: 30%;
+                }
+                @media (max-width: 700px) {
+                    width: 60%;
+                }
+                @media (max-width: 300px) {
+                    width: 70%;
+                }
+            }
         }
     }
 }
diff --git a/2024/src/app/about/about.component.ts b/2024/src/app/about/about.component.ts
@@ -1,13 +1,25 @@
-import { Component } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, OnInit, Inject } from '@angular/core';
 
 @Component({
   selector: 'app-about',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })
-export class AboutComponent {
+export class AboutComponent implements OnInit {
+
+  public mobile = false;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  public ngOnInit(): void {
+    const navBarWidth = (this.document.getElementsByClassName('nav-bar-body')[0] as HTMLElement).offsetWidth;
+    if (navBarWidth <= 1024) {
+      this.mobile= true;
+    }
+  }
 
   public goToLink(url: string): void {
     window.open(url, '_blank');

diff --git a/2024/src/app/footer/footer/footer.component.scss b/2024/src/app/footer/footer/footer.component.scss
@@ -3,24 +3,22 @@
 .footer-body {
     width: 100%;
     display: flex;
-    padding: 0rem 3rem;
+    padding: 0.3rem 3rem;
     background-image: url('../../../assets/images/IDV-Mangue_BACKGROUND.png');
     background-size: cover;
     background-repeat: no-repeat;
     align-items: center;
     justify-content: center;
     gap: 7rem;
+    height: 5rem;
     @media (max-width: 695px) {
         gap: 4rem;
     }
     @media (max-width: 488px) {
         gap: 1rem;
     }
     .footer-image {
-        width: 17rem;
-        @media (max-width: 665px) {
-            width: 12rem;
-        }
+        width: 12rem;
         @media (max-width: 410px) {
             width: 10rem;
         }
@@ -35,14 +33,8 @@
         span {
             color: $main-purple;
             font-weight: 700;
-            font-size: 20px;
+            font-size: 12px;
             font-family: $inter;
-            @media (max-width: 665px) {
-                font-size: 16px;
-            }
-            @media (max-width: 488px) {
-                font-size: 14px;
-            }
             @media (max-width: 348px) {
                 font-size: 10px;
             }
@@ -52,10 +44,7 @@
         }
 
         .manguezal {
-            width: 12rem;
-            @media (max-width: 665px) {
-                width: 8rem;
-            }
+            width: 6rem;
             @media (max-width: 410px) {
                 width: 6rem;
             }
@@ -69,6 +58,6 @@
 .site-ending {
     display: flex;
     width: 100%;
-    min-height: 2rem;
+    min-height: 1rem;
     background-color: $main-purple;
 }
diff --git a/2024/src/app/partners/partners-options.ts b/2024/src/app/partners/partners-options.ts
@@ -1,11 +1,59 @@
-export const partnersOptions: { img_address: string }[] = [
-    /*{
-        img_address: '../../../assets/images/logo-manguezal.png',
+export const partnersOptions: { img_address: string, type: string }[] = [
+    {
+        img_address: '../../../assets/images/CESAR-01.png',
+        type: 'tubarao'
+    },
+    {
+        img_address: '../../../assets/images/Citi-01.png',
+        type: 'chie'
+    },
+    {
+        img_address: '../../../assets/images/Neurotech-01.png',
+        type: 'chie',
+
+    },
+    {
+        img_address: '../../../assets/images/Porto-Digital-01.png',
+        type: 'guaiamum',
+    },
+    {
+        img_address: '../../../assets/images/Sebrae-01.png',
+        type: 'chie'
+    },
+    {
+        img_address: '../../../assets/images/brain.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/arsenal.png',
+        type: 'aratu',
     },
-    .
-    .
-    .
     {
-        img_address: '../../../assets/images/logo-manguezal.png',
-    }*/
+        img_address: '../../../assets/images/cubo.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/daus.png',
+        type: 'chie',
+    },
+    {
+        img_address: '../../../assets/images/happen.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/inover.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/medstaff.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/quark.png',
+        type: 'aratu',
+    },
+    {
+        img_address: '../../../assets/images/spencer.png',
+        type: 'aratu',
+    },
 ];
diff --git a/2024/src/app/partners/partners.component.html b/2024/src/app/partners/partners.component.html
@@ -1,9 +1,34 @@
 <div class="partners-body">
     <img class="decorator" src="../../assets/images/IDV-Mangue_RUA-DA-AURORA-MANGUEBEAT.png">
-    <div class="title">Apoio | Patrocínio</div>
+    <div class="title">Patrocínio</div>
     <div class="partners">
-        <div class="partner" *ngFor="let partner of partners">
-            <img src="{{ partner.img_address }}">
+        <div class="tubarao">
+            <div class="title">Tubarão</div>
+            <div class="partner" *ngFor="let partner of tubaroes">
+                <img src="{{ partner.img_address }}">
+            </div>
+        </div>
+        <div class="guaiamum">
+            <div class="title">Guaiamum</div>
+            <div class="partner" *ngFor="let partner of guaiamuns">
+                <img src="{{ partner.img_address }}">
+            </div>
+        </div>
+        <div class="aratu">
+            <div class="title">Aratu</div>
+            <div class="partners-container">
+                <div class="partner" *ngFor="let partner of aratus">
+                    <img src="{{ partner.img_address }}">
+                </div>
+            </div>
+        </div>
+        <div class="chie">
+            <div class="title">Chié / Apoio</div>
+            <div class="partners-container">
+                <div class="partner" *ngFor="let partner of chies">
+                    <img src="{{ partner.img_address }}">
+                </div>
+            </div>
         </div>
     </div>
 </div>