@synthex-engineers/refined-tech 0.0.0-stage → 1.0.0

package/dist/astro/components/ProcessStepCard.astro

@@ -0,0 +1,68 @@
+---
+interface Props {
+  stepNumber?: string;
+  title: string;
+  description: string;
+  badge?: string;
+  className?: string;
+  stepNumberI18nKey?: string;
+  titleI18nKey?: string;
+  descI18nKey?: string;
+  badgeI18nKey?: string;
+}
+
+const {
+  stepNumber = "01",
+  title,
+  description,
+  badge,
+  className = "",
+  stepNumberI18nKey,
+  titleI18nKey,
+  descI18nKey,
+  badgeI18nKey,
+} = Astro.props;
+---
+
+<article class={`p-8 rounded-3xl bg-slateSurface/80 border border-slateBorder hover:border-pistachio/40 transition-all duration-300 flex flex-col group shadow-sm font-sans h-full ${badge ? 'justify-between' : 'justify-start'} ${className}`}>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <span
+        class="text-2xl sm:text-3xl font-mono font-bold text-pistachio tracking-tight"
+        data-i18n={stepNumberI18nKey}
+      >
+        {stepNumber}
+      </span>
+      <div class="w-8 h-8 rounded-lg bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">
+        <slot name="icon">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+          </svg>
+        </slot>
+      </div>
+    </div>
+
+    <h3
+      class="text-xl sm:text-2xl font-display font-bold text-white mb-3 group-hover:text-pistachio transition-colors"
+      data-i18n={titleI18nKey}
+    >
+      {title}
+    </h3>
+
+    <p
+      class="text-sm sm:text-base text-muted font-sans leading-relaxed"
+      data-i18n={descI18nKey}
+    >
+      {description}
+    </p>
+  </div>
+
+  {badge && (
+    <div
+      class="mt-8 pt-4 border-t border-slateBorder/50 text-sm font-mono text-muted"
+      data-i18n={badgeI18nKey}
+    >
+      {badge}
+    </div>
+  )}
+</article>

package/dist/astro/components/SolutionBentoCard.astro

@@ -0,0 +1,90 @@
+---
+interface Props {
+  title: string;
+  description: string;
+  badge?: string;
+  bulletPoints?: string[];
+  ctaText?: string;
+  ctaHref?: string;
+  className?: string;
+  badgeI18nKey?: string;
+  titleI18nKey?: string;
+  descI18nKey?: string;
+  ctaI18nKey?: string;
+  bulletPointsI18nKeys?: string[];
+}
+
+const {
+  title,
+  description,
+  badge,
+  bulletPoints = [],
+  ctaText = "Ver tarifas",
+  ctaHref = "/servicios/",
+  className = "",
+  badgeI18nKey,
+  titleI18nKey,
+  descI18nKey,
+  ctaI18nKey,
+  bulletPointsI18nKeys = [],
+} = Astro.props;
+---
+
+<article class={`p-8 sm:p-10 rounded-3xl bg-slateSurface/80 border border-slateBorder hover:border-pistachio/40 transition-all duration-300 flex flex-col justify-between group shadow-sm font-sans h-full ${className}`}>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <div class="w-12 h-12 rounded-xl bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio group-hover:scale-105 transition-transform">
+        <slot name="icon">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+          </svg>
+        </slot>
+      </div>
+      {badge && (
+        <span
+          class="px-3.5 py-1 rounded-full bg-slateCard text-pistachio text-sm font-mono font-semibold border border-slateBorder"
+          data-i18n={badgeI18nKey}
+        >
+          {badge}
+        </span>
+      )}
+    </div>
+
+    <h3
+      class="text-2xl sm:text-3xl font-display font-bold text-white mb-4 group-hover:text-pistachio transition-colors"
+      data-i18n={titleI18nKey}
+    >
+      {title}
+    </h3>
+
+    <p
+      class="text-base text-muted font-sans leading-relaxed mb-8"
+      data-i18n={descI18nKey}
+    >
+      {description}
+    </p>
+
+    {bulletPoints.length > 0 && (
+      <ul class="space-y-3 mb-10 text-sm sm:text-base font-sans text-white/80">
+        {bulletPoints.map((point, idx) => (
+          <li class="flex items-start gap-3">
+            <span class="w-1.5 h-1.5 rounded-full bg-pistachio mt-2 shrink-0"></span>
+            <span data-i18n={bulletPointsI18nKeys[idx]}>{point}</span>
+          </li>
+        ))}
+      </ul>
+    )}
+  </div>
+
+  <div>
+    <a
+      href={ctaHref}
+      class="inline-flex items-center justify-between w-full px-5 py-3.5 rounded-xl bg-slateCard hover:bg-slateBorder/80 text-white hover:text-pistachio border border-slateBorder hover:border-pistachio/50 font-display font-semibold text-sm sm:text-base transition-all duration-200 group/btn"
+    >
+      <span data-i18n={ctaI18nKey}>{ctaText}</span>
+      <svg class="w-4 h-4 text-pistachio transform group-hover/btn:translate-x-1 transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+      </svg>
+    </a>
+  </div>
+</article>

