const Documentation = () => {
    
    return <section class="devia-welcome" style={{display: "flex", gap: 120 + 'px'}}>
    <div style={{width: 80 + '%'}}>
      <h1 class="wd-importer_title">{devia_options.name} Documentation</h1>
      <p>Welcome to the next level of web design with {devia_options.name} WordPress theme. Experience a cutting-edge era of site building as you
        effortlessly construct stunning websites.</p>
      <p>{devia_options.name} is thoughtfully crafted to harmoniously integrate with the innovative site editor, allowing you to unleash your creativity and
        deliver lightning-fast websites. Embrace the remarkable flexibility and ease-of-use provided by {devia_options.name} as it empowers you to adapt
        and thrive in this new WordPress landscape.</p>
      <p>Boost your efficiency and launch your website faster than ever before with {devia_options.name} by your side.
        Are you ready to embark on this exciting journey? Discover the limitless possibilities with {devia_options.name} – the theme that revolutionizes
        the way you build your online presence.</p>

        <h2>Using the Site Editor</h2>
        <iframe width="750" height="450" src="https://www.youtube-nocookie.com/embed/gkXxTHLf_FA?si=OIyzBUjKZelYlKnp" title="YouTube video player" 
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          style={{zIndex: 5, position: 'relative'}}
          allowfullscreen></iframe>

        <h2>Using Page Templates</h2>
          
        <iframe width="750" height="450" src="https://www.youtube-nocookie.com/embed/et3Ez62BPLk?si=1n1Pi4k6Ei1ux5TZ" title="YouTube video player" 
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          style={{zIndex: 5, position: 'relative'}}
          allowfullscreen></iframe>

        <h2>Using the block editor: Tips and shortcuts for efficiency</h2>
        <iframe width="750" height="450" src="https://www.youtube-nocookie.com/embed/KAMEer52YeI?si=U8qsZ_Qot0g4b979" title="YouTube video player" 
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          style={{zIndex: 5, position: 'relative'}}
          allowfullscreen></iframe>

        <h2>Designing with row and stack blocks</h2>
        <iframe width="750" height="450" src="https://www.youtube-nocookie.com/embed/WUji-BCsb_Q?si=gD3HEb-2koH0tsci" title="YouTube video player" 
          frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
          style={{zIndex: 5, position: 'relative'}}
          allowfullscreen></iframe>

    </div>

  </section>
}
export default Documentation;