Problems.tsx

import { useEffect, useRef, useState } from "react";

export function Problems(){
    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 Title1 = "Cystic Fibrosis";
    const Title2 = "makes life breathtaking";
    const Prob11 = "Thick mucus blocking airway and prevents"
    const Prob12 = "oxygen absorption, leading to bronchial"
    const Prob13 = "obstructions, organ failue an death" ;
    const Prob21 = "Chronic inflammation occurs periodically";
    const Prob22 = "due to a high vulnerability ";
    const Prob23 = "to bacterial and viral infections";
    const Prob31 = "Heightened safety considerations and";
    const Prob32 = "emotional stress promote depression";
    const Prob33 = "and psychological issues";

    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/problems/cyfib-1.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/problems/cyfib-2.webp">
                    </img>
                    <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
                    <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
            </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/problems/cyfib-3.webp">
                    </img>
                    <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
                    <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
            </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/problems/cyfib-4.webp">
                    </img>
                    <p style={{'position': 'fixed','top': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
                    <p style={{'position': 'fixed','top': '23vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
                    <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
            </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/problems/cyfib-5.webp">
                    </img>
                    <p style={{'position': 'fixed','top': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
                    <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
                    <p id="breatht1"style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
                    <p id="breatht2"style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
                    <p id="breath3"style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
                    <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}></p>
            </div>
            <div id="sciency"></div>
            
            </>
    );
}