update superpage

superpage/src/components/Card.tsx

@@ -1,30 +1,30 @@
-import clsx from "clsx";
+import clsx from 'clsx'
 
 interface CardProps {
-  children: React.ReactNode;
-  color?: "gradient" | "darker" | "yellow" | "zinc";
-  className?: string | undefined;
+  children: React.ReactNode
+  color?: 'gradient' | 'darker' | 'yellow' | 'zinc'
+  className?: string | undefined
 }
 
-export function Card({ children, color = "gradient", className }: CardProps) {
+export function Card({ children, color = 'gradient', className }: CardProps) {
   const colorVariants = {
-    gradient: "bg-linear-to-tr from-green-secondary to-yellow-primary",
-    darker: "bg-green-primary text-white",
-    yellow: "text-green-primary bg-yellow-tertiary",
-    zinc: "text-white bg-zinc-900",
-  };
+    gradient: 'bg-linear-to-tr from-[#8CD366] via-[#C7D174] to-[#FFCF82]',
+    darker: 'bg-green-primary text-white',
+    yellow: 'text-green-primary bg-yellow-tertiary',
+    zinc: 'text-white bg-zinc-900',
+  }
 
   return (
     <div
       className={clsx(
-        "lg:rounded-2xl",
-        "lg:drop-shadow-sm",
-        "p-3 lg:p-12",
+        'lg:rounded-2xl',
+        'lg:drop-shadow-sm',
+        'p-3 lg:p-12',
         colorVariants[color],
         className,
       )}
     >
       {children}
     </div>
-  );
+  )
 }

superpage/src/components/Container.tsx

@@ -1,10 +1,14 @@
-import clsx from "clsx";
+import clsx from 'clsx'
 
 interface ContainerProps {
-  children: React.ReactNode;
-  className?: string | undefined;
+  children: React.ReactNode
+  className?: string | undefined
 }
 
 export function Container({ children, className }: ContainerProps) {
-  return <div className={clsx("max-w-7xl mx-auto", className)}>{children}</div>;
+  return (
+    <div className={clsx('max-w-7xl mx-auto max-lg:px-3', className)}>
+      {children}
+    </div>
+  )
 }

superpage/src/components/Form.tsx

@@ -1,33 +1,33 @@
-import { useForm } from "react-hook-form";
-import { useMutation } from "node_modules/@tanstack/react-query/build/legacy";
-import { queryClient } from "../queryClient";
-import axios from "axios";
-import { createElement } from "react";
-import clsx from "clsx";
+import { useForm } from 'react-hook-form'
+import { useMutation } from 'node_modules/@tanstack/react-query/build/legacy'
+import { queryClient } from '../queryClient'
+import axios from 'axios'
+import { createElement } from 'react'
+import clsx from 'clsx'
 
 interface IFormInput {
-  name: string;
-  email: string;
-  message: string;
+  name: string
+  email: string
+  message: string
 }
 
 export function Form() {
-  const { register, handleSubmit, reset, formState } = useForm<IFormInput>();
+  const { register, handleSubmit, reset, formState } = useForm<IFormInput>()
   const { mutateAsync } = useMutation(
     {
       mutationFn: async (data: IFormInput) => {
-        return await axios.post("https://n8n.sergio.run/webhook/eduseg", data);
+        return await axios.post('https://n8n.sergio.run/webhook/eduseg', data)
       },
       onSuccess: () => {
-        reset();
+        reset()
       },
     },
     queryClient,
-  );
+  )
 
   const onSubmit = async (data: IFormInput) => {
-    await mutateAsync(data);
-  };
+    await mutateAsync(data)
+  }
 
   return (
     <form
@@ -41,17 +41,17 @@ export function Form() {
       <div className="grid lg:grid-cols-2 gap-3 lg:gap-6">
         <label>
           Nome
-          <Input {...register("name")} />
+          <Input {...register('name')} />
         </label>
         <label>
           Email
-          <Input {...register("email")} />
+          <Input {...register('email')} />
         </label>
       </div>
 
       <label>
         Mensagem
-        <Input as="textarea" className="h-26" {...register("message")} />
+        <Input as="textarea" className="h-26" {...register('message')} />
       </label>
 
       <button
@@ -61,20 +61,20 @@ export function Form() {
         Quero um orçamento
       </button>
     </form>
-  );
+  )
 }
 
 interface IInput extends React.HTMLAttributes<HTMLElement> {
-  as?: string;
-  className?: string | undefined;
+  as?: string
+  className?: string | undefined
 }
 