package/dist/astro/components/WavyUnderlineHeading.astro

@@ -0,0 +1,90 @@
+---
+interface Props {
+  prefixText?: string;
+  highlightText?: string;
+  strokeColor?: string;
+  className?: string;
+  prefixI18nKey?: string;
+  highlightI18nKey?: string;
+  id?: string;
+}
+
+const {
+  prefixText = "Ingeniería con",
+  highlightText = "total transparencia.",
+  strokeColor = "#E0F9B5",
+  className = "",
+  prefixI18nKey,
+  highlightI18nKey,
+  id = "wavy-heading-" + Math.random().toString(36).substring(2, 7),
+} = Astro.props;
+---
+
+<div class={`w-full text-center ${className}`}>
+  <h2 class="font-display font-bold text-white tracking-tight leading-snug">
+    {prefixText && (
+      <span data-i18n={prefixI18nKey}>{prefixText}</span>
+    )}{" "}
+    <span class="relative inline-block text-pistachio">
+      <span class="relative z-10" data-i18n={highlightI18nKey}>{highlightText}</span>
+      <svg
+        id={`${id}-svg`}
+        class="wavy-underline-svg absolute left-0 -bottom-2 w-full h-3 sm:h-4 overflow-visible pointer-events-none"
+        style="opacity: 0; visibility: hidden;"
+        viewBox="0 0 300 16"
+        preserveAspectRatio="none"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          id={`${id}-path`}
+          class="wavy-underline-path"
+          d="M2 10 Q 35 2, 75 9 T 150 9 T 225 9 T 298 9"
+          stroke={strokeColor}
+          stroke-width="3"
+          stroke-linecap="round"
+          style="stroke-dasharray: 450; stroke-dashoffset: 450; opacity: 0;"
+        />
+      </svg>
+    </span>
+  </h2>
+</div>
+
+<script>
+  import gsap from 'gsap';
+
+  function initWavyHeadings() {
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const svgs = document.querySelectorAll<SVGSVGElement>('.wavy-underline-svg');
+
+    svgs.forEach((svg) => {
+      const path = svg.querySelector<SVGPathElement>('.wavy-underline-path');
+      if (!path) return;
+
+      if (prefersReducedMotion) {
+        gsap.set(svg, { opacity: 1, visibility: 'visible' });
+        gsap.set(path, { strokeDashoffset: 0, opacity: 1 });
+        return;
+      }
+
+      const pathLength = Math.ceil(path.getTotalLength()) + 20;
+      gsap.set(path, {
+        strokeDasharray: pathLength,
+        strokeDashoffset: pathLength,
+        opacity: 1,
+      });
+
+      gsap.timeline({ delay: 0.15 })
+        .set(svg, { visibility: 'visible' })
+        .to(svg, { opacity: 1, duration: 0.05 })
+        .to(path, {
+          strokeDashoffset: 0,
+          duration: 0.65,
+          ease: 'power2.inOut',
+        });
+    });
+  }
+
+  initWavyHeadings();
+  document.addEventListener('astro:page-load', initWavyHeadings);
+</script>

package/dist/astro/index.d.ts

