@synthex-engineers/refined-tech 1.0.0 → 1.0.3

package/dist/astro/components/Preloader.astro

@@ -0,0 +1,240 @@
+---
+// Preloader Vectorial Cinemático: Metamorfosis Geométrica al Logotipo Horizontal Synthex
+---
+
+<div
+  id="preloader-curtain"
+  class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-charcoal select-none overflow-hidden"
+  aria-hidden="true"
+>
+  <div class="relative flex flex-col items-center justify-center p-8">
+    <!-- Contenedor Maestro SVG con Formas Geométricas que mutan al Logo Horizontal -->
+    <svg
+      id="preloader-master-svg"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 350 100"
+      class="w-72 sm:w-80 md:w-[420px] overflow-visible"
+    >
+      <defs>
+        <!-- Trazados Destino Ocultos: Isotipo Oficial </> en Verde Pistacho -->
+        <!-- 0: Bracket Izquierdo < -->
+        <path
+          id="target-bracket-left"
+          d="M 40 29 L 18 50 L 40 71 L 44.5 66.5 L 27 50 L 44.5 33.5 Z"
+        />
+        <!-- 1: Barra Diagonal / -->
+        <path
+          id="target-slash"
+          d="M 50.5 70 L 64.5 30 L 68.5 31.5 L 54.5 71.5 Z"
+        />
+        <!-- 2: Bracket Derecho > -->
+        <path
+          id="target-bracket-right"
+          d="M 74 29 L 96 50 L 74 71 L 69.5 66.5 L 87 50 L 69.5 33.5 Z"
+        />
+
+        <!-- Trazados Destino Ocultos: Glifos Tipográficos Outfit Bold de 'Synthex' -->
+        <!-- 3: S -->
+        <path
+          id="target-char-s"
+          d="M135.12 68.59L135.12 68.59Q130.42 68.59 127.02 67.08Q123.62 65.57 120.86 62.38L120.86 62.38L126.37 56.93Q128.21 59.09 130.42 60.22Q132.64 61.36 135.66 61.36L135.66 61.36Q138.36 61.36 139.84 60.39Q141.33 59.41 141.33 57.69L141.33 57.69Q141.33 55.90 140.03 54.82Q138.74 53.74 136.71 53.02Q134.69 52.29 132.39 51.45Q130.10 50.61 128.05 49.34Q125.99 48.07 124.72 45.97Q123.46 43.86 123.46 40.51L123.46 40.51Q123.46 37.00 125.16 34.49Q126.86 31.98 129.88 30.63Q132.91 29.28 136.85 29.28L136.85 29.28Q140.84 29.28 144.16 30.71Q147.49 32.14 149.65 34.52L149.65 34.52L144.14 39.97Q142.41 38.19 140.66 37.33Q138.90 36.46 136.69 36.46L136.69 36.46Q134.42 36.46 133.15 37.30Q131.88 38.14 131.88 39.70L131.88 39.70Q131.88 41.38 133.15 42.35Q134.42 43.32 136.47 44.05Q138.52 44.78 140.82 45.62Q143.11 46.45 145.14 47.78Q147.16 49.10 148.46 51.29Q149.75 53.47 149.75 56.93L149.75 56.93Q149.75 62.44 145.87 65.52Q141.98 68.59 135.12 68.59Z"
+        />
+        <!-- 4: y -->
+        <path
+          id="target-char-y"
+          d="M164.23 79.07L155.75 79.07L161.69 66.22L151.70 41.76L160.61 41.76L165.85 57.74L171.19 41.76L180.10 41.76L168.87 68.11L164.23 79.07Z"
+        />
+        <!-- 5: n -->
+        <path
+          id="target-char-n"
+          d="M191.50 68L183.23 68L183.23 41.76L191.50 41.76L191.50 43.86Q194.41 41.22 198.84 41.22L198.84 41.22Q201.70 41.22 203.97 42.59Q206.24 43.97 207.53 46.24Q208.83 48.51 208.83 51.21L208.83 51.21L208.83 68L200.57 68L200.57 53.04Q200.57 50.99 199.30 49.72Q198.03 48.45 196.09 48.45L196.09 48.45Q194.09 48.45 192.79 49.72Q191.50 50.99 191.50 53.04L191.50 53.04L191.50 68Z"
+        />
+        <!-- 6: t -->
+        <path
+          id="target-char-t"
+          d="M226.11 68L217.85 68L217.85 48.78L211.91 48.78L211.91 41.76L217.85 41.76L217.85 30.90L226.11 30.90L226.11 41.76L232.05 41.76L232.05 48.78L226.11 48.78L226.11 68Z"
+        />
+        <!-- 7: h -->
+        <path
+          id="target-char-h"
+          d="M243.93 68L235.67 68L235.67 28.80L243.93 28.80L243.93 43.70Q246.74 41.22 251.00 41.22L251.00 41.22Q254.03 41.22 256.35 42.48Q258.67 43.75 259.97 46.02Q261.26 48.29 261.26 51.21L261.26 51.21L261.26 68L253.00 68L253.00 53.04Q253.00 50.99 251.73 49.72Q250.46 48.45 248.52 48.45L248.52 48.45Q246.52 48.45 245.23 49.72Q243.93 50.99 243.93 53.04L243.93 53.04L243.93 68Z"
+        />
+        <!-- 8: e -->
+        <path
+          id="target-char-e"
+          d="M279.52 68.59L279.52 68.59Q275.25 68.59 271.93 66.84Q268.61 65.08 266.72 61.98Q264.83 58.87 264.83 54.88L264.83 54.88Q264.83 50.94 266.69 47.86Q268.55 44.78 271.74 42.97Q274.93 41.16 278.92 41.16L278.92 41.16Q282.76 41.16 285.75 42.86Q288.75 44.56 290.45 47.51Q292.15 50.45 292.15 54.28L292.15 54.28Q292.15 55.74 291.77 57.58L291.77 57.58L272.98 57.63Q273.63 59.85 275.30 61.03Q276.98 62.22 279.46 62.22L279.46 62.22Q283.40 62.22 285.73 59.52L285.73 59.52L290.26 64.06Q288.32 66.33 285.56 67.46Q282.81 68.59 279.52 68.59ZM278.98 47.48L278.98 47.48Q276.71 47.48 275.14 48.67Q273.58 49.86 272.98 51.96L272.98 51.96L284.43 51.91Q283.40 47.48 278.98 47.48Z"
+        />
+        <!-- 9: x -->
+        <path
+          id="target-char-x"
+          d="M302.52 68L293.50 68L302.90 54.61L293.99 41.76L303.65 41.76L308.03 48.88L312.46 41.76L321.42 41.76L312.67 54.45L321.96 68L312.40 68L307.54 60.17L302.52 68Z"
+        />
+      </defs>
+
+      <!-- FORMAS GEOMÉTRICAS ELEMENTALES ACTIVAS (▲ ■ ●) QUE MUTAN AL LOGO -->
+      <g id="preloader-morph-group" class="opacity-0">
+        <!-- 0: Triángulo que muta al Bracket Izquierdo < (cx: 31, cy: 50) -->
+        <path
+          id="morph-shape-0"
+          class="morph-item"
+          d="M 18 50 L 44 32 L 44 68 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 1: Rectángulo vertical que muta a la Barra / (cx: 58, cy: 50) -->
+        <path
+          id="morph-shape-1"
+          class="morph-item"
+          d="M 54 30 L 63 30 L 63 70 L 54 70 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 2: Triángulo que muta al Bracket Derecho > (cx: 85, cy: 50) -->
+        <path
+          id="morph-shape-2"
+          class="morph-item"
+          d="M 96 50 L 70 68 L 70 32 Z"
+          fill="#E0F9B5"
+        />
+
+        <!-- 3: Círculo que muta a 'S' (cx: 135, cy: 50, r: 16) -->
+        <path
+          id="morph-shape-3"
+          class="morph-item"
+          d="M 135 34 A 16 16 0 1 0 135 66 A 16 16 0 1 0 135 34 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 4: Triángulo invertido que muta a 'y' (cx: 166, cy: 55) -->
+        <path
+          id="morph-shape-4"
+          class="morph-item"
+          d="M 152 40 L 180 40 L 166 75 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 5: Cuadrado que muta a 'n' (cx: 196, cy: 54, w: 26, h: 26) -->
+        <path
+          id="morph-shape-5"
+          class="morph-item"
+          d="M 183 41 L 209 41 L 209 67 L 183 67 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 6: Rectángulo vertical que muta a 't' (cx: 222, cy: 50) -->
+        <path
+          id="morph-shape-6"
+          class="morph-item"
+          d="M 215 31 L 229 31 L 229 68 L 215 68 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 7: Cuadrado alto que muta a 'h' (cx: 248, cy: 49) -->
+        <path
+          id="morph-shape-7"
+          class="morph-item"
+          d="M 235 29 L 261 29 L 261 68 L 235 68 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 8: Círculo que muta a 'e' (cx: 278, cy: 55, r: 14) -->
+        <path
+          id="morph-shape-8"
+          class="morph-item"
+          d="M 278 41 A 14 14 0 1 0 278 69 A 14 14 0 1 0 278 41 Z"
+          fill="#FFFFFF"
+        />
+
+        <!-- 9: Rombo / Diamante que muta a 'x' (cx: 308, cy: 55, r: 14) -->
+        <path
+          id="morph-shape-9"
+          class="morph-item"
+          d="M 308 41 L 322 55 L 308 69 L 294 55 Z"
+          fill="#FFFFFF"
+        />
+      </g>
+    </svg>
+  </div>
+</div>
+
+<script>
+  import gsap from 'gsap';
+  import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';
+
+  gsap.registerPlugin(MorphSVGPlugin);
+
+  const curtain = document.getElementById('preloader-curtain');
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const alreadySeen = sessionStorage.getItem('synthex_preloaded_session');
+
+  function notifyPageReady() {
+    (window as any).__synthexPageReady = true;
+    window.dispatchEvent(new CustomEvent('synthex:page-ready'));
+  }
+
+  if (curtain) {
+    if (prefersReducedMotion || alreadySeen) {
+      curtain.style.display = 'none';
+      document.documentElement.classList.add('synthex-preloaded');
+      requestAnimationFrame(() => {
+        notifyPageReady();
+      });
+    } else {
+      const morphGroup = document.getElementById('preloader-morph-group');
+      const targets = [
+        '#target-bracket-left',
+        '#target-slash',
+        '#target-bracket-right',
+        '#target-char-s',
+        '#target-char-y',
+        '#target-char-n',
+        '#target-char-t',
+        '#target-char-h',
+        '#target-char-e',
+        '#target-char-x',
+      ];
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          // Desplegar suavemente el telón hacia arriba
+          gsap.to(curtain, {
+            yPercent: -100,
+            duration: 0.7,
+            ease: 'power4.inOut',
+            onStart: () => {
+              notifyPageReady();
+            },
+            onComplete: () => {
+              curtain.style.display = 'none';
+              sessionStorage.setItem('synthex_preloaded_session', 'true');
+              document.documentElement.classList.add('synthex-preloaded');
+            },
+          });
+        },
+      });
+
+      // 1. Entrada sutil de las figuras geométricas elementales (▲ ■ ●)
+      tl.to(morphGroup, {
+        opacity: 1,
+        duration: 0.35,
+        ease: 'power2.out',
+      });
+
+      // 2. Metamorfosis geométrica con MorphSVG (cada figura transmuta al glifo oficial)
+      targets.forEach((targetSelector, index) => {
+        tl.to(
+          `#morph-shape-${index}`,
+          {
+            morphSVG: targetSelector,
+            duration: 0.85,
+            ease: 'power2.inOut',
+          },
+          0.2 + index * 0.035
+        );
+      });
+
+      // 3. Breve pausa ceremonial tras completarse el logotipo
+      tl.to({}, { duration: 0.35 });
+    }
+  }
+</script>

