Modern Blog Page - Copy this Angular, Tailwind Component to your project
QUiero que me generes una página web sobre blogs, lo que pasa es que tengo en la parte inicial esto "Inicio > " (está con un color plomo) + "Blog Moderna" ( con color #0D47A1), estos tienen un tamaño pequeño. Luego viene un título con el color "#0D47A1" y debajo de ellos unos cards donde tiene una imagen de tamaño 389px x 185 px con bordeado simple, debajo del mismo su título de color "#0D47A1" (debe ser título del blog) y debajo de este mismo con color plomo un reloj svg con su texto al lado que dice "Lectura de 5 min {fecha publicada}", estos cards se muestran de acuerdo cuántos blogs tienen, y por cada fila tiene un máximo de 3 cards que luego pasando más de 3, va a la siguiente columna y así sucesivamente, luego dentro otro título que se llama "Temas de interés" (#0D47A1 de ese color) y luego tengo botones, el primer botón se llama Todos (tiene un estilo como capsula de color #EFF6FF y texto #0D47A1 cuando se selecciona cualquier botón, cuando anda inactivo es de color blanco y texto #172554) y este mismo me hace un filtrado de todos los cards que se muestran después, y a partir del segundo botón, se muestran de acuerdo a la categoría o tema que exista y hace el filtrado de acuerdo al mismo, al inferior de estos botones, con texto pequeño aparece "Resultados:{total de blogs por filtrado} artículos" y luego, inferior a este, salen los blogs, pero con otro formato de estilo que tiene por la parte izquierda de cada card su título, debajo de este solo las 30 palabras del artículo, debajo aparece como capsula el tema o categoría y al lado de este aparece un reloj svg con el tiempo de lectura y la fecha, mismo formato que muestra el primer card, al lado derecho de todo eso, la imagen que tiene tamaño 232px x 204px y se separa por una linea semi tranparente, y al inferior hay unos botones con números que navegan de acuerdo a cuántas noticias haya, con un máximo de 4 noticias y luego con los botones se pueden ubicar otras 4. Estos botones tienen un estilo que al ser siguiente o trás es un mayor y menor, en circulo, luego como círculos convinados, números que dirían el índice para estos cards. Al lado de todos los cards, hay otro card muy diferente a todos, donde tiene de fondo una imagen y tiene título blanco como "Únete a Moderna" y abajo un texto blanco que dice "Sé parte de nuestro movimiento por el Desarrollo Equidad y Renovación Nacional", debajo un botón blanco con letras azules que dice "Afiliate aquí". Debajo de este hay una sección dividida en 2 partes, la parte izquierda, tiene una imagen centrada de tamaño 352px x 492px y la sección derecha tiene un título que dice Suscribete a nuestro boletín informativo, donde debajo del mimos hay 3 casilleros, el primero es para colocar el nombre, el segundo para colocar el email y el tercero es un desplegador que va de acuerdo a cada tema o categoría, ten en cuenta que al seleccionar 1, puede seleccionar más categorías, como una lista, pero cada vez que selecciona 1 categoría, en el desplegador, no se mostrará la categoría que escogió. Luego, debajo hay 1 casillero de check donde a su costado menciona "Estoy de acuerdo con los" y de azul para seguir a un link es este "Términos de Uso de Moderna", si selecciona ese casillero, entonces guardas esa data como boolean, se repite lo mismo con otro que tiene debajo donde dice "Confirmo que he" + "leído" (de azul para llevar a otra página) + "la" + " Política de Privacidad de Moderna" (de azul que manda a la política de privacidad), y debajo de esto un botón que dice "Suscribirse" que cuando se suscribe, aparece un modal diciendo que se a suscrito correctamente y los casilleros con los checks, quedan limpios.
