add responsividade

src/assets/main.css

@@ -4,8 +4,9 @@
 @tailwind utilities;
 
 #app {
+  width: 100%;
   margin: 0 auto;
-  padding: 2rem 4rem;
+  padding: 2rem;
   height: fit-content;
   min-height: 100vh;
   background-image: url( './bg.svg' );

src/components/BuyConfirmedComponent.vue

@@ -77,7 +77,7 @@ p {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 .blur-container-row {
   @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;

src/components/ListingComponent.vue

@@ -180,7 +180,7 @@ p {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 .blur-container-row {
   @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;

src/components/LoadingComponent.vue

@@ -55,7 +55,7 @@ const props = defineProps({
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 
 .blur-container {

src/components/QrCodeComponent.vue

@@ -199,7 +199,7 @@ h2 {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 
 .blur-container {

src/components/SearchComponent.vue

@@ -215,7 +215,7 @@ watch(networkName, (): void => {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 
 .blur-container {

src/components/SellerSteps/SellerSearchComponent.vue

@@ -122,7 +122,7 @@ const handleInputEvent = (event: any): void => {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 
 .blur-container {

src/components/SellerSteps/SendNetwork.vue

@@ -67,7 +67,7 @@ p {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 .blur-container-row {
   @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;

src/components/SellerSteps/WantSellComponent.vue

@@ -45,7 +45,7 @@ const handleButtonClick = async (
 </script>
 
 <template>
-  <div class="page">
+  <div class="page w-full">
     <div class="text-container">
       <span class="text font-extrabold text-5xl max-w-[29rem]"
         >Venda cripto e receba em Pix</span
@@ -59,7 +59,7 @@ const handleButtonClick = async (
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
-        <div class="flex justify-between w-full items-center">
+        <div class="flex justify-between items-center">
           <input
             type="number"
             v-model="offer"
@@ -131,11 +131,11 @@ const handleButtonClick = async (
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
 }
 
 input[type="number"] {

src/views/FaqView.vue

@@ -96,7 +96,7 @@ const openItem = (index: number) => {
 
     <div class="flex justify-between w-10/12 mt-20">
       <div>
-        <h1 class="text-3xl text-gray-800 font-bold">Sumário</h1>
+        <h1 class="text-3xl text-white font-bold">Sumário</h1>
         <h3
           :class="index == selectedSection ? 'selected-sumario' : 'sumario'"
           v-for="(f, index) in faq"
@@ -121,10 +121,10 @@ const openItem = (index: number) => {
               class="mr-3"
               v-if="item.isOpen"
             />
-            <h4>{{ item.title }}</h4>
+            <h4 class="text-white">{{ item.title }}</h4>
           </div>
           <div
-            style="padding-top: 24px"
+            style="padding-top: 24px; color: white"
             v-if="item.isOpen"
             v-html="item.content"
           ></div>
@@ -155,12 +155,8 @@ const openItem = (index: number) => {
   margin: 24px 0;
 }
 
-p,
+h3 {
-h2,
+  @apply text-white;
-h3,
-h4 {
-  @apply text-gray-800 text-xl;
-  color: #1f2937;
 }
 
 h2,
@@ -173,7 +169,7 @@ h4 {
 }
 
 .text {
-  @apply text-gray-800 text-center;
+  @apply text-white text-center;
 }
 .blur-container-row {
   @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;