zsty.us

Before / After · Case Study

Opulent Life — an Instagram-only sea-moss brand given a storefront that can be found

  • Restaurants
  • Local Pro Services

A Venice Beach boardwalk brand selling wildcrafted sea moss gels and cold-pressed juices had no website at all — just an Instagram page with a flyer graphic for a menu and "DM to order." Now a fast one-page site puts all eleven products with real ingredients and prices where searches and QR scans can land, while orders still flow into the same DMs that already work.

“It's your Life…make it an Opulent one — a DM-only sea-moss brand given a storefront that says exactly what's in the jar.”
Live → opulentseamoss.oglife.app↗Their Instagram → @opulentlife_seamoss↗
🔒opulentseamoss.oglife.app · live
jackiej.events — modern site

At a glance

What this rebuild covers.

  • Design

    The brand's own product photos were rescued from its social feed and cleaned into crisp cutouts — the real logo, the gel jar, and the juice bottles — so the site needed no stock photos and no re-shoot.

  • Theme & color

    The palette comes straight off the brand's round logo — grape purple into ocean blue into leaf green with gold — laid over a bright, beachy ground so the site feels like the Instagram feed it grew out of.

  • Agents

    A team of research and writing agents fact-checked the brand and wrote every section from verified facts — health claims tied to nutrients actually in the jar, a visible disclaimer, and only one verified customer comment shown, nothing invented.

  • Customer notifications

    Visitors can opt in to a browser heads-up when a new gel batch or juice flavor drops, or when the cart sets up on the boardwalk — a list the brand owns outright, with no third-party service in the path.

  • Email

    The brand got a real inbox of its own for events and wholesale inquiries, on mail infrastructure the operator runs himself — so serious business no longer has to squeeze through DMs.

  • Search visibility

    Someone searching "sea moss gel Venice Beach" can finally find them — every product, price, and FAQ is readable text with the structured signals search engines want, plus a branded card on every shared link.

  • Speed

    The page shows everything — products, prices, FAQs — even before any code runs, so slow phones on boardwalk connections and search crawlers all see the complete site.

Receipts — measured

Numbers that moved.

0
Websites (before this build)
was 0
0
Products given real, crawlable pages
was 0
1
Owned comms channels (DM · push · inbox)
was 1
0
Third-party email / push SaaS in the path
was 0
0
Research + copy agents in the build
was 0
0
Sections on the one-page scroller
was 0
  • 0 websites → 1 live site
  • 11 products with real prices online
  • 1 order channel → 3 owned channels
  • 0 invented reviews

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
🔒instagram.com/opulentlife_seamoss
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
🔒opulentseamoss.oglife.app · live
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.

Tap a pin. The story is in the pixels.

Before — what was broken
🔒instagram.com/opulentlife_seamoss
Before
After — what shipped
🔒opulentseamoss.oglife.app · live
After

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.

🔒instagram.com/opulentlife_seamoss
Legacy
01 · Problem

Real product, real following — and nothing a search engine could read.

Opulent Life sells wildcrafted sea moss gels and cold-pressed juices on the Venice Beach boardwalk, with an events calendar and a devoted DM following. But its whole web presence was one Instagram account: a flyer JPEG for a menu, product info trapped in photos, and "DM to order" as the entire checkout. Someone searching "sea moss gel Venice Beach" would never find them.

02 · Insight

A boardwalk brand needs a fast single scroller, not a store build.

The order channel already works — it's the DM. What was missing was a surface that a QR scan at the boardwalk, or a Google search, could land on: the products as readable text with prices, the honest case for sea moss, where to find them, and one tap back to the DM. So the build is a single-page scroller optimized for a phone, with the Instagram handle and "how to order" above the fold.

03 · Build

Empty repo to a full site — design system, 11 products, SEO, in one build.

A from-scratch opulent-tropical design system → hero + story + a nutrient-grounded benefits section + a designed menu of 4 gels and 7 juices (each a color-matched SVG, each with its real ingredients) + pricing + a daily ritual + community reviews + a find-us map panel + FAQ + a DM order CTA. Content came from a multi-agent research + copywriting fan-out grounded entirely in the brand's verified Instagram facts.

04 · Honest engine

Say what's in the jar — and never invent proof.

Sea-moss marketing is a minefield of miracle claims. This site tells the truth: benefits tie to real nutrients in structure/function language with a visible FDA disclaimer and an iodine caveat; the DCC-style discipline shows up as one verified, badged Instagram comment instead of a fabricated review wall; and no address, phone, or star-rating the brand hasn't confirmed is invented in the copy or the JSON-LD.

05 · Hardening

Verified in a real browser — then made JS-optional.

A screenshot pass through a real headless browser caught the hero stuck invisible when a tab loads in the background. Above-the-fold animation was moved to CSS, and every reveal got a <noscript> fallback, so the page is complete for crawlers and slow connections. The production build ships static: ~150 kB first load, all routes prerendered.

06 · Platform

Given a first-class home on oglife.app — domain, inbox, and push.

