@synthex-engineers/refined-tech 1.0.1 → 1.0.3

package/dist/astro/components/ClientTrustCard.astro

@@ -1,79 +1,79 @@
----
-interface Props {
-  clientName?: string;
-  location?: string;
-  href?: string;
-  logoSrc?: string;
-  logoDarkSrc?: string;
-  className?: string;
-  clientNameI18nKey?: string;
-  locationI18nKey?: string;
-}
-
-const {
-  clientName = "SD-M GmbH",
-  location = "Alemania",
-  href = "https://sd-kpi.com/",
-  logoSrc = "/brand/sd-m-logo.png",
-  logoDarkSrc = "/brand/sd-m-logo-dark.png",
-  className = "",
-  clientNameI18nKey = "client_trust.client_name",
-  locationI18nKey = "client_trust.client_location",
-} = Astro.props;
----
-
-<a
-  href={href}
-  target="_blank"
-  rel="noopener noreferrer"
-  class={`group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans ${className}`}
-  aria-label={`${clientName}${location ? ` - ${location}` : ''}`}
->
-  {logoDarkSrc ? (
-    <picture>
-      <source srcset={logoDarkSrc} />
-      <img
-        src={logoSrc}
-        alt={clientName}
-        class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
-        width="120"
-        height="44"
-        loading="lazy"
-      />
-    </picture>
-  ) : logoSrc ? (
-    <img
-      src={logoSrc}
-      alt={clientName}
-      class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
-      width="120"
-      height="44"
-      loading="lazy"
-    />
-  ) : (
-    <div class="w-8 h-8 rounded-lg bg-slateSurface border border-slateBorder flex items-center justify-center text-pistachio shrink-0">
-      <svg class="w-5 h-5 text-pistachio transition-transform duration-300 group-hover:scale-105" viewBox="0 0 32 32" fill="none">
-        <path d="M7 21L12 16L16 19L24 10" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-        <circle cx="24" cy="10" r="2" fill="#E0F9B5" />
-        <path d="M19 10H24V15" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </div>
-  )}
-
-  <div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">
-    <span
-      class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight"
-      data-i18n={clientNameI18nKey}
-    >
-      {clientName}
-    </span>
-    {location && (
-      <span
-        class="block text-sm font-sans text-muted leading-tight mt-0.5"
-        data-i18n={locationI18nKey}
-      >
-        {location}
-      </span>
-    )}
-  </div>
-</a>
+---
+interface Props {
+  clientName?: string;
+  location?: string;
+  href?: string;
+  logoSrc?: string;
+  logoDarkSrc?: string;
+  className?: string;
+  clientNameI18nKey?: string;
+  locationI18nKey?: string;
+}
+
+const {
+  clientName = "SD-M GmbH",
+  location = "Alemania",
+  href = "https://sd-kpi.com/",
+  logoSrc = "/brand/sd-m-logo.png",
+  logoDarkSrc = "/brand/sd-m-logo-dark.png",
+  className = "",
+  clientNameI18nKey = "client_trust.client_name",
+  locationI18nKey = "client_trust.client_location",
+} = Astro.props;
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="noopener noreferrer"
+  class={`group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans ${className}`}
+  aria-label={`${clientName}${location ? ` - ${location}` : ''}`}
+>
+  {logoDarkSrc ? (
+    <picture>
+      <source srcset={logoDarkSrc} />
+      <img
+        src={logoSrc}
+        alt={clientName}
+        class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
+        width="120"
+        height="44"
+        loading="lazy"
+      />
+    </picture>
+  ) : logoSrc ? (
+    <img
+      src={logoSrc}
+      alt={clientName}
+      class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
+      width="120"
+      height="44"
+      loading="lazy"
+    />
+  ) : (
+    <div class="w-8 h-8 rounded-lg bg-slateSurface border border-slateBorder flex items-center justify-center text-pistachio shrink-0">
+      <svg class="w-5 h-5 text-pistachio transition-transform duration-300 group-hover:scale-105" viewBox="0 0 32 32" fill="none">
+        <path d="M7 21L12 16L16 19L24 10" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="24" cy="10" r="2" fill="#E0F9B5" />
+        <path d="M19 10H24V15" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+  )}
+
+  <div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">
+    <span
+      class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight"
+      data-i18n={clientNameI18nKey}
+    >
+      {clientName}
+    </span>
+    {location && (
+      <span
+        class="block text-sm font-sans text-muted leading-tight mt-0.5"
+        data-i18n={locationI18nKey}
+      >
+        {location}
+      </span>
+    )}
+  </div>
+</a>

package/dist/astro/components/FooterBounceCurve.astro

