ajuste

Author: Fabio Brasileiro

angular.json

@@ -21,11 +21,9 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css",
-              "node_modules/aos/dist/aos.css"
+              "src/styles.css"
             ],
             "scripts": [
-              "node_modules/aos/dist/aos.js"
             ]
           },
           "configurations": {
@@ -78,11 +76,9 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css",
-              "node_modules/aos/dist/aos.css"
+              "src/styles.css"
             ],
             "scripts": [
-              "node_modules/aos/dist/aos.js"
             ]
           }
         }

package-lock.json

@@ -21,11 +21,8 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "@fortawesome/angular-fontawesome": "^0.14.1",
-    "@types/aos": "^3.0.7",
     "angular-font-awesome": "^3.1.2",
-    "aos": "^2.3.4",
     "rxjs": "~7.8.0",
-    "taos": "^1.0.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

package.json

@@ -4,5 +4,6 @@ import { NotFoundComponent } from './not-found/not-found.component';
 
 export const routes: Routes = [
   {path: '', component: LandingPageInicioComponent},
+  // {path: 'porqueJava',component:}
   {path: '**', component:NotFoundComponent }
 ];

src/app/app.routes.ts

@@ -92,8 +92,8 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
         Java Amazonas
       </a>
       <span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2024-2025 Jugle™. All Rights
-        Reserved. Built with <a href="#" class="text-purple-600 hover:underline dark:text-purple-500">Jugle</a> and <a
-          href="#" class="text-purple-600 hover:underline dark:text-purple-500">Amazonas</a>.
+        Reserved. Built with <a href="#" class="text-green-600 hover:underline dark:text-green-500">Jugle</a> and <a
+          href="#" class="text-green-600 hover:underline dark:text-green-500">Amazonas</a>.
       </span>
       <ul class="flex justify-center mt-5 space-x-5">
         <!-- <li>
@@ -106,7 +106,8 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
           </a>
         </li> -->
         <li>
-          <a href="https://www.instagram.com/javaamazonas" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
+          <a href="https://www.instagram.com/javaamazonas"
+            class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path fill-rule="evenodd"
                 d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
@@ -123,7 +124,8 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
           </a>
         </li> -->
         <li>
-          <a href="https://github.com/JavaAmazonas/" target="_blank" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
+          <a href="https://github.com/JavaAmazonas/" target="_blank"
+            class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path fill-rule="evenodd"
                 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
@@ -143,4 +145,4 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
       </ul>
     </div>
   </div>
-</footer>
+</footer>

src/app/page/footer/footer.component.html

@@ -1,4 +1,4 @@
-<header class="fixed w-full backdrop-blur z-10" >
+<header class="fixed w-full backdrop-blur z-10">
   <nav class="bg-zinc-300 opacity-85 border-gray-200 py-2.5 dark:bg-gray-900">
     <div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 mx-auto">
       <a href="#" class="flex items-center">
@@ -13,7 +13,7 @@
         </div>
         <!-- <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-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-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-purple-600 dark:hover:bg-purple-700 focus:outline-none dark:focus:ring-purple-800">Download</a> -->
+          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"
           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">
@@ -33,31 +33,31 @@
       <div class="items-center justify-between hidden w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
         <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
           <li>
-            <a href="#"
-              class="block py-2 pl-3 pr-4 text-white bg-purple-700 rounded lg:bg-transparent lg:text-purple-700 lg:p-0 dark:text-white"
+            <a (click)="inicio()"
+              class="block cursor-pointer py-2 pl-3 pr-4 text-white bg-green-700 rounded lg:bg-transparent lg:text-green-700 lg:p-0 dark:text-white"
               aria-current="page">Início</a>
           </li>
           <li>
-            <a href="#"
-              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Por
+            <a (click)="porqueJava()" routerLinkActive="dark:text-white"
+              class="block cursor-pointer py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Por
               que Java?</a>
           </li>
           <li>
-            <a href="#"
-              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Sobre
+            <a (click)="sobre()"
+              class="block cursor-pointer py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Sobre
               a comunidade</a>
           </li>
           <li>
-            <a href="#"
-              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Eventos</a>
+            <a (click)="evento()"
+              class="block cursor-pointer py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Eventos</a>
           </li>
           <li>