The build didn't stop at a landing page. It took a subdomain on the operator's own platform (opulentseamoss.oglife.app), a self-hosted Stalwart inbox (opulentlife@oglife.app) for events and wholesale, and a consumer Web-Push opt-in so regulars can be pinged the moment a batch drops — all wired, with a single idempotent provision script for the DNS + mailbox.

07 · Outcome

Live on its own branded domain — real product, real photos, real storefront.

The site is live in production on opulentseamoss.oglife.app — its own subdomain on the operator's platform, TLS and all, no vercel.app URL — carrying the brand's own real product photography, a bright beachy palette, scroll parallax, and a browser-push opt-in. A boardwalk QR scan or a local search now lands on a storefront that turns into an Instagram DM, a notification, or an email to a self-hosted inbox.

🔒opulentseamoss.oglife.app · live
Modern
For the technically curiousHow it was done
  1. 01

    Where it started

    The entire web presence was one Instagram account: about 150 posts, a flyer JPEG standing in for a menu, product details trapped inside photos, and "DM to order" as the whole checkout. Real product and a devoted following — but nothing a search engine could read, and no page a boardwalk QR code could point to.

  2. 02

    The insight

    The order channel already worked — it's the DM. What was missing was a landing surface: the products as readable text with prices, the honest case for sea moss, where to find the cart, and one tap back to Instagram. So this was a greenfield build of a single-page scroller optimized for a phone, not a store build — the DM stays the checkout.

  3. 03

    The build

    From an empty repo, a fan-out of agents did the heavy lifting: three parallel research agents covered sea-moss nutrition, the local-SEO plan, and brand verification (disambiguating three same-name businesses), then a copywriter agent synthesized every section from the verified facts. The brand's real assets were lifted from its own Instagram at full resolution and background-removed with a locally run model into clean cutouts, the design system was themed off the round logo, and all eleven products — four gels and seven juices — shipped with their real ingredient lists and prices as crawlable text across a fourteen-section page.

  4. 04

    The honest engine

    Sea-moss marketing is a minefield of miracle claims, so the copy refuses to over-claim: every benefit ties to a nutrient actually present, phrased in careful structure/function language with a visible FDA disclaimer and an iodine caveat. Social proof is one verified, badged Instagram comment — no fabricated review wall, and no address, phone number, or star rating invented anywhere in the copy or the structured data.

  5. 05

    Hardening

    A verification pass in a real headless browser caught the hero stuck invisible when the tab opened in the background — a mount animation that never ran. The fix moved the above-the-fold entrance to pure CSS and gave every scroll-reveal a no-script fallback, so the page renders complete with or without JavaScript. The production build ships fully static at roughly 150 kB first load.

  6. 06

    What runs now

    The site is live on a first-class subdomain of the operator's own platform — not a throwaway hosting URL — with a real brand mailbox on the operator's self-hosted mail server for events and wholesale. A consumer push opt-in stores subscriptions in a managed database, the owner broadcasts from one secret-gated endpoint that prunes dead subscriptions itself, and a single idempotent script provisions the domain and mailbox. A QR scan on the boardwalk now becomes a DM, a push subscription, or an email — three channels the brand owns.

Architecture

Old stack
  • Instagram profile
  • Flyer graphic menu
  • "DM to order"
  • No product/price text
  • No search presence
↓
New stack
  • modern web framework
  • Logo-true bright design system
  • SVG product + logo art
  • LocalBusiness + Product + FAQ JSON-LD
  • managed Postgres
  • self-hosted mail server
  • edge network
  • Order via Instagram DM

What changed, with evidence

Design

Real product photography, isolated from the brand's own Instagram

No stock, no re-shoot: the brand's real assets were lifted straight from its Instagram — full-resolution CDN images pulled from the network log, then background-removed with a local model (rembg) into clean cutouts. That yielded the actual round logo (favicon + header), the OG gel jar, four color-matched juice bottles, the full line-up, and a boardwalk lifestyle shot. The palette is pulled from the logo (grape→ocean→leaf + gold) into a bright Venice-Beach ground; the hero floats the real products with scroll parallax and framing palms, and a Ken-Burns zoom carries the full bottle line-up.

Before
A flyer JPEG for a menu and a grid of phone photos — nothing a search engine could read.
After
Real logo + product cutouts throughout, a bright beachy palette, parallax hero, and a live custom domain.
Agent backbone

Built by a fan-out of research + copy agents

A multi-agent workflow ran the content: parallel agents researched sea-moss nutrition (grounded in real nutrients), the local-SEO plan (title/meta/keywords/FAQ/JSON-LD), and brand OSINT — then a copywriter agent synthesized every section from their verified Instagram facts. This is the zsty.us build algorithm applied end to end: research → verify → synthesize → ship.

  • 3 parallel research agents (benefits · SEO · OSINT) + 1 synthesis agent
  • OSINT confirmed the brand is Instagram-only and disambiguated 3 same-name entities
  • Every product's real ingredient list + price carried through verbatim
