menu

superpage/src/components/Bookmark.jsx

@@ -8,7 +8,7 @@ export function Bookmark(props) {
     >
       <path
         d="M347.855 489.218L191.347 418.671C187.077 415.933 181.603 415.933 177.278 418.671L20.7705 489.218C12.0665 494.75 0.680176 488.506 0.680176 478.209V13.0816C0.734918 5.85162 6.59233 -0.0090332 13.8183 -0.0090332H354.917C362.143 -0.0090332 368 5.85162 368 13.0816V478.209C368 488.506 356.614 494.75 347.91 489.218H347.855Z"
-        fill="url(#paint0_linear_1145_4906)"
+        // fill="url(#paint0_linear_1145_4906)"
       />
       <defs>
         <linearGradient
@@ -25,5 +25,5 @@ export function Bookmark(props) {
         </linearGradient>
       </defs>
     </svg>
-  );
+  )
 }

superpage/src/components/Container.tsx

@@ -7,7 +7,7 @@ interface ContainerProps {
 
 export function Container({ children, className }: ContainerProps) {
   return (
-    <div className={clsx('max-w-7xl mx-auto max-lg:px-3', className)}>
+    <div className={clsx('max-w-7xl mx-auto max-2xl:px-3', className)}>
       {children}
     </div>
   )

superpage/src/components/Menu.jsx

@@ -1,5 +1,8 @@
-import { ChevronDownIcon } from '@heroicons/react/24/solid'
-import { clsx } from 'clsx'
+import {
+  ChevronDownIcon,
+  XMarkIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/solid'
 import {
   Popover,
   PopoverButton,
@@ -8,16 +11,16 @@ import {
   Field,
   Select,
   Label,
-  Description,
+  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
+      <PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded focus:outline-none">
+        <div className="truncate max-w-36 sm:max-w-72 md:max-w-124">
+          NR-18 PEMT Plataforma Móvel de Trabalho
         </div>
         <ChevronDownIcon className="w-5 fill-black" />
       </PopoverButton>
@@ -25,66 +28,73 @@ export function Menu() {
       <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"
+        className="sticky z-20 -mt-11.5 w-full py-6 2xl:py-24 bg-lime-400 rounded-b-2xl drop-shadow-sm transition duration-150 ease-linear data-[closed]:opacity-0"
+        transition
       >
-        <Container className="text-black">
+        <Container className="text-black relative xl:w-10/12 2xl:w-5xl">
+          <CloseButton
+            className="absolute bg-black -top-3.5 2xl:-top-20 right-2.5 2xl:right-0 text-white rounded-full p-px cursor-pointer"
+            title="Fechar"
+            aria-hiden={true}
+          >
+            <XMarkIcon className="size-3.5" />
+          </CloseButton>
+
           <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">
+            <h1 className="text-xl lg:text-2xl">
               NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
             </h1>
           </div>
 
           <div className="flex max-lg:flex-col lg:gap-2.5 justify-between mb-2.5">
-            <h6 className="font-semibold text-lg">
+            <h6 className="font-medium text-xl lg:text-2xl">
               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 className="flex max-lg:flex-col gap-0.5 lg:gap-4">
+              {/* Search */}
+              <label className="flex gap-1 items-center">
+                <span className="text-nowrap">Buscar por</span>
+                <div className="flex border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 focus-within:bg-white w-full transition duration-150">
+                  <input className="outline-none w-full" />
+                  <MagnifyingGlassIcon className="w-5" />
+                </div>
+              </label>
+              {/* Filter */}
+              <Field className="flex gap-1 items-center">
+                <Label className="text-nowrap">Exibir apenas</Label>
+                <div className="relative w-full lg:w-30">
+                  <Select className="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full">
+                    <option value="formacao">Formação</option>
+                    <option value="reciclagem">Reciclagem</option>
+                  </Select>
+                  <ChevronDownIcon
+                    className="absolute top-2.5 right-2.5 pointer-events-none size-4"
+                    aria-hidden="true"
+                  />
+                </div>
+              </Field>
+            </div>
           </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 className="list-disc list-inside font-medium *:*:hover:underline *:*:cursor-pointer max-lg:*:truncate">
+            <li>
+              <a hreg="#">Lei Lucas</a>
+            </li>
+            <li>
+              <a hreg="#">NR-18 PEMT Plataforma Móvel de Trabalho Aéreo</a>
+            </li>
+            <li>
+              <a hreg="#">NR-35 Trabalho em Altura</a>
+            </li>
+            <li>
+              <a hreg="#">NR-10 Básico</a>
+            </li>
+            <li>
+              <a hreg="#">LOTO Lockout Tagout</a>
+            </li>
           </ul>
-
-          {/* <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" />

superpage/src/components/Pulse.jsx

@@ -0,0 +1,253 @@
+export function Pulse(props) {
+  return (
+    <svg
+      viewBox="0 0 973 1080"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M473.832 562.531L449.083 551.386C448.408 550.953 447.542 550.953 446.859 551.386L422.11 562.531C420.733 563.405 418.933 562.419 418.933 560.792V487.309C418.941 486.167 419.868 485.241 421.01 485.241H474.949C476.092 485.241 477.018 486.167 477.018 487.309V560.792C477.018 562.419 475.217 563.405 473.841 562.531H473.832Z"
+        stroke="url(#paint0_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M492.032 593.277L449.863 574.287C448.713 573.55 447.238 573.55 446.073 574.287L403.904 593.277C401.559 594.766 398.491 593.086 398.491 590.314V465.11C398.506 463.164 400.084 461.586 402.031 461.586H493.935C495.882 461.586 497.46 463.164 497.46 465.11V590.314C497.46 593.086 494.392 594.766 492.047 593.277H492.032Z"
+        stroke="url(#paint1_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M511.592 628.14L450.701 600.719C449.04 599.654 446.91 599.654 445.228 600.719L384.337 628.14C380.951 630.29 376.521 627.863 376.521 623.86V443.069C376.542 440.259 378.821 437.981 381.632 437.981H514.34C517.151 437.981 519.43 440.259 519.43 443.069V623.86C519.43 627.863 515 630.29 511.613 628.14H511.592Z"
+        stroke="url(#paint2_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M536.741 684.081L451.779 645.82C449.461 644.335 446.489 644.335 444.142 645.82L359.18 684.081C354.455 687.082 348.274 683.695 348.274 678.11V418.448C348.303 414.527 351.483 411.348 355.406 411.348H447.99H540.574C544.497 411.348 547.677 414.527 547.677 418.448V678.11C547.677 683.695 541.496 687.082 536.771 684.081H536.741Z"
+        stroke="url(#paint3_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M564.722 729.385L452.978 679.063C449.93 677.109 446.021 677.109 442.933 679.063L331.19 729.385C324.975 733.331 316.845 728.877 316.845 721.532V389.752C316.885 384.595 321.067 380.414 326.226 380.414H569.764C574.923 380.414 579.105 384.595 579.105 389.752V721.532C579.105 728.877 570.976 733.331 564.761 729.385H564.722Z"
+        stroke="url(#paint4_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M593.093 771.607L454.194 709.057C450.404 706.629 445.546 706.629 441.708 709.057L302.809 771.607C295.085 776.512 284.979 770.976 284.979 761.846V349.44C285.028 343.03 290.226 337.834 296.639 337.834H599.36C605.773 337.834 610.971 343.03 610.971 349.44V761.846C610.971 770.976 600.866 776.512 593.141 771.607H593.093Z"
+        stroke="url(#paint5_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M623.352 824.278L455.491 748.685C450.911 745.75 445.04 745.75 440.401 748.685L272.54 824.278C263.204 830.206 250.992 823.515 250.992 812.481V314.082C251.051 306.335 257.333 300.055 265.083 300.055H630.926C638.676 300.055 644.959 306.335 644.959 314.082V812.481C644.959 823.515 632.746 830.206 623.411 824.278H623.352Z"
+        stroke="url(#paint6_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M654.35 873.823L456.819 784.868C451.43 781.415 444.521 781.415 439.063 784.868L241.532 873.823C230.546 880.798 216.175 872.925 216.175 859.941V273.45C216.245 264.333 223.637 256.944 232.757 256.944H663.262C672.382 256.944 679.775 264.333 679.775 273.45V859.941C679.775 872.925 665.404 880.798 654.419 873.823H654.35Z"
+        stroke="url(#paint7_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M682.916 921.114L458.043 819.846C451.908 815.915 444.043 815.915 437.829 819.846L212.956 921.114C200.45 929.055 184.09 920.092 184.09 905.31V237.637C184.168 227.259 192.584 218.846 202.967 218.846H693.063C703.445 218.846 711.861 227.259 711.861 237.637V905.31C711.861 920.092 695.501 929.055 682.995 921.114H682.916Z"
+        stroke="url(#paint8_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M713.306 972.068L459.345 857.702C452.417 853.262 443.534 853.262 436.517 857.702L182.556 972.068C168.432 981.036 149.956 970.914 149.956 954.221V200.184C150.045 188.463 159.55 178.962 171.275 178.962H724.765C736.49 178.962 745.995 188.463 745.995 200.184V954.221C745.995 970.914 727.518 981.036 713.395 972.068H713.306Z"
+        stroke="url(#paint9_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M748.558 1032.04L460.856 902.478C453.007 897.448 442.944 897.448 434.994 902.478L147.292 1032.04C131.292 1042.2 110.361 1030.73 110.361 1011.82V157.602C110.462 144.324 121.229 133.561 134.512 133.561H761.539C774.822 133.561 785.59 144.324 785.59 157.602V1011.82C785.59 1030.73 764.659 1042.2 748.658 1032.04H748.558Z"
+        stroke="url(#paint10_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M785.576 1097.37L462.442 951.851C453.626 946.202 442.324 946.202 433.395 951.851L110.261 1097.37C92.2904 1108.78 68.7815 1095.9 68.7815 1074.66V115.239C68.8945 100.325 80.9881 88.2367 95.9072 88.2367H800.156C815.076 88.2367 827.169 100.325 827.169 115.239V1074.66C827.169 1095.9 803.66 1108.78 785.689 1097.37H785.576Z"
+        stroke="url(#paint11_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M822.953 1145.33L464.044 986.709C454.252 980.552 441.698 980.552 431.781 986.709L72.872 1145.33C52.9117 1157.76 26.8001 1143.72 26.8001 1120.57V74.7882C26.9256 58.5325 40.358 45.3555 56.9289 45.3555H839.147C855.718 45.3555 869.151 58.5325 869.151 74.7882V1120.57C869.151 1143.72 843.039 1157.76 823.079 1145.33H822.953Z"
+        stroke="url(#paint12_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M864.495 1211.56L465.824 1036.52C454.948 1029.73 441.003 1029.73 429.987 1036.52L31.3159 1211.56C9.14429 1225.28 -19.8601 1209.79 -19.8601 1184.24V30.2317C-19.7207 12.2937 -4.80012 -2.24695 13.6065 -2.24695H882.484C900.89 -2.24695 915.811 12.2937 915.811 30.2317V1184.24C915.811 1209.79 886.806 1225.28 864.635 1211.56H864.495Z"
+        stroke="url(#paint13_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <path
+        d="M910.925 1278.92L467.814 1084.38C455.725 1076.83 440.226 1076.83 427.982 1084.38L-15.1291 1278.92C-39.7722 1294.18 -72.0098 1276.96 -72.0098 1248.56V-34.0846C-71.8548 -54.0221 -55.271 -70.1836 -34.8126 -70.1836H930.918C951.377 -70.1836 967.96 -54.0221 967.96 -34.0846V1248.56C967.96 1276.96 935.723 1294.18 911.08 1278.92H910.925Z"
+        stroke="url(#paint14_radial_1259_3894)"
+        stroke-width="10"
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint1_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint2_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint3_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint4_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint5_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint6_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint7_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint8_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint9_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint10_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint11_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint12_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint13_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+        <radialGradient
+          id="paint14_radial_1259_3894"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
+        >
+          <stop stop-color="#8CD366" />
+          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
+        </radialGradient>
+      </defs>
+    </svg>
+  )
+}

superpage/src/layouts/Layout.astro

@@ -36,7 +36,7 @@ import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
         <Menu client:load />
 
         <button
-          class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto"
+          class="bg-black hover:bg-white hover:text-black font-semibold py-2.5 px-3 rounded-md cursor-pointer ml-auto transition duration-150"
         >
           Contratar agora
         </button>

superpage/src/pages/index.astro

@@ -56,13 +56,14 @@ import homemdenegocios from '../assets/homem-de-negocios.png'
         >
           <a
             href="#"
-            class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center"
+            class="text-black font-semibold bg-lime-400 rounded p-3.5 hover:bg-white max-lg:text-center transition duration-150"
           >
             Contratar agora
           </a>
           <a
             href="http://bit.ly/3RlROu6"
             class="flex flex-col hover:outline rounded outline-offset-3"
+            target="_blank"
           >
             <div class="flex items-center gap-1">
               <span class="font-bold">4.7</span>
@@ -128,10 +129,10 @@ import homemdenegocios from '../assets/homem-de-negocios.png'
               Ágilidade na liberação de cursos
             </li>
             <li class="bg-white/10 p-5 rounded-lg">
-              Agendamento da liberação de cursos
+              Agendamento para liberação de cursos
             </li>
             <li class="bg-white/10 p-5 rounded-lg">
-              Aviso de vencimento de certificados
+              Aviso de vencimento para certificados
             </li>
           </ul>