feat:v1.0

Author: Fabio Brasileiro

src/app/page/header-landing-page/header-landing-page.component.html

@@ -14,7 +14,7 @@
         <!-- <a href="#" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Log in</a> -->
         <!-- <a href="https://themesberg.com/product/tailwind-css/landing-page"
           class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 sm:mr-2 lg:mr-0 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none dark:focus:ring-green-800">Download</a> -->
-        <button data-collapse-toggle="mobile-menu-2" type="button" (click)="removerHidden()"
+        <button data-collapse-toggle="mobile-menu-2" type="button" (click)="toggleMenu()"
           class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
           aria-controls="mobile-menu-2" aria-expanded="false">
           <span class="sr-only">Open main menu</span>
@@ -34,30 +34,30 @@
         <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
           <li>
             <a (click)="inicio()"
-              [ngClass]="activeLink === 'inicio' ? 'max-lg:bg-green-700  dark:text-white ':'dark:text-gray-400  dark:hover:bg-gray-700'"
-              class="nav-link block cursor-pointer py-2 pl-3 pr-4 text-whiterounded lg:bg-transparent lg:text-green-700 lg:p-0 dark:hover:text-white"
+              [ngClass]="activeLink === 'inicio' ? 'max-lg:bg-green-700 text-white lg:text-green-700 dark:text-white ':' hover:bg-gray-200 hover:text-gray-950  dark:text-gray-400  dark:hover:bg-gray-700'"
+              class="nav-link block cursor-pointer py-2 pl-3 pr-4 text-whiterounded text-gray-700 lg:bg-transparent  lg:p-0 dark:hover:text-white"
               aria-current="page">Início</a>
           </li>
           <li>
             <a (click)="porqueJava()"
-              [ngClass]="activeLink === 'porqueJava' ? ' max-lg:bg-green-700  dark:text-white':'dark:text-gray-400  dark:hover:bg-gray-700'"
-              class="nav-link block cursor-pointer  py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100  lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 hover:text-white  dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Por
+              [ngClass]="activeLink === 'porqueJava' ? ' max-lg:bg-green-700 text-white lg:text-green-700 dark:text-white ':'  hover:bg-gray-200 hover:text-gray-950  dark:text-gray-400  dark:hover:bg-gray-700'"
+              class="nav-link block cursor-pointer  py-2 pl-3 pr-4  border-b border-gray-100  lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400  text-gray-700  dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Por
               que Java?</a>
           </li>
           <li>
             <a (click)="sobre()"
-              [ngClass]="activeLink === 'sobre' ? ' max-lg:bg-green-700  dark:text-white':'dark:text-gray-400  dark:hover:bg-gray-700'"
+              [ngClass]="activeLink === 'sobre' ? 'max-lg:bg-green-700 text-white lg:text-green-700 dark:text-white ':'hover:bg-gray-200 hover:text-gray-950  dark:text-gray-400  dark:hover:bg-gray-700'"
               class="nav-link block cursor-pointer  py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100  lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 hover:text-white  dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Sobre
               a comunidade</a>
           </li>
           <li>
             <a (click)="evento()"
-              [ngClass]="activeLink === 'evento' ? ' max-lg:bg-green-700  dark:text-white':'dark:text-gray-400  dark:hover:bg-gray-700'"
+              [ngClass]="activeLink === 'evento' ? 'max-lg:bg-green-700 text-white lg:text-green-700 dark:text-white ':'  hover:bg-gray-200 hover:text-gray-950  dark:text-gray-400  dark:hover:bg-gray-700'"
               class="nav-link block cursor-pointer  py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100  lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 hover:text-white  dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Eventos</a>
           </li>
           <li>
             <a (click)="contato()"
-              [ngClass]="activeLink === 'contato' ? ' max-lg:bg-green-700  dark:text-white':'dark:text-gray-400  dark:hover:bg-gray-700'"
+              [ngClass]="activeLink === 'contato' ? ' max-lg:bg-green-700 text-white lg:text-green-700 dark:text-white ':'  hover:bg-gray-200 hover:text-gray-950  dark:text-gray-400  dark:hover:bg-gray-700'"
               class="nav-link block cursor-pointer  py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100  lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 hover:text-white  dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contato</a>
           </li>
           <!-- <li>

src/app/page/header-landing-page/header-landing-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, input, Output } from '@angular/core';
 import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/button-toggle-dark-light.component';
 import { NgClass } from '@angular/common';
 
