Fix spelling errors and add video player functionality

- Fix spelling errors across multiple pages (add missing accents) - Add video player page with dynamic routing - Rename docs.astro to documentation.astro - Capitalize first letter of video names in player - Update styles for contact, documentation and global CSS
2026-02-17 13:32:22 -05:00
parent 7bebc0b97d
commit f6bf1dc29b
14 changed files with 468 additions and 43 deletions
--- a/public/documentation_videos/Crear_Agenda.mp4
+++ b/public/documentation_videos/Crear_Agenda.mp4
--- a/public/documentation_videos/Crear_Usuario_Recepcionista.mp4
+++ b/public/documentation_videos/Crear_Usuario_Recepcionista.mp4
--- a/src/components/navbar/Navbar.astro
+++ b/src/components/navbar/Navbar.astro
@@ -52,7 +52,10 @@ const currentPath: string = Astro.url.pathname;
            Contacto
        </a>

-        <a href="/docs" class={currentPath === "/docs" ? "active" : ""}>
+        <a
+            href="/documentation"
+            class={currentPath === "/documentation" ? "active" : ""}
+        >
            Documentación
        </a>
    </div>
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -66,11 +66,16 @@ a.active::after {
    content: "";
    display: block;
    position: absolute;
+    top: 100%;
    left: 0;
    bottom: 0;
-    height: 2px;
+    height: 3px;
    width: 100%;
-    background-color: red;
+    background: linear-gradient(
+        90deg,
+        var(--main-pink-500) 0%,
+        var(--main-yellow-500) 100%
+    );
 }

 .general-button {
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -25,7 +25,7 @@ const { pageTitle } = Astro.props;
        <title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title>
    </head>

-    <body class="body-container">
+    <body>
        <svg
            class="bg-svg"
            aria-hidden="true"
@@ -40,7 +40,7 @@ const { pageTitle } = Astro.props;
                fill="currentColor"></path>
        </svg>

-        <header>
+        <header class="header">
            <Navbar />
        </header>

@@ -92,10 +92,11 @@ const { pageTitle } = Astro.props;
                    </div>
                </a>
            </div>
+
            <slot />
        </main>

-        <footer>
+        <footer class="footer">
            <Footer />
        </footer>
    </body>
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -21,7 +21,7 @@ import "../styles/contactpage.css";
            customYPosition="20%"
            logoSrc="/src/assets/imgs/logo-naliia.svg"
            logoAlt="Logo de Naliia"
-            mainTitle="Contactanos"
+            mainTitle="Contáctanos"
            autoHeight={true}
        >
            <div slot="extraContent">
@@ -29,12 +29,12 @@ import "../styles/contactpage.css";
                    <div class="contact-methods">
                        <div class="title-and-text">
                            <h5 class="subtitle">
-                                Todas nuestras redes sociales y metodos de
+                                Todas nuestras redes sociales y métodos de
                                contacto
                            </h5>

                            <p class="phrase">
-                                Contactanos y toma el control total de tu
+                                Contáctanos y toma el control total de tu
                                negocio con Naliia.
                            </p>
                        </div>
@@ -91,7 +91,7 @@ import "../styles/contactpage.css";
                        <div class="form-container">
                            <div class="form-items">
                                <h5 class="form-title">
-                                    O dejanos tus datos, nosotros te contactamos
+                                    O déjanos tus datos, nosotros te contactamos
                                </h5>

                                <form
@@ -127,7 +127,7 @@ import "../styles/contactpage.css";

                                    <div class="form-item">
                                        <label for="" class="item-label"
-                                            >Numero de celular</label
+                                            >Número de celular</label
                                        >

                                        <input
@@ -157,7 +157,7 @@ import "../styles/contactpage.css";
                                <button
                                    form="contact-form"
                                    class="submit-button"
-                                    >Enviar informacion</button
+                                    >Enviar información</button
                                >
                            </div>
                        </div>
--- a/src/pages/docs.astro
+++ b/src/pages/docs.astro
@@ -1,11 +0,0 @@
---
-// imports
-
-// types
-
-// props
-
-// logic, variables, functions, etc.
---
-
-<section>Esta es la pagina de documentacion</section>
--- a/src/pages/documentation.astro
+++ b/src/pages/documentation.astro
@@ -0,0 +1,154 @@
+---
+// imports
+import Layout from "../layouts/Layout.astro";
+import "../styles/documentation.css";
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
+const videoFiles = import.meta.glob("../../public/documentation_videos/*.mp4", {
+    eager: true,
+});
+
+const videosList = Object.keys(videoFiles).map((key) => {
+    const fileName = key.split("/").pop() || "";
+    const videoName = fileName
+        .replace(".mp4", "")
+        .replace(/-/g, " ")
+        .replace(/_/g, " ");
+
+    return {
+        name: videoName,
+        url: (videoFiles[key] as { default: string }).default,
+        id: fileName.replace(".mp4", "").toLocaleLowerCase(),
+    };
+});
+---
+
+<Layout pageTitle="Documentación">
+    <section class="videos-displayer">
+        <h3>
+            Aprende cómo funciona Naliia y resuelve cualquier duda que tengas
+        </h3>
+
+        <form role="search" class="search-bar">
+            <div class="input-container">
+                <input
+                    type="search"
+                    id="video-search"
+                    name="q"
+                    placeholder="Buscar"
+                    class="search-input"
+                    required
+                />
+
+                <button
+                    type="submit"
+                    aria-label="Ejecutar búsqueda"
+                    class="search-button"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        ><g
+                            fill="none"
+                            stroke="var(--main-icon-color)"
+                            stroke-width="2"
+                            ><circle cx="11" cy="11" r="7"></circle><path
+                                stroke-linecap="round"
+                                d="m20 20l-3-3"></path></g
+                        ></svg
+                    >
+                </button>
+            </div>
+        </form>
+
+        <div class="videos-container">
+            {
+                videosList.map((video) => (
+                    <div
+                        class="video-item"
+                        data-name={video.name.toLowerCase()}
+                    >
+                        <a
+                            href={`/video_player/${video.id}`}
+                            class="video-title"
+                        >
+                            {video.name}
+                        </a>
+
+                        <a href={`/video_player/${video.id}`}>
+                            <button class="play-button">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="32"
+                                    height="32"
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path
+                                        fill="var(--icon-whitecolor)"
+                                        fill-rule="evenodd"
+                                        d="M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16M9.555 7.168A1 1 0 0 0 8 8v4a1 1 0 0 0 1.555.832l3-2a1 1 0 0 0 0-1.664z"
+                                        clip-rule="evenodd"
+                                    />
+                                </svg>
+                                Ver video
+                            </button>
+                        </a>
+                    </div>
+                ))
+            }
+
+            <p
+                id="no-results"
+                style="display: none; text-align: center; margin-top: 2rem;"
+            >
+                No se encontraron videos que coincidan con la búsqueda.
+            </p>
+        </div>
+    </section>
+</Layout>
+
+<script>
+    const searchInput = document.querySelector(
+        "#video-search",
+    ) as HTMLInputElement | null;
+
+    const videoItems = document.querySelectorAll(
+        ".video-item",
+    ) as NodeListOf<HTMLElement>;
+
+    const noResults = document.querySelector(
+        "#no-results",
+    ) as HTMLElement | null;
+
+    if (searchInput) {
+        searchInput.addEventListener("input", (e) => {
+            const query = (e.target as HTMLInputElement).value
+                .toLowerCase()
+                .trim();
+            let hasVisibleVideos = false;
+
+            videoItems.forEach((item) => {
+                const name = item.getAttribute("data-name");
+                const matches = name && name.includes(query);
+
+                // Usamos toggle: si matches es true, hidden es false (se muestra)
+                // Si matches es false, hidden es true (se oculta)
+                item.classList.toggle("hidden", !matches);
+
+                if (matches) {
+                    hasVisibleVideos = true;
+                }
+            });
+
+            if (noResults) {
+                noResults.style.display = hasVisibleVideos ? "none" : "block";
+            }
+        });
+    }
+</script>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,7 +16,7 @@ import "../styles/index.css";
    <section class="homepage">
        <InitialSection
            imgSrc="/src/assets/imgs/mujer-con-tablet.svg"
-            imgAlt="Fotografia de una mujer sosteniendo una tablet"
+            imgAlt="Fotografía de una mujer sosteniendo una tablet"
            logoSrc="/src/assets/imgs/logo-naliia.svg"
            logoAlt="Logo de Naliia"
            mainTitle="Transformamos el caos en claridad"
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -11,7 +11,7 @@ import "../styles/pricingPage.css";
    <section class="pricing-page">
        <InitialSection
            imgSrc="/src/assets/imgs/phone_with-stats.svg"
-            imgAlt="Fotografia de un dispositivo móvil flotante con graficas y estadísticas en la pantalla y con un borde amarillo brillante"
+            imgAlt="Fotografía de un dispositivo móvil flotante con gráficas y estadísticas en la pantalla y con un borde amarillo brillante"
            imgWidth={520}
            customXPosition="-52%"
            logoSrc="/src/assets/imgs/logo-naliia.svg"
--- a/src/pages/video_player/[id].astro
+++ b/src/pages/video_player/[id].astro
@@ -0,0 +1,132 @@
+---
+import Layout from "../../layouts/Layout.astro";
+
+export async function getStaticPaths() {
+    const videoFiles = import.meta.glob(
+        "../../../public/documentation_videos/*.mp4",
+    );
+    const keys = Object.keys(videoFiles);
+
+    return keys.map((key) => {
+        const fileName = key.split("/").pop() || "";
+
+        const id = fileName.replace(".mp4", "").toLocaleLowerCase();
+        const videoName = id.replace(/_/g, " ").replace(/-/g, " ");
+
+        return {
+            params: { id: id },
+            props: {
+                video: {
+                    name: videoName,
+                    url: `/documentation_videos/${fileName}`,
+                },
+            },
+        };
+    });
+}
+
+const { video } = Astro.props;
+---
+
+<Layout pageTitle={video.name.charAt(0).toUpperCase() + video.name.slice(1)}>
+    <section class="player-container">
+        <header class="player-header">
+            <a href="/documentation" class="back-button"
+                ><svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="28"
+                    height="28"
+                    viewBox="0 0 24 24"
+                    ><path
+                        fill="var(--main-icon-color)"
+                        d="m7.85 13l2.85 2.85q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L4.7 12.7q-.3-.3-.3-.7t.3-.7l4.575-4.575q.3-.3.713-.287t.712.312q.275.3.288.7t-.288.7L7.85 11H19q.425 0 .713.288T20 12t-.288.713T19 13z"
+                    ></path></svg
+                > Volver a la documentación</a
+            >
+
+            <h5>{video.name.charAt(0).toUpperCase() + video.name.slice(1)}</h5>
+        </header>
+
+        <div class="video-wrapper">
+            <video
+                controls
+                controlslist="nodownload"
+                oncontextmenu="return false;"
+                class="main-video"
+            >
+                <source src={video.url} type="video/mp4" />
+                Tu navegador no soporta la reproducción de videos.
+            </video>
+        </div>
+    </section>
+</Layout>
+
+<style>
+    .player-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-lg-24px);
+
+        padding: var(--space-2xl-48px) 64px;
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @media (max-width: 1023px) {
+            padding: var(--space-2xl-48px) 48px;
+        }
+
+        @media (max-width: 767px) {
+            padding: var(--space-2xl-48px) 0px;
+        }
+    }
+
+    .player-header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xl-32px);
+
+        & a {
+            display: flex;
+            align-items: center;
+            gap: var(--space-sm-8px);
+        }
+
+        @media (max-width: 767px) {
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 0px var(--space-lg-24px);
+
+            & a {
+                font-size: var(--font-desktop-sm);
+            }
+        }
+    }
+
+    .player-header h5 {
+        font-family: var(--font-family-primary);
+        color: var(--main-text-color);
+    }
+
+    .main-video {
+        width: 100%;
+        border-radius: 16px;
+        background: #000;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+
+        @media (max-width: 767px) {
+            border-radius: 0px;
+        }
+    }
+
+    .back-button {
+        text-decoration: none;
+        color: var(--main-text-color);
+        font-weight: bold;
+        opacity: 0.8;
+        transition: opacity 0.2s;
+    }
+
+    .back-button:hover {
+        opacity: 1;
+    }
+</style>
--- a/src/styles/contactpage.css
+++ b/src/styles/contactpage.css
@@ -101,7 +101,7 @@
        font-family: var(--font-family-primary);
        font-size: var(--font-desktop-base);
        font-weight: bold;
