-q

gustavoquinalha · Jan 16, 2024 · 09201bf · 09201bf
1 parent 7b3a6d6
commit 09201bf
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 47 deletions.
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -7,7 +7,7 @@ import Image4 from "../../public/4.jpg";
 import Image5 from "../../public/5.jpg";
 ---
 
-<div id="about" class="w-full mx-auto about overflow-hidden">
+<div id="about" class="w-full max-w-7xl mx-auto about overflow-hidden">
   <div
     class="flex flex-col lg:flex-row justify-center items-center w-full gap-8 px-4 md:px-8 lg:px-12"
   >
@@ -26,7 +26,7 @@ import Image5 from "../../public/5.jpg";
           alt=""
         />
       </div>
-      <div class="flex justify-center items-start gap-4">
+      <div class="flex justify-center items-start gap-4 max-w-full w-full">
         <Image
           src={Image3}
           id="about-image-3"
@@ -48,7 +48,7 @@ import Image5 from "../../public/5.jpg";
       </div>
     </div>
 
-    <div class="w-full flex flex-col gap-8 text-about">
+    <div class="w-full flex flex-col gap-8 text-about lg:pl-20">
       <div
         class="flex flex-col text-2xl md:text-4xl lg:text-6xl font-black text-white text-left"
       >

diff --git a/src/components/Faq.astro b/src/components/Faq.astro
@@ -0,0 +1,19 @@
+<section class="faq overflow-hidden mx-auto w-full bg-teste/80">
+  <div
+    class="w-full mx-auto max-w-7xl py-20 px-4 md:px-8 lg:px-12 justify-center items-center flex flex-col gap-8"
+  >
+    <div
+      class="flex flex-col text-2xl md:text-4xl lg:text-5xl font-black text-white text-center"
+    >
+      <span class="md:whitespace-nowrap">F.A.Q</span>
+      <span class="text-green-600 md:whitespace-nowrap">Perguntas recentes</span>
+    </div>
+
+    <div class="text-white/80 text-base font-thin leading-7 mt-4">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi minus
+      sit, earum assumenda iste obcaecati blanditiis. Consequatur laudantium
+      cumque consectetur at quis? Nostrum magni obcaecati eius ipsum adipisci,
+      excepturi aperiam.
+    </div>
+  </div>
+</section>
diff --git a/src/components/Tickets.astro b/src/components/Tickets.astro
@@ -1,29 +1,22 @@
 <section class="tickets overflow-hidden mx-auto w-full">
   <div
-    class="w-full mx-auto max-w-7xl py-20 px-4 md:px-8 lg:px-12 flex flex-col lg:flex-row justify-center items-center gap-8"
+    class="w-full mx-auto max-w-7xl py-20 px-4 md:px-8 lg:px-12 flex flex-col justify-center items-center gap-8"
   >
-    <div class="w-full">
+    <div class="w-full mx-auto max-w-7xl px-4 md:px-8 lg:px-12 pb-20">
       <div
-        class="text-tickets flex flex-col text-2xl md:text-4xl lg:text-5xl font-black text-white text-left"
+        class="flex text-tickets flex-col text-2xl md:text-4xl lg:text-6xl font-black text-white text-center"
       >
         <span class="md:whitespace-nowrap">Compre agora:</span>
         <span class="text-green-600 md:whitespace-nowrap"
           >Ingressos limitados!</span
         >
-
-        <span class="text-white/80 text-base font-thin leading-7 mt-4">
-          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi
-          minus sit, earum assumenda iste obcaecati blanditiis. Consequatur
-          laudantium cumque consectetur at quis? Nostrum magni obcaecati eius
-          ipsum adipisci, excepturi aperiam.
-        </span>
       </div>
     </div>
 
     <div class="w-full">
       <div
         id="ticket"
