Feature/faq

.deco/blocks/Faq%20-%20default.json

@@ -1 +1,20 @@
-{"title":"FAQs","__resolveType":"site/sections/Faq.tsx"}
+{
+  "title": "FAQ",
+  "__resolveType": "site/sections/Faq.tsx",
+  "questions": [
+    {
+      "title": "O que é a tal tal tal?",
+      "answer": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>"
+    },
+    {
+      "title": "O que é a tal tal tal?",
+      "answer": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>"
+    },
+    {
+      "title": "O que é a tal tal tal?",
+      "answer": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>"
+    }
+  ],
+  "headline": "Perguntas Frequentes",
+  "description": "Caso a sua dúvida não tenha sido respondida nesta página, entre em contato com minha equipe de suporte através do e-mail "
+}

.deco/blocks/Footer.json

@@ -1 +1,8 @@
-{"__resolveType":"site/sections/Footer.tsx","links":[],"bottomLinks":[],"social":[],"subscribe":{}}
+{
+  "__resolveType": "site/sections/Footer.tsx",
+  "links": [],
+  "bottomLinks": [],
+  "social": [],
+  "subscribe": {},
+  "copyright": "2024 @ Todos os direitos reservados"
+}

.deco/blocks/Neutral.json

@@ -67,6 +67,7 @@
     "base-200": "#848484",
     "base-300": "#FEFCFE",
     "base-content": "#545454",
-    "primary-content": "#000000"
+    "primary-content": "#000000",
+    "secondary-content": "#DBDBDB"
   }
 }

.deco/blocks/pages-home-5afd25174424.json

@@ -42,43 +42,43 @@
       ]
     },
     {
-      "__resolveType": "website/sections/Rendering/Lazy.tsx",
-      "section": {
-        "__resolveType": "site/sections/ImageWithDescription.tsx",
-        "placement": "left",
-        "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d50888cb-263f-4cb4-b498-7e52bb90be1b/IMAGEM-2.svg",
-        "title": "Nossa solução é desenvolvida para operações de assistências extra-hospitalares que buscam tecnologia de ponta e um diferencial competitivo no mercado",
-        "description": "Se você quer otimizar a eficiência operacional e elevar a qualidade dos cuidados, estamos aqui para fazer a diferença ",
-        "cta": {
-          "text": "Agendar Reunião",
-          "href": "#"
-        }
+      "__resolveType": "site/sections/ImageWithDescription.tsx",
+      "placement": "left",
+      "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d50888cb-263f-4cb4-b498-7e52bb90be1b/IMAGEM-2.svg",
+      "title": "Nossa solução é desenvolvida para operações de assistências extra-hospitalares que buscam tecnologia de ponta e um diferencial competitivo no mercado",
+      "description": "Se você quer otimizar a eficiência operacional e elevar a qualidade dos cuidados, estamos aqui para fazer a diferença ",
+      "cta": {
+        "text": "Agendar Reunião",
+        "href": "#"
       }
     },
     {
-      "__resolveType": "website/sections/Rendering/Lazy.tsx",
-      "section": {
-        "__resolveType": "site/sections/Benefits.tsx",
-        "title": "Ao usar nossa tecnologia, você:",
-        "cards": [
-          {
-            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/076eff11-122b-491d-9efd-48e7f72fe7b6/Group.svg",
-            "width": 57,
-            "height": 52,
-            "description": "Otimiza o trabalho das equipes assistenciais"
-          },
-          {
-            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/45cbd8c4-fcea-4092-ada0-6c34ba130fb7/Vector-(4).svg",
-            "description": "Reduz taxas de hospitalização"
-          },
-          {
-            "description": "Fortaleça a relação com familiares e operadoras de saúde",
-            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d450fe2e-80c8-4aa4-8b90-d538adda5c6c/Vector-(5).svg",
-            "width": 57,
-            "height": 49
-          }
-        ]
-      }
+      "__resolveType": "site/sections/Benefits.tsx",
+      "title": "Ao usar nossa tecnologia, você:",
+      "cards": [
+        {
+          "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/076eff11-122b-491d-9efd-48e7f72fe7b6/Group.svg",
+          "width": 57,
+          "height": 52,
+          "description": "Otimiza o trabalho das equipes assistenciais"
+        },
+        {
+          "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/45cbd8c4-fcea-4092-ada0-6c34ba130fb7/Vector-(4).svg",
+          "description": "Reduz taxas de hospitalização"
+        },
+        {
+          "description": "Fortaleça a relação com familiares e operadoras de saúde",
+          "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d450fe2e-80c8-4aa4-8b90-d538adda5c6c/Vector-(5).svg",
+          "width": 57,
+          "height": 49
+        }
+      ]
+    },
+    {
+      "__resolveType": "Faq - default"
+    },
+    {
+      "__resolveType": "Footer"
     }
   ],
   "__resolveType": "website/pages/Page.tsx",

sections/Benefits.tsx

