deixando dinamico o faq

Author: Fabio Brasileiro

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

@@ -1,7 +1,7 @@
 <!-- End block -->
 <footer class="bg-white dark:bg-gray-800">
   <div class="max-w-screen-xl p-4 py-6 mx-auto lg:py-16 md:p-8 lg:p-10">
-    <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
+    <!-- <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
       <div>
         <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h3>
         <ul class="text-gray-500 dark:text-gray-400">
@@ -84,7 +84,7 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
           </li>
         </ul>
       </div>
-    </div>
+    </div> -->
     <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
     <div class="text-center">
       <a href="#" class="flex items-center justify-center mb-5 text-2xl font-semibold text-gray-900 dark:text-white">

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

@@ -575,16 +575,17 @@ <h3 class="mb-4 text-2xl font-semibold">Starter</h3>
   <div class="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-24 lg:px-6 ">
     <h2
       class="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">
-      Frequently asked questions</h2>
+      Perguntas frequentes</h2>
     <div class="max-w-screen-md mx-auto">
       <div id="accordion-flush" data-accordion="collapse"
         data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
         data-inactive-classes="text-gray-500 dark:text-gray-400">
         <h3 id="accordion-flush-heading-1">
-          <button type="button"
-            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-900 bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-            data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
-            <span>Can I use Landwind in open-source projects?</span>
+          <button type="button" (click)="isOpen1 = !isOpen1" [attr.aria-expanded]="isOpen1 ? 'true' : 'false'"
+            class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-900 bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
+            [ngClass]="{'dark:text-gray-50': isOpen1}" data-accordion-target="#accordion-flush-body-1"
+            aria-expanded="true" aria-controls="accordion-flush-body-1">
+            <span>Como posso participar ou ate contribuir?</span>
             <svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd"
@@ -593,21 +594,20 @@ <h3 id="accordion-flush-heading-1">
             </svg>
           </button>
         </h3>
-        <div id="accordion-flush-body-1" class="" aria-labelledby="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">Landwind is an open-source library of interactive
-              components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="#"
-                class="text-purple-600 dark:text-purple-500 hover:underline">get started</a> and start developing
-              websites even faster with components on top of Tailwind CSS.</p>
+            <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>
           </div>
         </div>
         <h3 id="accordion-flush-heading-2">
-          <button type="button"
+          <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"
             data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
             aria-controls="accordion-flush-body-2">
-            <span>Is there a Figma file available?</span>
+            <span>Quanto vai ter eventos, aulas ou palestra?</span>
             <svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd"
@@ -616,21 +616,19 @@ <h3 id="accordion-flush-heading-2">
             </svg>
           </button>
         </h3>
-        <div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
+        <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">Landwind is first conceptualized and designed using the
-              Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="#"
-                class="text-purple-600 dark:text-purple-500 hover:underline">Figma design system</a> based on the
-              utility classes from Tailwind CSS and components from Landwind.</p>
+            <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>
           </div>
         </div>
         <h3 id="accordion-flush-heading-3">
-          <button type="button"
+          <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"
             data-accordion-target="#accordion-flush-body-3" aria-expanded="false"
             aria-controls="accordion-flush-body-3">
-            <span>What are the differences between Landwind and Tailwind UI?</span>
+            <span>Pensamos em expandir a comunidade?</span>
             <svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd"
@@ -639,23 +637,26 @@ <h3 id="accordion-flush-heading-3">
             </svg>
           </button>
         </h3>
-        <div id="accordion-flush-body-3" class="hidden" aria-labelledby="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">The main difference is that the core components from
-              Landwind are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference
-              is that Landwind relies on smaller and standalone components, whereas Tailwind UI offers sections of
-              pages.</p>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Landwind,
+            <p class="mb-2 text-gray-500 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
+              mais e estarmos aptos para aprender e nos desenvolver. Afinal, uma comunidade não é comunidade se não
+              pensar em seu próprio bando.</p>
+            <!-- <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Landwind,
               Landwind Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two
               worlds.</p>
             <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
             <ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
               <li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Landwind Pro</a></li>
               <li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Tailwind UI</a></li>
-            </ul>
+            </ul> -->
           </div>
         </div>
-        <h3 id="accordion-flush-heading-4">
+        <!-- <h3 id="accordion-flush-heading-4">
           <button type="button"
             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"
             data-accordion-target="#accordion-flush-body-4" aria-expanded="false"
@@ -684,7 +685,7 @@ <h3 id="accordion-flush-heading-4">
               <li><a href="#" class="text-purple-600 dark:text-purple-500 hover:underline">Tailwind UI</a></li>
             </ul>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -712,7 +713,16 @@ <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-9
           </svg> -->
           <!-- <img class="me-3 w-7 h-7" src="../../../assets/discord-icon-svgrepo-com.svg" alt=""> -->
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
-            class="me-3 w-7 h-7 bi bi-discord" viewBox="0 0 16 16">
+            class=" me-3 w-7 h-7 bi bi-discord" style="animation: spin 2.5s linear infinite;
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}" 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" />
           </svg>
