import { Link } from "@remix-run/react"
import Banner from "../../public/assets/img/contacto-header.webp"
import BannerMobile from "../../public/assets/img/contacto-header-780px.webp"
import Productos from "../../public/assets/img/cintillo1.webp"
import Proyecto1_1 from "../../public/assets/img/proyectos/proyecto1_1.webp" 
import Proyecto1_2 from "../../public/assets/img/proyectos/proyecto1_2.webp" 
import Proyecto2_1 from "../../public/assets/img/proyectos/proyecto2_1.webp" 
import Proyecto2_2 from "../../public/assets/img/proyectos/proyecto2_2.webp" 
import Proyecto3_1 from "../../public/assets/img/proyectos/proyecto3_1.webp" 
import Proyecto3_2 from "../../public/assets/img/proyectos/proyecto3_2.webp" 
import Proyecto3_3 from "../../public/assets/img/proyectos/proyecto3_3.webp" 
import Proyecto3_4 from "../../public/assets/img/proyectos/proyecto3_4.webp" 
import Proyecto4_1 from "../../public/assets/img/proyectos/proyecto4_1.webp" 
import Proyecto5_1 from "../../public/assets/img/proyectos/proyecto5_1.webp" 
import Proyecto6_1 from "../../public/assets/img/proyectos/proyecto6_1.webp" 
import Proyecto6_2 from "../../public/assets/img/proyectos/proyecto6_2.webp" 
import Proyecto7_1 from "../../public/assets/img/proyectos/proyecto7_1.webp" 
import Proyecto8_1 from "../../public/assets/img/proyectos/proyecto8_1.webp" 
import Proyecto9_1 from "../../public/assets/img/proyectos/proyecto9_1.webp" 
import Proyecto10_1 from "../../public/assets/img/proyectos/proyecto10_1.webp" 
import Proyecto10_2 from "../../public/assets/img/proyectos/proyecto10_2.webp"

