athlefi-ui 0.1.7 → 0.1.8

package/src/assets/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Athlefi",
+  "short_name": "Athlefi",
+  "description": "Athlefi - Tu plataforma de fitness",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#1a1a1a",
+  "background_color": "#1a1a1a",
+  "display": "standalone",
+  "start_url": "/"
+}

package/src/components/atoms/FooterLink.astro

@@ -0,0 +1,50 @@
+---
+export interface Props {
+  href: string;
+  class?: string;
+  external?: boolean;
+  ariaLabel?: string;
+}
+
+const {
+  href,
+  class: className = "",
+  external = false,
+  ariaLabel,
+} = Astro.props;
+---
+
+<a
+  href={href}
+  class={`footer-link ${className}`}
+  target={external ? "_blank" : undefined}
+  rel={external ? "noopener noreferrer" : undefined}
+  aria-label={ariaLabel}
+>
+  <slot />
+</a>
+
+<style>
+  .footer-link {
+    display: inline-block;
+    color: var(--color-white);
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-menu);
+    font-weight: var(--font-weight-menu);
+    line-height: var(--line-height-menu);
+    letter-spacing: var(--letter-spacing-menu);
+    text-decoration: none;
+    transition: color 0.2s ease-in-out;
+    border-radius: 2px;
+  }
+
+  .footer-link:hover {
+    color: var(--color-primary-60);
+  }
+
+  .footer-link:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
+  }
+</style>
+

package/src/components/atoms/FormInput.astro

@@ -0,0 +1,102 @@
+---
+export interface Props {
+  type: "text" | "email" | "tel" | "textarea";
+  name: string;
+  label: string;
+  placeholder: string;
+  required?: boolean;
+  class?: string;
+}
+
+const { 
+  type, 
+  name, 
+  label, 
+  placeholder, 
+  required = false, 
+  class: className = "" 
+} = Astro.props;
+---
+
+<div class={`form-input ${className}`}>
+  <!-- Label -->
+  <label for={name} class="form-input__label">
+    {label}
+  </label>
+  
+  <!-- Input/Textarea -->
+  {type === "textarea" ? (
+    <textarea
+      id={name}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      rows={4}
+      class="form-input__field form-input__textarea"
+    ></textarea>
+  ) : (
+    <input
+      type={type}
+      id={name}
+      name={name}
+      placeholder={placeholder}
+      required={required}
+      class="form-input__field"
+    />
+  )}
+</div>
+
+<style>
+  .form-input {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-input__label {
+    color: var(--color-white);
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-m);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-body-m);
+    margin-bottom: 8px;
+  }
+
+  .form-input__field {
+    width: 100%;
+    padding: 12px 16px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--color-white);
+    border-radius: 8px;
+    color: var(--color-white);
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-m);
+    font-weight: var(--font-weight-body-m);
+    line-height: var(--line-height-body-m);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+  }
+
+  .form-input__field::placeholder {
+    color: var(--color-white);
+    opacity: 0.7;
+  }
+
+  .form-input__field:focus {
+    border-color: var(--color-primary-60);
+    box-shadow: 0 0 0 1px var(--color-primary-60);
+  }
+
+  .form-input__textarea {
+    resize: none;
+  }
+
+  /* Estados de validación HTML5 */
+  .form-input__field:invalid:not(:placeholder-shown) {
+    border-color: var(--color-error);
+  }
+
+  .form-input__field:valid:not(:placeholder-shown) {
+    border-color: var(--color-success);
+  }
+</style>
+

package/src/components/atoms/IconCard.astro

@@ -0,0 +1,99 @@
+---
+import trophyIcon from "../../icons/trophy-outline.svg?raw";
+import personIcon from "../../icons/person-outline.svg?raw";
+import footballIcon from "../../icons/american-football-outline.svg?raw";
+import laptopIcon from "../../icons/laptop-outline.svg?raw";
+
+export interface Props {
+  icon:
+    | "trophy-outline"
+    | "person-outline"
+    | "football-american-outline"
+    | "laptop-outline";
+  text: string;
+  title: string;
+  class?: string;
+}
+
+const { icon, title, text, class: className = "" } = Astro.props;
+
+// Mapeo de íconos a contenido SVG
+const iconMap = {
+  "trophy-outline": trophyIcon,
+  "person-outline": personIcon,
+  "football-american-outline": footballIcon,
+  "laptop-outline": laptopIcon,
+};
+
+const svgContent = iconMap[icon];
+---
+
+<div class={`icon-card ${className}`}>
+  <!-- Ícono SVG -->
+  <div class="icon-card__icon-wrapper" aria-hidden="true">
+    <Fragment set:html={svgContent} />
+  </div>
+
+  <!-- Título -->
+  <h3 class="icon-card__title">
+    {title}
+  </h3>
+
+  <!-- Texto descriptivo -->
+  <p class="icon-card__text">
+    {text}
+  </p>
+</div>
+
+<style>
+  .icon-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .icon-card__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+  }
+
+  .icon-card__icon-wrapper :global(svg) {
+    width: 48px;
+    height: 48px;
+    color: var(--color-primary-60);
+    fill: var(--color-primary-60);
+  }
+
+  .icon-card__title {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    line-height: 1;
+    letter-spacing: var(--letter-spacing-h3);
+    color: var(--color-primary-60);
+    margin-bottom: 8px;
+  }
+
+  .icon-card__text {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-s);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-body-s);
+    letter-spacing: var(--letter-spacing-body-s);
+    color: var(--color-white);
+    width: 160px;
+  }
+
+  /* Responsive: ancho mayor en pantallas grandes */
+  @media (min-width: 1024px) {
+    .icon-card__text {
+      width: 270px;
+    }
+  }
+</style>
+