-        color: var(--main-text-color);
+        color: var(--input-txtcolor);

        &:focus {
            border: 1px solid var(--main-pink-500);
@@ -109,7 +109,7 @@
        }

        &::placeholder {
-            color: var(--main-text-color);
+            color: var(--input-txtcolor);
            opacity: 0.4;
        }
    }
--- a/src/styles/documentation.css
+++ b/src/styles/documentation.css
@@ -0,0 +1,128 @@
+.videos-displayer {
+    padding: var(--space-2xl-48px) 350px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xl-48px);
+
+    @media (max-width: 1023px) {
+        padding: var(--space-2xl-48px) 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: var(--space-2xl-48px) var(--padding-lg-24px);
+    }
+}
+
+.input-container {
+    position: relative;
+    width: 100%;
+    max-width: 600px;
+}
+
+.search-input {
+    width: 100%;
+    padding: var(--padding-md-16px) var(--padding-xl-32px);
+    border: var(--documentation-input-border);
+    border-radius: var(--space-lg-24px);
+    background-color: var(--documentation-input-bgcolor);
+
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    color: var(--main-text-color);
+
+    &::placeholder {
+        font-family: var(--font-family-primary);
+        color: var(--main-text-color);
+        opacity: 0.7;
+    }
+}
+
+.search-button {
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+}
+
+.videos-container {
+    width: 100%;
+    max-width: 600px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg-24px);
+}
+
+.video-item {
+    display: flex; /* Mantenemos el flex */
+    align-items: center;
+    justify-content: space-between;
+
+    /* Propiedades para la transición */
+    opacity: 1;
+    transform: scale(1);
+    max-height: 100px; /* Un valor mayor al alto real de tu item */
+    overflow: hidden;
+    transition:
+        opacity 0.3s ease,
+        transform 0.3s ease,
+        max-height 0.3s ease,
+        margin 0.3s ease,
+        padding 0.3s ease;
+}
+
+.video-item.hidden {
+    display: flex; /* ¡IMPORTANTE! No usamos none aquí para que la animación funcione */
+    opacity: 0;
+    transform: scale(0.95);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    pointer-events: none;
+}
+
+.video-title {
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+    color: var(--main-text-color);
+    text-decoration: underline;
+}
+
+.play-button {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm-8px);
+
+    padding: var(--padding-sm-8px) var(--padding-md-16px);
+    border: none;
+    border-radius: var(--space-sm-8px);
+
+    background-color: var(--primarybutton-bgcolor);
+    color: var(--primarybutton-txtcolor);
+
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+#no-results {
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-base);
+    font-weight: bold;
+    color: var(--main-text-color);
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -146,12 +146,14 @@
    --card-bg-color: var(--main-mistyRose-500);
    --naliia-n-bg-color: var(--main-pink-500);
    --main-icon-color: var(--light-gray);