-export function Input({ as = "input", className, ...props }: IInput) {
+export function Input({ as = 'input', className, ...props }: IInput) {
   return createElement(as, {
     className: clsx(
-      "border border-transparent focus:border-green-secondary focus:ring ring-green-secondary text-white bg-black p-3 rounded-lg w-full outline-none",
+      'border border-transparent focus:border-green-secondary focus:ring ring-green-secondary text-white bg-black p-3 rounded-lg w-full outline-none',
       className,
     ),
     ...props,
-  });
+  })
 }

superpage/src/components/List.jsx

@@ -0,0 +1,102 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
+
+export function Example() {
+  return (
+    <>
+      <ListItem defaultOpen={false}>
+        <ListButton>1. Introdução</ListButton>
+        <ListPanel>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+            amet neque id libero semper vulputate a ut ex. Pellentesque semper
+            ultrices mi in efficitur.
+          </p>
+          <p>
+            Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+            commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+            Integer malesuada bibendum ante, sed consequat augue convallis et.
+          </p>
+        </ListPanel>
+      </ListItem>
+      <ListItem>
+        <ListButton>2. Aspectos gerais dos primeiros socorros</ListButton>
+        <ListPanel>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+            amet neque id libero semper vulputate a ut ex. Pellentesque semper
+            ultrices mi in efficitur.
+          </p>
+          <p>
+            Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+            commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+            Integer malesuada bibendum ante, sed consequat augue convallis et.
+          </p>
+        </ListPanel>
+      </ListItem>
+      <ListItem>
+        <ListButton>3. Sinais vitais e avaliação primária</ListButton>
+        <ListPanel>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+            amet neque id libero semper vulputate a ut ex. Pellentesque semper
+            ultrices mi in efficitur.
+          </p>
+          <p>
+            Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+            commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+            Integer malesuada bibendum ante, sed consequat augue convallis et.
+          </p>
+        </ListPanel>
+      </ListItem>
+      <ListItem>
+        <ListButton>4. Parada cardiorrespiratória</ListButton>
+        <ListPanel>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+            amet neque id libero semper vulputate a ut ex. Pellentesque semper
+            ultrices mi in efficitur.
+          </p>
+          <p>
+            Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+            commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+            Integer malesuada bibendum ante, sed consequat augue convallis et.
+          </p>
+        </ListPanel>
+      </ListItem>
+    </>
+  )
+}
+
+export function ListItem({ children, ...props }) {
+  return (
+    <Disclosure
+      as="div"
+      className="bg-white/10 rounded-lg w-full data-open:bg-white/15"
+      {...props}
+    >
+      {children}
+    </Disclosure>
+  )
+}
+
+export function ListButton({ children }) {
+  return (
+    <DisclosureButton className="group flex items-center justify-between w-full px-5 py-3 cursor-pointer">
+      <span className="text-left">{children}</span>
+      <ChevronDownIcon className="size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180" />
+    </DisclosureButton>
+  )
+}
+
+export function ListPanel({ children }) {
+  return (
+    <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">
+      {children}
+    </DisclosurePanel>
+  )
+}

superpage/src/components/Logo.jsx

@@ -60,7 +60,7 @@ export function Regular(props) {
         </g>
       </g>
     </svg>
-  );
+  )
 }
 
 export function Smallest(props) {
@@ -95,5 +95,5 @@ export function Smallest(props) {
         </g>
       </g>
     </svg>
-  );
+  )
 }

superpage/src/components/Select.jsx

@@ -4,32 +4,32 @@ import {
   ComboboxInput,
   ComboboxOption,
   ComboboxOptions,
-} from "@headlessui/react";
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
-import clsx from "clsx";
-import { useState } from "react";
+} 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" },
-];
+  { id: 1, name: '8 horas' },
+  { id: 2, name: '40 horas' },
+]
 
 export function Select() {
-  const [query, setQuery] = useState("");
-  const [selected, setSelected] = useState(people[1]);
+  const [query, setQuery] = useState('')
+  const [selected, setSelected] = useState(people[1])
 
   const filteredPeople =
-    query === ""
+    query === ''
       ? people
       : people.filter((person) => {
-          return person.name.toLowerCase().includes(query.toLowerCase());
-        });
+          return person.name.toLowerCase().includes(query.toLowerCase())
+        })
 
   return (
     <Combobox
       value={selected}
       onChange={(value) => setSelected(value)}
-      onClose={() => setQuery("")}
+      onClose={() => setQuery('')}
     >
       <div className="relative">
         <ComboboxInput
@@ -50,5 +50,5 @@ export function Select() {
         ))}
       </ComboboxOptions>
     </Combobox>
-  );
+  )
 }