package/dist/astro/components/WavyUnderlineHeading.astro

@@ -1,19 +1,23 @@
 ---
 interface Props {
+  as?: 'h1' | 'h2' | 'h3' | 'span';
   prefixText?: string;
   highlightText?: string;
   strokeColor?: string;
   className?: string;
+  headingClass?: string;
   prefixI18nKey?: string;
   highlightI18nKey?: string;
   id?: string;
 }
 
 const {
+  as: Tag = 'h2',
   prefixText = "Ingeniería con",
   highlightText = "total transparencia.",
   strokeColor = "#E0F9B5",
   className = "",
+  headingClass = "text-2xl sm:text-3xl md:text-4xl font-display font-bold text-white tracking-tight leading-snug",
   prefixI18nKey,
   highlightI18nKey,
   id = "wavy-heading-" + Math.random().toString(36).substring(2, 7),
@@ -21,15 +25,15 @@ const {
 ---
 
 <div class={`w-full text-center ${className}`}>
-  <h2 class="font-display font-bold text-white tracking-tight leading-snug">
+  <Tag class={headingClass}>
     {prefixText && (
-      <span data-i18n={prefixI18nKey}>{prefixText}</span>
+      <span class="inline relative z-10" data-i18n={prefixI18nKey}>{prefixText}</span>
     )}{" "}
-    <span class="relative inline-block text-pistachio">
+    <span class="services-hero-highlight inline-block relative 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"
+        class="wavy-underline-svg absolute left-0 -bottom-2 sm:-bottom-3 w-full h-3 sm:h-4 overflow-visible pointer-events-none z-10"
         style="opacity: 0; visibility: hidden;"
         viewBox="0 0 300 16"
         preserveAspectRatio="none"
@@ -47,7 +51,7 @@ const {
         />
       </svg>
     </span>
-  </h2>
+  </Tag>
 </div>
 
 <script>
@@ -58,6 +62,9 @@ const {
     const svgs = document.querySelectorAll<SVGSVGElement>('.wavy-underline-svg');
 
     svgs.forEach((svg) => {
+      if ((svg as any).__wavyBound) return;
+      (svg as any).__wavyBound = true;
+
       const path = svg.querySelector<SVGPathElement>('.wavy-underline-path');
       if (!path) return;
 
@@ -87,4 +94,5 @@ const {
 
   initWavyHeadings();
   document.addEventListener('astro:page-load', initWavyHeadings);
+  window.addEventListener('synthex:page-ready', initWavyHeadings);
 </script>

package/dist/astro/index.d.ts

@@ -2,6 +2,8 @@ export const ButtonOutline: any;
 export const ButtonPrimary: any;
 export const ButtonSecondary: any;
 export const ClientTrustCard: any;
+export const FooterBounceCurve: any;
+export const Preloader: any;
 export const HelpTooltip: any;
 export const LanguageSelectorPill: any;
 export const ProcessStepCard: any;

package/dist/astro/index.js

@@ -2,6 +2,8 @@ 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 FooterBounceCurve } from './components/FooterBounceCurve.astro';
+export { default as Preloader } from './components/Preloader.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';

package/dist/index.cjs

@@ -358,6 +358,12 @@ var components_default = {
           component: "FooterBounce",
           import: "import { FooterBounce } from '@synthex-engineers/refined-tech/react';",
           snippet: "<FooterBounce />"
+        },
+        astro: {
+          available: true,
+          component: "FooterBounceCurve",
+          import: "import { FooterBounceCurve } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<FooterBounceCurve />"
         }
       },
       ai_prompt_tag: "[SynthexAnimation: gsap-footer-bounce | Angular: <st-footer-bounce> | GSAP Elastic Curve M 0,160 Q 720,160 | Ease: elastic.out(1.8, 0.22)]"
@@ -410,6 +416,12 @@ var components_default = {
           component: "Preloader",
           import: "import { Preloader } from '@synthex-engineers/refined-tech/react';",
           snippet: "<Preloader />"
+        },
+        astro: {
+          available: true,
+          component: "Preloader",
+          import: "import { Preloader } from '@synthex-engineers/refined-tech/astro';",
+          snippet: "<Preloader />"
         }
       },
       ai_prompt_tag: "[SynthexAnimation: gsap-preloader | Angular: <st-preloader> | GSAP MorphSVGPlugin / Geometric Morph to Synthex Brand Identity]"