@@ -0,0 +1,9 @@
+export const ButtonOutline: any;
+export const ButtonPrimary: any;
+export const ButtonSecondary: any;
+export const ClientTrustCard: any;
+export const HelpTooltip: any;
+export const LanguageSelectorPill: any;
+export const ProcessStepCard: any;
+export const SolutionBentoCard: any;
+export const WavyUnderlineHeading: any;

package/dist/astro/index.js

@@ -0,0 +1,9 @@
+export { default as ButtonOutline } from './components/ButtonOutline.astro';
+export { default as ButtonPrimary } from './components/ButtonPrimary.astro';
+export { default as ButtonSecondary } from './components/ButtonSecondary.astro';
+export { default as ClientTrustCard } from './components/ClientTrustCard.astro';
+export { default as HelpTooltip } from './components/HelpTooltip.astro';
+export { default as LanguageSelectorPill } from './components/LanguageSelectorPill.astro';
+export { default as ProcessStepCard } from './components/ProcessStepCard.astro';
+export { default as SolutionBentoCard } from './components/SolutionBentoCard.astro';
+export { default as WavyUnderlineHeading } from './components/WavyUnderlineHeading.astro';

package/dist/chunk-EUXUH3YW.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+export { __decorateClass };
+//# sourceMappingURL=chunk-EUXUH3YW.js.map
+//# sourceMappingURL=chunk-EUXUH3YW.js.map

package/dist/chunk-EUXUH3YW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-EUXUH3YW.js"}

package/dist/chunk-PAHBEY3T.js

@@ -0,0 +1,73 @@
+// tokens/index.ts
+var colors = {
+  charcoal: "#111111",
+  slateSurface: "#1E1E1E",
+  slateCard: "#1E1E1E",
+  slateBorder: "#2A2A2A",
+  pistachio: "#E0F9B5",
+  electric: "#CCF586",
+  snow: "#F4FDE4",
+  gold: "#D4AF37",
+  muted: "#8E8E93",
+  textPure: "#FFFFFF",
+  textDark: "#111111"
+};
+var fonts = {
+  display: "'Outfit', -apple-system, BlinkMacSystemFont, sans-serif",
+  body: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  sans: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  mono: "'JetBrains Mono', monospace"
+};
+var radii = {
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  squircle: "52px",
+  full: "9999px"
+};
+var spacing = {
+  "0.5": "2px",
+  "1": "4px",
+  "1.5": "6px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "5": "20px",
+  "6": "24px",
+  "8": "32px",
+  "10": "40px",
+  "12": "48px",
+  "16": "64px"
+};
+var heights = {
+  input: "44px",
+  btnPrimary: "44px",
+  btnSecondary: "36px",
+  btnMicro: "32px",
+  topbar: "64px",
+  sidebarWidth: "256px"
+};
+var shadows = {
+  subtle: "0 4px 14px rgba(0, 0, 0, 0.25)",
+  glowPistachio: "0 0 20px rgba(224, 249, 181, 0.15)",
+  glowElectric: "0 0 25px rgba(204, 245, 134, 0.20)"
+};
+var borders = {
+  thin: "1px solid #2A2A2A"
+};
+var tokens = {
+  colors,
+  fonts,
+  radii,
+  spacing,
+  heights,
+  shadows,
+  borders
+};
+var tokens_default = tokens;
+
+export { borders, colors, fonts, heights, radii, shadows, spacing, tokens, tokens_default };
+//# sourceMappingURL=chunk-PAHBEY3T.js.map
+//# sourceMappingURL=chunk-PAHBEY3T.js.map

