-q

gustavoquinalha · Jan 15, 2024 · 7b3a6d6 · 7b3a6d6
1 parent a96d703
commit 7b3a6d6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/components/Speakers.astro b/src/components/Speakers.astro
@@ -9,22 +9,35 @@ import Image6 from "../../public/6.jpg";
 ---
 
 <div id="horizontal-scoll" class="overflow-hidden">
-  <div class="w-full mx-auto max-w-7xl py-20 px-4 md:px-8 lg:px-12">
+  <div
+    class="w-full text-speakers mx-auto max-w-7xl py-20 px-4 md:px-8 lg:px-12 flex gap-8 justify-between items-end"
+  >
     <div
-      class="flex flex-col text-speakers text-2xl md:text-4xl lg:text-6xl font-black text-white text-center"
+      class="flex flex-col text-2xl md:text-4xl lg:text-6xl font-black text-white text-left w-full"
     >
       <span class="md:whitespace-nowrap">Palestrantes da</span>
       <span class="text-green-600 md:whitespace-nowrap"
         >DevParaná Conference 2024</span
       >
     </div>
+
+    <div class="">
+      <span>
+        <a
+          href="#"
+          class="cursor-pointer rounded-full font-semibold leading-6 whitespace-nowrap block text-center bg-green-700 hover:bg-green-600 text-neutral-950 text-base lg:text-lg px-8 py-4"
+        >
+          Botão C4P
+        </a>
+      </span>
+    </div>
   </div>
 
   <section>
     <div class="horizontal-scoll-wrapper h-full">
       <div class="horizontal h-full flex items-stretch justify-stretch gap-4">
         <div
-          class="ml-4 card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-1 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="ml-4 card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-1 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image1}
@@ -46,7 +59,7 @@ import Image6 from "../../public/6.jpg";
         </div>
 
         <div
-          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-2 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-2 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image2}
@@ -68,7 +81,7 @@ import Image6 from "../../public/6.jpg";
         </div>
 
         <div
-          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-3 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-3 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image3}
@@ -90,7 +103,7 @@ import Image6 from "../../public/6.jpg";
         </div>
 
         <div
-          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-4 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-4 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image4}
@@ -112,7 +125,7 @@ import Image6 from "../../public/6.jpg";
         </div>
 
         <div
-          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-5 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-5 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image5}
@@ -134,7 +147,7 @@ import Image6 from "../../public/6.jpg";
         </div>
 
         <div
-          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[50%] lg:w-[40%] xl:w-1/4 card-speakers-6 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
+          class="card-speakers text-white w-[90%] sm:w-[70%] md:w-[300px] lg:w-[400px] xl:w-[450px] card-speakers-6 shrink-[0] bg-teste/80 border border-green-900/50 rounded-xl overflow-hidden"
         >
           <Image
             src={Image6}
@@ -158,7 +171,7 @@ import Image6 from "../../public/6.jpg";
     </div>
   </section>
 
-  <div
+  <!-- <div
     class="flex text-c4p flex-col gap-4 justify-center items-center text-neutral-400 w-full mx-auto max-w-lg text-center mt-20"
   >
     <span
@@ -173,7 +186,7 @@ import Image6 from "../../public/6.jpg";
         Botão C4P
       </a>
     </span>
-  </div>
+  </div> -->
 </div>
 
 <style>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -161,7 +161,7 @@ const { title } = Astro.props;
       scrollTrigger: {
         trigger: ".horizontal-scoll-wrapper",
         start: "20% 90%",
-        end: "30% center",
+        end: "center center",
         scrub: true,
       },
       stagger: 0.1,
@@ -175,7 +175,7 @@ const { title } = Astro.props;
     const cardSpeakers = horizontalSection.querySelectorAll(".card-speakers");
     let widthTotal = 0;
     cardSpeakers.forEach((card) => {
-      widthTotal = widthTotal + card.clientWidth;
+      widthTotal = widthTotal + card.clientWidth - 300;
     });
 
     gsap.to(".horizontal", {