Hero redesign: single-CTA layout with animated product frames

[enzoftware]

Summary

• Rebuilds the hero around one message and one action instead of the old three-pillar + 4-tile service grid, which duplicated content already covered by the Capabilities section further down the page.
• New HeroProductFrames component shows the three real product lines (Web, AI agents, Mobile) as layered device frames, each with its own real-world distribution badge (App Store, Google Play, AWS · Producción, Agentes · 24/7), revealed one by one with spring-physics stagger animation on load.
• Proof line now names the actual products in production (Ava Cash, Jalhuca, New Transport) instead of a generic "3 productos en producción" count.
• Hero foreground scales/fades on scroll (HeroScrollScene), Manifesto slides over it with a rounded cinematic overlap, and Work replaces the static grid with a sticky scroll-driven showcase that crossfades between projects (StickyWorkShowcase).
• Service cards elsewhere get spring-physics hover via a generic SpringCard wrapper.
• Removes now-unused pillars/services i18n fields and the shared cube SVG symbol def only they referenced.
• Merged latest main (CI workflow, per-project tech-stack badges) — threaded techStack through the new sticky Work showcase.

Explored and approved via a design canvas walkthrough (3 hero directions, then iterated on the chosen "product-anchored" option) before implementation.

Test plan

• npm run build — passes, both es and en pages generate
• astro check — 0 errors
• npm run lint — clean
• Verified in-browser: hero copy/CTA render correctly on both / and /en/, product frames render at full opacity with correct badges, Work section crossfade verified with no overlapping text between projects
• Manual review of the staggered entrance animation and scroll-driven sections on a live preview (animation timing couldn't be fully verified in the automated browser session due to tab-visibility throttling of requestAnimationFrame)

🤖 Generated with Claude Code

[enzoftware]

Pushed a follow-up commit addressing local review feedback:

• Mobile/tablet hero (<960px) now uses its own "billboard" layout (the big Diseñamos/Construimos/Desplegamos treatment from the design exploration's Option C) instead of just hiding the product frames from the desktop layout.
• Desktop product frames: fixed the AWS badge being clipped by its own frame's overflow:hidden, scaled the whole composition up (~30%) and enlarged badge text/padding so all distribution labels (App Store, Google Play, AWS · Producción, Agentes · 24/7) are actually legible.
• Connected scroll feel: added Lenis for page-wide smooth/inertial scrolling, and extended the rounded-top "sliding card" overlap (previously only Manifesto-over-Hero) to Capabilities and Work, so the light→dark→light section transitions read as a continuous stack rather than hard cuts.
• Fixed a latent bug where .hero-fg's scoped CSS never actually matched (it's rendered by a React island, so Astro's data-astro-cid scoping never reached it) — switched to :global(). No visible behavior change, just correct instead of accidentally-correct.

🤖 Generated with Claude Code

[enzoftware]

Another round addressing the local review:

• Unified backgrounds: Capabilities was the one section that broke the page into visually separate blocks (dark ink vs. everyone else's cream). Converted it to the same cream/ink tone as the rest of the page — cards, icons, pattern wash all follow — so scrolling through Manifesto → Partners → Capabilities → Work is one continuous canvas, not a stack of different-colored panels. Also dropped the rounded-corner "card stack" seams I'd added around those sections since there's no longer a color clash to bridge; Lenis's smooth scroll plus the existing reveal-on-scroll animations now carry the connected feel on their own.
• Hero frames were dwarfed by whitespace, not actually undersized — .hero-content had no max-width, so on a wide monitor the visual column stretched far past where the frames capped out, making them look small in a sea of empty space. Added a max-width + rebalanced the grid, and bumped the frames' own cap up too (620px → 860px). They're noticeably larger now.
• Removed the "En producción" line — three names in a row read as thin rather than substantial; the headline + CTA already carry the section.

🤖 Generated with Claude Code