@@ -732,7 +742,7 @@ <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-9
           <!-- <img  class="me-3 w-7 h-7" src="../../../assets/whatsapp-svgrepo-com.svg" alt=""> -->
           <!-- <fa name="cog" animation="spin"></fa> -->
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
-            class="bi bi-whatsapp me-3 w-7 h-7" viewBox="0 0 16 16">
+            class="bi bi-whatsapp me-3 w-7 h-7 animate-bounce" viewBox="0 0 16 16">
             <path
               d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
           </svg>

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

@@ -4,6 +4,8 @@ import { FooterComponent } from '../footer/footer.component';
 import { SliderEventComponent } from '../slider-event/slider-event.component';
 import { AngularFontAwesomeModule } from 'angular-font-awesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { FormsModule } from '@angular/forms';
+import { NgClass } from '@angular/common';
 
 // import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@@ -15,8 +17,30 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     FooterComponent,
     SliderEventComponent,
     FontAwesomeModule,
+    FormsModule,
+    NgClass
   ],
   templateUrl: './landing-page-inicio.component.html',
   styleUrl: './landing-page-inicio.component.css',
 })
-export class LandingPageInicioComponent {}
+export class LandingPageInicioComponent {
+  isOpen1 = false;
+  isOpen2 = false;
+  isOpen3 = false;
+
+  toggleAccordion(panel: number) {
+    switch (panel) {
+      case 1:
+        this.isOpen1 = !this.isOpen1;
+        break;
+      case 2:
+        this.isOpen2 = !this.isOpen2;
+        break;
+      case 3:
+        this.isOpen3 = !this.isOpen3;
+        break;
+      default:
+        break;
+    }
+  }
+}

src/app/page/slider-event/slider-event.component.html

@@ -104,7 +104,7 @@
   <div class="flex gap-4 max-sm:flex-col">
 
     <ng-container *ngFor="let card of cards.slice(currentIndex, currentIndex + 2); let i = index" class="">
-      <div class="max-w-sm m-auto w-full lg:max-w-full lg:flex ">
+      <div class="max-w-sm m-auto w-full lg:max-w-full lg:flex">
         <!-- <div
           class="h-48 lg:h-auto lg:w-60 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
           [style.backgroundImage]="'url(' + card.imgPath + ')'" title="Imagem">
@@ -121,11 +121,24 @@
           class="border-r border-b border-l border-gray-300 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white dark:bg-gray-900 rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
           <div class="mb-8 mt-1">
             <p class="text-sm text-gray-500 flex items-center">
-              <svg class="fill-current text-gray-400 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
+              <!-- <svg class="fill-current text-gray-400 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20">
                 <path
                   d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
-              </svg>
+              </svg> -->
+              @if(card.evento) {
+                <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-400 w-3 h-3 mr-2" width="16"
+                  height="16" fill="currentColor" class="bi bi-unlock" viewBox="0 0 20 20">
+                  <path
+                    d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2M3 8a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1z" />
+                </svg>
+              } @else {
+                <svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-gray-400 w-3 h-3 mr-2"  width="16" height="16" fill="currentColor" class="bi bi-lock"
+                  viewBox="0 0 20 20">
+                  <path
+                    d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2M5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1" />
+                </svg>
+              }
               {{ card.typeMembro }}
             </p>
             <a target="_blank " href="{{card.link}}" style="display: block;">

src/app/page/slider-event/slider-event.component.ts

@@ -22,7 +22,8 @@ export class SliderEventComponent {
   @Input() cards: any[] = [
       {
       id: 1,
-      typeMembro: 'Members only',
+      evento: true,
+      typeMembro: 'Ja acontedeu',
       Title: '1Can coffee make you a better developer?',
       desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
       imgPath: '../../../assets/encontro.jpeg',
@@ -33,7 +34,8 @@ export class SliderEventComponent {
     },
     {
       id: 2,
-      typeMembro: 'Members only',
+      evento: true,
+      typeMembro: 'Ja aconteceu',
       Title: '2Can coffee make you a better developer?',
       desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
       imgPath: '../../../assets/encontro2.jpeg',
@@ -43,7 +45,8 @@ export class SliderEventComponent {
     },
     {
       id: 3,
-      typeMembro: 'Members only',
+      evento: false,
+      typeMembro: 'Vai acontecer',
       Title: '3Can coffee make you a better developer?',
       desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
       imgPath: '../../../assets/event-java.jpeg',
@@ -53,7 +56,8 @@ export class SliderEventComponent {
     },
     {
       id:4,
-      typeMembro: 'Members only',
+      evento: false,
+      typeMembro: 'Vai acontecer',
       Title: '4Can coffee make you a better developer?',
       desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
       imgPath: '../../../assets/linux.jpeg',
@@ -68,9 +72,9 @@ export class SliderEventComponent {
 
   onNavigate(direction: string) {
     if (direction === 'next' && this.currentIndex < this.cards.length - 1) {
-      this.currentIndex++;
+      this.currentIndex+= 2 ;
     } else if (direction === 'prev' && this.currentIndex > 0) {
-      this.currentIndex--;
+      this.currentIndex-= 2;
     }
     this.navigate.emit(direction);
   }