wip supermenu

superpage/src/pages/index.astro

@@ -1,10 +1,10 @@
 ---
-import { Image } from 'astro:assets'
+import Layout from '@layouts/Layout.astro'
+import { Picture } from 'astro:assets'
 import { Card } from '@components/Card'
 import { Container } from '@components/Container'
 import { Form } from '@components/Form'
-import Layout from '@layouts/Layout.astro'
-import { Example } from '@components/List'
+import { FAQ } from '@components/FAQ'
 import {
   AcademicCapIcon,
   GlobeAmericasIcon,
@@ -21,15 +21,16 @@ import homemdenegocios from './homem-de-negocios.png'
 
 <Layout>
   <Container className="py-3 lg:py-12 lg:flex items-center gap-5">
-    <Image
+    <Picture
       src={nr18plataforma}
       alt="NR-18"
-      class="size-1/3 object-bottom hidden lg:block"
+      formats={['webp']}
+      class="hidden lg:block"
     />
     <section>
       <div class="space-y-5">
         <span class="font-medium">Curso de formação</span>
-        <h1 class="font-semibold text-5xl lg:text-7xl">
+        <h1 class="font-semibold text-4xl lg:text-7xl">
           NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
         </h1>
         <p class="text-base/6">
@@ -59,7 +60,10 @@ import homemdenegocios from './homem-de-negocios.png'
           >
             Contratar agora
           </a>
-          <a href="http://bit.ly/3RlROu6" class="flex flex-col">
+          <a
+            href="http://bit.ly/3RlROu6"
+            class="flex flex-col hover:outline rounded outline-offset-3"
+          >
             <div class="flex items-center gap-1">
               <span class="font-bold">4.7</span>
               <ul class="flex">
@@ -89,17 +93,19 @@ import homemdenegocios from './homem-de-negocios.png'
   <Container className="h-full">
     <div class="border border-lime-400 rounded-2xl lg:grid grid-cols-3">
       <div
-        class="bg-lime-300 rounded-2xl p-6 relative h-[36rem] hidden lg:block"
+        class="bg-linear-to-tr from-lime-400/50 to-lime-300 rounded-2xl p-6 relative h-136 hidden lg:block -m-px"
       >
-        <Image
+        <Picture
           alt="Homem de negócios"
+          formats={['webp']}
           src={homemdenegocios}
-          class="absolute bottom-0 -left-32"
+          class="w-94 absolute bottom-0 -left-28"
         />
-        <Image
+        <Picture
           alt="Mulher de negócios"
+          formats={['webp']}
           src={mulherdenegocios}
-          class="absolute bottom-0 -right-26"
+          class="w-96 absolute bottom-0 -right-24"
         />
       </div>
       <div class="col-span-2 flex items-center">
@@ -109,25 +115,31 @@ import homemdenegocios from './homem-de-negocios.png'
           </h2>
           <p>
             Nós cuidamos da burocracia, oferecemos uma plataforma completa para
-            simplicar a gestão e capacitação em massa de seus colaboradores. Com
-            a EDUSEG&reg, sua empresa se beneficia de uma tecnologia eficiente e
-            confiável.
+            simplicar a gestão e capacitação em larga escala de seus
+            colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma
+            tecnologia eficiente e confiável.
           </p>
 
           <ul class="grid grid-cols-2 gap-2.5">
             <li class="bg-white/10 p-5 rounded-lg">
-              Conformidade legal garantida
+              Centralização de todos os certificados
             </li>
             <li class="bg-white/10 p-5 rounded-lg">
-              Economia de tempo e recursos
+              Ágilidade na liberação de cursos
             </li>
             <li class="bg-white/10 p-5 rounded-lg">
-              Relatórios e monitoramento
+              Agendamento da liberação de cursos
             </li>
             <li class="bg-white/10 p-5 rounded-lg">
-              Suporte especializado para gestores
+              Aviso de vencimento de certificados
             </li>
           </ul>
+
+          <div class="text-center">
+            <a href="#" class="text-blue-400 underline hover:no-underline">
+              Agendar uma demonstração
+            </a>
+          </div>
         </div>
       </div>
     </div>
@@ -144,25 +156,23 @@ import homemdenegocios from './homem-de-negocios.png'
       </p>
     </div>
     <div class="lg:col-span-2 flex flex-col gap-1.5">
-      <Example client:load />
+      <FAQ client:load />
     </div>
   </Container>
 
-  <Container className="py-6 hidden">
-    <ul class="flex gap-2.5">
+  <!-- <Container className="py-6 hidden">
+    <ul class="flex gap-2.5 text-base/6">
       <li class="flex items-center gap-2.5">
         <span class="bg-white/10 p-2 rounded">
           <BanknotesIcon className="w-6" />
         </span>
-        <span class="text-base/5">Economize até 70% com o curso online</span>
+        <span>Economize até 70% com o curso online</span>
       </li>
       <li class="flex items-center gap-2.5">
         <span class="bg-white/10 p-2 rounded">
           <AcademicCapIcon className="w-6" />
         </span>
-        <span class="text-base/6"
-          >Certificado digital reconhecido em até 24 horas</span
-        >
+        <span>Certificado digital reconhecido em até 24 horas </span>
       </li>
       <li class="flex items-center gap-2.5">
         <span class="bg-white/10 p-2 rounded">
@@ -177,7 +187,7 @@ import homemdenegocios from './homem-de-negocios.png'
         <span>Suporte de especialistas sempre que precisar</span>
       </li>
     </ul>
-  </Container>
+  </Container> -->
 
   <Container className="hidden">
     <h2>Quem é o instrutor?</h2>