fix responsiveness

src/app/(frontend)/layout.tsx

@@ -72,7 +72,7 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
       style={{ colorScheme: 'light' }}
       suppressHydrationWarning
     >
-      <body className="antialiased w-screen scrollbar-hide">
+      <body className="antialiased w-screen scrollbar-hide overflow-hidden">
         <ThemeProvider attribute="class">
           <SpeedInsights />
           <Analytics />

src/app/(frontend)/mandato-no-whatsapp/page.tsx

@@ -3,47 +3,46 @@ import Image from 'next/image'
 
 export default function Page() {
   return (
-    <main
-      className="w-screen h-screen bg-center bg-cover flex flex-col items-center justify-center"
-      style={{ backgroundImage: 'url(/BG.jpg)' }}
-    >
-      <div className="flex flex-col max-w-300 gap-12">
-        <div className="relative flex flex-col gap-5">
-          <h1 className="text-5xl text-left">
-            FIQUE POR DENTRO
+    <main className="h-screen w-screen bg-[url(/BG.jpg)] bg-cover bg-center overflow-y-scroll no-scrollbar flex">
+      <div className="flex flex-col p-2 lg:grid lg:grid-cols-[55%_45%] max-w-300 m-auto">
+        <h1 className="text-left mb-4 mt-8 text-3xl xs:text-4xl sm:text-center lg:text-left lg:text-6xl">
+          FIQUE POR DENTRO
+          <br />
+          DO <span className="text-[#f9844e]">NOSSO MANDATO!</span>
+        </h1>
+        <h2 className="text-sm 2xs:text-base xs:text-lg sm:text-center lg:text-left lg:col-start-1 lg:text-2xl lg:mb-4">
+          PARTICIPE DA NOSSA{' '}
+          <strong className="font-bold">
+            COMUNIDADE EXCLUSIVA
             <br />
-            DO <span className="text-[#f9844e]">NOSSO MANDATO!</span>
-          </h1>
-          <h2 className="text-2xl font-light">
-            PARTICIPE DA NOSSA{' '}
-            <strong className="font-bold">
-              COMUNIDADE EXCLUSIVA
-              <br />
-              NO WHATSAPP
-            </strong>{' '}
-            E FIQUE POR DENTRO DE TODAS
-            <br />
-            AS VOTAÇÕES, PROJETOS E BASTIDORES.
-          </h2>
-          <WhatsappForm classname="flex-1 w-[40%]" />
-          <Image
-            className="flex-[1.8] -mx-10 absolute top-1/2 -translate-y-[50%] right-0 w-[67%]"
-            src="/LULA_E_SOLLA.png"
-            width={956}
-            height={948}
-            alt=""
-          />
-        </div>
-        <div className="relative flex flex-col items-center gap-0">
-          <Image src="/LOGO_SOLLA_BRANCO.svg" width={430} height={300} alt="" className="-my-30" />
-          <p className="text-center">
-            <strong>Seus dados estão seguros.</strong> Utilizamos suas informações apenas para
-            contato e envio de conteúdos relacionados.
-            <br />
-            Não compartilhamos dados com terceiros. Ao preencher o formulário, você concorda com
-            nossa política de uso de dados conforme a LGPD.
-          </p>
-        </div>
+            NO WHATSAPP
+          </strong>{' '}
+          E FIQUE POR DENTRO DE TODAS
+          <br />
+          AS VOTAÇÕES, PROJETOS E BASTIDORES.
+        </h2>
+        <Image
+          className="-mb-10 sm:-mb-15 sm:max-w-120 lg:max-w-[140%] self-center sm:row-span-3 lg:row-start-1 lg:col-start-2 lg:-mx-5 lg:place-self-center lg:-translate-x-18 lg:translate-y-18"
+          src="/LULA_E_SOLLA.png"
+          width={956}
+          height={948}
+          alt=""
+        />
+        <WhatsappForm classname="flex-1 lg:max-w-[75%]" />
+        <Image
+          src="LOGO_SOLLA_BRANCO.svg"
+          width={430}
+          height={300}
+          alt=""
+          className="-my-20 self-center lg:col-span-2 lg:place-self-center"
+        />
+        <p className="text-center m-0 text-xs lg:col-span-2 md:text-sm lg:text-base">
+          <strong>Seus dados estão seguros.</strong> Utilizamos suas informações apenas para contato
+          e envio de conteúdos relacionados.
+          <br />
+          Não compartilhamos dados com terceiros. Ao preencher o formulário, você concorda com nossa
+          política de uso de dados conforme a LGPD.
+        </p>
       </div>
     </main>
   )

src/app/(frontend)/styles.css

@@ -8,6 +8,11 @@
 @custom-variant dark (&:is(.dark *));
 @source "../../**/*.{js,ts,jsx,tsx,mdx}";
 
+@theme {
+  --breakpoint-2xs: 23.75rem;
+  --breakpoint-xs: 26.25rem;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -97,7 +102,7 @@ body,
   --sidebar-accent-foreground: oklch(0.98 0.004 197.1);
   --sidebar-border: oklch(0.7 0.015 197.1 / 20%);
   --sidebar-ring: oklch(0.9 0.14 143);
-  --background: oklch(0.2 0.02 171);
+  --background: #ae1603;
   --foreground: oklch(0.98 0.004 197.1);
 }
 
@@ -141,7 +146,9 @@ body,
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
+    background-color: var(--background);
+    background-image: linear-gradient(to top, #ae1603 0%, #c86112 100%);
   }
 
   h1 {