-            <a href="#"
-              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contato</a>
+            <a (click)="contato()"
+              class="block py-2 cursor-pointer pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contato</a>
           </li>
           <!-- <li>
             <a href="#"
-              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-purple-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
+              class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 lg:hover:text-green-700 lg:p-0 dark:text-gray-400 lg:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
           </li> -->
         </ul>
       </div>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/button-toggle-dark-light.component';
 
 @Component({
@@ -9,5 +9,21 @@ import { ButtonToggleDarkLightComponent } from '../button-toggle-dark-light/butt
   styleUrl: './header-landing-page.component.css',
 })
 export class HeaderLandingPageComponent {
-
+  inicio() {
+    document.getElementById('inicio')?.scrollIntoView({ behavior: 'smooth' });
+  }
+  porqueJava() {
+    document
+      .getElementById('porqueJava')
+      ?.scrollIntoView({ behavior: 'smooth' });
+  }
+  sobre() {
+    document.getElementById('sobre')?.scrollIntoView({ behavior: 'smooth' });
+  }
+  evento() {
+    document.getElementById('evento')?.scrollIntoView({ behavior: 'smooth' });
+  }
+  contato() {
+    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
+  }
 }

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

@@ -1,6 +1,6 @@
 <app-header-landing-page></app-header-landing-page>
 <!-- Start block -->
-<section class="bg-zinc-300 dark:bg-gray-900">
+<section class="bg-zinc-300 dark:bg-gray-900" id="inicio">
   <div class="grid max-w-screen-xl px-4 pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28">
     <div class="mr-auto place-self-center lg:col-span-7">
       <p class=" font-light text-zinc-600 dark:text-gray-500">Alô programador (a) Java! Conheça a</p>
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
-      <img class="floating" src="../assets/java-jugle-comunidade.png" alt="hero image" height="">
+      <img class="floating" src="../assets/java-jugle-comunidade (1).png" alt="hero image" height="">
     </div>
   </div>
 </section>
@@ -179,12 +179,12 @@
 <!-- End block -->
 <!-- Start block -->
 <section class="bg-zinc-200 dark:bg-gray-800">
-  <div>
+  <div id="porqueJava">
     <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
       <!-- Row -->
       <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
         <div class="text-zinc-600 sm:text-lg dark:text-gray-400">
-          <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Por que aprender Java?
+          <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white" >Por que aprender Java?
           </h2>
           <p class="mb-8 font-light lg:text-xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta
             repellendus soluta sed non iusto, dolores, vel aliquid perspiciatis nulla animi dolorem dignissimos
@@ -309,7 +309,7 @@ <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-w
 </section>
 <!-- End block -->
 <!-- Start block -->
-<section class="bg-zinc-300 dark:bg-gray-900">
+<section class="bg-zinc-300 dark:bg-gray-900" id="sobre">
   <div
     class="items-center max-w-screen-xl px-4 py-8 mx-auto lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-24 lg:px-6">
     <div class="col-span-2 mb-8">
@@ -327,7 +327,7 @@ <h2 class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:tex
       <div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
         <div>
           <a href="https://dev.java/community/jugs/" target="_blank"
-            class="inline-flex items-center text-base font-medium text-purple-600 hover:text-green-800 dark:text-green-500 dark:hover:text-purple-700">
+            class="inline-flex items-center text-base font-medium text-green-600 hover:text-green-800 dark:text-green-500 dark:hover:text-green-700">
             Site do java
             <svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd"
@@ -475,7 +475,7 @@ <h3 class="text-2xl font-bold text-md mb-6">Compartilhamento</h3>
 <!-- End block -->
 <!-- Start block -->
 
-<section class="bg-zinc-200 dark:bg-gray-800">
+<section class="bg-zinc-200 dark:bg-gray-800" id="evento">
   <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-24 lg:px-6">
     <div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
       <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Eventos</h2>
@@ -680,7 +680,7 @@ <h3 id="accordion-flush-heading-3">
 </section>
 <!-- End block -->
 <!-- Start block -->
-<section class="bg-zinc-200 dark:bg-gray-800">
+<section class="bg-zinc-200 dark:bg-gray-800" id="contato">
   <div class="max-w-screen-xl px-4 pt-8 mx-auto lg:pt-16 lg:px-6">
     <div class="max-w-screen-sm mx-auto text-center">
       <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white">Contato</h2>