La Roca Project

La Roca Piedras y Lajas has its shop in Girardot, Cundinamarca. It sells natural stone and flagstone (slate, "piedra muñeca," and stone slabs in several formats) for facades, accent walls, floors, and pool areas, plus bathroom fixtures with a counter, a basin, and fittings. Inside the shop, the stone is mounted on a wall so customers can touch it before deciding, and the fixtures are set up on display. People choose this kind of product by touching it, and that is not an easy thing to carry over to a screen.

It is a purchase people think hard about. The square meter starts at COP 60,000 (about USD 15), a bathroom combo runs around COP 470,000 (about USD 120), and a full sale ranges from COP 1,000,000 to 5,000,000 (about USD 250 to 1,250), averaging somewhere between COP 1,000,000 and 2,000,000 (about USD 250 to 500). Buyers include homeowners remodeling a house, country properties, condominiums, and foremen across the Alto Magdalena region (Girardot, Ricaurte, Flandes, and Melgar), plus a growing number of customers from other cities who have the material shipped to them.

The La Roca team reviewed every single delivery and explained things no developer could ever have guessed on their own: what "acrílico" means to them, which piece is "the waterfall stone" in the shop, that "enchape" means the stone itself and not the adhesive, and that they had already shipped "piedra muñeca" as far as Santa Marta. A good share of the site's best decisions came out of that back-and-forth conversation, which was not always a comfortable one.

Nobody buys a facade on impulse, so the site had to support a long decision, not rush it.

Source: La Roca Project full report, ch. 1 · Internal Damorus Projects interview, 2026

Demand existed, but nothing online was capturing it. On Google, the business only showed up in generic results, because there was no page for any individual product, and anyone searching "piedra muñeca" or "black slate for facades" ended up with a competitor or a directory listing instead. Customers from Ibagué, Bogotá, or the coast assumed the business only sold locally in Girardot and never even asked, even though it ships nationwide. There was no measurement of any of this either, so nobody knew what people were looking at or where they were coming from.

The constraints were just as clear. This is a small business with no technical staff to maintain complicated infrastructure, a maintenance budget close to zero, and no payment gateway, because stone gets quoted (square meters, cuts, shipping) and personal service is part of what they are actually selling. That defined the site's one job: bring in messages and visits. For La Roca, a conversion is someone who writes "I want this, how do we make it happen?"

We held to that order of priorities through the whole project: function first, get people writing in, and let design come second, in service of that goal. Every button leads somewhere useful, and contact is always one click away. WhatsApp sits in the banner, in the header, on every product page, and in the footer; that much repetition is not exactly elegant, and we accepted the trade-off because getting the message sent came first. The brand's whole story fits into a single line of trust.

A beautiful website is worthless if nobody writes in after seeing it.

Source: La Roca Project full report, ch. 2 and 3

The site is static and served by Vercel. It has a couple of functions that run on demand at the network edge, a Postgres database on Neon for analytics, and WhatsApp for closing the sale. There is no dedicated server running around the clock, no framework, and nothing compiles in production. Everything interactive, from the search box to the cart, runs right in the visitor's own browser.

We deliberately left out React and every other framework. The content barely changes, we wanted the best possible speed and search ranking, and almost nothing loads faster than plain HTML served as-is. With no dependencies, there are also no libraries to update and no inherited vulnerabilities, and hosting costs next to nothing. The pages themselves are produced by scripts that run on a computer before publishing, and the server just hands out files that are already finished.

Serving static files is practically free and very hard to knock offline. The functions only cost money when someone actually uses them, and the database is serverless, so it scales down to zero whenever there is no traffic. To connect to it, we use a pooler, a middleman that spreads a single connection across many requests. That piece is necessary here, because every function spins up and shuts back down with each visit.

There are almost no moving parts, which means almost nothing can break just from the passage of time.

Source: La Roca Project full report, ch. 5 (decision 1) and ch. 6

Every product lives in a single file, datos.js. There are about twenty of them, and each one carries a name, synonyms, price, category, images, and copy. The header search box, the homepage grid, the catalog with its use-based filters, and the cart all read from that same list. The search box scores every match and ranks anything that matches the start of a word above anything that only matches in the middle. The rule was strict: any piece of product data lives in that one file, and nowhere else.

The thirteen product pages, the zone pages, the sitemap for Google, and the full icon set are not hand-written either. They are all produced by generator scripts in Node. The product-page generator builds every page with its own title, description, canonical address, structured data, gallery, and FAQ section, and because they all come from the same template, they keep the same structure and style no matter how much the catalog grows.

