CellFoam Platform Technology Brand Website
2025
BioChange is a biotech brand focused on veterinary regenerative medicine. At its core is CellFoam™, a gelatin foam scaffold platform technology, which branches into three product lines — MicroFoam™ (canine periodontal treatment), Vitaloc™ (hemostatic powder) and VetFoam™ (canine urinary incontinence) — backed by 21 granted patents.
The challenge here was not building another website, but building one that had to look nothing like the existing parent site. BioChange speaks to veterinarians about regenerative consumables for animal clinics — a different world from the parent company's medical aesthetics positioning. Reusing the parent's corporate navy would have diluted the brand outright.
Our approach: one codebase, two brand personalities. The CellFoam site shares the same Laravel + GraphQL backend and the same Astro project as the parent, while owning its own layout, palette and navigation. For the client, that means every future sub-brand costs one folder — not another website, another admin panel and another maintenance line item.
Shares one codebase with the parent site, yet carries a fully independent layout, palette and navigation. Visitors never sense the two brands are the same website
Uses a 3D scaffold diagram and segmented storytelling to turn an abstract idea — how a gelatin foam scaffold helps tissue repair itself — into clinical language veterinarians understand
A non-surgical canine periodontal product, broken down into a four-step illustration of the actual procedure — place 1mm subgingivally, hold for a few seconds — lowering the barrier to clinical adoption
A severe-bleeding control product, explaining how gelatin powder and cross-linking enzyme form a stable matrix on contact with blood, with a four-step application walkthrough
An endoscopically guided injectable scaffold for canine USMI, positioned around its minimally invasive nature — completing the third of the three product lines
Multi-layer filtering by city, district, keyword and product line with pagination. Each result opens directly in Google Maps, routing online traffic straight to offline clinics
Veterinarians submit clinic name, contact details and needs straight to the admin panel with a notification trigger, paired with a floating LINE consultation entry for a second conversion path
Structures the questions veterinarians most often raise before adopting a new technology — safety, biodegradability, indications, ease of use — serving both users and search engines
The CellFoam site is built with its own CellfoamLayout and a dedicated set of brand components, mounted under the parent site's /cellfoam route. Both brands share one backend, one deployment pipeline and one dependency tree, while their layouts, palettes, type scales and navigation stay fully separate. Adding a sub-brand site shrinks from a standalone project to the cost of a single folder.
The frontend is built on Astro 5 in server-side rendering mode (output: 'server'). Static content such as product storytelling and technical copy is assembled on the server, ensuring search crawlers and social previews receive complete content; interactive components hydrate selectively through Vue 3 Islands, keeping first-paint performance intact.
The partner clinic search is the heaviest component on the site (filtering, pagination, map links), so it mounts with client:visible — none of its JavaScript downloads until the visitor scrolls to it. The rest of the page stays zero-JS HTML, spending interaction budget precisely where interaction actually happens.
Clinic data is queried over GraphQL with multi-condition filtering and pagination. Notably, the query layer keeps a local copy of clinic and district data as a fallback: if the backend is temporarily unreachable, the frontend still renders a clinic list instead of a blank screen, so backend health never damages the brand's first impression.
The backend reuses the parent site's Filament panel. The brand team maintains partner clinics (type, VIP flag, sort order), district data and inquiry submissions without learning a second admin interface for the sub-brand.
The same codebase switches deployment target by environment variable: with IS_NETLIFY=true it builds through the Netlify adapter, otherwise it runs Node standalone under PM2 on our own server. The project stays free of platform lock-in — migrating or self-hosting later requires no application code changes.
The page ships Product, Brand and Organization JSON-LD, letting search engines correctly read BioChange as a brand and the CellFoam range as its products. Combined with full Open Graph metadata and bilingual routing, it covers both search presentation and social sharing.
CONTACT US
Whether it's a standalone sub-brand site, product technology storytelling, or one system powering many brand sites, we can craft a tailored solution for you.
Contact Us
