From 96bf754a31ed343a2fd94143efdcfa634438057b Mon Sep 17 00:00:00 2001
From: Rodrigo Araujo <rodrigo.eritel@gmail.com>
Date: Tue, 19 Mar 2024 22:44:46 -0300
Subject: [PATCH] fix: QA

---
 components/cards/ImageCard.tsx               |   6 +-
 components/header/Menu.tsx                   |   1 -
 components/layout/Carousel.tsx               |   9 +-
 components/minicart/Cart.tsx                 |   2 +-
 components/ui/ContactInput.tsx               |   8 +-
 components/ui/SectionHeader.tsx              |   6 +-
 components/ui/SliderJS.tsx                   |   8 +-
 routes/_app.tsx                              |   5 +-
 sections/Apresentacao/Apresentacao.tsx       |   2 +-
 sections/ComoFunciona/ComoFunciona.tsx       | 114 +++++-----
 sections/Contato/Contato.tsx                 | 228 +++++++++++--------
 sections/FooterNew/FooterNew.tsx             |  76 +++----
 sections/OQueFazemos/OQueFazemos.tsx         | 154 +++++++------
 sections/PorqueContratar/PorqueContratar.tsx |  90 ++++----
 tailwind.css                                 |   1 +
 15 files changed, 379 insertions(+), 331 deletions(-)

diff --git a/components/cards/ImageCard.tsx b/components/cards/ImageCard.tsx
index fd9aa22..d6f0cee 100644
--- a/components/cards/ImageCard.tsx
+++ b/components/cards/ImageCard.tsx
@@ -93,11 +93,13 @@ function Card(
           />
         )}
       </a>
-      {/* {buttonText && (
+      {
+        /* {buttonText && (
         <a href={href} class={getButtonClasses(style?.button || {})}>
           {buttonText}
         </a>
-      )} */}
+      )} */
+      }
     </div>
   );
 }
diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx
index d12e928..385202e 100644
--- a/components/header/Menu.tsx
+++ b/components/header/Menu.tsx
@@ -36,7 +36,6 @@ function Menu({ items }: Props) {
           </li>
         ))}
       </ul>
-
     </div>
   );
 }