The generators can be run as many times as needed without breaking anything, and one change to the base template reaches every page with a single command. When the footer line needed to change, we edited the template and regenerated, instead of editing twenty separate files by hand. It looked like a purely technical decision, and it ended up mattering to the business itself, as you will see later with the city pages.

Every piece of product data gets written exactly once, in datos.js.

Source: La Roca Project full report, ch. 7 and 8

La Roca's cart does everything a regular online store's cart does, except charge a card. It holds whatever the customer keeps adding (stone by the square meter, fixtures, adhesives), calculates quantities and totals, and at the end, builds a message with the full order and opens it in WhatsApp. All of it happens right in the browser. There is no cart server, no user sessions, and no order database to protect. It comes out to about 294 lines of code for that one job.

A real person closes the sale. What the cart is really after is starting the conversation with complete information already in hand (which products, how many square meters, which fixtures), so the salesperson never has to ask everything from zero. It clears friction out of the very last step, which is exactly where the most interested people usually drop off, and it saved us from having to build online payments at all, along with the complexity and risk that comes with them.

When we audited conversion, every product page had "add to cart" competing against "get a quote," plus a third button, "Request a sample," splitting attention three ways. We removed it. That is Hick's Law at work: fewer options, faster decisions. The next step would be narrowing it down to one single primary button and promising a response time, but that depends on decisions only the business can make, and it is still pending.

The salesperson receives the order already written out, with products, square meters, and fixtures listed, and never has to start the conversation from zero.

Source: La Roca Project full report, ch. 5 (decision 2), ch. 9, ch. 35, and ch. 38

The closest thing to an actual application anywhere on the site lives on the bathroom fixtures page. It is a step-by-step builder: the customer picks a cabinet, a counter, a basin, and fittings, chooses a color and design at every step, and gets a quote for whatever they put together. That way, nobody has to imagine a finished bathroom just from a photo. There is also a 3D configurator, but it is a prototype hidden from search engines with no links pointing to it, set aside for a future phase.

Later, in the conversion report, we put names to two psychological principles the builder was already applying without anyone planning it that way. One is the Zeigarnik effect: a task once started creates a kind of tension that pushes people to finish it. The other is incremental commitment, described by Robert Cialdini, where a series of small decisions builds up to a bigger one. Someone who has already picked a cabinet, a counter, and a basin is far closer to writing "I want this" than someone who only looked at a photo.

Instead of imagining a bathroom from a single photo, the customer builds it and sees exactly what their choices add up to.

Source: La Roca Project full report, ch. 10 and ch. 44

Analytics is the most ambitious piece of the whole project. Google Analytics is free, and we still chose not to use it. We wanted control over the data, real attention to privacy, no third-party script weighing the site down, and above all, a panel for the La Roca team built around the views that actually matter to them, in their own language and their own time zone. We built it from scratch, in three layers: a script that logs what happens on every page, a function that receives those events, and another that aggregates them for the panel.

The script itself is lightweight, about 203 lines. It records which page is being viewed, where the visitor came from (campaign links included), and which buttons they tap, whether that is WhatsApp, Maps, or Instagram. Every event goes out through sendBeacon, which sends the data without slowing down navigation and without losing the event if someone closes the tab mid-visit. Before anything gets sent, it filters out bots, discarding automated visits, browsers that give themselves away as robots, and referrals from known spam domains.

The second layer is a minimal function: it receives the event, saves it to Postgres, and responds immediately so nobody has to wait. The third layer reads those events back and aggregates them by time range. That is where we had to lock the time zone to America/Bogota, because the database stores timestamps in universal time, and without that adjustment, a given day's numbers would never line up with the business's actual day. The panel has four tabs (overview, traffic, engagement, and buttons), designed for someone with no technical background at all.

Bots get filtered out before the event ever leaves the browser, so the panel only ever counts real people.

Source: La Roca Project full report, ch. 5 (decision 4) and ch. 11

In an early version, the analytics panel let anyone in with any password at all. The code treated any server response other than "unauthorized" (401) as a valid login. If the panel was opened without the server behind it, say, as a local file, the request came back "not found" (404), and since a 404 is not a 401, the code accepted it as a correct password. It is a classic logic bug, and it left the panel wide open over something that had nothing to do with the password itself.