package/dist/chunk-PAHBEY3T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../tokens/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,SAAA;AAAA,EACV,YAAA,EAAc,SAAA;AAAA,EACd,SAAA,EAAW,SAAA;AAAA,EACX,WAAA,EAAa,SAAA;AAAA,EACb,SAAA,EAAW,SAAA;AAAA,EACX,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,KAAA,EAAO,SAAA;AAAA,EACP,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU;AACZ;AAEO,IAAM,KAAA,GAAQ;AAAA,EACnB,OAAA,EAAS,yDAAA;AAAA,EACT,IAAA,EAAM,wDAAA;AAAA,EACN,IAAA,EAAM,wDAAA;AAAA,EACN,IAAA,EAAM;AACR;AAEO,IAAM,KAAA,GAAQ;AAAA,EACnB,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,KAAA,EAAO,MAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,IAAA,EAAM;AACR;AAEO,IAAM,OAAA,GAAU;AAAA,EACrB,KAAA,EAAO,KAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,KAAA;AAAA,EACP,GAAA,EAAK,KAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,GAAA,EAAK,MAAA;AAAA,EACL,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM,MAAA;AAAA,EACN,IAAA,EAAM;AACR;AAEO,IAAM,OAAA,GAAU;AAAA,EACrB,KAAA,EAAO,MAAA;AAAA,EACP,UAAA,EAAY,MAAA;AAAA,EACZ,YAAA,EAAc,MAAA;AAAA,EACd,QAAA,EAAU,MAAA;AAAA,EACV,MAAA,EAAQ,MAAA;AAAA,EACR,YAAA,EAAc;AAChB;AAEO,IAAM,OAAA,GAAU;AAAA,EACrB,MAAA,EAAQ,gCAAA;AAAA,EACR,aAAA,EAAe,oCAAA;AAAA,EACf,YAAA,EAAc;AAChB;AAEO,IAAM,OAAA,GAAU;AAAA,EACrB,IAAA,EAAM;AACR;AAEO,IAAM,MAAA,GAAS;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAWA,IAAO,cAAA,GAAQ","file":"chunk-PAHBEY3T.js","sourcesContent":["/**\n * Synthex Refined Tech — Tokens Canónicos de Diseño\n * Derivado de brand/02-guidelines/tokens.json y vault/Arquitecturas/Synthex - Sistema de Diseño y Guía de Estilo Visual.md\n */\n\nexport const colors = {\n  charcoal: '#111111',\n  slateSurface: '#1E1E1E',\n  slateCard: '#1E1E1E',\n  slateBorder: '#2A2A2A',\n  pistachio: '#E0F9B5',\n  electric: '#CCF586',\n  snow: '#F4FDE4',\n  gold: '#D4AF37',\n  muted: '#8E8E93',\n  textPure: '#FFFFFF',\n  textDark: '#111111',\n} as const;\n\nexport const fonts = {\n  display: \"'Outfit', -apple-system, BlinkMacSystemFont, sans-serif\",\n  body: \"'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n  sans: \"'Inter', -apple-system, BlinkMacSystemFont, sans-serif\",\n  mono: \"'JetBrains Mono', monospace\",\n} as const;\n\nexport const radii = {\n  sm: '6px',\n  md: '8px',\n  lg: '12px',\n  xl: '16px',\n  '2xl': '24px',\n  squircle: '52px',\n  full: '9999px',\n} as const;\n\nexport const spacing = {\n  '0.5': '2px',\n  '1': '4px',\n  '1.5': '6px',\n  '2': '8px',\n  '3': '12px',\n  '4': '16px',\n  '5': '20px',\n  '6': '24px',\n  '8': '32px',\n  '10': '40px',\n  '12': '48px',\n  '16': '64px',\n} as const;\n\nexport const heights = {\n  input: '44px',\n  btnPrimary: '44px',\n  btnSecondary: '36px',\n  btnMicro: '32px',\n  topbar: '64px',\n  sidebarWidth: '256px',\n} as const;\n\nexport const shadows = {\n  subtle: '0 4px 14px rgba(0, 0, 0, 0.25)',\n  glowPistachio: '0 0 20px rgba(224, 249, 181, 0.15)',\n  glowElectric: '0 0 25px rgba(204, 245, 134, 0.20)',\n} as const;\n\nexport const borders = {\n  thin: '1px solid #2A2A2A',\n} as const;\n\nexport const tokens = {\n  colors,\n  fonts,\n  radii,\n  spacing,\n  heights,\n  shadows,\n  borders,\n} as const;\n\nexport type Colors = typeof colors;\nexport type Fonts = typeof fonts;\nexport type Radii = typeof radii;\nexport type Spacing = typeof spacing;\nexport type Heights = typeof heights;\nexport type Shadows = typeof shadows;\nexport type Borders = typeof borders;\nexport type Tokens = typeof tokens;\n\nexport default tokens;\n"]}