package/src/components/atoms/Logo.astro

@@ -0,0 +1,59 @@
+---
+import logoImage from "../../assets/Logo 3.png";
+
+export interface Props {
+  class?: string;
+  size?: "sm" | "md" | "lg";
+  href?: string;
+}
+
+const { 
+  class: className = "", 
+  size = "lg",
+  href = "/" 
+} = Astro.props;
+---
+
+<a
+  href={href}
+  class={`logo logo--${size} ${className}`}
+  aria-label="ATHLEFI - Ir a la página principal"
+>
+  <img 
+    src={logoImage.src} 
+    alt="ATHLEFI" 
+    class="logo__image"
+    width={logoImage.width}
+    height={logoImage.height}
+  />
+</a>
+
+<style>
+  .logo {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .logo__image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /* Tamaños */
+  .logo--sm {
+    width: 96px;
+    height: 24px;
+  }
+
+  .logo--md {
+    width: 128px;
+    height: 32px;
+  }
+
+  .logo--lg {
+    width: 208px;
+    height: 64px;
+  }
+</style>
+

package/src/components/atoms/NavLink.astro

@@ -0,0 +1,70 @@
+---
+export interface Props {
+  href: string;
+  class?: string;
+  isActive?: boolean;
+  ariaCurrent?:
+    | "page"
+    | "step"
+    | "location"
+    | "date"
+    | "time"
+    | "true"
+    | "false";
+}
+
+const {
+  href,
+  class: className = "",
+  isActive = false,
+  ariaCurrent = "page",
+} = Astro.props;
+
+// Detectar si el enlace está activo basado en la URL actual
+const currentPath = Astro.url.pathname;
+const isCurrentPage =
+  currentPath === href || (href !== "/" && currentPath.startsWith(href));
+
+const activeState = isActive || isCurrentPage;
+---
+
+<a
+  href={href}
+  class={`nav-link ${activeState ? "nav-link--active" : ""} ${className}`}
+  aria-current={activeState ? ariaCurrent : undefined}
+>
+  <slot />
+</a>
+
+<style>
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-body-m);
+    font-weight: var(--font-weight-body-m);
+    line-height: var(--line-height-body-m);
+    letter-spacing: var(--letter-spacing-body-m);
+    color: var(--color-white);
+    text-decoration: none;
+    border-radius: 6px;
+    border-bottom: 2px solid transparent;
+    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  }
+
+  .nav-link:hover {
+    color: var(--color-primary-60);
+  }
+
+  .nav-link:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
+  }
+
+  .nav-link--active {
+    color: var(--color-primary-60);
+    border-bottom-color: var(--color-primary-60);
+  }
+</style>
+

package/src/components/atoms/SocialIcon.astro

@@ -0,0 +1,80 @@
+---
+export interface Props {
+  platform: "youtube" | "facebook" | "twitter" | "instagram";
+  href: string;
+  class?: string;
+}
+
+const { platform, href, class: className = "" } = Astro.props;
+
+const icons = {
+  youtube: {
+    viewBox: "0 0 24 24",
+    path: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
+    label: "YouTube",
+  },
+  facebook: {
+    viewBox: "0 0 24 24",
+    path: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
+    label: "Facebook",
+  },
+  twitter: {
+    viewBox: "0 0 24 24",
+    path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
+    label: "X (Twitter)",
+  },
+  instagram: {
+    viewBox: "0 0 24 24",
+    path: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z",
+    label: "Instagram",
+  },
+};
+
+const icon = icons[platform];
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="noopener noreferrer"
+  class={`social-icon ${className}`}
+  aria-label={`Síguenos en ${icon.label}`}
+>
+  <svg
+    class="social-icon__svg"
+    fill="currentColor"
+    viewBox={icon.viewBox}
+    aria-hidden="true"
+  >
+    <path d={icon.path}></path>
+  </svg>
+</a>
+
+<style>
+  .social-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--color-white);
+    text-decoration: none;
+    border-radius: 2px;
+    transition: color 0.2s ease-in-out;
+  }
+
+  .social-icon:hover {
+    color: var(--color-primary-60);
+  }
+
+  .social-icon:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
+  }
+
+  .social-icon__svg {
+    width: 20px;
+    height: 20px;
+  }
+</style>
+