That left us with a working rule we still apply: the absence of an error is not confirmation that something went right. The fix was made explicit. Only two responses now count as valid access, the success response and the one that triggers fallback mode, and every other response gets rejected outright. On top of that, we added a rate limit per IP address, so anyone who fails the password several times gets locked out for a while, which rules out brute-forcing it. The panel is also excluded from search engines entirely.

We applied the same logic to secrets. The database connection string and the panel password live in neither the code nor the repository. They sit in Vercel environment variables, which never get sent to the browser, and the exclusion list blocks any secrets file from ever being published. That is why, when the La Roca team asked whether that data was actually hidden from the public, we could verify it and answer with certainty. In one round of changes, we also caught and stopped two internal working guides from being published by mistake.

A single 404 was enough to get into the panel, because the code only ever rejected a 401.

Source: La Roca Project full report, ch. 12 and ch. 41

Someone searching "piedra muñeca in Girardot" wants to land directly on the piedra muñeca page, see its photo, its price, how it gets used, and message from right there. Land them on a generic homepage instead, and now they have to go hunting. That is why the site has a dedicated entry point for every search intent. Google calls that "I want to buy this" instant a micro-moment, and whichever site answers it with the exact right page is the one that wins it.

Every one of the thirteen product pages has its own title and description, a canonical address pointing back at itself, and structured data, an invisible block of code that spells out for Google exactly what is on the page. The homepage declares the business as a store (HomeGoodsStore), with address, hours, and the areas it serves. Every product page declares itself a product (Product), with price and availability. On top of that there are breadcrumbs (BreadcrumbList), the catalog's product list (ItemList), and a per-area service listing (Service) on the city pages.

The FAQs are marked up too (FAQPage), with GEO in mind, so assistants like ChatGPT, Perplexity, or Google's own AI summaries can cite the business's actual answers directly. Having everything properly marked up paid off when Search Console flagged some warnings. Instead of patching around it, we reviewed the markup across every page and found the product pages were complete; the real problem was the catalog page, which was listing ten products only halfway. We converted those into list items pointing to each full product page, which is the exact pattern Google recommends for a listing page.

Anyone searching for one specific stone needs to land on that stone's own page.

Source: La Roca Project full report, ch. 14, 15, and 19

To kill the idea that the business "only sells in Girardot," we added pages for Girardot, Ricaurte, and Flandes. On paper, the first attempt looked solid. Every city had its own text-only article with local content: the shop itself in Girardot, country homes and Peñalisa in Ricaurte, farms and the Magdalena River in Flandes. There was original content, structured service data, and links between pages, exactly what the SEO playbooks call for.

The correction came in blunt: "No, you have got this completely wrong. The page for each city needs to be an exact copy of the hero." They were completely right. That page is a visitor's first contact with the business after arriving from Google searching for their own city, and greeting them with bare text, no cover image, no button, wastes that customer. That person needs to see the entire site, exactly as if they had come in through the homepage, plus a block speaking directly to their city.

We rewrote the zone generator so it clones the entire homepage and changes only what needs to change: title, description, canonical address, social preview, per-zone service data, and a local text block placed right under the FAQs. The homepage itself stays clean, and any improvement we make to it reaches every city page the moment we regenerate. The lesson that stuck with us: judge every content decision by what the very first customer to arrive actually sees.

Anyone arriving from Google looking for their own city needs to see the entire site, cover image and buttons included.

Source: La Roca Project full report, ch. 14 and 16

Our in-house analytics showed piedra muñeca among the most searched products, and that people were searching for it from all over the country. The idea for a national page actually came from the La Roca team. Their reasoning was simple: if someone in another city assumes the business only sells in Girardot, that customer is lost before they ever write in. What was missing was a page that stated plainly that the material reaches wherever the person searching actually lives.

That is how /piedra-en-colombia was born. It clones the homepage, just like the city pages, with two changes. The label above the headline, which reads "Girardot, Ricaurte, Flandes" everywhere else on the site, reads "Made in Colombia" here, with the flag next to it. In the structured data, the service area shifts from a city to the entire country. The copy puts piedra muñeca front and center and mentions that the business has already shipped stone as far as Santa Marta, a real fact that directly answers anyone hesitating over the distance.

The flag is not an emoji. On Windows, the flag emoji just renders as the letters "CO," so we drew it as a tiny three-stripe SVG, yellow, blue, and red, which looks identical on every device. Following that same nationwide logic, the shipping question moved to the very top of the FAQ on all thirteen product pages. The answer opens with "Yes, we ship anywhere in Colombia," mentions the Santa Marta shipment, and promises to confirm the cost before the customer has to commit to anything.

