Animated Web Page - Copy this React, Tailwind Component to your project

Descripción general: Estoy trabajando en una página web que incluye varios elementos interactivos como cuadros de texto, imágenes y enlaces. Quiero agregar animaciones y transiciones suaves para hacer la página más dinámica y atractiva visualmente. Las animaciones deben activarse de manera sutil, mejorando la experiencia del usuario sin ser demasiado invasivas. Elementos a animar y sus efectos: Cuadros de texto en el arco: Los cuadros de texto dentro de la sección "arc container" deben aparecer suavemente cuando la página cargue, con una animación de deslizamiento desde la parte inferior. Al pasar el mouse sobre cada cuadro de texto (que es un enlace), quiero que se desplace un poco hacia arriba y cambie el color de fondo a un tono más oscuro. Además, puede aparecer una sombra sutil. Los cuadros de texto deben tener una animación que los haga "aparecer" con un retraso progresivo (cada uno con un tiempo diferente). Imágenes dentro de "image container": Las imágenes deben aparecer con una animación de desvanecimiento cuando el usuario haga scroll y las vea. Esto debería ser una animación en la que la opacidad cambie de 0 a 1, junto con un ligero movimiento hacia arriba (para dar la sensación de que se están deslizando desde abajo). Además, cuando el usuario pase el mouse sobre una imagen, quiero que esta se haga un poco más grande (con un efecto de zoom) y vuelva a su tamaño original cuando el mouse se retire. Efectos de hover para los enlaces: Los enlaces (cuadros de texto) deben tener un cambio visual cuando el usuario pase el mouse sobre ellos. Esto puede ser un cambio de color en el fondo, una sombra que aparece alrededor y un pequeño escalado para que se vean más interactivos. Además, me gustaría que los cuadros de texto tuvieran una animación de "deslizamiento" o "aparecer" de manera suave cuando la página se cargue.