Sfoglia il codice sorgente

Merge branch 'feature/IGAL-responsividade-bloco-sectionPartnership' of joycekepler/sfp_front_nuxt_iguassu_alliance into development

joycekepler 3 giorni fa
parent
commit
70cbddef83
1 ha cambiato i file con 9 aggiunte e 7 eliminazioni
  1. 9 7
      app/components/SectionPartnership.vue

+ 9 - 7
app/components/SectionPartnership.vue

@@ -1,19 +1,19 @@
 <template>
   <section class="bg-[url('/img/partnership_bg.png')] bg-cover py-24 flex flex-col items-center justify-center gap-10">
     <div class="max-w-[846px] flex flex-col items-center justify-center text-center gap-5">
-      <div class="flex items-center">
-        <NuxtImg src="/img/logo_expansao.svg" width="254" />
-        <NuxtImg src="/img/logo_expansao.png" width="397" />
+      <div class="flex items-center justify-center gap-3 flex-wrap max-w-full">
+        <NuxtImg src="/img/logo_expansao.svg" class="w-[140px] md:w-[254px] max-w-full h-auto" />
+        <NuxtImg src="/img/logo_expansao.png" class="w-[200px] md:w-[397px] max-w-full h-auto" />
       </div>
-      <h1 class="text-[50px] uppercase font-semibold text-gradient">
+      <h1 class="text-[26px] md:text-[40px] lg:text-[50px] uppercase font-semibold text-gradient px-4 md:px-0">
         parceiro oficial do programa Expansão Sem Fronteiras!
       </h1>
-      <p class="text-2xl text-white font-medium">
+      <p class="text-base md:text-xl lg:text-2xl text-white font-medium px-4 md:px-0 leading-relaxed">
         Para garantir o seu sucesso, aplicamos os <span class="text-[#00FF00]">8 Pilares Fundamentais:</span>
       </p>
     </div>
     
-    <div class="grid grid-cols-4 gap-5">
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
       <PartnershipCard
         v-for="(card, index) in cards"
         :key="index"
@@ -23,7 +23,9 @@
       />
     </div>
 
-    <button class="group bg-linear-to-r from-[#8DC63F] to-[#5F980F] text-white text-[23px] font-semibold flex justify-center items-center gap-4 border border-[#E3FA6D] rounded-lg py-3 px-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(227,250,109,0.45)] hover:brightness-110 cursor-pointer">
+    <button class="group bg-linear-to-r from-[#8DC63F] to-[#5F980F] 
+    text-white text-[23px] font-semibold flex justify-center items-center gap-4 border border-[#E3FA6D] rounded-lg py-3 px-8 
+    transition-all duration-300 ease-in-out hover:scale-[1.03] hover:shadow-[0_0_28px_rgba(227,250,109,0.45)] hover:brightness-110 cursor-pointer m-4 md:mt-0">
       Fale com um especialista agora!
       <NuxtImg src="/img/cta_btn_icon.svg" width="45" class="transition-transform duration-300 group-hover:translate-x-1.5" />
     </button>