Anyone living far from Girardot needs to know, before they even write in, that the material can reach them.

Source: La Roca Project full report, ch. 17 and 38 · Internal Damorus Projects interview, 2026

"Everything is the exact same flat color except the footer," the La Roca team told us at one point, and they were right: the site worked, but it was monotonous, one single cream tone from top to bottom. Before touching anything, we researched how big brands break up monotony without losing their identity. We found four techniques with real backing: alternating background bands by section, one dark band midway down the page that acts as an anchor, shaped dividers between sections, and textured color accents.

Instead of choosing for them, we built four clickable, navigable examples, each one using La Roca's own photos and colors: banded, dark, mountain, and accented. The team picked the mountain version "without a shadow of a doubt." Looking back, it made complete sense: the business is named La Roca and its logo is literally a mountain, so stone ridges between sections grow straight out of the brand itself. The earthy color palette and the typeface pairing (Fraunces for headlines, Manrope for body text) also came directly from the logo.

Every ridge is an SVG mask along a section's top edge, filled with that section's own color, sitting on top of the section before it. The trouble started when we tried to clip whatever spilled over the edge. Using overflow hidden broke the sticky header, because that kind of clipping creates its own scrolling context, and the fix was overflow-x: clip, which trims the sides without creating that context. Later on, we gave the ridges some motion: as you scroll down, they drift slightly, alternating direction, the way a mountain range seems to shift as you drive past it.

The business is named La Roca and its logo is a mountain, and the team picked the ridges without a moment's hesitation.

Source: La Roca Project full report, ch. 20 to 23 and ch. 29

The favicon, the 32-pixel icon that shows up next to the site's name, had the longest story in the entire project for something so small. First, Google was not picking it up at all, so we built the full icon set and served it from the domain root, exactly where Google looks for it. Then the La Roca team compared it against Facebook's own favicon and noticed theirs left a white border. Our icon was a small circle sitting inside a square, and since Google crops every favicon into a circle, ours ended up floating inside Google's own circle.

We rebuilt the set so the circle touches all four edges and the mountain reads big, and that is where two more problems surfaced. The source photo carried a rotation flag that the image library ignores by default; left uncorrected, the mountain would have come out rotated 90 degrees. And the .ico file, which bundles several sizes into one, we assembled by hand in code, byte by byte, so it would render sharp at 16, 32, and 48 pixels.

Right below the cover, a city ticker runs nonstop: Girardot, Ricaurte, Flandes, Ibagué, Bogotá, Santa Marta, and "Ships anywhere in Colombia." It replaced a static line of text, backs up the national strategy, and had to run smoothly with zero stutter on both phone and desktop. The cover randomly picks one of six photos before the rest of the page loads, to avoid losing any speed. On the fixtures page, the COP 470,000 (about USD 120) price tag breaks out of the photo frame in a floating chip that adds depth. The whole site shares one single motion curve, two-layer shadows, and a very fine grain texture.

One bug kept repeating on us: elements that were supposed to be hidden, like a cart badge or a popup, kept showing up anyway, because a style rule was overriding the attribute meant to hide them. The fix itself was simple. What we took away from it is that verifying means actually measuring what the user sees on screen, not just reading the code and assuming it matches. Even the 404 page got real care, with the logo, a friendly message ("This page got lost somewhere among the stones"), and buttons to find your way back.

Without correcting the photo's rotation flag, the mountain on the favicon would have come out rotated 90 degrees.

Source: La Roca Project full report, ch. 24, 25, 26, 31, and 32

Analyzing conversion first meant defining what a conversion even is for La Roca. Since there are no online payments, a conversion is a message with real intent behind it, and what actually needed improving was the decision to write in. The diagnosis drew on Robert Cialdini's principles of persuasion, BJ Fogg's behavior model, Nielsen Norman Group's usability heuristics, and Baymard Institute's research, and it worked through the entire funnel. Arrival scored strong. Trust had a critical gap.

There was no social proof in sight, and for someone buying stone from an unfamiliar business in another city, that is the single biggest barrier there is. The La Roca team asked, half-joking: "Should we just make some up and generate the faces with AI?" We said no, flatly, no room for interpretation. All it takes is one customer spotting a fake review or an AI-generated face for them to start thinking, "if this is fake, what else is?" And on top of that, Google actively penalizes fake review markup.