@@ -22,7 +22,7 @@ export interface Props {
 
 export default function Benefits({ cards, title }: Props) {
   return (
-    <div class="default-container">
+    <div class="default-container !justify-center">
       <div class="flex flex-col gap-10">
         <div class="flex flex-col items-center">
           <h3 class="text-2xl font-bold text-center lg:text-[32px] text-primary lg:leading-normal max-w-[308px] sm:max-w-[879px]">

sections/Faq.tsx

@@ -1,3 +1,5 @@
+import Icon from "site/components/ui/Icon.tsx";
+
 export interface CTA {
   id?: string;
   href: string;
@@ -13,15 +15,15 @@ export interface Question {
 
 export interface Props {
   title?: string;
+  headline?: string;
   description?: string;
-  cta?: CTA;
   questions?: Question[];
 }
 
 export default function BlogPosts({
   title = "FAQs",
+  headline = "Perguntas Frequentes",
   description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
-  cta = { id: "change-me", href: "/", text: "Change me", outline: true },
   questions = [
     {
       title: "Question #1 text goes here",
@@ -51,50 +53,47 @@ export default function BlogPosts({
   ],
 }: Props) {
   return (
-    <div class="lg:container md:max-w-6xl lg:mx-auto mx-4 text-sm py-12 lg:py-28">
-      <div class="flex flex-col lg:flex-row gap-10 lg:gap-20 justify-between">
-        <div class="flex-none space-y-6 lg:w-2/5">
-          <p class="text-4xl leading-snug">{title}</p>
-          <p class="text-lg">{description}</p>
-          <a
-            key={cta?.id}
-            id={cta?.id}
-            href={cta?.href}
-            target={cta?.href.includes("http") ? "_blank" : "_self"}
-            class={`font-normal btn btn-primary ${
-              cta.outline && "btn-outline"
-            }`}
-          >
-            {cta?.text}
-          </a>
-        </div>
-        <div class="flex-auto border-primary border-t">
-          {questions?.map((question) => (
-            <details class="border-primary border-b group">
-              <summary class="text-lg cursor-pointer py-6 flex ">
-                <span class="flex-auto">{question.title}</span>
-                <span class="flex-none transition group-open:rotate-180">
-                  <svg
-                    width="32"
-                    height="33"
-                    viewBox="0 0 32 33"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8.17674 12.5577L8.17676 12.5577L8.5303 12.2041C8.53031 12.2041 8.53031 12.2041 8.53032 12.2041C8.62794 12.1065 8.78621 12.1065 8.88385 12.2041C8.88385 12.2041 8.88385 12.2041 8.88385 12.2041L15.6464 18.9667L16 19.3202L16.3535 18.9667L23.1161 12.2041C23.2138 12.1064 23.372 12.1064 23.4696 12.2041L23.8232 12.5577C23.9208 12.6553 23.9208 12.8135 23.8232 12.9112L16.1767 20.5577C16.0791 20.6553 15.9209 20.6553 15.8232 20.5577L8.17674 12.9112C8.17674 12.9112 8.17674 12.9112 8.17674 12.9112C8.07911 12.8135 8.07911 12.6553 8.17674 12.5577Z"
-                      fill="#18181B"
-                      stroke="#18181B"
+    <div class="w-full flex items-center justify-center bg-primary">
+      <div class="default-container">
+        <div class="flex flex-col lg:flex-row gap-10 lg:gap-20 justify-between lg:mx-[143px]">
+          <div class="flex flex-col lg:w-2/5 text-secondary-content">
+            <p class="lg:text-xs font-extralight pb-1">{title}</p>
+            <p class="text-[28px] lg:text-[21px] font-semibold pb-4">
+              {headline}
+            </p>
+            <p class="text-base-100 lg:text-xs font-extralight">
+              {description}
+            </p>
+          </div>
+          <div class="flex flex-col gap-[10px] flex-grow max-w-[418px]">
+            {questions?.map((question, index) => (
+              <div class="group bg-secondary text-secondary-content py-3 px-4 rounded-lg w-full transition-all duration-200">
+                <label class="w-full">
+                  <input
+                    type="radio"
+                    name="faq"
+                    class="peer hidden"
+                    data-id="plus"
+                    id={`plus-${index}`}
+                  />
+                  <div class="relative flex justify-between items-center w-full">
+                    <span class="flex-auto text-xs">{question.title}</span>
+                    <Icon
+                      id="Plus"
+                      class="absolute top-0 right-0 text-accent opacity-100"
+                      width={16}
+                      height={16}
+                      strokeWidth={4}
                     />
-                  </svg>
-                </span>
-              </summary>
-              <p
-                class="leading-relaxed mb-6 group-open:animate-fadeIn"
-                dangerouslySetInnerHTML={{ __html: question.answer ?? "" }}
-              ></p>
-            </details>
-          ))}
+                  </div>
+                </label>
+                <div
+                  class="hidden group-has-[input[data-id=plus]:checked]:block text-xs px-4 pt-4 text-secondary-content"
+                  dangerouslySetInnerHTML={{ __html: question.answer ?? "" }}
+                />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>