feat: rediseño 3 secciones

DifferenceCards: fix align-items:start + clearProps GSAP ServicesSection: aplanar grupos, grid 2×3 sin subtítulos de categoría ServiceCard: 3D tilt on hover (rotateX/Y), translateZ icon+cta, sombra dinámica ProcessSteps: círculos horizontales asimétricos + SVG path orgánico que se dibuja al scroll, flotación sutil, mobile vertical
2026-07-02 01:55:07 -03:00
parent 9ef05f8eea
commit 07165ee94e
4 changed files with 396 additions and 176 deletions
@@ -1,12 +1,7 @@
 ---
-// "Cómo trabajamos" — Timeline with GSAP ScrollTrigger progress bar
-// Phase 4 — Organic Fluidity Premium
+// "Cómo trabajamos" — Horizontal asymmetric circles with organic SVG connecting line
 import SectionEyebrow from './SectionEyebrow.astro';
 import type { TranslationKey } from '@/i18n/ui';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-
-gsap.registerPlugin(ScrollTrigger);

 interface Props {
  t: (key: TranslationKey) => string;
@@ -14,10 +9,10 @@ interface Props {
 const { t } = Astro.props;

 const steps = [
-  { num: '01', titleKey: 'process.step1.title' as TranslationKey, bodyKey: 'process.step1.body' as TranslationKey },
-  { num: '02', titleKey: 'process.step2.title' as TranslationKey, bodyKey: 'process.step2.body' as TranslationKey },
-  { num: '03', titleKey: 'process.step3.title' as TranslationKey, bodyKey: 'process.step3.body' as TranslationKey },
-  { num: '04', titleKey: 'process.step4.title' as TranslationKey, bodyKey: 'process.step4.body' as TranslationKey },
+  { num: '01', titleKey: 'process.step1.title' as TranslationKey, bodyKey: 'process.step1.body' as TranslationKey, yPct: 35 },
+  { num: '02', titleKey: 'process.step2.title' as TranslationKey, bodyKey: 'process.step2.body' as TranslationKey, yPct: 58 },
+  { num: '03', titleKey: 'process.step3.title' as TranslationKey, bodyKey: 'process.step3.body' as TranslationKey, yPct: 28 },
+  { num: '04', titleKey: 'process.step4.title' as TranslationKey, bodyKey: 'process.step4.body' as TranslationKey, yPct: 50 },
 ];
 ---
 <section class="py-24 md:py-32 relative overflow-hidden" style="background: var(--hds-bg-soft);" id="como-trabajamos">
@@ -31,31 +26,61 @@ const steps = [
      </h2>
    </div>

-    <!-- Timeline with progress bar -->
-    <div class="process-timeline">
-      <!-- Vertical progress bar track -->
-      <div class="process-progress-track" aria-hidden="true">
-        <div id="process-progress-fill" class="process-progress-fill"></div>
-      </div>
+    <!-- Desktop: horizontal asymmetric circles -->
+    <div class="process-desktop hidden md:block">
+      <svg class="process-line-svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+        <path
+          class="process-line-path"
+          d="M 12.5 35 C 22 35, 28 58, 37.5 58 C 47 58, 53 28, 62.5 28 C 72 28, 78 50, 87.5 50"
+          fill="none"
+          stroke="var(--color-hds-naranja)"
+          stroke-width="2"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+          stroke-dasharray="200"
+          stroke-dashoffset="200"
+          opacity="0.5"
+        />
+      </svg>

-      <div class="process-steps">
+      <div class="process-circles-row">
        {steps.map((step, i) => (
-          <div id={`process-step-${i}`} class="process-step-wrap">
-            <article class="glass-card process-step-card p-8 md:p-10">
-              <div class="flex items-start gap-6">
-                <div class="font-display leading-none flex-shrink-0" style="font-size: 3.5rem; color: var(--color-hds-naranja); font-weight: 500; opacity: 0.9;">
-                  {step.num}
-                </div>
-                <div>
-                  <h3 class="text-xl md:text-2xl font-semibold mb-3" style="color: var(--hds-fg);">
-                    {t(step.titleKey)}
-                  </h3>
-                  <p class="text-[15px] md:text-base leading-relaxed" style="color: var(--hds-fg-soft);">
-                    {t(step.bodyKey)}
-                  </p>
-                </div>
-              </div>
-            </article>
+          <div class="process-circle-col" style={`top: ${step.yPct}%;`}>
+            <div class="process-circle glass-card" data-step-index={i}>
+              <span class="font-display process-circle-num">{step.num}</span>
+            </div>
+            <div class="process-circle-text">
+              <h3 class="text-lg font-semibold mb-1.5" style="color: var(--hds-fg);">
+                {t(step.titleKey)}
+              </h3>
+              <p class="text-sm leading-relaxed" style="color: var(--hds-fg-soft);">
+                {t(step.bodyKey)}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Mobile: vertical layout with connecting line -->
+    <div class="process-mobile md:hidden">
+      <div class="process-mobile-track" aria-hidden="true">
+        <div class="process-mobile-line" id="process-mobile-line"></div>
+      </div>
+      <div class="process-mobile-steps">
+        {steps.map((step, i) => (
+          <div class="process-mobile-row" data-step-index={i}>
+            <div class="process-circle process-circle-mobile glass-card">
+              <span class="font-display process-circle-num">{step.num}</span>
+            </div>
+            <div class="flex-1">
+              <h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">
+                {t(step.titleKey)}
+              </h3>
+              <p class="text-sm leading-relaxed" style="color: var(--hds-fg-soft);">
+                {t(step.bodyKey)}
+              </p>
+            </div>
          </div>
        ))}
      </div>
@@ -70,83 +95,193 @@ const steps = [
  gsap.registerPlugin(ScrollTrigger);

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
  if (!prefersReduced) {
-    const steps = document.querySelectorAll('.process-step-card');
-    const progressFill = document.getElementById('process-progress-fill');
+    // Desktop: draw SVG line on scroll
+    const path = document.querySelector<SVGPathElement>('.process-line-path');
+    if (path) {
+      const pathLength = path.getTotalLength();
+      path.style.strokeDasharray = String(pathLength);
+      path.style.strokeDashoffset = String(pathLength);

-    if (steps.length && progressFill) {
-      // Animate progress bar as user scrolls through the section
-      ScrollTrigger.create({
-        trigger: '.process-steps',
-        start: 'top 70%',
-        end: 'bottom bottom',
-        onUpdate: (self) => {
-          progressFill.style.setProperty('--progress', `${self.progress * 100}%`);
-        },
-      });
-
-      // Stagger reveal each step card
-      gsap.from('.process-step-card', {
+      gsap.to(path, {
        scrollTrigger: {
-          trigger: '.process-steps',
+          trigger: '.process-desktop',
          start: 'top 75%',
-          toggleActions: 'play none none none',
+          end: 'bottom 60%',
+          scrub: 0.8,
        },
-        opacity: 0,
-        x: -30,
-        duration: 0.7,
-        stagger: 0.15,
-        ease: 'power3.out',
+        strokeDashoffset: 0,
+        ease: 'none',
      });
    }
+
+    // Desktop: scale-in circles with stagger
+    gsap.from('.process-circle-col', {
+      scrollTrigger: {
+        trigger: '.process-desktop',
+        start: 'top 70%',
+        toggleActions: 'play none none none',
+      },
+      opacity: 0,
+      scale: 0.6,
+      duration: 0.6,
+      stagger: 0.18,
+      ease: 'back.out(1.7)',
+      clearProps: 'transform,opacity',
+    });
+
+    // Desktop: subtle floating animation on circles
+    document.querySelectorAll<HTMLElement>('.process-circle-col').forEach((el, i) => {
+      gsap.to(el, {
+        y: '+=12',
+        duration: 2.5 + i * 0.4,
+        repeat: -1,
+        yoyo: true,
+        ease: 'sine.inOut',
+        delay: i * 0.3,
+      });
+    });
+
+    // Mobile: line fill on scroll
+    const mobileLine = document.getElementById('process-mobile-line');
+    if (mobileLine) {
+      gsap.to(mobileLine, {
+        scrollTrigger: {
+          trigger: '.process-mobile-steps',
+          start: 'top 75%',
+          end: 'bottom 60%',
+          scrub: 0.8,
+        },
+        scaleY: 1,
+        ease: 'none',
+      });
+    }
+
+    // Mobile: fade-in rows
+    gsap.from('.process-mobile-row', {
+      scrollTrigger: {
+        trigger: '.process-mobile-steps',
+        start: 'top 75%',
+        toggleActions: 'play none none none',
+      },
+      opacity: 0,
+      x: -20,
+      duration: 0.5,
+      stagger: 0.15,
+      ease: 'power2.out',
+      clearProps: 'transform,opacity',
+    });
  }
 </script>

 <style>
-  .process-timeline {
-    display: flex;
-    gap: 2rem;
-    max-width: 48rem;
-    margin: 0 auto;
-  }
-
-  .process-progress-track {
-    flex-shrink: 0;
-    width: 3px;
-    border-radius: 3px;
-    background: var(--hds-line);
+  /* Desktop layout */
+  .process-desktop {
    position: relative;
-    margin-top: 0;
+    height: 420px;
  }

-  .process-progress-fill {
-    position: sticky;
-    top: 0;
+  .process-line-svg {
+    position: absolute;
+    inset: 0;
    width: 100%;
-    height: 40vh;
-    background: var(--color-hds-naranja);
-    border-radius: inherit;
-    clip-path: inset(0 0 calc(100% - var(--progress, 0%)) 0);
-    transition: clip-path 0.1s linear;
+    height: 100%;
+    z-index: 0;
  }

-  .process-steps {
+  .process-circles-row {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    height: 100%;
+    z-index: 1;
+  }
+
+  .process-circle-col {
+    position: relative;
    display: flex;
    flex-direction: column;
-    gap: 1.5rem;
-    flex-grow: 1;
+    align-items: center;
+    padding: 0 0.75rem;
  }

-  .process-step-card {
+  .process-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 76px;
+    height: 76px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .process-circle-num {
+    font-size: 1.6rem;
+    font-weight: 500;
+    color: var(--color-hds-naranja);
+    line-height: 1;
+  }
+
+  .process-circle-text {
+    margin-top: 1.25rem;
+    text-align: center;
+    max-width: 200px;
+  }
+
+  /* Mobile layout */
+  .process-mobile {
+    position: relative;
+    padding-left: 2.5rem;
+  }
+
+  .process-mobile-track {
+    position: absolute;
+    left: 37px;
+    top: 38px;
+    bottom: 38px;
+    width: 2px;
+    background: var(--hds-line);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .process-mobile-line {
    width: 100%;
+    height: 100%;
+    background: var(--color-hds-naranja);
+    transform: scaleY(0);
+    transform-origin: top;
  }

-  @media (max-width: 767px) {
-    .process-timeline {
-      gap: 1rem;
+  .process-mobile-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .process-mobile-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .process-circle-mobile {
+    width: 56px;
+    height: 56px;
+    flex-shrink: 0;
+  }
+
+  .process-circle-mobile .process-circle-num {
+    font-size: 1.2rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .process-line-path {
+      stroke-dashoffset: 0 !important;
    }
-    .process-progress-track {
-      width: 2px;
+    .process-mobile-line {
+      transform: scaleY(1) !important;
    }
  }
 </style>