@@ -14,7 +14,7 @@ export class HeaderLandingPageComponent {
   inicio() {
     document.getElementById('inicio')?.scrollIntoView({ behavior: 'smooth' });
     if (window.innerWidth < 10) {
-      this.removerHidden();
+      this.toggleMenu();
     }
     this.activeLink = 'inicio';
   }
@@ -23,14 +23,14 @@ export class HeaderLandingPageComponent {
       .getElementById('porqueJava')
       ?.scrollIntoView({ behavior: 'smooth' });
     if (window.innerWidth < 1024) {
-      this.removerHidden();
+      this.toggleMenu();
     }
     this.activeLink = 'porqueJava';
   }
   sobre() {
     document.getElementById('sobre')?.scrollIntoView({ behavior: 'smooth' });
     if (window.innerWidth < 1024) {
-      this.removerHidden();
+      this.toggleMenu();
     }
     this.activeLink = 'sobre'
      // Ativa a classe dark:text-white
@@ -39,23 +39,24 @@ export class HeaderLandingPageComponent {
   evento() {
     document.getElementById('evento')?.scrollIntoView({ behavior: 'smooth' });
     if (window.innerWidth < 1024) {
-      this.removerHidden();
+      this.toggleMenu();
     }
     this.activeLink = 'evento';
   }
   contato() {
     document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
     if (window.innerWidth < 1024) {
-      this.removerHidden();
+      this.toggleMenu();
     }
     this.activeLink = 'contato';
   }
 
   // Método para remover a classe 'hidden'
-  removerHidden() {
+  toggleMenu() {
     const mobileMenu = document.getElementById('mobile-menu-2');
     if (mobileMenu) {
       mobileMenu.classList.toggle('hidden');
     }
   }
+
 }

src/app/page/landing-page-inicio/landing-page-inicio.component.html

@@ -1,4 +1,4 @@
-<app-header-landing-page (click)="onThemeChange()"></app-header-landing-page>
+<app-header-landing-page></app-header-landing-page>
 <!-- Start block -->
 <style>
   .img-t {
@@ -53,15 +53,15 @@
               class="bi bi-discord w-4 h-4 mr-2 " viewBox="0 0 16 16">
               <path
                 d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
-              <title>Figma.logo</title>
-              <desc>Created using Figma</desc>
+              <title>discord.logo</title>
+              <desc>Call using Discord</desc>
             </svg>
             <span class="dark:text-white ">Conecte-se no discord</span>
           </a>
         </div>
       </div>
       <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
-        <img class="floating" src="../assets/java-jugle-comunidade (1).png" alt="hero image" height="">
+        <img class="floating" src="../assets/java_AM_no_sides.png" alt="hero image" height="">
       </div>
     </div>
   </div>
@@ -611,8 +611,8 @@ <h3 id="accordion-flush-heading-1">
             </svg>
           </button> -->
           <button type="button" (click)="isOpen1 = !isOpen1" [attr.aria-expanded]="isOpen1 ? 'true' : 'false'"
-            [ngClass]="{'dark:text-gray-50': isOpen1}"
-            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
+            [ngClass]="{'text-gray-800 dark:text-gray-50': isOpen1}"
+            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-600 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
             data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
             aria-controls="accordion-flush-body-2">
             <span>Como posso participar ou ate contribuir?</span>
@@ -627,14 +627,21 @@ <h3 id="accordion-flush-heading-1">
         <div id="accordion-flush-body-1" [ngClass]="{'hidden': !isOpen1}" class=""
           aria-labelledby="accordion-flush-heading-1">
           <div class="py-5 border-b border-gray-200 dark:border-gray-700">
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Essa é fácil entre no nosso grupo e saiba mais <a
-                class="text-green-600 dark:text-green-500 hover:underline">link</a></p>
+            <p class="mb-2 text-gray-600 dark:text-gray-400">Essa é fácil entre no nosso grupo e saiba mais <a
+                class="text-green-600 dark:text-green-500 hover:underline"><svg xmlns="http://www.w3.org/2000/svg"
+                  width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right inline-block"
+                  viewBox="0 0 20 20">
+                  <path fill-rule="evenodd"
+                    d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
+                  <path fill-rule="evenodd"
+                    d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
+                </svg></a></p>
           </div>
         </div>
         <h3 id="accordion-flush-heading-2">
           <button type="button" (click)="isOpen2 = !isOpen2" [attr.aria-expanded]="isOpen2 ? 'true' : 'false'"
-            [ngClass]="{'dark:text-gray-50': isOpen2}"
-            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
+            [ngClass]="{'text-gray-800 dark:text-gray-50': isOpen2}"
+            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-600 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
             data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
             aria-controls="accordion-flush-body-2">
             <span>Quanto vai ter eventos, aulas ou palestra?</span>
@@ -648,14 +655,21 @@ <h3 id="accordion-flush-heading-2">
         </h3>
         <div id="accordion-flush-body-2" [ngClass]="{'hidden': !isOpen2}" aria-labelledby="accordion-flush-heading-2">
           <div class="py-5 border-b border-gray-200 dark:border-gray-700">
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Fique de olho no nosso grupo no discord é la que ocorre a
-              maioria do <a eventos class="text-green-600 dark:text-green-500 hover:underline">Link</a>.</p>
+            <p class="mb-2 text-gray-600 dark:text-gray-400">Fique de olho no nosso grupo no discord é la que ocorre a
+              maioria dos eventos <a class="text-green-600 dark:text-green-500 hover:underline"><svg
+                  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                  class="bi bi-box-arrow-up-right inline-block" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd"
+                    d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
+                  <path fill-rule="evenodd"
+                    d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
+                </svg></a></p>
           </div>
         </div>
         <h3 id="accordion-flush-heading-3">
           <button type="button" (click)="isOpen3 = !isOpen3" [attr.aria-expanded]="isOpen3 ? 'true' : 'false'"
-            [ngClass]="{'dark:text-gray-50': isOpen3}"
-            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
+            [ngClass]="{'text-gray-800 dark:text-gray-50': isOpen3}"
+            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-600 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
             data-accordion-target="#accordion-flush-body-3" aria-expanded="false"
             aria-controls="accordion-flush-body-3">
             <span>Pensamos em expandir a comunidade?</span>
@@ -670,7 +684,7 @@ <h3 id="accordion-flush-heading-3">
         <div id="accordion-flush-body-3" [ngClass]="{'hidden': !isOpen3}" class="hidden"
           aria-labelledby="accordion-flush-heading-3">
           <div class="py-5 border-b border-gray-200 dark:border-gray-700">
-            <p class="mb-2 text-gray-500 dark:text-gray-400">A resposta é sim, queremos criar um ecossistema de
+            <p class="mb-2 text-gray-600 dark:text-gray-400">A resposta é sim, queremos criar um ecossistema de
               comunidades de desenvolvedores na Amazonia. Dessa forma, não queremos apenas evangelizar nosso querido
               Java, mas mostrar o quão grande é esse guarda-chuva, incluindo Linux, JavaScript, AWS e muito mais além da
               sopa de letrinhas com devOps,Full-stack, Front-end, Back-end, Hacker... Depende apenas de nós colaborarmos
@@ -786,4 +800,3 @@ <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-9
   </div>
 </section>
 <app-footer></app-footer>
-<!-- <script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script> -->

src/app/page/landing-page-inicio/landing-page-inicio.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnInit, output, Output } from '@angular/core';
 import { HeaderLandingPageComponent } from '../header-landing-page/header-landing-page.component';
 import { FooterComponent } from '../footer/footer.component';
 import { SliderEventComponent } from '../slider-event/slider-event.component';
@@ -72,4 +72,9 @@ export class LandingPageInicioComponent {
       behavior: 'smooth', // Rola suavemente
     });
   }
+   hideMenu: boolean = false;
+
+  updateHideMenu(newValue: boolean): void {
+    this.hideMenu = newValue;
+  }
 }

