ソースを参照

feat: :sparkles: ajustar responsividade

joykepler 2 日 前
コミット
56d786ccc3
2 ファイル変更10 行追加9 行削除
  1. 3 2
      app/components/SectionHero.vue
  2. 7 7
      app/components/SectionTertiary.vue

+ 3 - 2
app/components/SectionHero.vue

@@ -1,7 +1,8 @@
 <template>
-  <section class="relative bg-[url('/img/hero_bg.png')] bg-black bg-size-[300%_auto] md:bg-cover bg-top bg-no-repeat md:bg-center h-svh flex justify-center">
+  <section class="relative bg-[url('/img/hero_bg.png')] bg-black bg-size-[380%_auto] md:bg-cover bg-top bg-no-repeat md:bg-center h-svh flex justify-center">
     <AppHeader />
-    <div class="w-full lg:max-w-7xl flex flex-col md:flex-row justify-between items-center absolute bottom-7 md:bottom-20 px-4">
+    <div class="md:hidden absolute inset-0 bg-linear-to-t from-black to-transparent z-0 pointer-events-none" />
+    <div class="w-full lg:max-w-7xl flex flex-col md:flex-row justify-between items-center absolute bottom-7 md:bottom-20 lg:bottom-10 xl:bottom-20 px-4">
       <div class="flex flex-col gap-5 md:w-1/2">
         <NuxtImg src="/img/logo_2.png" class="hidden md:block w-[308px]" />
         <h1 class="text-3xl md:text-4xl lg:text-[46px] font-bold text-gradient">

+ 7 - 7
app/components/SectionTertiary.vue

@@ -1,22 +1,22 @@
 <template>
   <section class="relative bg-[url('/img/section_tertiary_bg.svg')] bg-cover py-16 lg:py-28 flex items-center justify-center px-4">
-    <div class="relative z-10 lg:w-[525px] flex flex-col justify-center gap-10 lg:ml-24">
+    <div class="relative z-10 lg:w-[525px] flex flex-col justify-center gap-10 lg:ml-10 xl:ml-20">
       <h2 class="lg:max-w-[452px] text-4xl md:text-[46px] lg:text-[50px] uppercase font-semibold text-gradient leading-tight">
         IMERSÃO IGUASSU ALLIANCE
       </h2>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-5 w-full">
         <SectionTertiaryCard
           v-for="(card, index) in cards" :key="index"
-          :title="card.title" 
-          :description="card.description" 
+          :title="card.title"
+          :description="card.description"
         />
       </div>
     </div>
 
-    <NuxtImg 
-      src="/img/hexagons_photos.png" 
-      width="1000" 
-      class="hidden lg:block relative lg:-ml-45 z-0" 
+    <NuxtImg
+      src="/img/hexagons_photos.png"
+      width="1000"
+      class="hidden lg:block relative lg:w-[580px] xl:w-[700px] lg:-ml-16 xl:-ml-30 z-0"
     />
   </section>
 </template>