const NuestrosProyectos = () => {
    return (
        <>
            <section>
                <div className="relative">
                    <img src={Banner} alt="Nuestros proyectos" className="hidden lg:block" />
                    <img src={BannerMobile} alt="Nuestros proyectos" className="block lg:hidden" />
                    <div className="absolute top-5 left-8 lg:top-1/4 lg:left-28">
                        <div className="lg:w-8/12">
                            <h1 className="text-3xl lg:text-6xl">
                                <span className="text-eGray">NUESTROS</span>
                                <br />
                                <span className="bg-eYellow text-eGray px-2">PROYECTOS</span>
                            </h1>
                            <p className="text-eGray mt-6 lg:mt-12 font-MontserratRegular w-44 sm:w-full">Te mostramos algunos de los proyectos más destacados.</p>
                        </div>
                    </div>
                </div>
            </section>

            <section className="pt-20 w-10/12 mx-auto">
                <div>
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">BARANDAL DE SEGURIDAD PARA BARDA Y PANEL DECORATIVO</h2>
                            <p className="font-MontserratRegular mb-5">Eversafe México siempre procura brindarte la mayor seguridad y diseño para tu hogar por eso te presentamos este barandal de más de 10 metros para protección; y una decoración para pérgola en celosía modelo Grove, acabado en pintura electrostática color negro; todo este trabajo es en placas de acero de 1/8” cortadas en láser y reforzada en ptr.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                            <div id="carouselExampleCaptions" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                    <button
                                    type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="1" className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 2"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto1_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Second item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto1_2} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">BARANDAL DE SEGURIDAD PARA ESCALERAS Y PÉRGOLA DECORATIVA</h2>
                            <p className="font-MontserratRegular mb-5">En Eversafe encontrarás proyectos a tu medida, diseñados especialmente para ti. En esta ocasión nos tocó crear un barandal de seguridad para escaleras exteriores y una hermosa pérgola para la terraza el cliente se decidió por nuestro modelo Nature en pintura automotriz color Greens SW 6748 escogido especialmente por el cliente; el proyecto fue trabajado en placas de acero de 1/8” cortadas en láser y reforzada en ptr.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions2" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions2" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                    <button
                                    type="button" data-te-target="#carouselExampleCaptions2" data-te-slide-to="1" className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 2"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto2_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Second item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto2_2} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PROYECTO DE REMODELACIÓN TOTAL</h2>
                            <p className="font-MontserratRegular mb-5">Este proyecto ha sido uno de los más grandes para Eversafe ya que se llevó a cabo una remodelación total de portones, protectores, puerta exterior y puerta principal. Se hicieron 2 portones para cochera en total cada uno con 2 puertas corredizas las cuales se desplazaban por rieles superiores y guías en la parte inferior; también se cambiaron algunos separadores/protectores que conectaban la cochera con el patio de la casa completamente fijos. Así mismo también se fabricaron 2 puertas, 1 para exterior en juego con el diseño de los portones y protectores con cerradura de manija escogida por el cliente; la puerta principal es completamente lisa a 2 colores gris claro y gris oscuro con maneral y cerradura de seguridad. Es proyecto fue trabajado en modelo de celosía Lineal 2, en pintura electrostática color negro, fabricado en placas de acero de 1/8” cortadas en láser y reforzada con marcos de ptr.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions3" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button 
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions3" 
                                        data-te-slide-to="0" 
                                        data-te-carousel-active 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-current="true" 
                                        aria-label="Slide 1"></button>
                                    <button
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions3" 
                                        data-te-slide-to="1" 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-label="Slide 2"></button>
                                    <button 
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions3" 
                                        data-te-slide-to="2" 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-label="Slide 3"></button>
                                    <button 
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions3" 
                                        data-te-slide-to="3" 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-label="Slide 4"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto3_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Second item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto3_2} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Third item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto3_3} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Fourth item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto3_4} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PORTÓN ASTURIAS 2</h2>
                            <p className="font-MontserratRegular mb-5">Eversafe México procura satisfacer las necesidades del cliente por eso en este proyecto quisimos evolucionar el modelo de celosía Asturias a uno más cerrado para la privacidad deseada del cliente. El proyecto de portón corredizo para cochera y puerta exterior con fijo se realizo con nuevo diseño “Asturias 2” y pintura electrostática color negro. Fabricado en placas de acero de 1/8” cortadas en láser y reforzada con marcos de ptr. </p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions4" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions4" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto4_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA SANTILLANA DOBLE CON CELOSÍA</h2>
                            <p className="font-MontserratRegular mb-5">En Eversafe lo que nos importa es cumplir tus necesidades como cliente así que te presentamos este proyecto que es una combinación de productos de línea con proyecto de acero. Puerta doble Sofia en color chocolate con fijos laterales y uno superior en celosía modelo Render con cristal transparente para darle un toque único, puerta de acero con doble cerradura y 18 pernos de seguridad; celosía fabricada en placas de acero de 1/8” cortadas en láser en pintura electrostática chocolate.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions5" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions5" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto5_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA DECK RED WOOD</h2>
                            <p className="font-MontserratRegular mb-5">Nuestra misión como empresa es cumplir cada idea de nuestros clientes, así que te enseñamos este proyecto de puerta deck con fijo superior en la fachada que le da un toque innovador. Nuestras puertas deck están fabricadas con marcos de acero y soportes de ptr; con aislante ligero (térmico y auditivo), cerradura de seguridad con 5 pernos y placas de deck color red Wood que son resistentes al agua y calor. El fijo superior está compuesto por un marco de acero y placas de deck red Wood. El acero es pintura electrostática para un acabado más duradero.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions6" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button 
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions6" 
                                        data-te-slide-to="0" 
                                        data-te-carousel-active 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-current="true" 
                                        aria-label="Slide 1"></button>
                                    <button
                                        type="button" 
                                        data-te-target="#carouselExampleCaptions6" 
                                        data-te-slide-to="1" 
                                        className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" 
                                        aria-label="Slide 2"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto6_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Second item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto6_2} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA DECK SILVER GRAY</h2>
                            <p className="font-MontserratRegular mb-5">En Eversafe no solo contamos con puertas o proyectos de celosía si no que también contamos con productos tecnológicos para la seguridad del hogar, te presentamos este proyecto de puerta acorazada deck con cerradura digital y maneral. La puerta es fabricada con marcos y maneral de; y soportes de ptr en pintura electrostática color negro con un aislante ligero (térmico y auditivo) y placas de deck color silver gray que son resistentes al agua y rayos del sol. Nuestra cerradura digital cuenta con 5 modos de desbloqueos: tarjeta, fingerprint, contraseña, llave y por medio de la App TUYA.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions7" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions7" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto7_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA DE ACERO CON TRAGALUZ</h2>
                            <p className="font-MontserratRegular mb-5">Puerta fabricada a medida modelo Eversafe, diseño minimalista seleccionado por el cliente. Esta puerta es fabricada con marco y placas de 1/16” de acero en pintura electrostática en color negro con una pequeña ventana en cristal reflecta plata y una cerradura escogida especialmente por el cliente.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions8" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions8" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto8_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA DOBLE DE DECK BLACK</h2>
                            <p className="font-MontserratRegular mb-5">Eversafe siempre piensa en las necesidades del cliente, este proyecto es una puerta doble con 2 fijos laterales de celosía con cristal. La puerta doble acorazada está fabricada con marcos resistentes de acero y soportes de ptr en el interior para una mayor resistencia todo en pintura electrostática color negro, un ligero aislante ligero (térmico y auditivo) con placas de deck color black que es resistente al agua y calor. Los fijos son en placas de acero de 1/8” cortada en láser en modelo squard con cristal filtra sol ahumado.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions9" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions9" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                    <button
                                    type="button" data-te-target="#carouselExampleCaptions9" data-te-slide-to="1" className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 2"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto9_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div className="lg:flex">
                        <div className="lg:w-7/12 p-5">
                            <h2 className="uppercase text-2xl font-MontserratSemiBold mb-5 lg:mb-10">PUERTA PIVOTE PREMIUM</h2>
                            <p className="font-MontserratRegular mb-5">Puerta pivote modelo Eversafe en pintura automotriz colores, dorado, café y negro. Esta puerta es fabricada con marco sencillo y placas de 1/16” de acero, con un tipo maneral y cerradura digital modelo Smart Lock I. Nuestra cerradura digital cuenta con 5 modos de desbloqueos: tarjeta, fingerprint, contraseña, llave y por medio de la App TUYA.</p>
                        </div>
                        <div className="lg:w-5/12 p-5">
                        <div id="carouselExampleCaptions10" className="relative" data-te-carousel-init data-te-carousel-slide>
                                {/*Carousel indicators*/}
                                <div className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0" data-te-carousel-indicators>
                                    <button type="button" data-te-target="#carouselExampleCaptions10" data-te-slide-to="0" data-te-carousel-active className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-current="true" aria-label="Slide 1"></button>
                                    <button
                                    type="button" data-te-target="#carouselExampleCaptions10" data-te-slide-to="1" className="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none" aria-label="Slide 2"></button>
                                </div>

                                {/*Carousel items*/}
                                <div
                                    className="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
                                    {/*First item*/}
                                    <div className="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-active data-te-carousel-item >
                                        <img src={Proyecto10_1} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                    {/*Second item*/}
                                    <div className="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none" data-te-carousel-item >
                                        <img src={Proyecto10_2} className="block w-full" alt="Nombre del proyecto" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                   
                </div>
            </section>

            <section className="mb-20">
                <div className="container w-10/12 mx-auto mt-20">
                    <Link to="/productos"><img src={Productos} alt="Productos" /></Link>
                </div>
            </section>
            
        </>
    )
}

export default NuestrosProyectos
