ajuste

Author: Fabio Brasileiro

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

@@ -145,4 +145,5 @@ <h3 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">D
       </ul>
     </div>
   </div>
-</footer>
+  <div class="c-indicator bg-gray-200 dark:bg-gray-600"></div>
+</footer>

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

@@ -3,3 +3,5 @@
     display: none;
   }
 }
+
+

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

@@ -1,6 +1,7 @@
 h1 {
   font-family: jungle;
 }
+
 @keyframes bounce {
   0%,
   100% {

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

@@ -598,7 +598,7 @@ <h3 class="mb-4 text-2xl font-semibold">Starter</h3>
         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" (click)="isOpen1 = !isOpen1" [attr.aria-expanded]="isOpen1 ? 'true' : 'false'"
+          <!-- <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">
@@ -609,6 +609,19 @@ <h3 id="accordion-flush-heading-1">
                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                 clip-rule="evenodd"></path>
             </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"
+            data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
+            aria-controls="accordion-flush-body-2">
+            <span>Como posso participar ou ate contribuir?</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"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+            </svg>
           </button>
         </h3>
         <div id="accordion-flush-body-1" [ngClass]="{'hidden': !isOpen1}" class=""
@@ -773,4 +786,4 @@ <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> -->
+<!-- <script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script> -->

src/styles.css

@@ -4,8 +4,85 @@
 @tailwind utilities;
 
 .display-none {
-  @apply hidden
+  @apply hidden;
 }
+:root {
+  --scroll-height: 4px;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+img {
+  max-width: 100%;
+}
+/*
+section {
+  font-size: 1.5rem;
+  margin-inline: auto;
+  padding-block: var(--scroll-height);
+  width: min(60ch, 100%);
+} */
+
+img {
+  animation: reveal 1ms ease-in-out both;
+  animation-timeline: view();
+  animation-range: entry 25% cover 50%;
+}
+.c-indicator {
+  bottom: 0;
+  animation: scroll 1ms ease-in-out;
+  animation-timeline: scroll(root);
+  /* background-color: rgb(156 163 175); */
+  transform-origin: left;
+  height: var(--scroll-height);
+  inset: 0;
+  position: fixed;
+  z-index: 20;
+}
+@keyframes scroll {
+  from {
+    scale: 0 1;
+  }
+
+  to {
+    scale: 1 1;
+  }
+}
+
+/* .c-indicator {
+  margin-top: 50px;
+  animation: scroll 1ms ease-in-out;
+  animation-timeline: scroll(root);
+  background-color: rgb(221, 246, 204);
+  transform-origin: left;
+  height: var(--scroll-height);
+  inset: 0;
+  position: fixed;
+} */
+/* @keyframes scroll {
+  from {
+    scale: 0 1;
+  }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+  to {
+    scale: 1 1;
+  }
+} */
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+    clip-path: inset(45% 20% 45% 20%);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(0% 0% 0% 0%);
+  }
+}