Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Proyecto] Mi version del Banner

¿Que opina de mi versión del Banner?

import styled from "styled-components"

const BannerEstilizado = styled.div`
    background-image: url('/public/assets/banner.png');
    border-radius: 20px;
    width: 1010px;
    height: 300px;
    position: relative;
    bottom: 300px;
    left: 19%;
    div{
        width: 300px;
        padding: 70px 35px;
    }
    span{
        font-family: GandhiSansRegualar;
        font-size: 40px;
        font-weight: 400;
        line-height: 53.36px;
        text-align: left;
        color: #FFF;

    }


`


const Banner = () => {
    return <BannerEstilizado>
        <div>
            <span>
                La galería más completa del espacio
            </span>
        </div>

    </BannerEstilizado>
}

export default Banner
2 respuestas

¡Hola Roni!

Viendo tu versión del Banner, puedo notar que estás utilizando Styled Components para estilizar el componente. Sin embargo, hay algunos puntos que podríamos mejorar. Por ejemplo, en lugar de usar la propiedad background-image con la ruta relativa '/public/assets/banner.png', podrías considerar importar la imagen directamente en el archivo donde estás utilizando el componente y luego pasarla como una prop.

Además, es importante tener en cuenta que el uso de position: relative con valores como bottom: 300px y left: 19% puede generar problemas de diseño responsivo. Sería recomendable revisar si es necesario utilizar estas propiedades o si se pueden encontrar otras soluciones para posicionar el banner.

Por último, asegúrate de que la fuente "GandhiSansRegualar" esté disponible en tu proyecto para que se pueda aplicar correctamente.

En resumen, tu versión del Banner va por buen camino, pero podrías considerar algunas mejoras en la forma en que estás manejando la imagen de fondo y las propiedades de posicionamiento.

Gracias por las recomendaciones.