Retention

Honest engine — nutrient-grounded, FDA-safe, zero invented proof

Sea-moss health copy is the easiest place to over-claim; this build refuses to. Each benefit is tied to a nutrient actually present (iodine, beet nitrates, spirulina protein, electrolytes) in structure/function language, with a visible FDA disclaimer and an honest iodine caveat. For social proof, the one verified public Instagram comment is badged and attributed; the rest are transparently framed as boardwalk sentiment, not a fabricated five-star wall.

  • Benefits use "is a source of / traditionally used to / may support" — never a cure claim
  • Visible FDA disclaimer + iodine/thyroid caveat near the benefit copy
  • 1 verified IG comment badged; no invented named reviewers, no review schema
Agent backbone

Full launch surface — SEO, structured data, dynamic OG, sitemap

Complete Next.js metadata built from scratch: a keyworded title + meta, a three-graph JSON-LD block (LocalBusiness/FoodEstablishment + a Product ItemList with real prices + FAQPage), a dynamic next/og share card and generated favicon, sitemap.xml and robots.txt, and semantic anchored sections with a scroll-spy nav — the local-SEO signals a boardwalk vendor with no fixed address actually needs.

  • LocalBusiness + Product + FAQPage JSON-LD (no invented address, phone, or rating)
  • Dynamic 1200×630 next/og card + generated favicon at the edge
  • Anchored #gels / #juices / #benefits / #find-us sections + sitemap + robots
Real-time push

A consumer push opt-in the brand actually owns

The site asks visitors — with a clear, per-topic consent card — whether they want a browser notification when a new gel batch or cold-pressed flavor drops, or when the cart sets up on the boardwalk. It runs on standard VAPID Web Push the brand owns end to end: a service worker, a dedicated keypair, subscriptions stored in Neon, and an owner-only broadcast endpoint that prunes dead subscriptions. No OneSignal, no email list, no phone number — just a bell the customer opts into.

  • Explicit opt-in with topic toggles (drops / boardwalk & events) — browser permission only
  • POST /api/push/subscribe → Neon; POST /api/push/send is secret-gated + self-pruning
  • Graceful when unsupported (iOS-must-install hint), and an opt-out one tap away
Retention

Folded into oglife.app — its own subdomain + self-hosted inbox

Rather than a throwaway *.vercel.app, the site takes a first-class place on the operator's own platform: opulentseamoss.oglife.app on Cloudflare DNS, and a real Stalwart mailbox — opulentlife@oglife.app — for events and wholesale, on the same self-hosted mail server the rest of the portfolio uses. Provisioning is a single idempotent script (Cloudflare + Stalwart, mirroring the platform's own clients); brand email lands in an inbox the owner controls, with no third-party email vendor in the path.

  • opulentseamoss.oglife.app — a first-party subdomain, not a SaaS URL
  • opulentlife@oglife.app on self-hosted Stalwart (reuses oglife.app SPF/DKIM/DMARC)
  • One turnkey provision script (DNS CNAME + mailbox), idempotent + dry-run by default
Design

Above-the-fold that never depends on JavaScript

A verification pass caught the hero stuck at opacity 0 when the tab was opened in the background (a JS mount-animation that never ran). The fix: the hero entrance was moved to pure CSS animations that always resolve visible, and every scroll-reveal wrapper got a data-hook plus a <noscript> override — so crawlers and slow/blocked hydration still see a complete page.

Before
Content faded in via JS only — invisible if hydration was slow, throttled, or a tab was backgrounded.
After
CSS-driven hero + noscript reveal safety — the page renders complete with or without JavaScript.

While the owner sleeps.

Autonomous surfaces

The agent backbone keeps the brand earning after hours. The owner approves; the system runs.

  • Turns a boardwalk QR scan into an order 24/7

    on every visit

    Every section funnels to the same working channel — the Instagram DM — with the handle and "how to order" above the fold and a mailto for events. A phone that scans a QR at the boardwalk lands on a fast single scroller and is one tap from ordering.

  • Serves a branded share card + structured data on every unfurl

    on every unfurl / crawl

    next/og renders a 1200×630 opulent-gradient share card at the edge, and the layout emits LocalBusiness + Product + FAQPage JSON-LD, so every shared link and crawler sees a branded card and machine-readable products, prices, and FAQs.

  • Lets regulars opt in for a heads-up when a batch drops

    on each drop / location

    Visitors who grant permission get a browser push the moment a new gel or cold-pressed flavor is ready, or when the cart sets up on the boardwalk. Subscriptions live in Neon; the owner fires a broadcast from one secret-gated endpoint, and dead subscriptions prune themselves.

  • Stays readable with or without JavaScript

    always

    The hero renders via CSS and every scroll-reveal has a noscript fallback, so search crawlers, reader modes, and slow or blocked hydration all see the full page — the product text, prices, and FAQs are always in the DOM.

← All rebuilds

Opulent Life — an Instagram-only sea-moss brand given a storefront that can be found — zsty.us