wip supermenu

superpage/src/components/FAQ.jsx

@@ -5,7 +5,7 @@ import {
 } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
-export function Example() {
+export function FAQ() {
   return (
     <>
       <ListItem defaultOpen={false}>
@@ -95,7 +95,7 @@ export function ListButton({ children }) {
 
 export function ListPanel({ children }) {
   return (
-    <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">
+    <DisclosurePanel className="text-sm/6 space-y-2 px-5 pb-3">
       {children}
     </DisclosurePanel>
   )

superpage/src/components/Menu.jsx

@@ -0,0 +1,65 @@
+import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/solid'
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  PopoverBackdrop,
+  CloseButton,
+} from '@headlessui/react'
+import { Container } from './Container'
+
+export function Menu() {
+  return (
+    <Popover className="relative">
+      <PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded">
+        <div className="truncate max-lg:max-w-36">
+          NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
+        </div>
+        <ChevronDownIcon className="w-5 fill-black" />
+      </PopoverButton>
+
+      <PopoverPanel
+        anchor="bottom"
+        className="sticky z-20 -mt-11.5 w-full py-6 lg:py-24 bg-lime-400 rounded-b-2xl"
+      >
+        <Container className="text-black space-y-2.5 lg:space-y-6">
+          <div className="border-b border-black pb-2.5 lg:pb-6">
+            <span>Curso de formação</span>
+            <h1 className="text-2xl/8 lg:text-3xl">
+              NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
+            </h1>
+          </div>
+
+          <h6 className="font-semibold">
+            Conheça outros cursos da EDUSEG&reg;
+          </h6>
+
+          {/* <div class="flex gap-2.5">
+            <span class="bg-black text-white py-3 px-4 rounded font-semibold">
+              Cursos de formação
+            </span>
+            <span class="bg-black text-white py-3 px-4 rounded font-semibold">
+              Cursos de reciclagem
+            </span>
+          </div>
+
+          <h4>Formação</h4>
+          <ul>
+            <li>Lei Lucas</li>
+            <li>NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</li>
+            <li>NR-35 Trabalho em Altura</li>
+            <li>NR-10 Básico</li>
+            <li>LOTO Lockout Tagout</li>
+          </ul>
+
+          <h4>Reciclagem</h4>
+          <ul>
+            <li>NR-12 Máquinas e Equipamentos</li>
+            <li>NR-18 PEMT Plataforma Elevatória Móvel de Trabalho</li>
+          </ul> */}
+        </Container>
+      </PopoverPanel>
+      <PopoverBackdrop className="fixed z-10 inset-0" />
+    </Popover>
+  )
+}

superpage/src/components/Select.jsx

@@ -1,54 +0,0 @@
-import {
-  Combobox,
-  ComboboxButton,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
-import clsx from 'clsx'
-import { useState } from 'react'
-
-const people = [
-  { id: 1, name: '8 horas' },
-  { id: 2, name: '40 horas' },
-]
-
-export function Select() {
-  const [query, setQuery] = useState('')
-  const [selected, setSelected] = useState(people[1])
-
-  const filteredPeople =
-    query === ''
-      ? people
-      : people.filter((person) => {
-          return person.name.toLowerCase().includes(query.toLowerCase())
-        })
-
-  return (
-    <Combobox
-      value={selected}
-      onChange={(value) => setSelected(value)}
-      onClose={() => setQuery('')}
-    >
-      <div className="relative">
-        <ComboboxInput
-          displayValue={(person) => person?.name}
-          onChange={(event) => setQuery(event.target.value)}
-        />
-        <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
-          <ChevronDownIcon className="size-4 fill-white/60 group-data-[hover]:fill-white" />
-        </ComboboxButton>
-      </div>
-
-      <ComboboxOptions anchor="bottom" transition className="bg-black w-42">
-        {filteredPeople.map((person) => (
-          <ComboboxOption key={person.id} value={person}>
-            <CheckIcon className="invisible size-4 fill-white group-data-[selected]:visible" />
-            <div className="text-sm/6 text-white">{person.name}</div>
-          </ComboboxOption>
-        ))}
-      </ComboboxOptions>
-    </Combobox>
-  )
-}

superpage/src/layouts/Layout.astro

@@ -2,11 +2,8 @@
 import '../styles/app.css'
 import { Regular as Logo } from '@components/Logo'
 import { Container } from '@components/Container'
-import {
-  ArrowLeftStartOnRectangleIcon,
-  AcademicCapIcon,
-  ChevronDownIcon,
-} from '@heroicons/react/24/solid'
+import { Menu } from '@components/Menu'
+import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
 ---
 
 <!doctype html>
@@ -24,7 +21,10 @@ import {
       <Logo className="h-8" />
 
       <div class="ml-auto">
-        <a href="#" class="flex gap-1 items-center">
+        <a
+          href="//app.betaeducacao.com.br"
+          class="flex gap-1 items-center hover:outline rounded-xs"
+        >
           <ArrowLeftStartOnRectangleIcon className="w-5 rotate-180" />
           <>Entrar</>
         </a>
@@ -33,24 +33,13 @@ import {
 
     <section class="bg-lime-400 sticky top-0 z-10 py-3">
       <Container className="flex items-center">
-        <div
-          class="flex gap-1.5 lg:gap-3 items-center rounded hover:ring-2 ring-black"
-        >
-          <div class="flex gap-1.5">
-            <div class="text-black truncate max-lg:max-w-36 font-semibold">
-              NR-18 PEMT Plataforma Móvel de Trabalho Aéreo
-            </div>
-            <ChevronDownIcon className="w-5 fill-black" />
-          </div>
-        </div>
+        <Menu client:load />
 
-        <div class="ml-auto">
-          <button
-            class="bg-black font-semibold py-2.5 px-3 rounded-md cursor-pointer"
-          >
-            Contratar agora
-          </button>
-        </div>
+        <button
+          class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto"
+        >
+          Contratar agora
+        </button>
       </Container>
     </section>
 

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>