+    --icon-whitecolor: var(--base-white);
    --navbar-border-color: rgba(68, 68, 68, 0.2);
    --navbar-n-naliia-start: var(--main-pink-500);
    --navbar-n-naliia-end: var(--main-yellow-500);
    --main-border: 1px solid rgba(68, 68, 68, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
+
    --pricingcard-bgcolor: var(--dark-gray);
    --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
    --pricingcard-section-bgcolor: var(--dark-gray);
@@ -162,11 +164,17 @@
    --pricingcard-features-subtitlecolor: var(--main-pink-500);
    --pricingcard-features-txtcolor: var(--base-white);
    --pricingcard-primarytextcolor: var(--light-gray);
+
    --detailstable-header-primarybgcolor: var(--dark-gray);
    --detailstable-header-txtcolor: var(--base-white);
    --detailstable-primarytxtcolor: var(--light-gray);
    --detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);

+    --input-txtcolor: var(--light-gray);
+
+    --documentation-input-bgcolor: transparent;
+    --documentation-input-border: 1px solid rgba(68, 68, 68, 0.5);
+
    /* spacing, padding, margin */
    --space-none-0: var(--space-none);
    --space-sm-8px: var(--space-1);
@@ -255,12 +263,14 @@
    --card-bg-color: var(--main-mistyRose-500);
    --naliia-n-bg-color: var(--main-pink-500);
    --main-icon-color: var(--base-white);
