OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix spelling errors and add video player functionality

Browse Source 
- 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
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-17 13:32:22 -05:00
parent 7bebc0b97d
commit f6bf1dc29b
14 changed files with 468 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/documentation_videos/Crear_Agenda.mp4 Normal file
View File

Binary file not shown.

BIN
public/documentation_videos/Crear_Usuario_Recepcionista.mp4 Normal file
View File

Binary file not shown.

5
src/components/navbar/Navbar.astro
View File

@@ -52,7 +52,10 @@ const currentPath: string = Astro.url.pathname;
Contacto Contacto
</a> </a>
<a href="/docs" class={currentPath === "/docs" ? "active" : ""}> <a
href="/documentation"
class={currentPath === "/documentation" ? "active" : ""}
>
Documentación Documentación
</a> </a>
</div> </div>

9
src/components/navbar/navbar.css
View File

@@ -66,11 +66,16 @@ a.active::after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 2px; height: 3px;
width: 100%; width: 100%;
background-color: red; background: linear-gradient(
90deg,
var(--main-pink-500) 0%,
var(--main-yellow-500) 100%
);
} }
.general-button { .general-button {

7
src/layouts/Layout.astro
View File

@@ -25,7 +25,7 @@ const { pageTitle } = Astro.props;
<title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title> <title>{pageTitle ? `Naliia | ${pageTitle}` : "Naliia"}</title>
</head> </head>
<body class="body-container"> <body>
<svg <svg
class="bg-svg" class="bg-svg"
aria-hidden="true" aria-hidden="true"
@@ -40,7 +40,7 @@ const { pageTitle } = Astro.props;
fill="currentColor"></path> fill="currentColor"></path>
</svg> </svg>
<header> <header class="header">
<Navbar /> <Navbar />
</header> </header>
@@ -92,10 +92,11 @@ const { pageTitle } = Astro.props;
</div> </div>
</a> </a>
</div> </div>
<slot /> <slot />
</main> </main>
<footer> <footer class="footer">
<Footer /> <Footer />
</footer> </footer>
</body> </body>

12
src/pages/contact.astro
View File

@@ -21,7 +21,7 @@ import "../styles/contactpage.css";
customYPosition="20%" customYPosition="20%"
logoSrc="/src/assets/imgs/logo-naliia.svg" logoSrc="/src/assets/imgs/logo-naliia.svg"
logoAlt="Logo de Naliia" logoAlt="Logo de Naliia"
mainTitle="Contactanos" mainTitle="Contáctanos"
autoHeight={true} autoHeight={true}
> >
<div slot="extraContent"> <div slot="extraContent">
@@ -29,12 +29,12 @@ import "../styles/contactpage.css";
<div class="contact-methods"> <div class="contact-methods">
<div class="title-and-text"> <div class="title-and-text">
<h5 class="subtitle"> <h5 class="subtitle">
Todas nuestras redes sociales y metodos de Todas nuestras redes sociales y métodos de
contacto contacto
</h5> </h5>
<p class="phrase"> <p class="phrase">
Contactanos y toma el control total de tu Contáctanos y toma el control total de tu
negocio con Naliia. negocio con Naliia.
</p> </p>
</div> </div>
@@ -91,7 +91,7 @@ import "../styles/contactpage.css";
<div class="form-container"> <div class="form-container">
<div class="form-items"> <div class="form-items">
<h5 class="form-title"> <h5 class="form-title">
O dejanos tus datos, nosotros te contactamos O déjanos tus datos, nosotros te contactamos
</h5> </h5>
<form <form
@@ -127,7 +127,7 @@ import "../styles/contactpage.css";
<div class="form-item"> <div class="form-item">
<label for="" class="item-label" <label for="" class="item-label"
>Numero de celular</label >Número de celular</label
> >
<input <input
@@ -157,7 +157,7 @@ import "../styles/contactpage.css";
<button <button
form="contact-form" form="contact-form"
class="submit-button" class="submit-button"
>Enviar informacion</button >Enviar información</button
> >
</div> </div>
</div> </div>

11
src/pages/docs.astro
View File

@@ -1,11 +0,0 @@
---
// imports
// types
// props
// logic, variables, functions, etc.
---
<section>Esta es la pagina de documentacion</section>

154
src/pages/documentation.astro Normal file
View File

@@ -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>

2
src/pages/index.astro
View File

@@ -16,7 +16,7 @@ import "../styles/index.css";
<section class="homepage"> <section class="homepage">
<InitialSection <InitialSection
imgSrc="/src/assets/imgs/mujer-con-tablet.svg" 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" logoSrc="/src/assets/imgs/logo-naliia.svg"
logoAlt="Logo de Naliia" logoAlt="Logo de Naliia"
mainTitle="Transformamos el caos en claridad" mainTitle="Transformamos el caos en claridad"

2
src/pages/pricing.astro
View File

@@ -11,7 +11,7 @@ import "../styles/pricingPage.css";
<section class="pricing-page"> <section class="pricing-page">
<InitialSection <InitialSection
imgSrc="/src/assets/imgs/phone_with-stats.svg" 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} imgWidth={520}
customXPosition="-52%" customXPosition="-52%"
logoSrc="/src/assets/imgs/logo-naliia.svg" logoSrc="/src/assets/imgs/logo-naliia.svg"

132
src/pages/video_player/[id].astro Normal file
View File

@@ -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>

4
src/styles/contactpage.css
View File

@@ -101,7 +101,7 @@
font-family: var(--font-family-primary); font-family: var(--font-family-primary);
font-size: var(--font-desktop-base); font-size: var(--font-desktop-base);
font-weight: bold; font-weight: bold;
color: var(--main-text-color); color: var(--input-txtcolor);
&:focus { &:focus {
border: 1px solid var(--main-pink-500); border: 1px solid var(--main-pink-500);
@@ -109,7 +109,7 @@
} }
&::placeholder { &::placeholder {
color: var(--main-text-color); color: var(--input-txtcolor);
opacity: 0.4; opacity: 0.4;
} }
} }