diff --git a/components/layout/Carousel.tsx b/components/layout/Carousel.tsx
index 4fbc8b2..af8cf26 100644
--- a/components/layout/Carousel.tsx
+++ b/components/layout/Carousel.tsx
@@ -74,7 +74,7 @@ function Section({ interval = 0, layout, style, children }: Props) {
           {items?.map((item, index) => (
             <Slider.Item
               index={index}
-              class="carousel-item snap-center min-h-[580px] flex items-baseline"
+              class="carousel-item snap-center min-h-[580px] flex items-baseline max-[1020px]:max-w-full"
               style={{ width: layout?.itemWidth || "auto" }}
             >
               {item}
@@ -123,7 +123,12 @@ function Section({ interval = 0, layout, style, children }: Props) {
           </ul>
         )}
 
-        <SliderJS rootId={id} interval={interval && interval * 1e3} infinite centerMode={true} />
+        <SliderJS
+          rootId={id}
+          interval={interval && interval * 1e3}
+          infinite
+          centerMode={true}
+        />
       </div>
     </>
   );
diff --git a/components/minicart/Cart.tsx b/components/minicart/Cart.tsx
index 665e468..ee7c322 100644
--- a/components/minicart/Cart.tsx
+++ b/components/minicart/Cart.tsx
@@ -27,7 +27,7 @@ function Cart({ platform }: Props) {
   }
 
   if (platform === "linx") {
-    return ;
+    return;
   }
 
   if (platform === "shopify") {
diff --git a/components/ui/ContactInput.tsx b/components/ui/ContactInput.tsx
index fa47e3f..bc3d0a0 100644
--- a/components/ui/ContactInput.tsx
+++ b/components/ui/ContactInput.tsx
@@ -1,7 +1,3 @@
 export function ScriptRespondi() {
-
-    
-    return (
-        <script></script>
-    )
-}
\ No newline at end of file
+  return <script></script>;
+}
diff --git a/components/ui/SectionHeader.tsx b/components/ui/SectionHeader.tsx
index 1fa6e2e..3f249e9 100644
--- a/components/ui/SectionHeader.tsx
+++ b/components/ui/SectionHeader.tsx
@@ -29,9 +29,7 @@ function Header(props: Props) {
                 <h1
                   class={clx(
                     "text-[40px] font-semibold leading-8 lg:leading-10 max-[1020px]:text-[25px]",
-                    props.colorReverse
-                      ? "text-[#012E66]"
-                      : "text-[#012E66]"
+                    props.colorReverse ? "text-[#012E66]" : "text-[#012E66]",
                   )}
                 >
                   {props.title}
@@ -44,7 +42,7 @@ function Header(props: Props) {
                     "leading-6 lg:leading-8 text-[20px] max-[1020px]:text-[20px]",
                     props.colorReverse
                       ? "text-primary-content"
-                      : "text-base-content"
+                      : "text-base-content",
                   )}
                 >
                   {props.description}
diff --git a/components/ui/SliderJS.tsx b/components/ui/SliderJS.tsx
index 854714b..d13bed9 100644
--- a/components/ui/SliderJS.tsx
+++ b/components/ui/SliderJS.tsx
@@ -5,7 +5,7 @@ export interface Props {
   scroll?: "smooth" | "auto";
   interval?: number;
   infinite?: boolean;
-  centerMode?: boolean
+  centerMode?: boolean;
 }
 
 const ATTRIBUTES = {
@@ -190,14 +190,14 @@ function Slider({
   scroll = "smooth",
   interval,
   infinite = false,
-  centerMode = true
+  centerMode = true,
 }: Props) {
-  useEffect(() => setup({ rootId, scroll, interval, infinite, centerMode}), [
+  useEffect(() => setup({ rootId, scroll, interval, infinite, centerMode }), [
     rootId,
     scroll,
     interval,
     infinite,
-    centerMode
+    centerMode,
   ]);
 
   return <div data-slider-controller-js />;
diff --git a/routes/_app.tsx b/routes/_app.tsx
index f3eef3c..6acd0b6 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -31,9 +31,10 @@ export default defineApp(async (_req, ctx) => {
         <link rel="manifest" href={asset("/site.webmanifest")} />
       </Head>
 
-      <script 
+      <script
         dangerouslySetInnerHTML={{
-          __html: `const bodyScript=document.querySelector('body'),hasScript=document.querySelector('#respondi_src');if(!hasScript){const script=document.createElement('script');script.setAttribute("async", "");document.body.appendChild(script),script.id='respondi_src',script.src='https://embed.respondi.app/embed.js';}` 
+          __html:
+            `const bodyScript=document.querySelector('body'),hasScript=document.querySelector('#respondi_src');if(!hasScript){const script=document.createElement('script');script.setAttribute("async", "");document.body.appendChild(script),script.id='respondi_src',script.src='https://embed.respondi.app/embed.js';}`,
         }}
       />
 
diff --git a/sections/Apresentacao/Apresentacao.tsx b/sections/Apresentacao/Apresentacao.tsx
index cd890e7..f2723ca 100644
--- a/sections/Apresentacao/Apresentacao.tsx
+++ b/sections/Apresentacao/Apresentacao.tsx
@@ -6,7 +6,7 @@ export interface Props {
 }
 
 const DEFAULT_TEXT =
-  '<h2>O que é uma garantidora de condomínio?</h2> <p>Uma <strong>Cedrom</strong> é uma empresa que assume a cobrança da taxa condominial e repassa ao condomínio o valor das taxas pagas e não pagas pelos condôminos. <br/>A cobrança dos atrasados é feita diretamente pela Cedrom, eliminando os custos e os riscos jurídicos para a condomínio. Com a receita garantida, o Síndico tem a certeza do valor que irá entrar na conta do condomínio, sem risco de falta de caixa devido a inadimplência.</p>';
+  "<h2>O que é uma garantidora de condomínio?</h2> <p>Uma <strong>Cedrom</strong> é uma empresa que assume a cobrança da taxa condominial e repassa ao condomínio o valor das taxas pagas e não pagas pelos condôminos. <br/>A cobrança dos atrasados é feita diretamente pela Cedrom, eliminando os custos e os riscos jurídicos para a condomínio. Com a receita garantida, o Síndico tem a certeza do valor que irá entrar na conta do condomínio, sem risco de falta de caixa devido a inadimplência.</p>";
 
 export default function RichText(
   { text = DEFAULT_TEXT, containerWidth }: Props,
diff --git a/sections/ComoFunciona/ComoFunciona.tsx b/sections/ComoFunciona/ComoFunciona.tsx
index 04651a7..72de0c5 100644
--- a/sections/ComoFunciona/ComoFunciona.tsx
+++ b/sections/ComoFunciona/ComoFunciona.tsx
@@ -2,66 +2,70 @@
  * @title {{{text}}}
  */
 export interface ComoFunciona {
-    /**
-     * @title Número da etapa
-     */
-    number?: number;
-    /**
-     * @title Texto da etapa
-     */
-    text?: string;
+  /**
+   * @title Número da etapa
+   */
+  number?: number;
+  /**
+   * @title Texto da etapa
+   */
+  text?: string;
 }
 
 export interface Props {
-    title?: string;
-    content?: ComoFunciona[]
+  title?: string;
+  content?: ComoFunciona[];
 }
 
 const DEFAULT_PROPS = {
-    content: [
-        {
-            number: 1,
-            text: 'Simulação do financiamento'
-        },
-        {
-            number: 2,
-            text: 'Envio de documentaçãopreliminar'
-        },
-        {
-            number: 3,
-            text: 'Análise de crédito'
-        },
-        {
-            number: 4,
-            text: 'Aprovação do empréstimo em assembleia'
-        },
-        {
-            number: 5,
-            text: 'Liberação do dinheiro para o condomínio'
-        }
-    ]
-}
+  content: [
+    {
+      number: 1,
+      text: "Simulação do financiamento",
+    },
+    {
+      number: 2,
+      text: "Envio de documentaçãopreliminar",
+    },
+    {
+      number: 3,
+      text: "Análise de crédito",
+    },
+    {
+      number: 4,
+      text: "Aprovação do empréstimo em assembleia",
+    },
+    {
+      number: 5,
+      text: "Liberação do dinheiro para o condomínio",
+    },
+  ],
+};
 
+export default function ComoFunciona(props: Props) {
+  const {
+    content,
+  } = { ...DEFAULT_PROPS, ...props };
 
-export default function ComoFunciona( props: Props ) {
-    const {
-        content
-    } = { ...DEFAULT_PROPS, ...props}
-    
-    return (
-        (content) ?
-            <div class="bg-[#012E66] flex-wrap flex w-full py-[15px] my-[20px]">
-                <h3 class="text-[30px] text-[#ffffff] w-full text-center font-[900] ">Como funciona na prática?</h3>
-                <div class=" container grid grid-cols-[repeat(5,_1fr)] grid-rows-[1fr] gap-x-[0px] gap-y-[0px] w-full max-[1020px]:grid-cols-[1fr]">
-                {content.map((item) => (
-                    <div class="flex items-center align-middle mx-auto ">
-                        <p class="bg-transparent text-transparent content-text-edit text-[80px] mr-[5px] font-bold">{item?.number}</p>
-                        <span class="text-[#ffffff] w-[125px]">{item?.text}</span>
-                    </div>
-                )
-                )}
-                </div>
-            </div>
-        : ''
-    )
-} 
\ No newline at end of file
+  return (
+    content
+      ? (
+        <div class="bg-[#012E66] flex-wrap flex w-full py-[15px] my-[20px]">
+          <h3 class="text-[30px] text-[#ffffff] w-full text-center font-[900] ">
+            Como funciona na prática?
+          </h3>
+          <div class=" container grid grid-cols-[repeat(5,_1fr)] grid-rows-[1fr] gap-x-[0px] gap-y-[0px] w-full max-[1020px]:grid-cols-[1fr]">
+            {content.map((item) => (
+              <div class="flex items-center align-middle mx-auto ">
+                <p class="bg-transparent text-transparent content-text-edit text-[80px] mr-[5px] font-bold">
+                  {item?.number}
+                </p>
+                <span class="text-[#ffffff] w-[125px]">{item?.text}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+      : ""
+  );
+}
diff --git a/sections/Contato/Contato.tsx b/sections/Contato/Contato.tsx
index 44ca119..2ea8eaa 100644
--- a/sections/Contato/Contato.tsx
+++ b/sections/Contato/Contato.tsx
@@ -2,120 +2,148 @@ import type { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
 
 export interface Logo {
-    src: ImageWidget
-    alt?: string
+  src: ImageWidget;
+  alt?: string;
 }
 
 export interface LogoLinkedIn {
-    src: ImageWidget
-    alt?: string
-    text?: string
-    url_link?: string
+  src: ImageWidget;
+  alt?: string;
+  text?: string;
+  url_link?: string;
 }
 
 export interface LogoInstagram {
-    src: ImageWidget
-    alt?: string
-    text?: string
-    url_link?: string
+  src: ImageWidget;
+  alt?: string;
+  text?: string;
+  url_link?: string;
 }
 
 export interface Props {
-    logo: Logo
-    logoLinkedIn: LogoLinkedIn
-    logoInstagram: LogoInstagram
-    firstPhoneContact: string
-    secondPhoneContact: string
+  logo: Logo;
+  logoLinkedIn: LogoLinkedIn;
+  logoInstagram: LogoInstagram;
+  firstPhoneContact: string;
+  secondPhoneContact: string;
 }
 
 const DEFAULT_PROPS = {
-    logo: {
-        src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-        alt: "Cedrom"
-    },
-    logoLinkedIn: {
-        src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-        alt: "Logo LinkedIn",
-        text: "Cedrom",
-        url_link: "https://www.instagram.com/cedromoveissc401/"
-    },
-    logoInstagram: {
-        src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-        alt: "Logo LinkedIn",
-        text: "cedrom",
-        url_link: "https://www.instagram.com/cedromoveissc401/"
-    },
-    firstPhoneContact: "999999999",
-    secondPhoneContact: "999999999"
-}
+  logo: {
+    src:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+    alt: "Cedrom",
+  },
+  logoLinkedIn: {
+    src:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+    alt: "Logo LinkedIn",
+    text: "Cedrom",
+    url_link: "https://www.instagram.com/cedromoveissc401/",
+  },
+  logoInstagram: {
+    src:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+    alt: "Logo LinkedIn",
+    text: "cedrom",
+    url_link: "https://www.instagram.com/cedromoveissc401/",
+  },
+  firstPhoneContact: "999999999",
+  secondPhoneContact: "999999999",
+};
 
 export default function Contato(props: Props) {
+  const {
+    logo,
+    logoLinkedIn,
+    logoInstagram,
+    firstPhoneContact,
+    secondPhoneContact,
+  } = { ...DEFAULT_PROPS, ...props };
 
-    const {
-        logo,
-        logoLinkedIn,
-        logoInstagram,
-        firstPhoneContact,
-        secondPhoneContact
-    } = { ...DEFAULT_PROPS, ...props }
-
-    const firstNumberContact = `tel:+5511${firstPhoneContact}`
-    const secondNumberContact = `tel:+5511${secondPhoneContact}`
+  const firstNumberContact = `tel:+5511${firstPhoneContact}`;
+  const secondNumberContact = `tel:+5511${secondPhoneContact}`;
 
-    return (
-        <div class="bg-[#012E66] flex items-center justify-between pt-14 flex-col">
-            <div class="flex flex-col max-w-[600px] container">
-                <h3 class="text-[32px] text-white w-full font-bold mb-3 max-[1020px]:w-[90%] max-[1020px]:mx-auto">Solicite uma simulação gratuita</h3>
-                <div class="max-[1020px]:w-full respondi-input" data-respondi-container="" data-respondi-mode="regular" data-respondi-src="https://form.respondi.app/qVTZe501" data-respondi-width="600px" data-respondi-height="400px"></div>
-            </div>
-            <div class="flex flex-col w-full items-center">
-                <div class="py-6">
-                    <div class="flex items-center mb-6">
-                        <h4 class="text-[20px] text-white font-bold mr-6 block">Redes<br/>Sociais</h4>
-                        <ul>
-                            <li class="flex items-center">
-                                <a class="text-white flex items-center cursor-pointer" href={logoLinkedIn.link} target="_blank" rel="noopener noreferrer">
-                                    <Image
-                                        width={15}
-                                        height={15}
-                                        src={logoLinkedIn.src}
-                                        alt={logoLinkedIn.alt}
-                                        decoding="async"
-                                        loading="lazy"
-                                        class="block mr-[5px]"
-                                    />
-                                    {logoLinkedIn.text}
-                                </a>
-                            </li>
-                            <li class="flex items-center">
-                                <a class="text-white flex items-center cursor-pointer" href={logoInstagram.link} target="_blank" rel="noopener noreferrer">
-                                    <Image
-                                        width={15}
-                                        height={15}
-                                        src={logoInstagram.src}
-                                        alt={logoInstagram.alt}
-                                        decoding="async"
-                                        loading="lazy"
-                                        class="block mr-[5px]"
-                                    />
-                                    {logoInstagram.text}
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="flex items-center">
-                        <h4 class="text-[20px] text-white font-bold mr-6 block">Contato</h4>
-                        <ul class="block leading-6">
-                            <li class="block mb-1">
-                                <a class="text-white" href={firstNumberContact}>(11) {firstPhoneContact}</a>
-                            </li>
-                            <li>
-                                <a class="text-white" href={secondNumberContact}>(11) {secondPhoneContact}</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div class="bg-[#012E66] flex items-center justify-between pt-14 flex-col">
+      <div class="flex flex-col max-w-[600px] container">
+        <h3 class="text-[32px] text-white w-full font-bold mb-3 max-[1020px]:w-[90%] max-[1020px]:mx-auto text-center">
+          Solicite uma simulação gratuita
+        </h3>
+        <div
+          class="max-[1020px]:w-full respondi-input"
+          data-respondi-container=""
+          data-respondi-mode="regular"
+          data-respondi-src="https://form.respondi.app/qVTZe501"
+          data-respondi-width="600px"
+          data-respondi-height="400px"
+        >
         </div>
-    )
-}
\ No newline at end of file
+      </div>
+      <div class="flex flex-col w-full items-center">
+        <div class="py-6">
+          <div class="flex items-center mb-6">
+            <h4 class="text-[20px] text-white font-bold mr-6 block">
+              Redes<br />Sociais
+            </h4>
+            <ul>
+              <li class="flex items-center">
+                <a
+                  class="text-white flex items-center cursor-pointer"
+                  href={logoLinkedIn.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Image
+                    width={15}
+                    height={15}
+                    src={logoLinkedIn.src}
+                    alt={logoLinkedIn.alt}
+                    decoding="async"
+                    loading="lazy"
+                    class="block mr-[5px]"
+                  />
+                  {logoLinkedIn.text}
+                </a>
+              </li>
+              <li class="flex items-center">
+                <a
+                  class="text-white flex items-center cursor-pointer"
+                  href={logoInstagram.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Image
+                    width={15}
+                    height={15}
+                    src={logoInstagram.src}
+                    alt={logoInstagram.alt}
+                    decoding="async"
+                    loading="lazy"
+                    class="block mr-[5px]"
+                  />
+                  {logoInstagram.text}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="flex items-center">
+            <h4 class="text-[20px] text-white font-bold mr-6 block">Contato</h4>
+            <ul class="block leading-6">
+              <li class="block mb-1">
+                <a class="text-white" href={firstNumberContact}>
+                  (11) {firstPhoneContact}
+                </a>
+              </li>
+              <li>
+                <a class="text-white" href={secondNumberContact}>
+                  (11) {secondPhoneContact}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sections/FooterNew/FooterNew.tsx b/sections/FooterNew/FooterNew.tsx
index 9176178..4dbe708 100644
--- a/sections/FooterNew/FooterNew.tsx
+++ b/sections/FooterNew/FooterNew.tsx
@@ -2,49 +2,49 @@ import type { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
 
 export interface Logo {
-    src: ImageWidget
-    alt?: string
+  src: ImageWidget;
+  alt?: string;
 }
 
 export interface Props {
-    logo?: Logo
-    text?: string
-    address?: string
+  logo?: Logo;
+  text?: string;
+  address?: string;
 }
 
 const DEFAULT_PROPS = {
-    logo: {
-        src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-        alt: "Cedrom"
-    },
-    text: "TODOS OS DIREITOS RESERVADOS CEDROM SECURITIZADORA",
-    address: "Rua Araguari, nº 835, conjunto 301, Vila Uberabinha, São Paulo, SP"
-}
-
-export default function FooterNew( props : Props) {
+  logo: {
+    src:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+    alt: "Cedrom",
+  },
+  text: "TODOS OS DIREITOS RESERVADOS CEDROM SECURITIZADORA",
+  address: "Rua Araguari, nº 835, conjunto 301, Vila Uberabinha, São Paulo, SP",
+};
 
-    const {
-        logo,
-        text,
-        address
-    } = { ...DEFAULT_PROPS, ... props }
+export default function FooterNew(props: Props) {
+  const {
+    logo,
+    text,
+    address,
+  } = { ...DEFAULT_PROPS, ...props };
 
-    return (
-        <div>
-            <div class="block bg-[#012E66] text-center w-full py-3">
-                <Image 
-                    width={100}
-                    class="relative object-fit mx-auto"
-                    src={logo.src}
-                    alt={logo.alt}
-                    decoding="async"
-                    loading="lazy"
-                />
-            </div>
-            <div class="bg-[#00A6CA] py-5 text-center">
-                <p class="text-white text-[11px]">{text}</p>
-                <address class="text-white text-[8px] not-italic">{address}</address>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div>
+      <div class="block bg-[#012E66] text-center w-full py-3">
+        <Image
+          width={100}
+          class="relative object-fit mx-auto"
+          src={logo.src}
+          alt={logo.alt}
+          decoding="async"
+          loading="lazy"
+        />
+      </div>
+      <div class="bg-[#00A6CA] py-5 text-center">
+        <p class="text-white text-[11px]">{text}</p>
+        <address class="text-white text-[8px] not-italic">{address}</address>
+      </div>
+    </div>
+  );
+}
diff --git a/sections/OQueFazemos/OQueFazemos.tsx b/sections/OQueFazemos/OQueFazemos.tsx
index 2b96a79..9723b40 100644
--- a/sections/OQueFazemos/OQueFazemos.tsx
+++ b/sections/OQueFazemos/OQueFazemos.tsx
@@ -2,86 +2,96 @@ import type { ImageWidget } from "apps/admin/widgets.ts";
 import Image from "apps/website/components/Image.tsx";
 
 export interface ImagemItem {
-    src?: ImageWidget
-    alt?: string
-    label?: string
+  src?: ImageWidget;
+  alt?: string;
+  label?: string;
 }
 
 export interface Itens {
-    image?: ImagemItem
-    titleText?: string
-    /**
-     * @format textarea
-    */
-    contentText?: string
+  image?: ImagemItem;
+  titleText?: string;
+  /**
+   * @format textarea
+   */
+  contentText?: string;
 }
 
 export interface Props {
-    itens: Itens[]
+  itens: Itens[];
 }
 
 export default function OQueFazemos({
-    itens = [
-        {
-            image: {
-                src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-                alt: "",
-                label: ""
-            },
-            titleText: "Atração",
-            contentText: "Você já imaginou proporcionar estabilidade financeira ao seu condomínio, garantindo uma gestão eficiente para o síndico? Apresentamos a Cedrom, a solução que transforma a administração condominial, eliminando preocupações com inadimplência."
-        },
-        {
-            image: {
-                src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-                alt: "",
-                label: ""
-            },
-            titleText: "Interesse",
-            contentText: "Uma garantidora de condomínio como a Cedrom assume a cobrança da taxa condominial, garantindo a receita mensal e eliminando os riscos jurídicos. O síndico passa a contar com uma gestão financeira estável, sem surpresas desagradáveis."
-        },
-        {
-            image: {
-                src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-                alt: "",
-                label: ""
-            },
-            titleText: "Desejo",
-            contentText: "Ao contratar a Cedrom, a cobrança dos inadimplentes se torna responsabilidade da empresa, sem custos adicionais para o condomínio. O síndico ganha previsibilidade de caixa, possibilitando planejar obras e melhorias, sem impacto na taxa condominial."
-        },
-        {
-            image: {
-                src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
-                alt: "",
-                label: ""
-            },
-            titleText: "Ação",
-            contentText: "Deseja garantir receitas mensais estáveis, eliminar gastos legais com cobranças e valorizar seu condomínio? Contratar a Cedrom é simples: uma análise de cadastro, proposta enviada, aprovação em assembleia e assinatura do contrato. Solicite agora uma simulação gratuita e transforme a gestão do seu condomínio com a Cedrom."
-        }
-    ]
+  itens = [
+    {
+      image: {
+        src:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+        alt: "",
+        label: "",
+      },
+      titleText: "Atração",
+      contentText:
+        "Você já imaginou proporcionar estabilidade financeira ao seu condomínio, garantindo uma gestão eficiente para o síndico? Apresentamos a Cedrom, a solução que transforma a administração condominial, eliminando preocupações com inadimplência.",
+    },
+    {
+      image: {
+        src:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+        alt: "",
+        label: "",
+      },
+      titleText: "Interesse",
+      contentText:
+        "Uma garantidora de condomínio como a Cedrom assume a cobrança da taxa condominial, garantindo a receita mensal e eliminando os riscos jurídicos. O síndico passa a contar com uma gestão financeira estável, sem surpresas desagradáveis.",
+    },
+    {
+      image: {
+        src:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+        alt: "",
+        label: "",
+      },
+      titleText: "Desejo",
+      contentText:
+        "Ao contratar a Cedrom, a cobrança dos inadimplentes se torna responsabilidade da empresa, sem custos adicionais para o condomínio. O síndico ganha previsibilidade de caixa, possibilitando planejar obras e melhorias, sem impacto na taxa condominial.",
+    },
+    {
+      image: {
+        src:
+          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/80a115a2-3623-4e9b-aec7-42601c2ff416",
+        alt: "",
+        label: "",
+      },
+      titleText: "Ação",
+      contentText:
+        "Deseja garantir receitas mensais estáveis, eliminar gastos legais com cobranças e valorizar seu condomínio? Contratar a Cedrom é simples: uma análise de cadastro, proposta enviada, aprovação em assembleia e assinatura do contrato. Solicite agora uma simulação gratuita e transforme a gestão do seu condomínio com a Cedrom.",
+    },
+  ],
 }: Props) {
-
-    const ItensMap = itens.map((value, index) => {
-        return ( 
-            <div data-index={index} class="mb-[20px] last:mb-0 itens-fazer relative ml-[15px]">
-                <h3 class="text-[#012E66] text-[24px] font-bold">{value.titleText}</h3>
-                <p class="text-[16px]">{value.contentText}</p>
-            </div>
-        )
-    })
-
+  const ItensMap = itens.map((value, index) => {
     return (
-        <div class="flex items-center container justify-between max-[1020px]:flex-col">
-            <Image
-                    src={itens[0].image?.src}
-                    width={521}
-                    height={526}
-                    alt={itens[0].image?.alt}
-                    label={itens[0].image?.label}
-            />
-            <div class="flex items-center flex-col w-10/12 ml-[35px] max-[1020px]:ml-0 max-[1020px]:mt-5">
-                {ItensMap}
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+      <div
+        data-index={index}
+        class="mb-[20px] last:mb-0 itens-fazer relative ml-[15px]"
+      >
+        <h3 class="text-[#012E66] text-[24px] font-bold">{value.titleText}</h3>
+        <p class="text-[16px]">{value.contentText}</p>
+      </div>
+    );
+  });
+
+  return (
+    <div class="flex items-center container justify-between max-[1020px]:flex-col">
+      <Image
+        src={itens[0].image?.src}
+        width={521}
+        height={526}
+        alt={itens[0].image?.alt}
+        label={itens[0].image?.label}
+      />
+      <div class="flex items-center flex-col w-10/12 ml-[35px] max-[1020px]:ml-0 max-[1020px]:mt-5">
+        {ItensMap}
+      </div>
+    </div>
+  );
+}
diff --git a/sections/PorqueContratar/PorqueContratar.tsx b/sections/PorqueContratar/PorqueContratar.tsx
index 6f0806f..ee206f0 100644
--- a/sections/PorqueContratar/PorqueContratar.tsx
+++ b/sections/PorqueContratar/PorqueContratar.tsx
@@ -1,51 +1,55 @@
 export interface ContentText {
-    text?: string
+  text?: string;
 }
 
 export interface Props {
-    title?: string
-    itens?: ContentText[]
+  title?: string;
+  itens?: ContentText[];
 }
 
-export default function PorqueContratar( {
-    title = 'Por que contratar a Cedrom?',
-    itens = [
-        {
-            text: 'Receita mensal garantida e previsível'
-        },
-        {
-            text: 'Eliminação dos gastos legais relacionados às cobranças'
-        },
-        {
-            text: 'Segurança que os serviços e obras não serão interrompidos por falta de caixa'
-        },
-        {
-            text: 'Fluxo de caixa previsível para planejar obras e melhorias'
-        },
-        {
-            text: 'Taxa de condomínio estável e previsível: não haverá aumento para cobrir a inadimplência'
-        },
-        {
-            text: 'Condomínio com caixa saudável e valorização dos imóveis'
-        }
-    ]
-}: Props ) {
-    
-    const ItensReturn = itens.map((value) => {
-        return (
-            <div class="bg-[#00A6CA] flex justify-center items-center py-[50px] px-[70px] rounded-[6px] max-[1020px]:w-11/12 max-[1020px]:py-[60px] max-[1020px]:px-[80px]">
-                <p class="text-[25px] text-white text-center font-semibold max-[1020px]:text-[20px]">{value?.text}</p>
-            </div>
-        )
-    })
-
+export default function PorqueContratar({
+  title = "Por que contratar a Cedrom?",
+  itens = [
+    {
+      text: "Receita mensal garantida e previsível",
+    },
+    {
+      text: "Eliminação dos gastos legais relacionados às cobranças",
+    },
+    {
+      text:
+        "Segurança que os serviços e obras não serão interrompidos por falta de caixa",
+    },
+    {
+      text: "Fluxo de caixa previsível para planejar obras e melhorias",
+    },
+    {
+      text:
+        "Taxa de condomínio estável e previsível: não haverá aumento para cobrir a inadimplência",
+    },
+    {
+      text: "Condomínio com caixa saudável e valorização dos imóveis",
+    },
+  ],
+}: Props) {
+  const ItensReturn = itens.map((value) => {
     return (
-        <div class="flex flex-wrap container justify-center my-[40px]">
-            <h2 class="w-full text-center text-[#012E66] font-bold text-[40px] block mb-[20px] max-[1020px]:text-[25px]">{title}</h2>
-            <div class="grid grid-cols-[repeat(3,_1fr)] grid-rows-[repeat(2,_1fr)] gap-x-[10px] gap-y-[10px] max-[1020px]:grid-cols-[1fr] max-[1020px]:flex max-[1020px]:flex-col max-[1020px]:items-center">
-                {ItensReturn}
-            </div>
-        </div>
-    )
+      <div class="bg-[#00A6CA] flex justify-center items-center py-[50px] px-[70px] rounded-[6px] max-[1020px]:w-11/12 max-[1020px]:py-[60px] max-[1020px]:px-[80px]">
+        <p class="text-[25px] text-white text-center font-semibold max-[1020px]:text-[20px]">
+          {value?.text}
+        </p>
+      </div>
+    );
+  });
 
-}
\ No newline at end of file
+  return (
+    <div class="flex flex-wrap container justify-center my-[40px]">
+      <h2 class="w-full text-center text-[#012E66] font-bold text-[40px] block mb-[20px] max-[1020px]:text-[25px]">
+        {title}
+      </h2>
+      <div class="grid grid-cols-[repeat(3,_1fr)] grid-rows-[repeat(2,_1fr)] gap-x-[10px] gap-y-[10px] max-[1020px]:grid-cols-[1fr] max-[1020px]:flex max-[1020px]:flex-col max-[1020px]:items-center">
+        {ItensReturn}
+      </div>
+    </div>
+  );
+}
diff --git a/tailwind.css b/tailwind.css
index cd24ba4..c4e9852 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -12,6 +12,7 @@
 
   body {
     background-color: #fff;
+    scroll-behavior: smooth;
   }
 
   mark {