@@ -0,0 +1,302 @@
+---
+// FooterBounceCurve.astro - Fondo oficial unificado en SVG con curva elástica deformable y textura de grano 35mm
+interface Props {
+  /**
+   * Altura que ocupará el SVG. Permite cualquier valor CSS válido (ej: '100%', '100vh', '850px').
+   * Por defecto '100%' para acoplarse con exactitud al alto del contenedor padre (el footer).
+   */
+  height?: string | number;
+  /**
+   * Clases CSS opcionales para el contenedor del SVG.
+   */
+  class?: string;
+  /**
+   * Selector o ID del elemento trigger para disparar el rebote con ScrollTrigger.
+   * Por defecto: 'contacto' (el ID oficial del footer).
+   */
+  triggerId?: string;
+  /**
+   * Amplitud vertical máxima de la deformación elástica en unidades de viewBox (por defecto: 70).
+   */
+  bounceAmplitude?: number;
+}
+
+const {
+  height = '100%',
+  class: className = '',
+  triggerId = 'contacto',
+  bounceAmplitude = 70,
+} = Astro.props;
+
+const containerHeight = typeof height === 'number' ? `${height}px` : height;
+---
+
+<div
+  id="footer-bounce-wrap"
+  class:list={[
+    "absolute inset-x-0 top-0 w-full min-w-full pointer-events-none select-none overflow-visible z-10",
+    className,
+  ]}
+  style={{ height: containerHeight }}
+  aria-hidden="true"
+  data-trigger-id={triggerId}
+  data-amplitude={bounceAmplitude}
+>
+  <svg
+    id="footer-bounce-svg"
+    class="w-full h-full block overflow-visible"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1440 1000"
+    preserveAspectRatio="none"
+  >
+    <defs>
+      <!-- Gradiente oficial Synthex: Pistacho (#E0F9B5) a Blanco Nieve (#F4FDE4) -->
+      <linearGradient id="footer-bounce-gradient" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#E0F9B5" />
+        <stop offset="100%" stop-color="#F4FDE4" />
+      </linearGradient>
+
+      <!-- Filtro de Grano de Película 35mm integrado y recortado exactamente a la silueta del trazado -->
+      <filter
+        id="footer-bounce-grain"
+        x="0%"
+        y="-20%"
+        width="100%"
+        height="140%"
+        color-interpolation-filters="sRGB"
+      >
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.75"
+          numOctaves="4"
+          stitchTiles="stitch"
+          result="noise"
+        />
+        <feColorMatrix
+          type="saturate"
+          values="0"
+          in="noise"
+          result="grayNoise"
+        />
+        <feComponentTransfer in="grayNoise" result="subtleNoise">
+          <feFuncR type="linear" slope="0.5" intercept="0.5" />
+          <feFuncG type="linear" slope="0.5" intercept="0.5" />
+          <feFuncB type="linear" slope="0.5" intercept="0.5" />
+        </feComponentTransfer>
+        <feBlend in="SourceGraphic" in2="subtleNoise" mode="multiply" result="blended" />
+        <feComposite in="blended" in2="SourceAlpha" operator="in" />
+      </filter>
+    </defs>
+
+    <!-- Trazado ÚNICO: Fondo Pistacho Deformable con Granulado 35mm Palpable -->
+    <path
+      id="bouncy-path"
+      class="footer-bounce-path"
+      fill="url(#footer-bounce-gradient)"
+      filter="url(#footer-bounce-grain)"
+      d="M 0,0 Q 720,0 1440,0 L 1440,1000 L 0,1000 Z"
+    />
+  </svg>
+</div>
+
+<script>
+  import gsap from "gsap";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(ScrollTrigger);
+
+  let activeScrollTrigger: ScrollTrigger | null = null;
+  let activeCleanup: (() => void) | null = null;
+  let refreshDebounceTimer: any = null;
+
+  function scheduleRefresh() {
+    clearTimeout(refreshDebounceTimer);
+    refreshDebounceTimer = setTimeout(() => {
+      ScrollTrigger.refresh();
+      const lenis = (window as any).__lenis;
+      if (lenis && typeof lenis.resize === "function") {
+        lenis.resize();
+      }
+    }, 60);
+  }
+
+  function initFooterBounce() {
+    const wrap = document.getElementById("footer-bounce-wrap");
+    const bouncyPath = document.getElementById("bouncy-path");
+    if (!wrap || !bouncyPath) return;
+
+    // Destruir instancias previas y listeners para evitar fugas de memoria
+    if (activeCleanup) {
+      activeCleanup();
+      activeCleanup = null;
+    }
+    if (activeScrollTrigger) {
+      activeScrollTrigger.kill();
+      activeScrollTrigger = null;
+    }
+
+    const rest = "M 0,0 Q 720,0 1440,0 L 1440,1000 L 0,1000 Z";
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const baseStretch = parseInt(wrap.getAttribute("data-amplitude") || "70", 10) || 70;
+    const STRETCH_PIXELS = isMobile ? Math.min(baseStretch, 45) : baseStretch;
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+
+    if (!prefersReducedMotion) {
+      let hasSnapped = false;
+      let activeTween: gsap.core.Tween | null = null;
+
+      const initialRect = wrap.getBoundingClientRect();
+      if (initialRect.top < window.innerHeight - STRETCH_PIXELS) {
+        hasSnapped = true;
+        bouncyPath.setAttribute("d", rest);
+      }
+
+      const updateMembrane = () => {
+        const rect = wrap.getBoundingClientRect();
+        const S = window.innerHeight - rect.top;
+
+        if (S <= 0) {
+          if (hasSnapped || activeTween) {
+            hasSnapped = false;
+            if (activeTween) {
+              activeTween.kill();
+              activeTween = null;
+            }
+            bouncyPath.setAttribute("d", rest);
+          }
+          return;
+        }
+
+        if (hasSnapped) {
+          return;
+        }
+
+        if (S >= STRETCH_PIXELS) {
+          hasSnapped = true;
+          if (activeTween) {
+            activeTween.kill();
+            activeTween = null;
+          }
+
+          const H = rect.height || 1000;
+          const snapC = (2 * STRETCH_PIXELS * 1000) / H;
+          const snapAnim = { c: snapC };
+
+          activeTween = gsap.to(snapAnim, {
+            c: 0,
+            duration: 1.8,
+            ease: "elastic.out(1.2, 0.35)",
+            overwrite: "auto",
+            onUpdate: () => {
+              bouncyPath.setAttribute(
+                "d",
+                `M 0,0 Q 720,${snapAnim.c} 1440,0 L 1440,1000 L 0,1000 Z`,
+              );
+            },
+            onComplete: () => {
+              bouncyPath.setAttribute("d", rest);
+              activeTween = null;
+            },
+          });
+          return;
+        }
+
+        const H = rect.height || 1000;
+        const currentC = (2 * S * 1000) / H;
+        bouncyPath.setAttribute(
+          "d",
+          `M 0,0 Q 720,${currentC} 1440,0 L 1440,1000 L 0,1000 Z`,
+        );
+      };
+
+      activeScrollTrigger = ScrollTrigger.create({
+        trigger: wrap,
+        start: "top bottom",
+        end: "bottom top",
+        onUpdate: updateMembrane,
+        onLeaveBack: () => {
+          hasSnapped = false;
+          if (activeTween) {
+            activeTween.kill();
+            activeTween = null;
+          }
+          bouncyPath.setAttribute("d", rest);
+        },
+      });
+
+      window.addEventListener("scroll", updateMembrane, { passive: true });
+      const lenis = (window as any).__lenis;
+      if (lenis && typeof lenis.on === "function") {
+        lenis.on("scroll", updateMembrane);
+      }
+
+      activeCleanup = () => {
+        window.removeEventListener("scroll", updateMembrane);
+        const l = (window as any).__lenis;
+        if (l && typeof l.off === "function") {
+          l.off("scroll", updateMembrane);
+        }
+        if (activeTween) {
+          activeTween.kill();
+          activeTween = null;
+        }
+      };
+    } else {
+      bouncyPath.setAttribute("d", rest);
+    }
+
+    scheduleRefresh();
+  }
+
+  function startFooterBounce() {
+    initFooterBounce();
+  }
+
+  if (typeof window !== "undefined" && "ResizeObserver" in window) {
+    const bodyResizeObserver = new ResizeObserver(() => {
+      scheduleRefresh();
+    });
+    if (document.body) {
+      bodyResizeObserver.observe(document.body);
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        bodyResizeObserver.observe(document.body);
+      });
+    }
+  }
+
+  window.addEventListener("synthex:lang-changed", () => {
+    scheduleRefresh();
+    setTimeout(scheduleRefresh, 120);
+  });
+
+  window.addEventListener("resize", scheduleRefresh);
+
+  document.addEventListener(
+    "toggle",
+    (e) => {
+      if ((e.target as HTMLElement)?.tagName === "DETAILS") {
+        scheduleRefresh();
+      }
+    },
+    true,
+  );
+
+  if (
+    (window as any).__synthexPageReady ||
+    sessionStorage.getItem("synthex_preloaded_session")
+  ) {
+    startFooterBounce();
+  } else {
+    window.addEventListener("synthex:page-ready", startFooterBounce, {
+      once: true,
+    });
+  }
+
+  document.addEventListener("astro:page-load", () => {
+    startFooterBounce();
+  });
+</script>