128
src/styles/documentation.css Normal file
View File

@@ -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);
}

45
src/styles/global.css
View File

@@ -146,12 +146,14 @@
--card-bg-color: var(--main-mistyRose-500); --card-bg-color: var(--main-mistyRose-500);
--naliia-n-bg-color: var(--main-pink-500); --naliia-n-bg-color: var(--main-pink-500);
--main-icon-color: var(--light-gray); --main-icon-color: var(--light-gray);
--icon-whitecolor: var(--base-white);
--navbar-border-color: rgba(68, 68, 68, 0.2); --navbar-border-color: rgba(68, 68, 68, 0.2);
--navbar-n-naliia-start: var(--main-pink-500); --navbar-n-naliia-start: var(--main-pink-500);
--navbar-n-naliia-end: var(--main-yellow-500); --navbar-n-naliia-end: var(--main-yellow-500);
--main-border: 1px solid rgba(68, 68, 68, 0.2); --main-border: 1px solid rgba(68, 68, 68, 0.2);
--primarybutton-bgcolor: var(--main-pink-500); --primarybutton-bgcolor: var(--main-pink-500);
--primarybutton-txtcolor: var(--base-white); --primarybutton-txtcolor: var(--base-white);
--pricingcard-bgcolor: var(--dark-gray); --pricingcard-bgcolor: var(--dark-gray);
--pricingcard-secundarybgcolor: var(--main-mistyRose-500); --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
--pricingcard-section-bgcolor: var(--dark-gray); --pricingcard-section-bgcolor: var(--dark-gray);
@@ -162,11 +164,17 @@
--pricingcard-features-subtitlecolor: var(--main-pink-500); --pricingcard-features-subtitlecolor: var(--main-pink-500);
--pricingcard-features-txtcolor: var(--base-white); --pricingcard-features-txtcolor: var(--base-white);
--pricingcard-primarytextcolor: var(--light-gray); --pricingcard-primarytextcolor: var(--light-gray);
--detailstable-header-primarybgcolor: var(--dark-gray); --detailstable-header-primarybgcolor: var(--dark-gray);
--detailstable-header-txtcolor: var(--base-white); --detailstable-header-txtcolor: var(--base-white);
--detailstable-primarytxtcolor: var(--light-gray); --detailstable-primarytxtcolor: var(--light-gray);
--detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2); --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 */ /* spacing, padding, margin */
--space-none-0: var(--space-none); --space-none-0: var(--space-none);
--space-sm-8px: var(--space-1); --space-sm-8px: var(--space-1);
@@ -255,12 +263,14 @@
--card-bg-color: var(--main-mistyRose-500); --card-bg-color: var(--main-mistyRose-500);
--naliia-n-bg-color: var(--main-pink-500); --naliia-n-bg-color: var(--main-pink-500);
--main-icon-color: var(--base-white); --main-icon-color: var(--base-white);
--icon-whitecolor: var(--base-white);
--navbar-border-color: rgba(255, 255, 255, 0.2); --navbar-border-color: rgba(255, 255, 255, 0.2);
--navbar-n-naliia-start: var(--base-white); --navbar-n-naliia-start: var(--base-white);
--navbar-n-naliia-end: var(--base-white); --navbar-n-naliia-end: var(--base-white);
--main-border: 1px solid rgba(255, 255, 255, 0.2); --main-border: 1px solid rgba(255, 255, 255, 0.2);
--primarybutton-bgcolor: var(--main-pink-500); --primarybutton-bgcolor: var(--main-pink-500);
--primarybutton-txtcolor: var(--base-white); --primarybutton-txtcolor: var(--base-white);
--pricingcard-bgcolor: var(--darker-gray); --pricingcard-bgcolor: var(--darker-gray);
--pricingcard-secundarybgcolor: var(--light-gray); --pricingcard-secundarybgcolor: var(--light-gray);
--pricingcard-section-bgcolor: var(--main-pink-500); --pricingcard-section-bgcolor: var(--main-pink-500);
@@ -270,10 +280,16 @@
--pricingcard-value-txtcolor: var(--base-white); --pricingcard-value-txtcolor: var(--base-white);
--pricingcard-features-subtitlecolor: var(--main-pink-500); --pricingcard-features-subtitlecolor: var(--main-pink-500);
--pricingcard-primarytextcolor: var(--base-white); --pricingcard-primarytextcolor: var(--base-white);
--detailstable-header-primarybgcolor: var(--light-gray); --detailstable-header-primarybgcolor: var(--light-gray);
--detailstable-header-txtcolor: var(--base-white); --detailstable-header-txtcolor: var(--base-white);
--detailstable-primarytxtcolor: var(--base-white); --detailstable-primarytxtcolor: var(--base-white);
--detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2); --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 { html {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
body { body {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%;
min-height: 100vh; min-height: 100vh;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
font-family: var(--font-family-primary), sans-serif, Arial; 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 { p {
@@ -430,19 +456,6 @@ summary {
transform: translateX(8%); 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 { .floating-buttons {
position: fixed; position: fixed;