Scribd Logo
Upload

Welcome to Scribd!

  • Hero JSX

    Uploaded by

    Chan Biadnes
    9 views1 page
    The component imports style sheets and 17 image assets. It then renders a section with a div containing the images layered on top of each other with absolute positioning and the same classes. Between the images is text centered on the page. This creates a scrolling parallax hero section with overlapping images.

    Original Description:

    Original Title

    hero jsx

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The component imports style sheets and 17 image assets. It then renders a section with a div containing the images layered on top of each other with absolute positioning and the same classes. Between the images is text centered on the page. This creates a scrolling parallax hero section with overlapping images.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    9 views1 page

    Hero JSX

    Uploaded by

    Chan Biadnes
    The component imports style sheets and 17 image assets. It then renders a section with a div containing the images layered on top of each other with absolute positioning and the same classes. Between the images is text centered on the page. This creates a scrolling parallax hero section with overlapping images.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 1

    import styles from '..

    /style';
    import { cbhero0, cbhero1, cbhero2, cbhero3, cbhero4, cbhero5, cbhero6, cbhero7,
    cbhero8,
    cbhero9, cbhero10, cbhero11, cbhero12, cbhero13, cbhero14,
    cbhero15,cbhero16 } from '../assets';
    import { Parallax, ParallaxLayer } from '@react-spring/parallax';

    const Hero = () => (


    <section id="home" className={` flex md:h-[100svh] h-[80svh] justify-center w-
    full z-[0]`}>
    <div className="relative w-full">
    <img src={cbhero16} alt="hero_image" id="hero16" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero15} alt="hero_image" id="hero15" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero14} alt="hero_image" id="hero14" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero13} alt="hero_image" id="hero13" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero12} alt="hero_image" id="hero12" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero11} alt="hero_image" id="hero11" className="absolute
    top-0 left-0 w-full" />
    <img src={cbhero10} alt="hero_image" id="hero10" className="absolute
    top-0 left-0 w-full" />
    <h2 id="hero-text" className={`${styles.heading2} relative md:top-[25%]
    top-[200px] z-[1] text-center `}>Imagine. Design. Develop.</h2>
    <img src={cbhero9} alt="hero_image" id="hero9" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero8} alt="hero_image" id="hero8" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero7} alt="hero_image" id="hero7" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero6} alt="hero_image" id="hero6" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero5} alt="hero_image" id="hero5" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero4} alt="hero_image" id="hero4" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero3} alt="hero_image" id="hero3" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero2} alt="hero_image" id="hero2" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero1} alt="hero_image" id="hero1" className="absolute top-
    0 left-0 w-full" />
    <img src={cbhero0} alt="hero_image" id="hero0" className="absolute top-
    0 left-0 w-full" />
    </div>

    </section>
    );

    export default Hero

    You might also like