package/src/components/atoms/TabButton.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * 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: TabButton
+ * @description Botón individual para tabs con estados activo/inactivo
+ */
+
+export interface Props {
+  label: string;
+  tabId: string;
+  isActive?: boolean;
+  class?: string;
+}
+
+const { 
+  label, 
+  tabId, 
+  isActive = false,
+  class: className = ""
+} = Astro.props;
+---
+
+<button 
+  id={`tab-${tabId}`}
+  class={`tab-button ${isActive ? 'tab-button--active' : ''} ${className}`}
+  data-tab={tabId}
+  role="tab"
+  aria-selected={isActive}
+  aria-controls={`panel-${tabId}`}
+>
+  {label}
+</button>
+
+<style>
+  .tab-button {
+    padding: 12px 24px;
+    background-color: transparent;
+    color: rgb(209, 213, 219);
+    border: none;
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-button-m);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-button-m);
+    letter-spacing: var(--letter-spacing-button-m);
+  }
+  
+  .tab-button--active {
+    background-color: var(--color-primary-60);
+    color: var(--color-primary-90);
+  }
+  
+  .tab-button:hover:not(.tab-button--active) {
+    background-color: rgba(1, 234, 199, 0.1);
+  }
+  
+  .tab-button:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
+  }
+</style>
+

package/src/components/atoms/TextMono.astro

@@ -0,0 +1,152 @@
+---
+/**
+ * Componente átomo para texto con fuente monoespaciada
+ * @description Texto optimizado para mostrar datos técnicos, códigos o información estructurada
+ */
+
+export interface Props {
+  /** Contenido de texto a mostrar */
+  text?: string;
+  /** Tamaño del texto */
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+  /** Color del texto */
+  color?: 'primary' | 'secondary' | 'accent' | 'muted' | 'white' | 'inherit';
+  /** Peso de la fuente */
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  /** Si el texto debe estar en mayúsculas */
+  uppercase?: boolean;
+  /** Si el texto debe tener espaciado entre letras */
+  tracking?: boolean;
+  /** Clases CSS adicionales */
+  class?: string;
+  /** ID único para el elemento */
+  id?: string;
+  /** Título para accesibilidad */
+  title?: string;
+}
+
+const {
+  text = '',
+  size = 'base',
+  color = 'inherit',
+  weight = 'normal',
+  uppercase = false,
+  tracking = false,
+  class: className = '',
+  id,
+  title,
+  ...rest
+} = Astro.props;
+
+// Procesamiento del contenido
+const hasSlotContent = Astro.slots.has('default');
+const content = hasSlotContent ? null : text;
+---
+
+<span 
+  class={`
+    text-mono 
+    text-mono--${size} 
+    text-mono--${color}
+    text-mono--${weight}
+    ${uppercase ? 'text-mono--uppercase' : ''}
+    ${tracking ? 'text-mono--tracking' : ''}
+    ${className}
+  `}
+  id={id}
+  title={title}
+  {...rest}
+>
+  {hasSlotContent ? (
+    <slot />
+  ) : (
+    content
+  )}
+</span>
+
+<style>
+  /* Base monospace styling */
+  .text-mono {
+    font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.025em;
+    transition: color 0.2s ease-in-out;
+    user-select: text;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+  }
+
+  /* Tamaños */
+  .text-mono--xs {
+    font-size: var(--font-size-body-xxs); /* 10px */
+  }
+
+  .text-mono--sm {
+    font-size: var(--font-size-body-xs); /* 12px */
+  }
+
+  .text-mono--base {
+    font-size: var(--font-size-body-s); /* 14px */
+  }
+
+  .text-mono--lg {
+    font-size: var(--font-size-body-m); /* 16px */
+  }
+
+  .text-mono--xl {
+    font-size: var(--font-size-body-l); /* 18px */
+  }
+
+  /* Colores */
+  .text-mono--primary {
+    color: var(--color-primary-60);
+  }
+
+  .text-mono--secondary {
+    color: rgb(209, 213, 219);
+  }
+
+  .text-mono--accent {
+    color: rgb(103, 232, 249);
+  }
+
+  .text-mono--muted {
+    color: rgb(156, 163, 175);
+  }
+
+  .text-mono--white {
+    color: var(--color-white);
+  }
+
+  .text-mono--inherit {
+    color: inherit;
+  }
+
+  /* Pesos */
+  .text-mono--normal {
+    font-weight: var(--font-weight-regular);
+  }
+
+  .text-mono--medium {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .text-mono--semibold {
+    font-weight: 600;
+  }
+
+  .text-mono--bold {
+    font-weight: var(--font-weight-bold);
+  }
+
+  /* Modificadores */
+  .text-mono--uppercase {
+    text-transform: uppercase;
+  }
+
+  .text-mono--tracking {
+    letter-spacing: 0.05em;
+  }
+</style>
+