-        class="bg-green-700/80 hover:bg-green-600 transition-colors border border-green-600/50 rounded-xl p-8 w-full aspect-video"
+        class="bg-green-700/80 hover:bg-green-600 transition-colors border border-green-600/50 rounded-xl p-8 max-w-2xl w-full aspect-video mx-auto"
       >
       </div>
     </div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -150,10 +150,9 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-
       y: 100,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
 
@@ -165,7 +164,8 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-      x: "100%",
+      y: 20,
+      opacity: 0,
       ease: "none",
       scrub: true,
     });
@@ -183,7 +183,7 @@ const { title } = Astro.props;
       xPercent: 100,
       scrollTrigger: {
         trigger: ".horizontal",
-        start: "50% center",
+        start: "180px center",
         end: `+=${widthTotal}px center`,
         pin: "#horizontal-scoll",
         scrub: true,
@@ -199,10 +199,9 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-
       y: 100,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
   };
@@ -216,10 +215,9 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-
       y: 100,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
 
@@ -273,10 +271,9 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-
       y: 100,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
 
@@ -308,30 +305,29 @@ const { title } = Astro.props;
         scrub: true,
       },
       stagger: 0.1,
-
       y: 100,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
 
-    gsap.from(".about-images", {
-      scrollTrigger: {
-        trigger: "#about",
-        scrub: true,
-        start: "40% bottom",
-        end: "bottom 100%",
-      },
-      opacity: 0,
-      ease: "none",
-    });
+    // gsap.from(".about-images", {
+    //   scrollTrigger: {
+    //     trigger: "#about",
+    //     scrub: true,
+    //     start: "40% bottom",
+    //     end: "bottom bottom",
+    //   },
+    //   opacity: 0,
+    //   ease: "none",
+    // });
 
     gsap.from("#about-image-1", {
       scrollTrigger: {
         trigger: "#about",
         scrub: true,
-        start: "top 40%",
-        end: "bottom bottom",
+        start: "top 70%",
+        end: "center 70%",
       },
       x: 150,
       y: 100,
@@ -343,8 +339,8 @@ const { title } = Astro.props;
       scrollTrigger: {
         trigger: "#about",
         scrub: true,
-        start: "top 40%",
-        end: "bottom bottom",
+        start: "top 70%",
+        end: "center 70%",
       },
       x: -120,
       y: 140,
@@ -356,8 +352,8 @@ const { title } = Astro.props;
       scrollTrigger: {
         trigger: "#about",
         scrub: true,
-        start: "top 40%",
-        end: "bottom bottom",
+        start: "top 70%",
+        end: "center 70%",
       },
       x: 220,
       y: -120,
@@ -368,8 +364,8 @@ const { title } = Astro.props;
       scrollTrigger: {
         trigger: "#about",
         scrub: true,
-        start: "top 40%",
-        end: "bottom bottom",
+        start: "top 70%",
+        end: "center 70%",
       },
       x: 40,
       y: -200,
@@ -380,8 +376,8 @@ const { title } = Astro.props;
       scrollTrigger: {
         trigger: "#about",
         scrub: true,
-        start: "top 40%",
-        end: "bottom bottom",
+        start: "top 70%",
+        end: "center 70%",
       },
       x: -250,
       y: -200,
@@ -427,7 +423,7 @@ const { title } = Astro.props;
 
       y: 200,
       opacity: 0,
-      ease: "none",
+      ease: "power1.in",
       scrub: true,
     });
   };

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,6 +12,7 @@ import Companies from "../components/Companies.astro";
 import Schedule from "../components/Schedule.astro";
 import Counter from "../components/Counter.astro";
 import Menu from "../components/Menu.astro";
+import Faq from "../components/Faq.astro";
 ---
 
 <Layout title="DevParaná Conf 2024">
@@ -27,6 +28,7 @@ import Menu from "../components/Menu.astro";
     <Tickets />
     <!-- <Test /> -->
     <!-- <Companies /> -->
+    <Faq />
     <Footer />
   </main>
 </Layout>