From c5217aa7c8ba814cefbac9c26bc3a8b1aadeef6e Mon Sep 17 00:00:00 2001
From: Horacio Daniel Ros <horaciodrs@gmail.com>
Date: Wed, 2 Sep 2026 09:46:02 -0300
Subject: [PATCH] feat(help): add Help Center with video tutorials and progress
 tracking

- Implemented Help Center page with video categories and tutorials.
- Added VideoModal component for video playback.
- Introduced progress tracking for watched videos using local storage.
- Created CSS styles for Help Center layout and components.
- Added video data structure and sample videos for various categories.
- Updated Footer to include a link to the Help Center.
---
 .../turnosxpress-triptico-interno.afdesign    | Bin 6964643 -> 6964643 bytes
 ...rnosxpress-triptico-interno.afdesign~lock~ | Bin 119 -> 0 bytes
 .../triptico/turnosxpress-triptico.afdesign   | Bin 8020353 -> 8020353 bytes
 .../src/app/components/Home/Footer/Footer.tsx |   3 +
 .../landing/help/components/VideoModal.tsx    | 169 +++++
 txclient/src/app/landing/help/help.module.css | 701 ++++++++++++++++++
 txclient/src/app/landing/help/page.tsx        | 317 ++++++++
 txclient/src/app/landing/help/videoData.ts    | 210 ++++++
 8 files changed, 1400 insertions(+)
 delete mode 100644 resources/triptico/turnosxpress-triptico-interno.afdesign~lock~
 create mode 100644 txclient/src/app/landing/help/components/VideoModal.tsx
 create mode 100644 txclient/src/app/landing/help/help.module.css
 create mode 100644 txclient/src/app/landing/help/page.tsx
 create mode 100644 txclient/src/app/landing/help/videoData.ts

diff --git a/resources/triptico/turnosxpress-triptico-interno.afdesign b/resources/triptico/turnosxpress-triptico-interno.afdesign
index 8903e5c423e07b751f94b754798831232183eb85..1c2df5f7cc35c84b83c47d48a313097451ab3667 100644
GIT binary patch
delta 339
zcmWN_H9~>`06<~%M}3Oj-QC@ViiKczcih6^O&-CK$pd&kW%!ma_4N~^(g^*<qmfWJ
z_(U=!QvwM~mSjtgq(4{kBqI4zAcayS#Zn@rQYPh6A(c`k)lwt1QYZD&AdS)_&C(*R
z(kAWFA)V4C-O?ky(kJ~gAcHa_!!jbHGA83PA(JvC(=sEoGAHx0Ad9jj%Mz6pS(P=3
z$+~RFrfkW!#AQbkl9XN9lYKdmLphRTIgwL2lXJO{OSzJ3xshABlY4oPM|qNGd68Fn
KllNafzGMFnyjOex

delta 339
zcmWN_H9~>`06^hiL4Atd-QC@ViiKczcih6^O&-CK$pd&kW%!ma_4N}<r4jtaqmdvS
zd?Fc=DIp0<mSjtgq(4{kBqI4zAcayS#Zn@rQYPh6A(c`k)lwt1QYZD&AdS)_&C(*R
z(kAWFA)V4C-O?ky(kJ~gAcHa_!!jbHGA83PA(JvC(=sEoGAHx0Ad9jj%Mz6pS(P=3
z$+~RFrfkW!#AQbkl9XN9lYKdmLphRTIgwL2lXJO{OSzJ3xshABlY4oPM|qNGd68Fn
KllNafzGMFj^H+HQ

diff --git a/resources/triptico/turnosxpress-triptico-interno.afdesign~lock~ b/resources/triptico/turnosxpress-triptico-interno.afdesign~lock~
deleted file mode 100644
index ddab7203d7a9b336968f32c87c22e545f8ce70bc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 119
zcmeatPtJ~5nw`Y}1V45{XdOls5SM|QK^O>~joi#k4V{d2ot>S{bWJQA4RtNtoGf(R
zT%0WpT}@pr4V}$A@{1CaGxHUK@{1kQ(lYZhODYvyQj0Uw^HPfxjC>Q56>@=s3Mr`y
GP?Z3r2_Q58

diff --git a/resources/triptico/turnosxpress-triptico.afdesign b/resources/triptico/turnosxpress-triptico.afdesign
index 22c819418f5874be0c5e02ab6db55115dbb383d5..feea32604cb6659bd7f24a95c11883a223619d7b 100644
GIT binary patch
delta 387
zcmWN_M<N^m06<YOgU=w*I}xI{=$%QlWRmE;#1OsrvYW*}k`p+MQ(*BnFZTQrh`l53
zH4+ZR1p_hUgTzZff|4MKk|gh+EGZI_R7sO``6!<xLoy{xvL#1yB~S9DKnkTuilszK
zrA$6cxqOidsg$o$CDl?RwNfYb(jbk}B+b$y-=tOAq+L3sQ@W&EdZbtSq+bSPP=;h!
z!tz~y$cT)}n2gJW{FGl3k>B!1{>r3G$+XPKtjx*0EXblP$+E1-s;tSnY{);^l&EaU
qw)~eJ*_A!nmjgMJBRQ56Ih8XxmkYU+E4h{%xs^M)mxm`FAEIySc4!&^

delta 387
zcmWN_M<N^m06@`U249b;(Gnqv-lLaHbQ2|dXLJ(1+s)!1$qAgsDX@5(7khpQ#@-Ql
zjf7JJp+F3YlXwYAND?GblH~o9B}GytP0}SpGUbD0$w$eS9LbeD$(I88B!yBW#Zn@r
z@>#w}nS7OUsgQ5-U4BTVR7theNUhXKy);OpG)c3xNUQvmHffg*>69+%mLBPqKIxZV
z5|-aGAcHa_!!jbHGA82^kv}palQJdK@>gbLR_0`07GzPDWLZ{ZRn}x(He^$_Br4mo
qBfGLE`*I+MawNy{PyWk^oXVM;%Y|IZm0Zh>+{&HY%fl0o579T~9cUK-

diff --git a/txclient/src/app/components/Home/Footer/Footer.tsx b/txclient/src/app/components/Home/Footer/Footer.tsx
index dbe50d6..119f1f4 100644
--- a/txclient/src/app/components/Home/Footer/Footer.tsx
+++ b/txclient/src/app/components/Home/Footer/Footer.tsx
@@ -74,6 +74,9 @@ export default function Footer() {
                         <Link href="/admin/org" style={{ display: "block" }}>
                             Mis organizaciones
                         </Link>
+                        <Link href="/landing/help" style={{ display: "block" }}>
+                            Obtener ayuda
+                        </Link>
                         <h1 style={{ marginTop: "5px" }}>Contacto</h1>
                         <Link href="mailto:info@turnosxpress.com.ar" style={{ display: "block" }}>
                             info@turnosxpress.com.ar
diff --git a/txclient/src/app/landing/help/components/VideoModal.tsx b/txclient/src/app/landing/help/components/VideoModal.tsx
new file mode 100644
index 0000000..139cf97
--- /dev/null
+++ b/txclient/src/app/landing/help/components/VideoModal.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useCallback } from "react";
+import style from "../help.module.css";
+import { Video, videoCategories } from "../videoData";
+
+interface VideoModalProps {
+    video: Video | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectVideo: (video: Video) => void;
+}
+
+export default function VideoModal({
+    video,
+    isOpen,
+    onClose,
+    onSelectVideo,
+}: VideoModalProps) {
+    const handleKeyDown = useCallback(
+        (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        },
+        [onClose]
+    );
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener("keydown", handleKeyDown);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, handleKeyDown]);
+
+    if (!isOpen || !video) return null;
+
+    const getCategoryName = (categoryId: string) => {
+        const cat = videoCategories.find((c) => c.id === categoryId);
+        return cat ? cat.name : "";
+    };
+
+    const allVideos = videoCategories.flatMap((cat) => cat.videos);
+    const currentVideoIndex = allVideos.findIndex((v) => v.id === video.id);
+
+    const handleNext = () => {
+        if (currentVideoIndex < allVideos.length - 1) {
+            onSelectVideo(allVideos[currentVideoIndex + 1]);
+        }
+    };
+
+    const handlePrev = () => {
+        if (currentVideoIndex > 0) {
+            onSelectVideo(allVideos[currentVideoIndex - 1]);
+        }
+    };
+
+    return (
+        <div className={style.modalOverlay} onClick={onClose}>
+            <div className={style.modalContent} onClick={(e) => e.stopPropagation()}>
+                <div className={style.modalHeader}>
+                    <h3 className={style.modalTitle}>{video.title}</h3>
+                    <button className={style.modalClose} onClick={onClose} aria-label="Cerrar">
+                        ✕
+                    </button>
+                </div>
+                <div className={style.modalBody}>
+                    <div className={style.modalVideo}>
+                        <div className={style.videoWrapper}>
+                            <iframe
+                                src={`https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0&modestbranding=1`}
+                                title={video.title}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowFullScreen
+                            />
+                        </div>
+                        <div style={{ padding: "1rem 1.5rem", borderBottom: "1px solid var(--white-darkest)" }}>
+                            <p style={{ color: "var(--gray-dark)", fontSize: "0.9rem", lineHeight: 1.6 }}>
+                                {video.description}
+                            </p>
+                            <div style={{ display: "flex", gap: "0.75rem", marginTop: "0.75rem" }}>
+                                {currentVideoIndex > 0 && (
+                                    <button
+                                        onClick={handlePrev}
+                                        style={{
+                                            padding: "0.5rem 1rem",
+                                            borderRadius: "8px",
+                                            border: "1px solid var(--white-darkest)",
+                                            background: "var(--white)",
+                                            cursor: "pointer",
+                                            fontSize: "0.85rem",
+                                            fontWeight: 600,
+                                            color: "var(--black)",
+                                        }}
+                                    >
+                                        ← Anterior
+                                    </button>
+                                )}
+                                {currentVideoIndex < allVideos.length - 1 && (
+                                    <button
+                                        onClick={handleNext}
+                                        style={{
+                                            padding: "0.5rem 1rem",
+                                            borderRadius: "8px",
+                                            border: "none",
+                                            background: "linear-gradient(135deg, var(--wine-red), var(--wine-dark))",
+                                            color: "white",
+                                            cursor: "pointer",
+                                            fontSize: "0.85rem",
+                                            fontWeight: 600,
+                                        }}
+                                    >
+                                        Siguiente →
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div className={style.modalSidebar}>
+                        <div className={style.sidebarTitle}>Todos los tutoriales</div>
+                        {videoCategories.map((cat) => (
+                            <div key={cat.id}>
+                                <div
+                                    style={{
+                                        padding: "0.6rem 1.25rem",
+                                        fontSize: "0.75rem",
+                                        fontWeight: 700,
+                                        color: "var(--wine-dark)",
+                                        textTransform: "uppercase",
+                                        letterSpacing: "0.5px",
+                                        background: "rgba(127, 42, 255, 0.04)",
+                                        borderTop: "1px solid var(--white-darkest)",
+                                    }}
+                                >
+                                    {cat.icon} {cat.name}
+                                </div>
+                                {cat.videos.map((v) => (
+                                    <div
+                                        key={v.id}
+                                        className={
+                                            v.id === video.id
+                                                ? style.sidebarVideoActive
+                                                : style.sidebarVideo
+                                        }
+                                        onClick={() => onSelectVideo(v)}
+                                    >
+                                        <div className={style.sidebarThumb}>
+                                            <img src={v.thumbnail} alt={v.title} />
+                                        </div>
+                                        <div className={style.sidebarVideoInfo}>
+                                            <div className={style.sidebarVideoTitle}>{v.title}</div>
+                                            <div className={style.sidebarVideoCategory}>
+                                                {getCategoryName(v.category)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/txclient/src/app/landing/help/help.module.css b/txclient/src/app/landing/help/help.module.css
new file mode 100644
index 0000000..1fcc1a9
--- /dev/null
+++ b/txclient/src/app/landing/help/help.module.css
@@ -0,0 +1,701 @@
+/* Help Center - Professional Video Tutorial Page */
+
+.container {
+    width: 100%;
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    padding: 4rem 2rem 3rem;
+    padding-top: 5rem;
+}
+
+.heroIcon {
+    width: 72px;
+    height: 72px;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    box-shadow: 0 10px 30px rgba(255, 42, 127, 0.2);
+}
+
+.heroTitle {
+    font-size: 3rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--wine-superdark) 0%, var(--wine-red) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.heroSubtitle {
+    font-size: 1.2rem;
+    color: var(--gray-dark);
+    max-width: 700px;
+    margin: 0 auto 2rem;
+    line-height: 1.7;
+}
+
+.heroStats {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+}
+
+.statItem {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: var(--white);
+    border-radius: 50px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    border: 1px solid var(--white-darkest);
+}
+
+.statNumber {
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: var(--wine-dark);
+}
+
+.statLabel {
+    font-size: 0.9rem;
+    color: var(--gray-dark);
+    font-weight: 500;
+}
+
+/* Category Navigation */
+.categoryNav {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 1.5rem 0 3rem;
+    position: sticky;
+    top: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    z-index: 10;
+    border-bottom: 1px solid var(--white-darkest);
+    margin-bottom: 2rem;
+}
+
+.categoryBtn {
+    padding: 0.6rem 1.4rem;
+    border-radius: 50px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    border: 2px solid var(--white-darkest);
+    background: var(--white);
+    color: var(--gray-dark);
+    white-space: nowrap;
+}
+
+.categoryBtn:hover {
+    border-color: var(--wine-light);
+    color: var(--wine-dark);
+    background: rgba(127, 42, 255, 0.04);
+}
+
+.categoryBtnActive {
+    composes: categoryBtn;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    color: var(--white);
+    border-color: transparent;
+    box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
+}
+
+.categoryBtnActive:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(255, 42, 127, 0.4);
+    color: var(--white);
+}
+
+/* Category Section */
+.categorySection {
+    margin-bottom: 4rem;
+    scroll-margin-top: 80px;
+}
+
+.categoryHeader {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--white-darkest);
+}
+
+.categoryIcon {
+    width: 48px;
+    height: 48px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.categoryTitle {
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: var(--wine-superdark);
+}
+
+.categoryDescription {
+    font-size: 1rem;
+    color: var(--gray-dark);
+    margin-top: 0.25rem;
+    line-height: 1.5;
+}
+
+.categoryCount {
+    margin-left: auto;
+    background: var(--white-dark);
+    color: var(--gray-dark);
+    padding: 0.3rem 0.8rem;
+    border-radius: 50px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+/* Video Grid */
+.videoGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 1.5rem;
+}
+
+/* Video Card */
+.videoCard {
+    background: var(--white);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--white-darkest);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.videoCard:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+    border-color: var(--wine-lighter);
+}
+
+.videoThumbnail {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    background: var(--black);
+}
+
+.videoThumbnail img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.videoCard:hover .videoThumbnail img {
+    transform: scale(1.05);
+}
+
+.playOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.3s ease;
+}
+
+.videoCard:hover .playOverlay {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.playButton {
+    width: 56px;
+    height: 56px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.videoCard:hover .playButton {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.playIcon {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 0 10px 18px;
+    border-color: transparent transparent transparent var(--wine-red);
+    margin-left: 4px;
+}
+
+.videoDuration {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.videoContent {
+    padding: 1.25rem;
+}
+
+.videoTitle {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--black);
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.videoDescription {
+    font-size: 0.85rem;
+    color: var(--gray-dark);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.videoMeta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--white-darkest);
+}
+
+.videoStep {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.8rem;
+    color: var(--wine-dark);
+    font-weight: 600;
+}
+
+.stepNumber {
+    width: 22px;
+    height: 22px;
+    background: linear-gradient(135deg, var(--wine-red), var(--wine-dark));
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+/* Video Modal */
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modalContent {
+    width: 100%;
+    max-width: 1100px;
+    background: var(--white);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+    animation: slideUp 0.3s ease;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.modalHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--white-darkest);
+    background: var(--white);
+}
+
+.modalTitle {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--black);
+    flex: 1;
+    margin-right: 1rem;
+}
+
+.modalClose {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--white-dark);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.modalClose:hover {
+    background: var(--error);
+    color: white;
+}
+
+.modalBody {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.modalVideo {
+    flex: 1;
+    min-width: 0;
+}
+
+.videoWrapper {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.videoWrapper iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.modalSidebar {
+    width: 320px;
+    overflow-y: auto;
+    border-left: 1px solid var(--white-darkest);
+    background: var(--white-dark);
+    flex-shrink: 0;
+}
+
+.sidebarTitle {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--gray-dark);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 1rem 1.25rem 0.75rem;
+}
+
+.sidebarVideo {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem 1.25rem;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.sidebarVideo:hover {
+    background: rgba(127, 42, 255, 0.04);
+}
+
+.sidebarVideoActive {
+    composes: sidebarVideo;
+    background: rgba(127, 42, 255, 0.08);
+    border-left: 3px solid var(--wine-red);
+}
+
+.sidebarThumb {
+    width: 100px;
+    height: 56px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.sidebarThumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sidebarVideoInfo {
+    flex: 1;
+    min-width: 0;
+}
+
+.sidebarVideoTitle {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--black);
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.sidebarVideoCategory {
+    font-size: 0.7rem;
+    color: var(--wine-dark);
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+/* Progress Section */
+.progressSection {
+    background: linear-gradient(135deg, var(--wine-superdark) 0%, var(--wine-darkest) 100%);
+    border-radius: 20px;
+    padding: 3rem;
+    margin: 3rem 0;
+    text-align: center;
+    color: white;
+}
+
+.progressTitle {
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+}
+
+.progressText {
+    font-size: 1.1rem;
+    opacity: 0.85;
+    max-width: 600px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+}
+
+.progressBar {
+    max-width: 500px;
+    margin: 0 auto;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--wine-red), var(--yellow));
+    border-radius: 4px;
+    transition: width 0.5s ease;
+}
+
+/* CTA Section */
+.ctaSection {
+    text-align: center;
+    padding: 4rem 2rem;
+    margin-top: 2rem;
+    background: var(--white-dark);
+    border-radius: 24px;
+    margin-bottom: 3rem;
+}
+
+.ctaTitle {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--wine-superdark);
+    margin-bottom: 1rem;
+}
+
+.ctaText {
+    font-size: 1.1rem;
+    color: var(--gray-dark);
+    max-width: 500px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+}
+
+.ctaButton {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
+    color: white;
+    border-radius: 50px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
+}
+
+.ctaButton:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(255, 42, 127, 0.4);
+    color: white;
+    text-decoration: none;
+}
+
+/* Learning Path */
+.learningPath {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    background: rgba(127, 42, 255, 0.04);
+    border-radius: 12px;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(127, 42, 255, 0.1);
+}
+
+.learningPathIcon {
+    color: var(--wine-dark);
+    flex-shrink: 0;
+}
+
+.learningPathText {
+    font-size: 0.9rem;
+    color: var(--wine-darkest);
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .modalSidebar {
+        display: none;
+    }
+
+    .modalBody {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 768px) {
+    .heroTitle {
+        font-size: 2.2rem;
+    }
+
+    .heroSubtitle {
+        font-size: 1rem;
+    }
+
+    .videoGrid {
+        grid-template-columns: 1fr;
+    }
+
+    .categoryNav {
+        justify-content: flex-start;
+        overflow-x: auto;
+        padding-bottom: 1rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .categoryHeader {
+        flex-wrap: wrap;
+    }
+
+    .categoryCount {
+        margin-left: 0;
+    }
+
+    .heroStats {
+        gap: 1rem;
+    }
+
+    .statItem {
+        padding: 0.5rem 1rem;
+    }
+
+    .modalContent {
+        border-radius: 12px;
+    }
+
+    .modalOverlay {
+        padding: 1rem;
+    }
+
+    .progressSection {
+        padding: 2rem 1.5rem;
+    }
+
+    .container {
+        padding: 0 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero {
+        padding: 3rem 1rem 2rem;
+    }
+
+    .heroTitle {
+        font-size: 1.8rem;
+    }
+
+    .categoryTitle {
+        font-size: 1.4rem;
+    }
+
+    .videoContent {
+        padding: 1rem;
+    }
+}
diff --git a/txclient/src/app/landing/help/page.tsx b/txclient/src/app/landing/help/page.tsx
new file mode 100644
index 0000000..986167c
--- /dev/null
+++ b/txclient/src/app/landing/help/page.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import style from "./help.module.css";
+import { videoCategories, Video, getTotalVideoCount } from "./videoData";
+import VideoModal from "./components/VideoModal";
+import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
+import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
+import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
+import { ScrollToTop } from "@core/app/components/ScrollTop";
+import Link from "next/link";
+
+export default function HelpPage() {
+    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [activeCategory, setActiveCategory] = useState<string>("all");
+    const [watchedVideos, setWatchedVideos] = useState<Set<string>>(new Set());
+
+    const totalVideos = getTotalVideoCount();
+
+    useEffect(() => {
+        const watched = localStorage.getItem("tx-help-watched");
+        if (watched) {
+            setWatchedVideos(new Set(JSON.parse(watched)));
+        }
+    }, []);
+
+    const handleVideoClick = (video: Video) => {
+        setSelectedVideo(video);
+        setIsModalOpen(true);
+        const newWatched = new Set(watchedVideos);
+        newWatched.add(video.id);
+        setWatchedVideos(newWatched);
+        localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setTimeout(() => setSelectedVideo(null), 200);
+    };
+
+    const handleCategoryClick = (categoryId: string) => {
+        setActiveCategory(categoryId);
+        if (categoryId !== "all") {
+            const element = document.getElementById(`category-${categoryId}`);
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+    };
+
+    const progressPercent = Math.round((watchedVideos.size / totalVideos) * 100);
+
+    return (
+        <AnimatedContainer
+            color="#aeaeae"
+            minSize={150}
+            maxSize={500}
+            items={10}
+            style={{
+                display: "block",
+                width: "100%",
+                background: "var(--white)",
+            }}
+        >
+            <ScrollToTop />
+            <HeaderConfProvider />
+            <DefaultLoginAction />
+
+            <div className={style.container}>
+                {/* Hero Section */}
+                <div className={style.hero}>
+                    <div className={style.heroIcon}>
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="white"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                        </svg>
+                    </div>
+                    <h1 className={style.heroTitle}>Centro de Ayuda</h1>
+                    <p className={style.heroSubtitle}>
+                        Aprende a usar TurnosXpress paso a paso con nuestros tutoriales en video.
+                        Desde la configuración inicial hasta las funciones más avanzadas,
+                        tenemos todo lo que necesitas para aprovechar al máximo la plataforma.
+                    </p>
+                    <div className={style.heroStats}>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{totalVideos}</span>
+                            <span className={style.statLabel}>Video tutoriales</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{videoCategories.length}</span>
+                            <span className={style.statLabel}>Categorías</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{watchedVideos.size}</span>
+                            <span className={style.statLabel}>Vistos</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Progress Section */}
+                {watchedVideos.size > 0 && (
+                    <div className={style.progressSection}>
+                        <h2 className={style.progressTitle}>
+                            Tu progreso de aprendizaje
+                        </h2>
+                        <p className={style.progressText}>
+                            Has visto {watchedVideos.size} de {totalVideos} tutoriales.
+                            {progressPercent === 100
+                                ? " ¡Felicidades! Has completado todos los tutoriales."
+                                : ` ¡Sigue así, te faltan ${totalVideos - watchedVideos.size}!`}
+                        </p>
+                        <div className={style.progressBar}>
+                            <div
+                                className={style.progressFill}
+                                style={{ width: `${progressPercent}%` }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {/* Category Navigation */}
+                <div className={style.categoryNav}>
+                    <button
+                        className={
+                            activeCategory === "all"
+                                ? style.categoryBtnActive
+                                : style.categoryBtn
+                        }
+                        onClick={() => {
+                            setActiveCategory("all");
+                            window.scrollTo({ top: 0, behavior: "smooth" });
+                        }}
+                    >
+                        Todos
+                    </button>
+                    {videoCategories.map((cat) => (
+                        <button
+                            key={cat.id}
+                            className={
+                                activeCategory === cat.id
+                                    ? style.categoryBtnActive
+                                    : style.categoryBtn
+                            }
+                            onClick={() => handleCategoryClick(cat.id)}
+                        >
+                            {cat.icon} {cat.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Learning Path */}
+                <div className={style.learningPath}>
+                    <span className={style.learningPathIcon}>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <circle cx="12" cy="12" r="10" />
+                            <path d="M12 16v-4" />
+                            <path d="M12 8h.01" />
+                        </svg>
+                    </span>
+                    <span className={style.learningPathText}>
+                        <strong>Recomendación:</strong> Sigue el orden de las categorías para
+                        un aprendizaje progresivo. Comienza con &quot;Primeros Pasos&quot; y
+                        avanza según tus necesidades.
+                    </span>
+                </div>
+
+                {/* Video Categories */}
+                {videoCategories.map((category) => (
+                    <div
+                        key={category.id}
+                        id={`category-${category.id}`}
+                        className={style.categorySection}
+                    >
+                        <div className={style.categoryHeader}>
+                            <div
+                                className={style.categoryIcon}
+                                style={{ background: category.color }}
+                            >
+                                <span style={{ fontSize: "1.5rem" }}>{category.icon}</span>
+                            </div>
+                            <div>
+                                <h2 className={style.categoryTitle}>{category.name}</h2>
+                                <p className={style.categoryDescription}>
+                                    {category.description}
+                                </p>
+                            </div>
+                            <span className={style.categoryCount}>
+                                {category.videos.length} videos
+                            </span>
+                        </div>
+
+                        <div className={style.videoGrid}>
+                            {category.videos.map((video, idx) => (
+                                <div
+                                    key={video.id}
+                                    className={style.videoCard}
+                                    onClick={() => handleVideoClick(video)}
+                                >
+                                    <div className={style.videoThumbnail}>
+                                        <img
+                                            src={video.thumbnail}
+                                            alt={video.title}
+                                            loading="lazy"
+                                        />
+                                        <div className={style.playOverlay}>
+                                            <div className={style.playButton}>
+                                                <div className={style.playIcon} />
+                                            </div>
+                                        </div>
+                                        {watchedVideos.has(video.id) && (
+                                            <div
+                                                style={{
+                                                    position: "absolute",
+                                                    top: "8px",
+                                                    left: "8px",
+                                                    background:
+                                                        "linear-gradient(135deg, #2aaa2a, #008011)",
+                                                    color: "white",
+                                                    padding: "3px 8px",
+                                                    borderRadius: "4px",
+                                                    fontSize: "0.7rem",
+                                                    fontWeight: 700,
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: "3px",
+                                                }}
+                                            >
+                                                ✓ Visto
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className={style.videoContent}>
+                                        <h3 className={style.videoTitle}>{video.title}</h3>
+                                        <p className={style.videoDescription}>
+                                            {video.description}
+                                        </p>
+                                        <div className={style.videoMeta}>
+                                            <div className={style.videoStep}>
+                                                <span className={style.stepNumber}>
+                                                    {idx + 1}
+                                                </span>
+                                                Paso {idx + 1} de {category.videos.length}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+
+                {/* CTA Section */}
+                <div className={style.ctaSection}>
+                    <h2 className={style.ctaTitle}>¿Necesitas más ayuda?</h2>
+                    <p className={style.ctaText}>
+                        Si no encontrás lo que buscás, nuestro equipo de soporte está
+                        listo para ayudarte. También podés visitar nuestro canal de YouTube
+                        para más contenido.
+                    </p>
+                    <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
+                        <a
+                            href="mailto:info@turnosxpress.com.ar"
+                            className={style.ctaButton}
+                        >
+                            ✉ Escribinos
+                        </a>
+                        <a
+                            href="https://www.youtube.com/@turnosxpress"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={style.ctaButton}
+                            style={{
+                                background: "var(--white)",
+                                color: "var(--wine-darkest)",
+                                boxShadow: "0 4px 15px rgba(0,0,0,0.1)",
+                            }}
+                        >
+                            ▶ Canal de YouTube
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            {/* Video Modal */}
+            <VideoModal
+                video={selectedVideo}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSelectVideo={(video) => {
+                    setSelectedVideo(video);
+                    const newWatched = new Set(watchedVideos);
+                    newWatched.add(video.id);
+                    setWatchedVideos(newWatched);
+                    localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+                }}
+            />
+        </AnimatedContainer>
+    );
+}
diff --git a/txclient/src/app/landing/help/videoData.ts b/txclient/src/app/landing/help/videoData.ts
new file mode 100644
index 0000000..685f5db
--- /dev/null
+++ b/txclient/src/app/landing/help/videoData.ts
@@ -0,0 +1,210 @@
+export interface Video {
+    id: string;
+    title: string;
+    description: string;
+    thumbnail: string;
+    category: string;
+    order: number;
+}
+
+export interface VideoCategory {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    videos: Video[];
+}
+
+export const videoCategories: VideoCategory[] = [
+    {
+        id: "getting-started",
+        name: "Primeros Pasos",
+        description: "Comienza tu recorrido con TurnosXpress. Aprende a registrarte y crear tu primera organización.",
+        icon: "🚀",
+        color: "linear-gradient(135deg, #ff2a7f 0%, #7f2aff 100%)",
+        videos: [
+            {
+                id: "QE5pEw_af5g",
+                title: "Cómo registrarse en TurnosXpress",
+                description: "Paso a paso completo para crear tu cuenta: formulario, verificación de correo y activación.",
+                thumbnail: "https://i2.ytimg.com/vi/QE5pEw_af5g/hqdefault.jpg",
+                category: "getting-started",
+                order: 1,
+            },
+            {
+                id: "Aufl00f4U0Y",
+                title: "Cómo crear una nueva organización en TurnosXpress",
+                description: "Crea tu organización: nombre, eslogan, categoría y configuración inicial.",
+                thumbnail: "https://i2.ytimg.com/vi/Aufl00f4U0Y/hqdefault.jpg",
+                category: "getting-started",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "services",
+        name: "Configuración de Servicios",
+        description: "Aprende a crear, personalizar y hacer visibles tus servicios para los clientes.",
+        icon: "🎯",
+        color: "linear-gradient(135deg, #7f2aff 0%, #3300ff 100%)",
+        videos: [
+            {
+                id: "hgs9w9Q7w2k",
+                title: "Cómo crear tu primer servicio en TurnosXpress",
+                description: "Crea servicios con nombre, descripción, precio, duración y límite de turnos.",
+                thumbnail: "https://i1.ytimg.com/vi/hgs9w9Q7w2k/hqdefault.jpg",
+                category: "services",
+                order: 1,
+            },
+            {
+                id: "UthPmnzR7fg",
+                title: "Cómo asignar una imagen a tus servicios",
+                description: "Personaliza tus servicios agregando imágenes representativas.",
+                thumbnail: "https://i2.ytimg.com/vi/UthPmnzR7fg/hqdefault.jpg",
+                category: "services",
+                order: 2,
+            },
+            {
+                id: "p6_ax-B2vDA",
+                title: "Haz visibles tus servicios en TurnosXpress",
+                description: "Configura servicios como públicos para que aparezcan en la pantalla principal.",
+                thumbnail: "https://i1.ytimg.com/vi/p6_ax-B2vDA/hqdefault.jpg",
+                category: "services",
+                order: 3,
+            },
+            {
+                id: "tzVF2MeW37I",
+                title: "Cómo asignar un servicio a un colaborador",
+                description: "Asigna servicios a los colaboradores de tu organización.",
+                thumbnail: "https://i.ytimg.com/vi/tzVF2MeW37I/hqdefault.jpg",
+                category: "services",
+                order: 4,
+            },
+        ],
+    },
+    {
+        id: "schedules",
+        name: "Gestión de Horarios",
+        description: "Configura la disponibilidad horaria de tus colaboradores y habilita turnos.",
+        icon: "📅",
+        color: "linear-gradient(135deg, #00aa16 0%, #008011 100%)",
+        videos: [
+            {
+                id: "enu2ny1k6XU",
+                title: "Cómo configurar la disponibilidad horaria",
+                description: "Define rangos horarios disponibles para cada día de la semana por colaborador.",
+                thumbnail: "https://i2.ytimg.com/vi/enu2ny1k6XU/hqdefault.jpg",
+                category: "schedules",
+                order: 1,
+            },
+            {
+                id: "8kBxSYoisSM",
+                title: "Cómo habilitar horarios disponibles",
+                description: "Habilita o deshabilita la disponibilidad de turnos para varias semanas.",
+                thumbnail: "https://i1.ytimg.com/vi/8kBxSYoisSM/hqdefault.jpg",
+                category: "schedules",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "clients-bookings",
+        name: "Clientes y Reservas",
+        description: "Administra clientes, reservas recurrentes y ayuda con la activación de cuentas.",
+        icon: "👥",
+        color: "linear-gradient(135deg, #ff982a 0%, #ff4a2a 100%)",
+        videos: [
+            {
+                id: "BcHrqxW_PTs",
+                title: "Cómo configurar y administrar reservas recurrentes",
+                description: "Crea repeticiones semanales, gestiona turnos y libera horarios fácilmente.",
+                thumbnail: "https://i3.ytimg.com/vi/BcHrqxW_PTs/hqdefault.jpg",
+                category: "clients-bookings",
+                order: 1,
+            },
+            {
+                id: "MVpCGA-w7c8",
+                title: "Cómo ayudar a un cliente a activar su cuenta",
+                description: "Asiste a tus clientes con la activación de cuenta desde el panel de Asistencia.",
+                thumbnail: "https://i2.ytimg.com/vi/MVpCGA-w7c8/hqdefault.jpg",
+                category: "clients-bookings",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "payments-discounts",
+        name: "Pagos y Descuentos",
+        description: "Registra pagos de reservas y crea descuentos para fidelizar clientes.",
+        icon: "💰",
+        color: "linear-gradient(135deg, #2aaa2a 0%, #008011 100%)",
+        videos: [
+            {
+                id: "CpGNWAJo6MM",
+                title: "Cómo registrar el pago de una reserva",
+                description: "Registra pagos, revisa adeudados y consulta movimientos en caja.",
+                thumbnail: "https://i4.ytimg.com/vi/CpGNWAJo6MM/hqdefault.jpg",
+                category: "payments-discounts",
+                order: 1,
+            },
+            {
+                id: "UAh7HkOcvMQ",
+                title: "Cómo crear y aplicar descuentos",
+                description: "Crea descuentos por porcentaje o monto fijo y aplícalos en turnos o servicios.",
+                thumbnail: "https://i2.ytimg.com/vi/UAh7HkOcvMQ/hqdefault.jpg",
+                category: "payments-discounts",
+                order: 2,
+            },
+        ],
+    },
+    {
+        id: "customization",
+        name: "Personalización y Comunicación",
+        description: "Personaliza tu organización, configura notificaciones y vincula WhatsApp.",
+        icon: "🎨",
+        color: "linear-gradient(135deg, #fde456 0%, #ff982a 100%)",
+        videos: [
+            {
+                id: "iu7sGYW1iGk",
+                title: "Cómo personalizar tu organización",
+                description: "Cambia imagen de cabecera, color de fondo, fuente y sombra del texto.",
+                thumbnail: "https://i2.ytimg.com/vi/iu7sGYW1iGk/hqdefault.jpg",
+                category: "customization",
+                order: 1,
+            },
+            {
+                id: "nZkBIpmLRyI",
+                title: "Cómo agregar la dirección de tu negocio",
+                description: "Configura la ubicación de tu negocio para que los clientes te encuentren.",
+                thumbnail: "https://i.ytimg.com/vi/nZkBIpmLRyI/hqdefault.jpg",
+                category: "customization",
+                order: 2,
+            },
+            {
+                id: "oJuvDdewG1I",
+                title: "Cómo crear plantillas de notificaciones",
+                description: "Diseña mensajes con datos dinámicos para altas de turnos y recordatorios.",
+                thumbnail: "https://i4.ytimg.com/vi/oJuvDdewG1I/hqdefault.jpg",
+                category: "customization",
+                order: 3,
+            },
+            {
+                id: "wjJfoky6VD0",
+                title: "Cómo vincular WhatsApp en TurnosXpress",
+                description: "Asigna servidor, crea instancia de WhatsApp y escanea el código QR.",
+                thumbnail: "https://i4.ytimg.com/vi/wjJfoky6VD0/hqdefault.jpg",
+                category: "customization",
+                order: 4,
+            },
+        ],
+    },
+];
+
+export const getAllVideos = (): Video[] => {
+    return videoCategories.flatMap((cat) => cat.videos);
+};
+
+export const getTotalVideoCount = (): number => {
+    return getAllVideos().length;
+};