src/assets/1001fonts-jungle-ranger-eula.txt

@@ -0,0 +1,38 @@
+1001Fonts Free For Personal Use License (FFP)
+
+Preamble
+In this license, 'Jungle Ranger' refers to the given .zip file, which may contain one or numerous fonts. These fonts can be of any type (.ttf, .otf, ...) and together they form a 'font family' or in short a 'typeface'.
+
+1. Copyright
+Jungle Ranger is the intellectual property of its respective author, provided it is original, and is protected by copyright laws in many parts of the world.
+
+2. Personal Use
+Jungle Ranger may be downloaded and used free of charge for personal use, as long as the usage is not racist or illegal. Personal use refers to all usage that does not generate financial income in a business manner, for instance:
+
+ - personal scrapbooking for yourself
+ - recreational websites and blogs for friends and family
+ - prints such as flyers, posters, t-shirts for churches, charities, and non-profit organizations
+
+3. Commercial Use
+Commercial use is not allowed without prior written permission from the respective author. Please contact the author to ask for commercial licensing. Commercial use refers to usage in a business environment, including:
+
+ - business cards, logos, advertising, websites, mobile apps for companies
+ - t-shirts, books, apparel that will be sold for money
+ - flyers, posters for events that charge admission
+ - freelance graphic design work
+ - anything that will generate direct or indirect income
+
+4. Modification
+Jungle Ranger may not be modified, altered, adapted or built upon without written permission by its respective author. This pertains all files within the downloadable font zip-file.
+
+5. Conversion
+Jungle Ranger may be converted to other formats such as WOFF, SVG or EOT webfonts, as long as the font is not modified in any other way, such as changing names or altering individual glyphs.
+
+6. Distribution
+While Jungle Ranger may freely be copied and passed along to other individuals for private use as its original downloadable zip-file, it may not be sold or published without written permission by its respective author.
+
+7. Embedding
+Jungle Ranger may be embedded into an application such as a web- or mobile app, as long as the application is of personal use and does not distribute Jungle Ranger, such as offering it as a download.
+
+8. Disclaimer
+Jungle Ranger is offered 'as is' without any warranty. 1001fonts.com and the respective author of Jungle Ranger shall not be liable for any damage derived from using this typeface. By using Jungle Ranger you agree to the terms of this license.