add animation (#90)

docs/frontend/animation.mdx

@@ -0,0 +1,151 @@
+---
+title: Animación
+description: 'Animaciones para web.'
+
+contributors:
+  - github_username: 'mariaelisaaraya'
+
+submenu:
+  - imgPlaceholder: 'Animate.style'
+    titleCard: 'Biblioteca de animaciones CSS.'
+    links:
+      - type: 'Web'
+        url: 'https://animate.style/'
+    cover:
+      src: '/frontend/animation/animatecss.png'
+      height: 190
+      width: 190
+    videos: []
+
+  - imgPlaceholder: 'Animatopy'
+    titleCard: 'Animaciones de CSS'
+    links:
+      - type: 'Web'
+        url: 'https://sarthology.github.io/Animatopy/' 
+    cover:
+      src: '/frontend/animation/sarhology.png'
+      height: 70
+      width: 70
+    videos: []
+
+  - imgPlaceholder: 'Animista'
+    titleCard: 'Biblioteca de animaciones CSS.'
+    links:
+      - type: 'Web'
+        url: 'https://animista.net/'
+    cover:
+      src:  '/frontend/animation/animista.png'
+      height: 80
+      width: 80
+    videos: []
+
+  - imgPlaceholder: 'Aos'
+    titleCard: 'Biblioteca de desplazamiento animada'
+    links:
+      - type: 'Web'
+        url: 'https://michalsnik.github.io/aos/' 
+    cover:
+      src: '/frontend/animation/aos.png'
+      height: 70
+      width: 70
+    videos: []
+
+  - imgPlaceholder: 'Auto-Animate'
+    titleCard: 'Animaciones automáticas.'
+    links:
+      - type: 'Web'
+        url: 'https://auto-animate.formkit.com/' 
+    cover:
+      src: '/frontend/animation/auto-animate.svg'
+      height: 190
+      width: 190
+    videos: []
+
+  - imgPlaceholder: 'Cattocss'
+    titleCard: 'Animaciones CSS.'
+    links:
+      - type: 'Web'
+        url: 'https://cattocss.com/'
+    cover:
+      src:  '/frontend/animation/catto.png'
+      height: 80
+      width: 80
+    videos: []
+
+  - imgPlaceholder: 'Framer Motion'
+    titleCard: 'Biblioteca de animación para React'
+    links:
+      - type: 'Web'
+        url: 'https://framer.com/motion/' 
+    cover:
+      src: '/frontend/animation/framer.png'
+      height: 70
+      width: 70
+    videos: []
+
+  - imgPlaceholder: 'Gsap'
+    titleCard: 'Biblioteca de animación en JavaScript'
+    links:
+      - type: 'Web'
+        url: 'https://gsap.com/'
+    cover:
+      src:  '/frontend/animation/gsap.png'
+      height: 80
+      width: 120
+    videos: []
+
+  - imgPlaceholder: 'Hover'
+    titleCard: 'Funciones CSS3 como animaciones.'
+    links:
+      - type: 'Web'
+        url: 'https://ianlunn.github.io/Hover/'
+    cover:
+      src:  '/frontend/animation/hovercss.png'
+      height: 180
+      width: 200
+    videos: []
+
+  - imgPlaceholder: 'Motion'
+    titleCard: 'Biblioteca de animación'
+    links:
+      - type: 'Web'
+        url: 'https://motion.dev/'
+    cover:
+      src:  '/frontend/animation/motion.png'
+      height: 80
+      width: 100
+    videos: []
+
+  - imgPlaceholder: 'Rive'
+    titleCard: 'Animaciones interactivas.'
+    links:
+      - type: 'Web'
+        url: 'https://rive.app/'
+    cover:
+      src:  '/frontend/animation/rive.png'
+      height: 80
+      width: 80
+    videos: []
+
+  - imgPlaceholder: 'TailwindCss'
+    titleCard: 'Complemento de animación realizado en Tailwind '
+    links:
+      - type: 'Web'
+        url: 'https://tailwindcss-animated.com/'
+    cover:
+      src:  '/frontend/animation/tailwind.svg'
+      height: 80
+      width: 120
+    videos: []
+
+  - imgPlaceholder: 'React Magic'
+    titleCard: 'Biblioteca que anima componentes.'
+    links:
+      - type: 'Web'
+        url: 'https://www.react-magic-motion.com/applications/collapsible-sidebar'
+    cover:
+      src:  '/frontend/animation/react-magic.png'
+      height: 180
+      width: 100
+    videos: []
+---

docs/menu.mdx

@@ -2,45 +2,48 @@
 - name: 'Frontend'
   items:
 
-  - name: 'Deploys'
-    url: '/docs/frontend/deploys'
+  - name: 'Animación'
+    url: '/docs/frontend/animation'
+
+  - name: 'Autenticación'
+    url: '/docs/frontend/authentication'
 
   - name: 'Colores'
     url: '/docs/frontend/colors_palette'
-
-  - name: 'Iconos'
-    url: '/docs/frontend/icons'
-
-  - name: 'Fuentes'
-    url: '/docs/frontend/fonts'
-
-  - name: 'Forms'
-    url: '/docs/frontend/forms'
-
-  - name: 'Streamers'
-    url: '/docs/frontend/streamers'
-
+
   - name: 'Componentes'
     url: '/docs/frontend/components_library'
 
+  - name: 'Deploys'
+    url: '/docs/frontend/deploys'
+
   - name: 'Dominios'
     url: '/docs/frontend/domains'
 
+  - name: 'Forms'
+    url: '/docs/frontend/forms'
+
+  - name: 'Frameworks'
+    url: '/docs/frontend/frameworks'
+
+  - name: 'Fuentes'
+    url: '/docs/frontend/fonts'
+
   - name: 'Herramientas'
     url: '/docs/frontend/tools'
 
+  - name: 'Iconos'
+    url: '/docs/frontend/icons'
+
   - name: 'Imagenes'
     url: '/docs/frontend/images'
-
-  - name: 'Autenticación'
-    url: '/docs/frontend/authentication'
-
-  - name: 'Frameworks'
-    url: '/docs/frontend/frameworks'
-
+
   - name: 'Lenguajes'
     url: '/docs/frontend/languages'
 
+  - name: 'Streamers'
+    url: '/docs/frontend/streamers'
+
 - name: 'Backend'
   items: