athlefi-ui 0.1.7 → 0.1.9

package/src/components/atoms/TimelineStep.astro

@@ -0,0 +1,215 @@
+---
+/**
+ * Copyright (c) 2025 Grupo DedSec S.A. de C.V.
+ * Este código fuente es propiedad exclusiva de Grupo DedSec S.A. de C.V.
+ * Se prohíbe su uso, reproducción, distribución o modificación, total o parcial, sin autorización expresa por escrito.
+ * No se permite el uso comercial ni la redistribución pública del mismo.
+ * Para licenciamiento, contactar a: admin@dedsec.com.mx
+ */
+
+/**
+ * Átomo: TimelineStep
+ * @description Paso individual de una línea de tiempo con ícono, título y descripción
+ */
+
+import shieldIcon from '../../icons/shield-checkmark-outline.svg?raw';
+import searchIcon from '../../icons/search-outline.svg?raw';
+import cardIcon from '../../icons/card-outline.svg?raw';
+import chartIcon from '../../icons/bar-chart-outline.svg?raw';
+import trophyIcon from '../../icons/trophy-outline.svg?raw';
+import userIcon from '../../icons/person-outline.svg?raw';
+import documentIcon from '../../icons/document-text-outline.svg?raw';
+import laptopIcon from '../../icons/laptop-outline.svg?raw';
+import cashIcon from '../../icons/cash-outline.svg?raw';
+import pieIcon from '../../icons/pie-chart-outline.svg?raw';
+
+export interface Props {
+  icon: string;
+  title: string;
+  description: string;
+  stepNumber: number;
+  isVertical?: boolean;
+  animationDelay?: number;
+  class?: string;
+}
+
+const { 
+  icon, 
+  title, 
+  description, 
+  stepNumber, 
+  isVertical = false, 
+  animationDelay = 0,
+  class: className = ""
+} = Astro.props;
+
+// Mapeo de iconos disponibles
+const iconMap: Record<string, string> = {
+  shield: shieldIcon,
+  search: searchIcon,
+  card: cardIcon,
+  chart: chartIcon,
+  trophy: trophyIcon,
+  user: userIcon,
+  'document-text': documentIcon,
+  laptop: laptopIcon,
+  cash: cashIcon,
+  pie: pieIcon
+};
+
+const iconSvg = iconMap[icon] || iconMap.shield;
+const iconSize = isVertical ? '20' : '24';
+---
+
+<div class={`timeline-step ${isVertical ? 'timeline-step--vertical' : 'timeline-step--horizontal'} ${className}`}>
+  <div class="timeline-step__icon-container">
+    <!-- Ícono principal -->
+    <div class="timeline-step__icon">
+      <Fragment set:html={iconSvg.replace('<svg', `<svg width="${iconSize}" height="${iconSize}" class="timeline-step__svg"`)} />
+    </div>
+    
+    <!-- Efecto pulse animado -->
+    <div 
+      class="timeline-step__pulse"
+      style={`animation-delay: ${animationDelay}s;`}
+    ></div>
+    
+    <!-- Conector vertical (solo para timeline vertical) -->
+    {isVertical && stepNumber < 5 && (
+      <div class="timeline-step__connector"></div>
+    )}
+  </div>
+  
+  <!-- Contenido del paso -->
+  <div class={`timeline-step__content ${isVertical ? 'timeline-step__content--vertical' : 'timeline-step__content--horizontal'}`}>
+    <h3 class={`timeline-step__title ${isVertical ? '' : 'timeline-step__title--horizontal'}`}>
+      {stepNumber}. {title}
+    </h3>
+    <p class={`timeline-step__description ${!isVertical ? 'timeline-step__description--horizontal' : ''}`}>
+      {description}
+    </p>
+  </div>
+</div>
+
+<style>
+  /* Base styles */
+  .timeline-step {
+    position: relative;
+  }
+
+  /* Horizontal layout */
+  .timeline-step--horizontal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 20%;
+  }
+
+  /* Vertical layout */
+  .timeline-step--vertical {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  /* Icon container */
+  .timeline-step__icon-container {
+    position: relative;
+  }
+
+  .timeline-step--vertical .timeline-step__icon-container {
+    flex-shrink: 0;
+  }
+
+  /* Icon */
+  .timeline-step__icon {
+    position: relative;
+    z-index: 10;
+    width: 48px;
+    height: 48px;
+    background-color: var(--color-primary-60);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+
+  .timeline-step__icon :global(.timeline-step__svg) {
+    color: var(--color-primary-90);
+    fill: var(--color-primary-90);
+  }
+
+  /* Pulse effect */
+  .timeline-step__pulse {
+    position: absolute;
+    top: -8px;
+    left: -8px;
+    width: 64px;
+    height: 64px;
+    border: 2px solid rgba(1, 234, 199, 0.3);
+    border-radius: 50%;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { 
+      opacity: 0.3; 
+      transform: scale(1);
+    }
+    50% { 
+      opacity: 0.1;
+      transform: scale(1.05);
+    }
+  }
+
+  /* Connector for vertical timeline */
+  .timeline-step__connector {
+    position: absolute;
+    top: 48px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 64px;
+    background-color: rgba(1, 234, 199, 0.3);
+  }
+
+  /* Content */
+  .timeline-step__content--horizontal {
+    text-align: center;
+  }
+
+  .timeline-step__content--vertical {
+    flex: 1;
+    margin-left: 16px;
+  }
+
+  /* Title */
+  .timeline-step__title {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-subtitle-m);
+    font-weight: var(--font-weight-subtitle-m);
+    line-height: var(--line-height-subtitle-m);
+    letter-spacing: var(--letter-spacing-subtitle-m);
+    color: var(--color-white);
+  }
+
+  .timeline-step__title--horizontal {
+    margin-top: 16px;
+    margin-bottom: 8px;
+  }
+
+  /* Description */
+  .timeline-step__description {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-s);
+    font-weight: var(--font-weight-body-s);
+    line-height: var(--line-height-body-s);
+    letter-spacing: var(--letter-spacing-body-s);
+    color: rgb(209, 213, 219);
+  }
+
+  .timeline-step__description--horizontal {
+    max-width: 192px;
+  }
+</style>
+

package/src/components/atoms/auxfile.astro

@@ -1,41 +1,41 @@
 ---
+import NavLink from "../atoms/NavLink.astro";
+
 export interface Props {
-  icon: "phone" | "mail" | "location";
-  title: string;
-  text: string;
   class?: string;
+  isMobile?: boolean;
 }
 
-const { icon, title, text, class: className = "" } = Astro.props;
-
-// Mapeo de íconos a archivos SVG
-const iconMap = {
-  phone: "/src/assets/phone-portrait-outline.svg",
-  mail: "/src/assets/mail-outline.svg",
-  location: "/src/assets/location-outline.svg",
-};
+const { class: className = "", isMobile = false } = Astro.props;
 
-const iconSrc = iconMap[icon];
+const navigationItems = [
+  { href: "#atleta", label: "Atleta" },
+  { href: "/us", label: "Nosotros" },
+  { href: "/how-work", label: "Cómo trabajamos" },
+  { href: "/contact", label: "Contacto" },
+];
 ---
 
-<div class={`flex flex-col items-center text-center ${className}`}>
-  <!-- Ícono SVG -->
-  <div class="mb-4 flex h-12 w-12 items-center justify-center">
-    <img
-      src={iconSrc} 
-      alt={`${title} icon`}
-      class="h-12 w-12 text-primary-60 fill-primary-60"
-      aria-hidden="true"
-    />
-  </div>
-
-  <!-- Título -->
-  <h4 class="h4-style text-primary-60 font-bold mb-2">
-    {title}
-  </h4>
+<nav class={`${className}`} aria-label="Navegación principal">
+  <ul
+    class={`
+      ${
+        isMobile
+          ? "flex flex-col space-y-4 py-4"
+          : "hidden lg:flex lg:items-center lg:space-x-8"
+      }
+    `}
+    role="menubar"
+  >
+    {
+      navigationItems.map((item) => (
+        <li role="none">
+          <NavLink href={item.href} class={isMobile ? "w-full text-left" : ""}>
+            {item.label}
+          </NavLink>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
 
-  <!-- Texto descriptivo -->
-  <p class="body-m-style text-white leading-relaxed">
-    {text}
-  </p>
-</div>

package/src/components/molecules/LinkGroup.astro

@@ -0,0 +1,70 @@
+---
+import FooterLink from "../atoms/FooterLink.astro";
+
+export interface Props {
+  title: string;
+  links: Array<{
+    href: string;
+    label: string;
+    external?: boolean;
+    ariaLabel?: string;
+  }>;
+  class?: string;
+}
+
+const { title, links, class: className = "" } = Astro.props;
+---
+
+<div class={`link-group ${className}`}>
+  <h3 class="link-group__title">
+    {title}
+  </h3>
+
+  <nav aria-label={`${title} navigation`}>
+    <ul class="link-group__list" role="list">
+      {
+        links.map((link) => (
+          <li class="link-group__item">
+            <FooterLink
+              href={link.href}
+              external={link.external || false}
+              ariaLabel={link.ariaLabel}
+            >
+              {link.label}
+            </FooterLink>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+</div>
+
+<style>
+  .link-group {
+    /* Base styles */
+  }
+
+  .link-group__title {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h6);
+    font-weight: var(--font-weight-h6);
+    line-height: var(--line-height-h6);
+    letter-spacing: var(--letter-spacing-h6);
+    color: var(--color-white);
+    margin-bottom: 16px;
+  }
+
+  .link-group__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .link-group__item {
+    /* Item styles */
+  }
+</style>
+

package/src/components/molecules/NavMenu.astro

@@ -0,0 +1,79 @@
+---
+import NavLink from "../atoms/NavLink.astro";
+
+export interface Props {
+  class?: string;
+  isMobile?: boolean;
+}
+
+const { class: className = "", isMobile = false } = Astro.props;
+
+const navigationItems = [
+  { href: "#atleta", label: "Atleta" },
+  { href: "/us", label: "Nosotros" },
+  { href: "/how-work", label: "Cómo trabajamos" },
+  { href: "/contact", label: "Contacto" },
+];
+---
+
+<nav class={`nav-menu ${className}`} aria-label="Navegación principal">
+  <ul
+    class={`nav-menu__list ${isMobile ? 'nav-menu__list--mobile' : 'nav-menu__list--desktop'}`}
+    role="menubar"
+  >
+    {
+      navigationItems.map((item) => (
+        <li role="none" class="nav-menu__item">
+          <NavLink href={item.href} class={isMobile ? "nav-menu__link--mobile" : ""}>
+            {item.label}
+          </NavLink>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  .nav-menu {
+    /* Base styles */
+  }
+
+  .nav-menu__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Desktop menu */
+  .nav-menu__list--desktop {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    .nav-menu__list--desktop {
+      display: flex;
+      align-items: center;
+      gap: 32px;
+    }
+  }
+
+  /* Mobile menu */
+  .nav-menu__list--mobile {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 0;
+  }
+
+  .nav-menu__item {
+    /* Item styles */
+  }
+
+  /* Mobile link full width */
+  .nav-menu__list--mobile :global(.nav-menu__link--mobile) {
+    display: block;
+    width: 100%;
+    text-align: left;
+  }
+</style>
+

package/src/components/molecules/SocialGroup.astro

@@ -0,0 +1,64 @@
+---
+import SocialIcon from "../atoms/SocialIcon.astro";
+
+export interface Props {
+  title: string;
+  socialLinks: Array<{
+    platform: "youtube" | "facebook" | "twitter" | "instagram";
+    href: string;
+  }>;
+  class?: string;
+}
+
+const { title, socialLinks, class: className = "" } = Astro.props;
+---
+
+<div class={`social-group ${className}`}>
+  <h3 class="social-group__title">
+    {title}
+  </h3>
+
+  <nav aria-label="Redes sociales">
+    <ul class="social-group__list" role="list">
+      {
+        socialLinks.map((social) => (
+          <li class="social-group__item">
+            <SocialIcon platform={social.platform} href={social.href} />
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+</div>
+
+<style>
+  .social-group {
+    /* Base styles */
+  }
+
+  .social-group__title {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h6);
+    font-weight: var(--font-weight-h6);
+    line-height: var(--line-height-h6);
+    letter-spacing: var(--letter-spacing-h6);
+    color: var(--color-white);
+    text-align: center;
+    margin-bottom: 16px;
+  }
+
+  .social-group__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .social-group__item {
+    /* Item styles */
+  }
+</style>
+

package/src/components/organisms/Footer.astro

@@ -0,0 +1,214 @@
+---
+import Logo from "../atoms/Logo.astro";
+import LinkGroup from "../molecules/LinkGroup.astro";
+import SocialGroup from "../molecules/SocialGroup.astro";
+
+export interface Props {
+  class?: string;
+}
+
+const { class: className = "" } = Astro.props;
+
+// Configuración de enlaces del sitio
+const siteMapLinks = [
+  { href: "#atletas", label: "Atletas" },
+  { href: "#nosotros", label: "Nosotros" },
+  { href: "#como-trabajamos", label: "Cómo trabajamos" },
+  { href: "#contacto", label: "Contacto" },
+  { href: "#ayuda", label: "Ayuda" },
+  { href: "#faq", label: "FAQ" },
+];
+
+// Configuración de enlaces legales
+const legalLinks = [
+  { href: "/privacy-policy", label: "Políticas de Privacidad" },
+  { href: "/terms-conditions", label: "Términos y Condiciones" },
+  { href: "/cookie-policy", label: "Políticas de Cookies" },
+];
+
+// Configuración de redes sociales
+const socialLinks = [
+  { platform: "youtube" as const, href: "https://youtube.com/@athlefi" },
+  { platform: "facebook" as const, href: "https://facebook.com/athlefi" },
+  { platform: "twitter" as const, href: "https://twitter.com/athlefi" },
+  { platform: "instagram" as const, href: "https://instagram.com/athlefi" },
+];
+
+const currentYear = new Date().getFullYear();
+---
+
+<footer
+  class={`footer ${className}`}
+  role="contentinfo"
+  aria-label="Información del sitio y enlaces adicionales"
+>
+  <div class="footer__container">
+    <!-- Secciones principales del footer -->
+    <div class="footer__grid">
+      <!-- Logo -->
+      <div class="footer__logo">
+        <div class="footer__logo-wrapper">
+          <Logo size="lg" class="footer__logo-image" />
+        </div>
+      </div>
+
+      <!-- Separador mobile -->
+      <div class="footer__separator footer__separator--mobile"></div>
+
+      <!-- Mapa del sitio -->
+      <div class="footer__sitemap">
+        <LinkGroup title="Mapa del sitio" links={siteMapLinks} />
+      </div>
+
+      <!-- Legales -->
+      <div class="footer__legal">
+        <LinkGroup title="Legales" links={legalLinks} />
+      </div>
+
+      <!-- Redes sociales -->
+      <div class="footer__social">
+        <SocialGroup title="Síguenos" socialLinks={socialLinks} />
+      </div>
+    </div>
+
+    <!-- Separador -->
+    <div class="footer__separator"></div>
+
+    <!-- Sección inferior con copyright -->
+    <div class="footer__copyright">
+      <div class="footer__copyright-content">
+        <p class="footer__copyright-text">
+          © {currentYear} Athlefi. Todos los derechos reservados.
+        </p>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .footer {
+    background-color: var(--color-primary-90);
+    border-top: 1px solid rgb(31, 41, 55);
+  }
+
+  .footer__container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .footer__container {
+      padding: 0 1.5rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .footer__container {
+      padding: 0 2rem;
+    }
+  }
+
+  /* Grid Layout */
+  .footer__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    padding: 3rem 0;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__grid {
+      grid-template-columns: repeat(16, 1fr);
+      gap: 1.5rem;
+    }
+  }
+
+  /* Logo Section */
+  .footer__logo {
+    grid-column: 1;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__logo {
+      grid-column: 1 / span 4;
+    }
+  }
+
+  .footer__logo-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footer__logo-image {
+    margin-bottom: 1rem;
+  }
+
+  /* Sitemap Section */
+  .footer__sitemap {
+    grid-column: 1;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__sitemap {
+      grid-column: 5 / span 4;
+    }
+  }
+
+  /* Legal Section */
+  .footer__legal {
+    grid-column: 1;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__legal {
+      grid-column: 9 / span 4;
+    }
+  }
+
+  /* Social Section */
+  .footer__social {
+    grid-column: 1;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__social {
+      grid-column: 13 / span 4;
+    }
+  }
+
+  /* Separators */
+  .footer__separator {
+    border-top: 1px solid var(--color-gray-medium);
+  }
+
+  .footer__separator--mobile {
+    display: block;
+  }
+
+  @media (min-width: 1024px) {
+    .footer__separator--mobile {
+      display: none;
+    }
+  }
+
+  /* Copyright Section */
+  .footer__copyright {
+    padding: 1.5rem 0;
+  }
+
+  .footer__copyright-content {
+    text-align: center;
+  }
+
+  .footer__copyright-text {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-s);
+    font-weight: var(--font-weight-body-s);
+    line-height: var(--line-height-body-s);
+    letter-spacing: var(--letter-spacing-body-s);
+    color: rgb(156, 163, 175);
+  }
+</style>
+