src/Ideas.sx

+<div className="gall">
+      <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain"/>
+      <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers"/>
+      <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees"/>
+      <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky"/>
+      <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape"/>
+      <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+      <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain"/>
+      <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings"/>
+</div>
+
+
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+<a href="https://www.flaticon.com/free-icons/download" title="download icons">Download icons created by Kiranshastry - Flaticon</a>
+<div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+
+componentDidMount() {
+    const script = document.createElement("script");    script.async = true;    script.src = "https://some-scripturl.js";    this.div.appendChild(script);  }
+  render() {
+    return (
+      <div className="App" ref={el => (this.div = el)}>        <h1>Hello react</h1>
+        {/* Scr
+
+
+
+
+<div style="min-height:374px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/llngz/full.png" alt="" /></noscript></div>
+
+

src/components/AOSs.tsx

+
+import { useEffect } from "react";
+import AOS from "aos";
+
+
+export function AOStry(){
+    useEffect(() => {
+        AOS.init({
+          disable: "phone",
+          duration: 700,
+          easing: "ease-out-cubic",
+        }); 
+      }, []);
+    return(
+        <h1 data-aos="zoom-y-out">Sample heading</h1>
+    )
+}
+

src/components/AirbuddyAnim.tsx

+import { useEffect, useRef, useState } from "react";
+
+export function AirbuddyAnim(){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    const [isVisible2, setVisible2] = useState(false);
+    const domRef2 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible2(entry.isIntersecting));
+        });
+        observer.observe(domRef2.current!);
+    }, []);
+
+    const [isVisible3, setVisible3] = useState(false);
+    const domRef3 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible3(entry.isIntersecting));
+        });
+        observer.observe(domRef3.current!);
+    }, []);
+    
+    const [isVisible4, setVisible4] = useState(false);
+    const domRef4 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible4(entry.isIntersecting));
+        });
+        observer.observe(domRef4.current!);
+    }, []);
+
+    
+    const [isVisible5, setVisible5] = useState(false);
+    const domRef5 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible5(entry.isIntersecting));
+        });
+        observer.observe(domRef5.current!);
+    }, []);
+    
+    const [isVisible6, setVisible6] = useState(false);
+    const domRef6 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible6(entry.isIntersecting));
+        });
+        observer.observe(domRef6.current!);
+    }, []);
+    
+    const [isVisible7, setVisible7] = useState(false);
+    const domRef7 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible7(entry.isIntersecting));
+        });
+        observer.observe(domRef7.current!);
+    }, []);
+    
+    const [isVisible8, setVisible8] = useState(false);
+    const domRef8 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible8(entry.isIntersecting));
+        });
+        observer.observe(domRef8.current!);
+    }, []);
+
+    return (
+        <>
+            {/* One */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible ? '1' : '0'}`,
+                    'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.webp">
+                    </img>
+            </div>
+            {/* Two */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible2 ? '1' : '0'}`,
+                    'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+                ref={domRef2}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
+                    </img>
+            </div>
+            {/* Three */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible3 ? '1' : '0'}`,
+                    'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+                ref={domRef3}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
+                    </img>
+            </div>
+            {/* Four */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible4 ? '1' : '0'}`,
+                    'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+                ref={domRef4}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
+                    </img>
+            </div>
+            {/* Five */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible5 ? '1' : '0'}`,
+                    'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+                ref={domRef5}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
+                    </img>
+            </div>
+            {/* Six */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible6 ? '1' : '0'}`,
+                    'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
+                ref={domRef6}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
+                    </img>
+            </div>
+            
+            {/* Seven */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible7 ? '1' : '0'}`,
+                    'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
+                ref={domRef7}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
+                    </img>
+            </div>
+            
+            {/* Eight */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible8 ? '1' : '0'}`,
+                    'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
+                ref={domRef8}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
+                    </img>
+            </div>
+            
+            </>
+    );
+}
\ No newline at end of file