const rootElement = document.getElementById('root')

function PlaneacionDelDesarrollo() {

    return (
        <>
            <main>
                <div className="main-container">
                    <div style={{ fontSize: "18px" }}>
                        <p>La planeación del desarrollo es el proceso en el cual los diferentes actores sociales, intervienen de manera sistemática en el presente a través de la identificación de problemas y potencialidades para orientar el futuro deseado y posible.</p>
                        <br />
                        <p>Su validación es social y debe ser el resultado de la participación del Estado y la sociedad. Por lo tanto, reconoce la responsabilidad de los diferentes actores para definir el futuro y construir ese porvenir.</p>
                        <br />
                        <p><b>Construido a partir de:</b></p>
                        <ul style={{ color: "grey" }}>
                            <li><p><i>Saavedra, Ruth y Otros. 2001. Planificación del desarrollo. Universidad Jorge Tadeo Lozano. Bogotá</i></p></li>
                            <li><p><i>Carvajal Burbano, A. 2006. Desarrollo Local y Planeación Participativa: escenarios para reinventar el desarrollo humano desde el trabajo social. Revista de Trabajo Social e intervención social, núm. 11, octubre, 2006, pp. 69-82 Universidad del Valle Bogotá, Colombia</i></p></li>
                        </ul>
                        <br />
                    </div>
                    <div className="planeacion_desarrollo_container" >
                        <div className="planeacion_card_option">
                            <img
                                src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/x5-Asi-va-la-ruta.jpg.pagespeed.ic.k_ZlP6asWp.webp"
                                alt="Planeación Local"
                            />
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=555">
                                <button style={{ display: "block" }}>Planeación Local</button>
                            </a>
                        </div>
                        <div className="planeacion_card_option">
                            <img
                                src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/x8-Instrumentos-PDL.jpg.pagespeed.ic.Vc_L99orIe.webp"
                                alt="Planeación Local"
                            />
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=16841">
                                <button style={{ display: "block" }}>Planeación Distrital</button>
                            </a>
                        </div>
                        <div className="planeacion_card_option">
                            <img
                                src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2021/12/x5-Asi-va-la-ruta.jpg.pagespeed.ic.k_ZlP6asWp.webp"
                                alt="Planeación Local"
                            />
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=16868">
                                <button style={{ display: "block" }}>Planeación Regional</button>
                            </a>
                        </div>
                        <div className="planeacion_card_option">
                            <img
                                src="https://www.medellin.gov.co/ndesarrollo/wp-content/uploads/2023/08/Fotos-de-Ciudad-6185-1-scaled.jpg"
                                alt="Planeación Local"
                            />
                            <a href="https://www.medellin.gov.co/ndesarrollo/?page_id=23239">
                                <button style={{ display: "block" }}>Cápsulas del saber</button>
                            </a>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}

ReactDOM.render(
    <PlaneacionDelDesarrollo />,
    rootElement
)