athlefi-ui 0.1.7 → 0.1.8

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,120 @@
 ---
-export interface Props {
-  icon: "phone" | "mail" | "location";
+/**
+ * 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
+ */
+
+ export interface Props {
+  icon: string;
   title: string;
-  text: string;
+  description: string;
+  stepNumber: number;
+  isVertical?: boolean;
+  animationDelay?: number;
   class?: string;
 }
 
-const { icon, title, text, class: className = "" } = Astro.props;
+const { 
+  icon, 
+  title, 
+  description, 
+  stepNumber, 
+  isVertical = false, 
+  animationDelay = 0,
+  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",
+// Importar los iconos SVG desde assets
+import shieldIcon from '@assets/shield-checkmark-outline.svg?raw';
+import searchIcon from '@assets/search-outline.svg?raw';
+import cardIcon from '@assets/card-outline.svg?raw';
+import chartIcon from '@assets/bar-chart-outline.svg?raw';
+import trophyIcon from '@assets/trophy-outline.svg?raw';
+import userIcon from '@assets/person-outline.svg?raw';
+import documentIcon from '@assets/document-text-outline.svg?raw';
+import laptopIcon from '@assets/laptop-outline.svg?raw';
+import cashIcon from '@assets/cash-outline.svg?raw';
+import pieIcon from '@assets/pie-chart-outline.svg?raw';
+
+// 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 iconSrc = iconMap[icon];
+const iconSvg = iconMap[icon] || iconMap.shield;
 ---
 
-<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 class={`timeline-step ${isVertical ? 'vertical' : 'horizontal'} ${className}`}>
+  <div class="timeline-icon-container relative">
+    <!-- Ícono principal -->
+    <div 
+      class="w-12 h-12 bg-primary-60 rounded-full flex items-center justify-center relative z-10 mb-4"
+      set:html={iconSvg.replace('<svg', `<svg width="${isVertical ? '20' : '24'}" height="${isVertical ? '20' : '24'}" class="text-primary-90"`)}
+    ></div>
+    
+    <!-- Efecto pulse animado -->
+    <div 
+      class="absolute -top-2 -left-2 w-16 h-16 border-2 border-primary-60/30 rounded-full animate-pulse"
+      style={`animation-delay: ${animationDelay}s;`}
+    ></div>
+    
+    <!-- Conector vertical (solo para timeline vertical) -->
+    {isVertical && stepNumber < 5 && (
+      <div class="absolute top-12 left-1/2 transform -translate-x-1/2 w-0.5 h-16 bg-primary-60/30"></div>
+    )}
+  </div>
+  
+  <!-- Contenido del paso -->
+  <div class={`timeline-content ${isVertical ? 'flex-1 ml-4' : 'text-center'}`}>
+    <h3 class={`subtitle-m-style text-white ${isVertical ? ' ' : 'mb-2 mt-4'}`}>
+      {stepNumber}. {title}
+    </h3>
+    <p class={`body-s-style text-gray-300 ${!isVertical ? 'max-w-48' : ''}`}>
+      {description}
+    </p>
   </div>
-
-  <!-- Título -->
-  <h4 class="h4-style text-primary-60 font-bold mb-2">
-    {title}
-  </h4>
-
-  <!-- Texto descriptivo -->
-  <p class="body-m-style text-white leading-relaxed">
-    {text}
-  </p>
 </div>
+
+<style>
+  .timeline-step.horizontal {
+    @apply flex flex-col items-center w-1/5 relative;
+  }
+  
+  .timeline-step.vertical {
+    @apply flex items-start;
+  }
+  
+  .timeline-step.vertical .timeline-icon-container {
+    @apply flex-shrink-0 relative;
+  }
+  
+  .timeline-step.horizontal .timeline-icon-container {
+    @apply relative;
+  }
+  
+  @keyframes pulse {
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 0.1; }
+  }
+  
+  .animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+</style>

package/src/index.ts

@@ -6,6 +6,15 @@
 // ============================================
 export { default as Button } from "./components/atoms/Button.astro";
 export { default as ContactIcon } from "./components/atoms/ContactIcon.astro";
+export { default as FooterLink } from "./components/atoms/FooterLink.astro";
+export { default as FormInput } from "./components/atoms/FormInput.astro";
+export { default as IconCard } from "./components/atoms/IconCard.astro";
+export { default as Logo } from "./components/atoms/Logo.astro";
+export { default as NavLink } from "./components/atoms/NavLink.astro";
+export { default as SocialIcon } from "./components/atoms/SocialIcon.astro";
+export { default as TabButton } from "./components/atoms/TabButton.astro";
+export { default as TextMono } from "./components/atoms/TextMono.astro";
+export { default as TimelineStep } from "./components/atoms/TimelineStep.astro";
 // export { default as Input } from "./components/atoms/Input.astro";
 // export { default as Label } from "./components/atoms/Label.astro";