athlefi-ui 0.1.6 → 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/Button.astro

@@ -1,75 +1,140 @@
 ---
-interface Props {
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  size?: 's' | 'm' | 'l';
+export interface Props {
+  variant?: "primary" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+  type?: "button" | "submit" | "reset";
   disabled?: boolean;
+  href?: string;
+  class?: string;
+  ariaLabel?: string;
 }
 
-const { 
-  variant = 'primary', 
-  size = 'm',
-  disabled = false 
+const {
+  variant = "primary",
+  size = "md",
+  type = "button",
+  disabled = false,
+  href,
+  class: className = "",
+  ariaLabel,
 } = Astro.props;
+
+const Element = href ? "a" : "button";
+const elementProps = href ? { href } : { type, disabled };
 ---
 
-<button 
-  class={`btn btn--${variant} btn--${size}`}
-  disabled={disabled}
+<Element
+  {...elementProps}
+  class={`btn btn--${variant} btn--${size} ${className}`}
+  aria-label={ariaLabel}
 >
   <slot />
-</button>
+</Element>
 
 <style>
   .btn {
-    font-family: var(--font-family-manrope);
-    border: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    border-radius: 9999px;
+    transition: all 0.2s ease;
     cursor: pointer;
-    transition: all 0.3s ease;
-    border-radius: 8px;
+    text-decoration: none;
+    border: none;
+    outline: none;
+  }
+
+  /* Focus states */
+  .btn:focus-visible {
+    outline: 2px solid var(--color-primary-60);
+    outline-offset: 2px;
   }
 
   /* Variantes */
   .btn--primary {
-    background-color: var(--color-primary-60);
-    color: var(--color-white);
+    background-color: var(--color-white);
+    color: var(--color-primary-90);
   }
 
   .btn--primary:hover:not(:disabled) {
-    background-color: var(--color-primary-30);
+    background-color: var(--color-gray-light);
   }
 
-  .btn--secondary {
-    background-color: var(--color-gray-light);
-    color: var(--color-primary-90);
+  .btn--primary:focus-visible {
+    outline-color: var(--color-white);
   }
 
-  .btn--tertiary {
+  .btn--outline {
     background-color: transparent;
     color: var(--color-primary-60);
     border: 2px solid var(--color-primary-60);
   }
 
-  /* Tamaños */
-  .btn--s {
+  .btn--outline:hover:not(:disabled) {
+    background-color: var(--color-primary-60);
+    color: var(--color-primary-90);
+  }
+
+  .btn--outline:focus-visible {
+    outline-color: var(--color-primary-60);
+  }
+
+  .btn--ghost {
+    background-color: transparent;
+    color: var(--color-white);
+  }
+
+  .btn--ghost:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .btn--ghost:focus-visible {
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* Tamaños - usa clases de tipografía globales */
+  .btn--sm {
+    padding: 6px 12px;
+  }
+
+  .btn--md {
+    padding: 8px 16px;
+  }
+
+  .btn--lg {
+    padding: 12px 24px;
+  }
+
+  /* Aplicar estilos de tipografía */
+  :global(.btn--sm) {
+    font-family: var(--font-family-manrope);
     font-size: var(--font-size-button-s);
     font-weight: var(--font-weight-button-s);
-    padding: 8px 16px;
+    line-height: var(--line-height-button-s);
+    letter-spacing: var(--letter-spacing-button-s);
   }
 
-  .btn--m {
+  :global(.btn--md) {
+    font-family: var(--font-family-manrope);
     font-size: var(--font-size-button-m);
     font-weight: var(--font-weight-button-m);
-    padding: 12px 24px;
+    line-height: var(--line-height-button-m);
+    letter-spacing: var(--letter-spacing-button-m);
   }
 
-  .btn--l {
+  :global(.btn--lg) {
+    font-family: var(--font-family-manrope);
     font-size: var(--font-size-button-l);
     font-weight: var(--font-weight-button-l);
-    padding: 16px 32px;
+    line-height: var(--line-height-button-l);
+    letter-spacing: var(--letter-spacing-button-l);
   }
 
   /* Disabled */
-  .btn:disabled {
+  .btn:disabled,
+  .btn[disabled] {
     opacity: 0.5;
     cursor: not-allowed;
   }

package/src/components/atoms/ContactIcon.astro

@@ -0,0 +1,91 @@
+---
+import phoneIcon from "../../icons/phone-portrait-outline.svg?raw";
+import mailIcon from "../../icons/mail-outline.svg?raw";
+import locationIcon from "../../icons/location-outline.svg?raw";
+
+export interface Props {
+  icon: "phone" | "mail" | "location";
+  title: string;
+  text: string;
+  class?: string;
+}
+
+const { 
+  icon, 
+  title, 
+  text, 
+  class: className = "" 
+} = Astro.props;
+
+// Mapeo de íconos a contenido SVG
+const iconMap = {
+  phone: phoneIcon,
+  mail: mailIcon,
+  location: locationIcon,
+};
+
+const svgContent = iconMap[icon];
+---
+
+<div class={`contact-icon ${className}`}>
+  <!-- Ícono SVG -->
+  <div class="contact-icon__icon-wrapper" aria-hidden="true">
+    <Fragment set:html={svgContent} />
+  </div>
+
+  <!-- Título -->
+  <h4 class="contact-icon__title">
+    {title}
+  </h4>
+
+  <!-- Texto descriptivo -->
+  <p class="contact-icon__text">
+    {text}
+  </p>
+</div>
+
+<style>
+  .contact-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .contact-icon__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  }
+
+  .contact-icon__icon-wrapper :global(svg) {
+    width: 48px;
+    height: 48px;
+    color: var(--color-primary-60);
+    fill: var(--color-primary-60);
+  }
+
+  .contact-icon__title {
+    font-family: var(--font-family-manrope);
+    font-size: var(--font-size-h4);
+    font-weight: var(--font-weight-h4);
+    line-height: var(--line-height-h4);
+    letter-spacing: var(--letter-spacing-h4);
+    color: var(--color-primary-60);
+    margin-bottom: 8px;
+  }
+
+  .contact-icon__text {
+    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);
+    line-height: 1.6;
+  }
+</style>
+

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