wip

superpage/src/components/Menu.jsx

@@ -1,10 +1,14 @@
-import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/solid'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
+import { clsx } from 'clsx'
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   PopoverBackdrop,
-  CloseButton,
+  Field,
+  Select,
+  Label,
+  Description,
 } from '@headlessui/react'
 import { Container } from './Container'
 
@@ -19,20 +23,44 @@ export function Menu() {
       </PopoverButton>
 
       <PopoverPanel
+        // static={true}
         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">
+        <Container className="text-black">
-          <div className="border-b border-black pb-2.5 lg:pb-6">
+          <div className="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
             <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">
+          <div className="flex max-lg:flex-col lg:gap-2.5 justify-between mb-2.5">
+            <h6 className="font-semibold text-lg">
               Conheça outros cursos da EDUSEG&reg;
             </h6>
+            <Field className="flex gap-1 items-center">
+              <Label>Exibir apenas</Label>
+              <div className="relative flex border items-center justify-between gap-0.5 border-black rounded px-1">
+                <Select className="appearance-none focus:outline-none">
+                  <option value="formacao">Formação</option>
+                  <option value="reciclagem">Reciclagem</option>
+                </Select>
+                <ChevronDownIcon
+                  className="pointer-events-none size-4"
+                  aria-hidden="true"
+                />
+              </div>
+            </Field>
+          </div>
+
+          <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>
 
           {/* <div class="flex gap-2.5">
             <span class="bg-black text-white py-3 px-4 rounded font-semibold">

superpage/src/pages/index.astro

@@ -14,9 +14,9 @@ import {
   ClockIcon,
 } from '@heroicons/react/24/outline'
 import { CheckBadgeIcon } from '@heroicons/react/24/solid'
-import nr18plataforma from './nr18-plataforma.png'
+import nr18plataforma from '../assets/nr18-plataforma.png'
-import mulherdenegocios from './mulher-de-negocios.png'
+import mulherdenegocios from '../assets/mulher-de-negocios.png'
-import homemdenegocios from './homem-de-negocios.png'
+import homemdenegocios from '../assets/homem-de-negocios.png'
 ---
 
 <Layout>