Case study: CALNAUTIC — from brief to launch in 3 weeks

CALNAUTIC is a Spanish manufacturer of marine foam decking — synthetic teak alternatives for boats, sailboats and jet skis. They came to us with a clear brief: build a professional web presence that generates leads and ranks on Google for competitive nautical keywords. Three weeks later, the site was live. Here's how we did it.

The challenge

The marine foam sector in Spain is dominated by teak importers with decades of SEO authority. CALNAUTIC needed to compete against them with a brand-new domain. The product is technically superior — UV-resistant, lightweight, zero-maintenance — but the brand had no digital footprint.

Three specific problems to solve:

• →No brand identity or visual language
• →Product configurator needed — customers want to visualise patterns and colours before buying
• →Bilingual site (ES/EN) to capture the Mediterranean international charter market

Strategy

We structured the project in three parallel tracks:

1. 1. Brand identity. Gold and deep navy palette. Display serif for authority, clean sans for readability. The visual language communicates luxury and durability without alienating the working sailor.
2. 2. Interactive configurator. Built with Next.js + CSS gradient functions. Users select from 12 deck patterns, 11 colour palettes and 10 caulk colours. Everything updates in real time with no backend — pure client-side compositing.
3. 3. SEO content engine. 10 bilingual blog posts targeting high-intent keywords: "teca vs espuma marina", "mantenimiento cubierta barco", "espuma marina motos de agua". All posts are statically generated at build time for maximum crawlability.

Technical stack

• →Framework: Next.js 16 App Router with OpenNext + Cloudflare Workers
• →i18n: Custom React Context with flat key dictionary — no third-party library, zero overhead
• →Contact forms: Web3Forms with edge-compatible submission handling
• →Blog: Typed Block content system (h2/h3/p/ul/ol/note) — no markdown parser, no CMS dependency
• →Animations: CSS IntersectionObserver-based fade-ups, Ken Burns hero image effect

The configurator: the hardest part

The deck pattern visualiser was the most technically interesting challenge. Each pattern is a pure CSS gradient function — no images, no canvas, no WebGL. Patterns like Teca use a repeating-linear-gradient that simulates wood planking, while Diamond uses layered gradients with rotation to create the geometric effect.

The colour system required type-safe indexed lookups: pattern definitions store keyof Dict references rather than strings, so the TypeScript compiler catches missing translations at build time. The result is a configurator that feels like a 3D renderer but runs entirely in the browser with no external dependencies.

Results

The site launched in production 3 weeks after the initial brief. Key metrics:

• →Lighthouse score: 98 performance, 100 accessibility, 100 SEO on mobile
• →10 SEO posts indexed in ES + EN targeting long-tail nautical keywords
• →Contact form live with email delivery via Web3Forms
• →Bilingual chatbot with 17-node decision tree for lead qualification

Takeaway

The configurator proved that interactive product experiences don't require complex infrastructure. A deep understanding of CSS compositing, combined with a well-typed data model, can produce a result that feels premium without the maintenance overhead of a canvas or WebGL solution.

For CALNAUTIC, the bet is on content. Ten SEO posts at launch give Google enough signal to understand the site's authority within the marine foam niche. The configurator converts visitors who would otherwise bounce trying to visualise the product. Both work together — traffic and conversion, not one without the other.