Looking closer, they were not starting from zero. They have a real shop with stone mounted on the wall, they have already sold and shipped material as far as Santa Marta, they have one genuine Google review, and a real team that answers customers. The proof already existed; what was missing was collecting it and putting it on display. The roadmap calls for asking past customers for reviews, gathering real photos of finished projects and of the shop itself, and giving customers certainty about how shipping actually works, since there is no fixed shipping price to quote.

In the structured data, the star ratings and reviews were left empty until real reviews exist, and the shipping and returns policy is waiting on real input from the business. We would rather explain why a field is missing than fill it with something fabricated, even if that leaves a few Google warnings open for now.

The star ratings in the markup stay empty until real reviews actually exist.

Source: La Roca Project full report, ch. 19 and ch. 33 to 38

The site is live at larocapiedrasylajas.com ↗. It has 22 pages, the sitemap has been submitted to Search Console, and every change deploys automatically from GitHub straight to Vercel. We built it in 4 to 5 days, across fewer than seven releases, as an example of what fits inside the Silver plan, from $1.000.000 COP$500 USD€500 EUR, and we have kept refining it based on what the data has shown us since. According to its own analytics panel, it gets steady traffic without paying for a single ad.

That traffic is already turning into conversations. Customers message on WhatsApp from far away, even from Santa Marta. These are people who have never been to Girardot and found the business simply by searching for what they needed, which shows the SEO and GEO work is actually paying off. Piedra muñeca is the most-quoted product, the very same one that drove the product pages and the national page in the first place. Since a single sale runs anywhere from COP 1,000,000 to 5,000,000 (about USD 250 to 1,250), answering every message quickly and well is worth the effort.

What we still do not measure is how many of those conversations actually turn into a sale. The panel counts visits, traffic sources, and WhatsApp clicks, but the sale itself happens inside the chat, outside the site, disconnected from any of those numbers. Shipping still has no fixed price because it gets quoted city by city. What we diagnosed around trust and shipping certainty is not fully built out yet either, since it depends on reviews, photos, and decisions only the business itself can provide.

Visits arrive, and messages arrive with them; how many turn into an actual sale, we still do not know.

Source: Internal Damorus Projects interview, 2026 · La Roca Project full report, ch. 43 and 44

What comes next mostly happens out on the street. The website brings in visits from Google, but the business also lives off whoever walks past the shop, and there are several ideas aimed at exactly that crowd: a stone display set up outside the shop so the material is visible from the sidewalk, clearer signage, a physical catalog for anyone who would rather flip through pages, and a large sign with a QR code that leads straight to the online catalog.

Business cards have already been designed with Claude Design, in Spanish, English, and German. They were produced in HTML and CSS, with no graphic design software, and there is a print-ready version with a 3-millimeter bleed and crop marks. Every card carries two QR codes. One opens the catalog with a source tag the panel can recognize; the other opens the shop's location directly in Google Maps.

On the business side, the roadmap has three fronts. The first is a Google Maps strategy, with real photos, hours, and complete contact information filled out on the business listing. The second is ongoing marketing, so growth stops depending entirely on the pace of search engines. The third is a B2B sales rep who carries the catalog directly to condominiums, country properties, and foremen across the region, the exact same audience that already buys stone today.

The site brings people in from Google, and the shop also depends on whoever simply walks by.

Source: Internal Damorus Projects interview, 2026 · La Roca business card specifications (portfolio)

The most important thing we learned from La Roca has very little to do with technology. The site is fast, it ranks by product and by city, it builds the order, and it measures what happens, but unpaid traffic grows at the pace of search engines, and that pace is slow. For a catalog to become a steady source of sales, somebody has to keep pushing it forward with social media, project photos, reviews, a real presence on Maps, and messages answered quickly.

Several of the best decisions on this project came from being corrected: the city pages that needed to clone the homepage, the favicon with the white border, the site running on one single flat color. A client who knows their own business and says "not like this" at the right moment makes the end result better. Our job is to listen, research before responding, and report back with evidence on what works and what does not, including the times when the honest answer is "I could not verify that, you will need to confirm it."

A site built in just a few days can still be genuinely well-engineered, as long as the decisions behind it are made carefully. La Roca has no dedicated server, no framework, runs its own in-house analytics, and does not carry a single invented number anywhere. To see the opposite end of that spectrum, URG Technology↗ tells the story of a four-month project.

Unpaid traffic grows at the pace of search engines, and that pace is a slow one.

Source: Internal Damorus Projects interview, 2026 · La Roca Project full report, ch. 39, 42, and 45