zsty.us

Before / After · Case Study

Porto Verde — a parked domain to a B2B cannabis-lab operating surface

  • Hemp / CBD

Porto Verde is a licensed Long Beach micro-processor and co-packer — extraction, co-pack, packaging, and METRC-compliant labeling for cannabis and hemp brands. It had no web presence: the domain sat on a registrar parking page and buyers found the lab by referral. Built from scratch on Next.js 15 — a facility hero shot on the real C1D1 floor, nine service deep-dives, an equipment-transparency page that names the actual CTM and FlexPackPRO machines, a compliance surface (21+ gate, METRC, Prop 65, COA positioning), and a quote funnel with drag-and-drop artwork upload — then shipped to production on portoverdelab.com behind Cloudflare DNS the same day the domain was bought.

The lab made the product for years — it just had no front door. Now it has one, and it never claims a spec it can't back.
🔒portoverdelab.com
jackiej.events — modern site

Receipts — measured

Numbers that moved.

0
Pages shipped (parked page → operating surface)
was 0
0
Service deep-dives (extraction + co-pack)
was 0
0 day
Days from domain purchase to live production
was 0 day
0 MB
Max artwork upload per quote request
was 0 MB
  • Registrar parked page → full Next.js 15 operating surface, live same day
  • 0 → 9 service deep-dives (distillate, resin, diamonds, THCA + 5 co-pack lines)
  • Quote funnel with drag-drop artwork upload (PDF/AI/PSD, up to 100 MB)
  • Equipment page names the real machines — CTM front/back/wrap + FlexPackPRO TTO

The pixel diff

Overview, then the walkthrough.

Left: everything the legacy site shipped — frozen in place. Right: an auto-scrolling tour of the rebuild, from hero to booking. No slider to fight with.

Before — the overview
🔒portoverdelab.com · parked
Before — the overview

This is everything the legacy site had to offer above the fold. No pricing, no calendar, no booking — the funnel ended at a mailto.

After — scroll through what shipped
🔒portoverdelab.com
After — scroll through what shipped

Auto-scrolls through the modern site so you can see the booking surface, the package grid, the pricing table, and the calendar inline — without leaving this page.

The four beats

Problem · Insight · Build · Outcome.

Scroll past the legacy frame. The four beats land in order. At the end, the modern site fades into the same window.

🔒portoverdelab.com · parked
Legacy
01 · Problem

A real lab, invisible online.

Porto Verde has been extracting, co-packing, and labeling for cannabis and hemp brands out of a licensed Long Beach facility — but portoverdelab.com sat on a registrar parking page topped with sponsored-search spam, and the only way to reach the lab was a referral or a phone number. A capable manufacturer with no front door, in a saturated 2026 market where buyers vet partners online first.

02 · Insight

Procurement buys on proof — so show the floor, the machines, and the compliance.

Brand owners and procurement teams don't need a brochure; they need capability scope, the actual equipment, a compliance story, and a way to send a brief with artwork. Build an operating surface around that — nine service deep-dives, an equipment-transparency page, a compliance surface, and an artwork-upload quote funnel — and never claim a spec the lab can't back.

03 · Build

Parked domain to production in a day.

Next.js 15 + Tailwind v4 on Vercel: a facility hero, nine service pages, packaging (Mylar + glass), an equipment page naming CTM + FlexPackPRO, a compliance surface (21+ gate, METRC, Prop 65, COA positioning), and a presigned-upload quote funnel backed by Neon. The brand-new domain was wired to Vercel and moved onto Cloudflare DNS — A apex + www, valid SSL, www→apex redirect — and the positioning was corrected end-to-end so the site reads as a processor/co-packer, never a cultivator.

04 · Outcome

Live on portoverdelab.com — premium, accurate, and honest.

The lab finally has a front door: a fast, industrial-premium B2B surface that turns referral traffic into scoped, artwork-attached quote requests, shows the real floor and the real machines, and flags every unverified number instead of faking it. The receipts the partner still needs to confirm — DCC license, realized throughput, brand case studies — are marked TBC in the UI, ready to flip the moment they land.

🔒portoverdelab.com
Modern

Architecture

One chain replaced by another. Receipts above.

Old stack
  • Registrar parking
  • No pages
  • No quote funnel
  • No compliance surface
  • Referral-only
New stack
  • Next.js 15
  • Tailwind v4
  • Vercel
  • Cloudflare DNS
  • Neon + Drizzle
  • Presigned uploads
  • METRC / Prop 65 surface

What changed

Grouped by what kind of system shipped.

Each claim ships with concrete evidence — env vars, table names, cadence chips. No marketing fluff.

Design

A hero shot on the real floor — not clip art

The landing hero is a clean editorial composition: a framed plate of the actual C1D1 extraction cleanroom with a glass spec rail (Extraction · Co-Pack · Packaging · METRC) and one offset 'processing floor' accent. An earlier draft used a gimmicky parallax-tilting, idle-bobbing four-photo cluster borrowed from another site; it was scrapped for the static, confident composition a procurement buyer expects. Real facility photography (extraction skid, cleanroom, Futurola staging, labeling room) carries every service and equipment page.

Before
No site at all — a registrar parking page with sponsored-search spam.
After
A facility hero + real floor photography across 13 pages.
Design

Industrial-premium positioning — and honest about what the lab is

Green / brass-gold / near-black, Space Grotesk + Inter, generous whitespace — pharma-grade, not dispensary kitsch, no leaf clichés. Just as important, the copy is precise about the business: Porto Verde is a micro-processor and co-packer, so the site never claims to cultivate. Flower appears only as a brand-supplied input ('you bring the extract, distillate, or biomass'); 'seed-to-sale' was replaced with 'intake-to-manifest' throughout.

Before
Nothing communicated what the lab does, or doesn't, do.
After
A B2B identity that reads as a manufacturer — accurate to the license.
Retention

A quote funnel that takes the brand's artwork

The conversion path isn't a mailto: link. It's a structured Request-a-Quote form — company, contact, product type, multi-select services, volume, timeline — with a drag-and-drop artwork dropzone that accepts PDF / AI / PSD / EPS / PNG up to 100 MB via presigned direct-to-storage uploads, with per-file progress and a spam honeypot. Submissions land in Neon and notify the operator.

Before
Reachable by phone and word of mouth; no way to send a brief or artwork.
After
Brands scope a project and upload print-ready files in one step.
Agent backbone

An honest engine — every unverified number wears a 'TBC'

Procurement sites lie with confidence; this one refuses to. Throughput, MOQ, lead times, and the DCC license number render with a visible 'TBC' marker until the partner confirms the real figure, and the equipment specs are softened to vendor-published classes rather than invented precision. The build ships placeholders honestly instead of fabricating receipts — the same operating principle as the rest of the portfolio.

Before
No claims at all.
After
Real claims where verified; visible TBC markers everywhere else.
Agent backbone

Equipment transparency the LA co-pack market doesn't offer

A dedicated equipment page names the actual hardware — CTM Front/Back/Wrap pressure-sensitive labeling (vendor-published 90–120 ft/min) and FlexPackPRO thermal-transfer coding (up to ~32 in/sec, ~300 dpi class) — alongside the extraction, pre-roll, cart, and gummy lines, with real photos of the floor. A competitive scan of six LA / Long Beach co-packers found none that show a per-batch COA portal, live throughput, or their machines; this page is built to own that gap.

Before
No equipment, no specs, no proof of capability.
After
Named machines + vendor specs + real floor photos.

← All rebuilds

Porto Verde — a parked domain to a B2B cannabis-lab operating surface — zsty.us