Agregar Header, y algunas cosas de estructura de archivos.

DEPLOY.md

@@ -0,0 +1,62 @@
+# Guía de ejecución y despliegue del proyecto
+
+## Información importante
+
+Este proyecto utiliza **pnpm** como gestor de paquetes y está basado en **Astro**. Se recomienda seguir los pasos en el orden indicado para evitar errores.
+
+Antes de ejecutar el proyecto, asegúrate de contar con:
+
+- Node.js (versión recomendada: 18 o superior)
+- pnpm instalado globalmente
+
+---
+
+## Pasos previos (Ramas) (*Recomendación)
+
+Antes de correr el proyecto si necesitas hacer cambios grandes en la estructura del proyecto, es recomendable, crear una nueva rama y hacer los cambios en dicha rama git:
+
+``` bash
+git checkout -b [nombre-rama]
+```
+
+Si se daña algo de la web, se puede eliminar la rama y la rama principal estará en buen estado:
+
+``` bash
+git branch -d [nombre-rama]
+````
+
+> Si no conoces bien los comandos git, información extra del funcionamiento/comandos de git investigar.
+
+---
+
+## Pasos para ejecutar el proyecto en desarrollo
+
+1. Instalar dependencias:
+
+``` bash
+pnpm install
+```
+
+2. Ejecutar el proyecto (paquete `web`):
+
+``` bash
+pnpm --filter web dev
+```
+
+3. Agregar Tailwind CSS (solo si no está instalado):
+
+``` bash
+npx astro add tailwind
+```
+
+---
+
+## Notas adicionales
+
+- Si Tailwind ya está configurado, **no es necesario ejecutar el paso 3**.
+
+- El servidor de desarrollo mostrará la URL local en la terminal.
+
+- Ante errores, verifica que las dependencias estén correctamente instaladas.
+
+- Si llegas a crear algún tipo de documentación, Markdownlint para una buena sintaxis de documentación (.md) y ltex para corrección de faltas ortográficas.

web/src/components/icons/menu.astro

@@ -0,0 +1,18 @@
+---
+const props = Astro.props
+---
+
+<!-- Nuevo icono para cuando el header sea movil -->
+
+<svg
+  xmlns='http://www.w3.org/2000/svg'
+  width='24'
+  height='24'
+  viewBox='0 0 640 640'
+  fill='currentColor'
+  {...props}
+>
+  <path
+    d='M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z'
+  ></path>
+</svg>

web/src/components/Footer.astro → web/src/components/layout/Footer.astro

@@ -1,6 +1,7 @@
 ---
-import Github from './icons/github.astro'
-import Logo from './Logo.astro'
+// se agrega "../" a las rutas porque se movio de ubicacion a la carpeta layout el footer 
+import Github from '../icons/github.astro'
+import Logo from '../ui/Logo.astro'
 
 const currentYear = new Date().getFullYear()
 

web/src/components/layout/Header.astro

@@ -0,0 +1,88 @@
+---
+import Logo from '@components/ui/Logo.astro'
+import Github from '@components/icons/github.astro'
+import ToggleTheme from '@components/ui/ToggleTheme.astro'
+import Menu from '@components/icons/menu.astro'
+import Enlace from '@components/ui/Enlace.astro'
+---
+
+<!-- Todo el header completo el componente y sus configuraciones -->
+
+<script>
+  const btn = document.getElementById('menu-btn')
+  const menu = document.getElementById('menu')
+
+  if (btn && menu) {
+    btn.addEventListener('click', () => {
+      const menuOpen = menu.classList.toggle('hidden')
+      btn.setAttribute('aria-expanded', String(!menuOpen))
+    })
+  }
+</script>
+
+<header
+  class='fixed z-20 w-screen border-b border-slate-200 bg-white/80 px-3 py-5 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/80'
+>
+  <div class='mx-auto grid w-full max-w-6xl grid-cols-2 grid-cols-[auto_auto]'>
+    <!-- Title of Web -->
+    <div
+      class='animate-fade-in-up animate-delay-100 flex items-center gap-1 sm:gap-2'
+    >
+      <Logo
+        class='aspect-square size-7 shrink-0 sm:size-9'
+        iconClass='size-4 sm:size-6 animate-float-subtle'
+      />
+      <h1
+        class='text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-white'
+      >
+        Tailwind <span class='text-blue-500'>Animations</span>
+      </h1>
+    </div>
+
+    <button
+      id='menu-btn'
+      aria-label='Abrir menú'
+      aria-expanded='false'
+      class='flex justify-end text-2xl lg:hidden'
+    >
+      <Menu class='size-7 self-end sm:size-8' />
+    </button>
+
+    <div
+      id='menu'
+      class='col-span-2 hidden h-fit gap-5 lg:col-span-1 lg:grid lg:grid-cols-[auto_auto]'
+    >
+      <!-- main navigation -->
+      <nav
+        class='my-3 flex flex-col gap-5 max-lg:text-center lg:flex-row lg:items-center lg:gap-6'
+      >
+        <div
+          class='h-[2px] bg-gradient-to-r from-transparent via-slate-300 to-transparent dark:via-slate-800'
+        >
+        </div>
+        <Enlace href='#preview'>Preview</Enlace>
+        <Enlace href='#animation-collection'>Animation Collection</Enlace>
+        <Enlace href='#scroll-animations'>Scroll Animations</Enlace>
+        <Enlace href='#scroll-view-timelines'>Scroll View Timelines</Enlace>
+      </nav>
+
+      <!-- Color Theme / GitHub -->
+      <div
+        id='menu-icons'
+        class='mt-3 flex flex-row justify-center gap-4 lg:flex'
+      >
+        <ToggleTheme />
+
+        <a
+          aria-label='View website repository on GitHub'
+          href='https://github.com/midudev/tailwind-animations'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200'
+        >
+          <Github class='size-7' />
+        </a>
+      </div>
+    </div>
+  </div>
+</header>

web/src/components/ui/Enlace.astro

@@ -0,0 +1,45 @@
+---
+const { href, target = '_self', className = '' } = Astro.props
+---
+
+<!-- Este es un componente que utiliza el header para navegar fluidamente con sus enlaces -->
+
+<a
+  href={href}
+  target={target}
+  draggable='false'
+  class='text-slate-600 transition-colors select-none hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
+  data-enlace
+>
+  <slot />
+</a>
+
+<script>
+  document.addEventListener('click', (e) => {
+    if (!e.target) return
+    const link = (e.target as Element).closest('a[data-enlace]')
+    if (!link) return
+
+    const href = link.getAttribute('href')
+
+    // If it's an in-page anchor like #temario, scroll to the element instead
+    if (href && href.startsWith('#')) {
+      e.preventDefault()
+      const id = href.slice(1)
+      const el =
+        document.getElementById(id) || document.getElementsByName(id)[0]
+
+      if (el) {
+        // try to account for a fixed header
+        const header = document.querySelector('header')
+        const offset = header ? header.offsetHeight + 8 : 8
+        const y = el.getBoundingClientRect().top + window.pageYOffset - offset
+
+        window.scrollTo({ top: y, behavior: 'smooth' })
+      } else {
+        console.warn('Anchor target not found:', href)
+      }
+    }
+    // External or normal links are handled by the browser
+  })
+</script>

web/src/components/ToggleTheme.astro → web/src/components/ui/ToggleTheme.astro

@@ -1,6 +1,6 @@
 ---
-import SunIcon from './icons/sun.astro'
-import MoonIcon from './icons/moon.astro'
+import SunIcon from '../icons/sun.astro'
+import MoonIcon from '../icons/moon.astro'
 ---
 
 <button

web/src/pages/index.astro

@@ -4,12 +4,24 @@ import Layout from '@layouts/Layout.astro'
 import pkg from '../../../package.json'
 import { theme } from '../data/theme.js'
 
-import CopyIcon from '@components/icons/copy.astro'
+/*  
+Las importaciones, se han organizado de la siguiente forma: 
+1. importacion de code.
+2. importaciones de iconos.
+3. importaciones de componentes UI.
+4. importaciones de layout.
+*/
+
 import { Code } from 'astro:components'
+import CopyIcon from '@components/icons/copy.astro'
 import Github from '@components/icons/github.astro'
-import Footer from '@components/Footer.astro'
-import Logo from '@components/Logo.astro'
-import ToggleTheme from '@components/ToggleTheme.astro'
+
+import Logo from '@components/ui/Logo.astro'
+import ToggleTheme from '@components/ui/ToggleTheme.astro'
+
+// Importacion de componentes de layout
+import Footer from '@components/layout/Footer.astro'
+import Header from '@components/layout/Header.astro'
 
 const { animation, animationDuration, animationSteps, animationDelay } = theme
 const { version } = pkg
@@ -79,9 +91,11 @@ const packageManagers = [
   title='Tailwind CSS Animations Plugin: Community-Powered Animation Magic'
 >
   <wc-toast class='pointer-events-none fixed inset-0 z-50'></wc-toast>
+  <!-- se agrega el componente header -->
+  <Header />
 
   <main class='mx-auto max-w-6xl w-full pt-16'>
-    <header class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'>
+    <header id="preview" class='relative z-10 mx-auto mb-20 max-w-6xl px-4 lg:px-8'>
       <div
         class='absolute top-6 right-6 z-50 flex w-fit items-center gap-4 lg:fixed'
       >
@@ -334,7 +348,7 @@ export default {
       </div>
     </header>
 
-    <section class='mt-32 mb-24'>
+    <section id='animation-collection' class='mt-32 mb-24'>
       <div class='mb-16 flex flex-col items-center'>
         <h2
           class='animate-fade-in-up animate-delay-[600ms] mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'
@@ -351,8 +365,9 @@ export default {
       </div>
 
       <div class='relative'>
+        <!-- Antes era sticky se le quito para que no tenga problemas con el header que es sticky -->
         <section
-          class='sticky top-4 z-50 mb-12 flex items-center justify-center px-4'
+          class='top-4 z-50 mb-12 flex items-center justify-center px-4'
           id='option-inputs'
         >
           <div
@@ -509,7 +524,7 @@ export default {
         }
       </div>
 
-      <section class='relative mt-32 mb-24'>
+      <section id='scroll-animations' class='relative mt-32 mb-24'>
         <div class='mb-16 flex flex-col items-center'>
           <h2
             class='mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'
@@ -664,7 +679,7 @@ export default {
         </div>
       </section>
 
-      <section class='relative mt-32 mb-24'>
+      <section id="scroll-view-timelines" class='relative mt-32 mb-24'>
         <div class='mb-16 flex flex-col items-center'>
           <h2
             class='mb-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white'