athlefi-ui 0.1.6 → 0.1.8

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

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

@@ -0,0 +1,120 @@
+---
+/**
+ * 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;
+  description: string;
+  stepNumber: number;
+  isVertical?: boolean;
+  animationDelay?: number;
+  class?: string;
+}
+
+const { 
+  icon, 
+  title, 
+  description, 
+  stepNumber, 
+  isVertical = false, 
+  animationDelay = 0,
+  class: className = ""
+} = Astro.props;
+
+// 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 iconSvg = iconMap[icon] || iconMap.shield;
+---
+
+<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>
+</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/icons/american-football-outline.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <g clip-path="url(#clip0_16_5443)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.3973 14.3628C1.86528 16.8554 2.31359 18.9906 3.66155 20.3386C5.0095 21.6865 7.14472 22.1348 9.63727 21.6028C12.1213 21.0726 14.8566 19.5805 17.2184 17.2186C19.5803 14.8567 21.0725 12.1214 21.6027 9.63739C22.1347 7.14485 21.6864 5.00963 20.3384 3.66167C18.9905 2.31372 16.8553 1.86541 14.3627 2.39743C11.8787 2.92761 9.14343 4.41978 6.78154 6.78167C4.41965 9.14356 2.92749 11.8788 2.3973 14.3628ZM0.930342 14.0497C1.52937 11.2432 3.18468 8.25721 5.72088 5.72101C8.25708 3.18481 11.2431 1.5295 14.0496 0.930469C16.8476 0.333266 19.5721 0.774005 21.3991 2.60101C23.2261 4.42802 23.6668 7.15254 23.0696 9.9505C22.4706 12.757 20.8153 15.743 18.2791 18.2792C15.7429 20.8154 12.7569 22.4707 9.95038 23.0698C7.15241 23.667 4.42789 23.2262 2.60089 21.3992C0.773878 19.5722 0.333139 16.8477 0.930342 14.0497Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.1884 7.81147C16.4813 8.10436 16.4813 8.57923 16.1884 8.87213L8.87213 16.1884C8.57923 16.4813 8.10436 16.4813 7.81147 16.1884C7.51857 15.8955 7.51857 15.4206 7.81147 15.1277L15.1277 7.81147C15.4206 7.51857 15.8955 7.51857 16.1884 7.81147Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4243 10.4243C10.7172 10.1314 11.192 10.1314 11.4849 10.4243L13.5755 12.5149C13.8684 12.8078 13.8684 13.2827 13.5755 13.5755C13.2827 13.8684 12.8078 13.8684 12.5149 13.5755L10.4243 11.4849C10.1314 11.192 10.1314 10.7172 10.4243 10.4243Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5151 8.33442C12.808 8.04152 13.2828 8.04152 13.5757 8.33442L15.6659 10.4246C15.9588 10.7175 15.9588 11.1923 15.6659 11.4852C15.373 11.7781 14.8981 11.7781 14.6052 11.4852L12.5151 9.39508C12.2222 9.10218 12.2222 8.62731 12.5151 8.33442Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5605 2.06293C13.8534 1.77004 14.3283 1.77004 14.6212 2.06293L21.9374 9.37918C22.2303 9.67207 22.2303 10.1469 21.9374 10.4398C21.6445 10.7327 21.1696 10.7327 20.8767 10.4398L13.5605 3.12359C13.2676 2.8307 13.2676 2.35582 13.5605 2.06293Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.06293 13.5605C2.35582 13.2676 2.8307 13.2676 3.12359 13.5605L10.4398 20.8767C10.7327 21.1696 10.7327 21.6445 10.4398 21.9374C10.1469 22.2303 9.67207 22.2303 9.37918 21.9374L2.06293 14.6212C1.77004 14.3283 1.77004 13.8534 2.06293 13.5605Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.33442 12.5151C8.62731 12.2222 9.10218 12.2222 9.39508 12.5151L11.4852 14.6052C11.7781 14.8981 11.7781 15.373 11.4852 15.6659C11.1923 15.9588 10.7175 15.9588 10.4246 15.6659L8.33442 13.5757C8.04152 13.2828 8.04152 12.808 8.33442 12.5151Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_16_5443">
+      <rect width="24" height="24" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/astro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

package/src/icons/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

package/src/icons/bar-chart-outline.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_16_5577)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 0.75C1.91421 0.75 2.25 1.08579 2.25 1.5V21.75H22.5C22.9142 21.75 23.25 22.0858 23.25 22.5C23.25 22.9142 22.9142 23.25 22.5 23.25H2.25C1.85218 23.25 1.47065 23.092 1.18934 22.8107C0.908035 22.5294 0.75 22.1478 0.75 21.75V1.5C0.75 1.08579 1.08579 0.75 1.5 0.75Z" fill="#21272A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.4375 11.25C5.33395 11.25 5.25 11.3339 5.25 11.4375V18.5625C5.25 18.6661 5.33395 18.75 5.4375 18.75H7.3125C7.41605 18.75 7.5 18.6661 7.5 18.5625V11.4375C7.5 11.3339 7.41605 11.25 7.3125 11.25H5.4375ZM3.75 11.4375C3.75 10.5055 4.50552 9.75 5.4375 9.75H7.3125C8.24448 9.75 9 10.5055 9 11.4375V18.5625C9 19.4945 8.24448 20.25 7.3125 20.25H5.4375C4.50552 20.25 3.75 19.4945 3.75 18.5625V11.4375Z" fill="#21272A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1875 9C12.0839 9 12 9.08395 12 9.1875V18.5625C12 18.6661 12.0839 18.75 12.1875 18.75H14.0625C14.1661 18.75 14.25 18.6661 14.25 18.5625V9.1875C14.25 9.08395 14.1661 9 14.0625 9H12.1875ZM10.5 9.1875C10.5 8.25552 11.2555 7.5 12.1875 7.5H14.0625C14.9945 7.5 15.75 8.25552 15.75 9.1875V18.5625C15.75 19.4945 14.9945 20.25 14.0625 20.25H12.1875C11.2555 20.25 10.5 19.4945 10.5 18.5625V9.1875Z" fill="#21272A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9204 6C18.8169 6 18.7329 6.08395 18.7329 6.1875V18.5625C18.7329 18.6661 18.8169 18.75 18.9204 18.75H20.7954C20.899 18.75 20.9829 18.6661 20.9829 18.5625V6.1875C20.9829 6.08395 20.899 6 20.7954 6H18.9204ZM17.2329 6.1875C17.2329 5.25552 17.9884 4.5 18.9204 4.5H20.7954C21.7274 4.5 22.4829 5.25552 22.4829 6.1875V18.5625C22.4829 19.4945 21.7274 20.25 20.7954 20.25H18.9204C17.9884 20.25 17.2329 19.4945 17.2329 18.5625V6.1875Z" fill="#21272A"/>
+</g>
+<defs>
+<clipPath id="clip0_16_5577">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>