Merge pull request #33 from italoh623/develop

Develop

src/components/SessionAppreciation/styles.module.css

@@ -135,10 +135,20 @@
   flex: 1;
 }
 
+@media (max-width: 1050px) {
+  .photo > img {
+    width: 85%;
+  }
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 25px 40px;
   }
+
+  .photo > img {
+    width: 95%;
+  }
 }
 
 @media (max-width: 667px) {

src/components/SessionDisappearance/index.tsx

@@ -33,6 +33,7 @@ export default function SessionDisappearance() {
           <Quote
             description="-Destaca Bárbara."
             quote="Cinemas de rua nasceram de forma privada, é por isso que tivemos tantos[...] Os cinemas que a gente conhece hoje, já associamos como uma responsabilidade do estado, ao patrimônio, das fundações de cultura, de acesso democrático, por que hoje ele está no espaço público, mas isso é uma coisa recente."
+            inverted={true}
           />
         </section>
       </div>

src/components/SessionDisappearance/styles.module.css

@@ -86,8 +86,8 @@
 .reportImage > .illustration1 {
   position: relative;
   flex: 1;
-  height: 50vw;
-  max-height: 50vh;
+  height: 40vw;
+  max-height: 40vh;
 }
 
 .reportImage > .saoLuis {

src/components/SessionMore/index.tsx

@@ -1,8 +1,58 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import styles from "./styles.module.css";
 
 export default function SessionMore() {
+  const [text, setText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [startAnimation, setStartAnimation] = useState(false);
+  const textRef = useRef(null);
+
+  const fullText = 'Saiba mais sobre';
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5, // Define o quanto do elemento precisa estar visível
+    };
+
+    const observer = new IntersectionObserver(entries => {
+      console.log("AQUI")
+      console.log(entries)
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setStartAnimation(true);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, options);
+
+    if (textRef.current) {
+      observer.observe(textRef.current);
+    }
+
+    return () => {
+      if (textRef.current) {
+        observer.unobserve(textRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!startAnimation) return;
+
+    const timer = setTimeout(() => {
+      if (currentIndex < fullText.length) {
+        setCurrentIndex(prevCurrentIndex => prevCurrentIndex + 1);
+        setText(prevText => prevText + fullText[currentIndex]);
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [text, startAnimation]);
+
   const handleClick = (path: string) => {
     return () => window.location.href = path;
   };
@@ -24,7 +74,7 @@ export default function SessionMore() {
       </div>
 
       <div className={styles.findOutMore}>
-        <p>Saiba mais sobre</p>
+        <p ref={textRef}>{text}</p>
         <button onClick={handleClick('/about')}>O PROJETO</button>
       </div>
     </div>

src/components/SessionPanorama/styles.module.css

@@ -101,6 +101,7 @@
   font-size: 4rem;
   font-family: var(--favela-font);
   font-weight: 400;
+  text-align: center;
   color: #2F2012;
 }
 
@@ -128,6 +129,12 @@
   margin-bottom: 50px;
 }
 
+@media (max-width: 1050px) {
+  .carouselContainer {
+    width: 90%;
+  }
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 25px 40px;

src/components/Shared/Quote/index.tsx

@@ -1,23 +1,75 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import styles from "./styles.module.css";
 
 export interface QuoteProps {
   quote: string;
   description: string;
+  inverted?: boolean;
 }
 
-export default function Quote({ quote, description }: QuoteProps) {
+export default function Quote({ quote, description, inverted }: QuoteProps) {
+  const [text, setText] = useState('');
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [startAnimation, setStartAnimation] = useState(false);
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5, // Define o quanto do elemento precisa estar visível
+    };
+
+    const observer = new IntersectionObserver(entries => {
+      console.log("AQUI")
+      console.log(entries)
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setStartAnimation(true);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, options);
+
+    if (textRef.current) {
+      observer.observe(textRef.current);
+    }
+
+    return () => {
+      if (textRef.current) {
+        observer.unobserve(textRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!startAnimation) return;
+
+    const timer = setTimeout(() => {
+      if (currentIndex < quote.length) {
+        setCurrentIndex(prevCurrentIndex => prevCurrentIndex + 1);
+        setText(prevText => prevText + quote[currentIndex]);
+      }
+    }, 25);
+
+    return () => clearTimeout(timer);
+  }, [text, startAnimation]);
+
   return (
-    <div className={styles.container}>
+    <div className={styles.container} ref={textRef}>
       <img className={styles.vector} src="./images/quote-vector.svg"/>
-      <div className={styles.content}>  
+      <div 
+        className={styles.content} 
+        style={{flexDirection: inverted ? "column-reverse" : "column"}}
+      >  
         <span className={styles.description}>
           { description }
         </span>
         <div className={styles.quote}>
           <img src="./images/quote-left.svg"/>
-          <span>{ quote }</span>
+          <span>{ text }</span>
         </div>
       </div>
     </div>

src/components/Shared/Quote/styles.module.css

@@ -10,6 +10,8 @@
   font-family: var(--sometypeMono-font);
   font-weight: 400;
   max-width: 800px;
+  display: flex;
+  /* flex-direction: column; */
 }
 
 .description {
@@ -21,7 +23,7 @@
   flex: 1;
   align-items: flex-start;
   gap: 30px;
-  margin-top: 20px;
+  margin: 20px 0px;
 }
 
 .quote > span {