+    --icon-whitecolor: var(--base-white);
    --navbar-border-color: rgba(255, 255, 255, 0.2);
    --navbar-n-naliia-start: var(--base-white);
    --navbar-n-naliia-end: var(--base-white);
    --main-border: 1px solid rgba(255, 255, 255, 0.2);
    --primarybutton-bgcolor: var(--main-pink-500);
    --primarybutton-txtcolor: var(--base-white);
+
    --pricingcard-bgcolor: var(--darker-gray);
    --pricingcard-secundarybgcolor: var(--light-gray);
    --pricingcard-section-bgcolor: var(--main-pink-500);
@@ -270,10 +280,16 @@
    --pricingcard-value-txtcolor: var(--base-white);
    --pricingcard-features-subtitlecolor: var(--main-pink-500);
    --pricingcard-primarytextcolor: var(--base-white);
+
    --detailstable-header-primarybgcolor: var(--light-gray);
    --detailstable-header-txtcolor: var(--base-white);
    --detailstable-primarytxtcolor: var(--base-white);
    --detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
+
+    --input-txtcolor: var(--light-gray);
+
+    --documentation-input-bgcolor: var(--light-gray);
+    --documentation-input-border: 1px solid rgba(255, 255, 255, 0.5);
 }

 *,
@@ -285,18 +301,28 @@
 html {
    margin: 0;
    width: 100%;
-    height: 100%;
-    min-height: 100vh;
    overflow-x: hidden;
 }

 body {
    margin: 0;
    width: 100%;
-    height: 100%;
    min-height: 100vh;
    background-color: var(--main-bg-color);
    font-family: var(--font-family-primary), sans-serif, Arial;
+
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    & main {
+        flex: 1 0 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }

 p {
@@ -430,19 +456,6 @@ summary {
    transform: translateX(8%);
 }

-.body-container {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: 0;
-    overflow-x: hidden;
-}
-
-main {
-    flex: 1;
-}
-
 .floating-buttons {
    position: fixed;