Portfolio / Platform and lead capture
A commodity desk that quotes without a call.
XRT Group sources and moves crude, EN 590 diesel, jet fuel, grains, USDA Kosher and Halal beef, and palm, soy and sunflower oils out of Houston, with desks in Rotterdam and Singapore. Their buyer is a procurement director evaluating a new counterparty at eleven at night, and they are not picking up a phone to ask about a grade. We built the surface that answers that evaluation: 19 product pages with full specification, an RFQ form that arrives pre-filled with the product being read, and 22 articles that answer what that buyer searches for before they know XRT exists.
01The brief
Brokering happens on the phone. The vetting doesn't.
Commodity trade still closes by voice: a broker knows another broker, a cargo changes hands, and every link takes its differential. What changed is not the close — it is everything before it. Long before anyone takes a call, a procurement director has already decided whether the call is worth taking, and that decision is made by reading.
XRT Group arrived with a clear proposition — direct origin, no intermediaries, third-party inspection on every lot — and a site that could not hold up under that reading. The brief was to build the surface where the vetting happens: a catalog with real specification, a contact path that does not start from zero, and content that reaches the search before the brand does.
What the business already had
- 01Desks in Houston, Rotterdam and Singapore
- 02Five pillars: energy, grains, oils, proteins and freight
- 03Inspection through SGS, Bureau Veritas and Intertek
- 04Contracts under GAFTA and FOSFA
- 05USDA beef with Kosher and Halal certification
- 06FATF AML, OFAC, C-TPAT and AEO compliance
Our role
Design system, full-stack development in Next.js, RFQ capture architecture, DNS migration and security perimeter, corporate and transactional email configuration, technical SEO/GEO/AEO audit, and production of the editorial content.
02The diagnosis
Three things keeping the site from being found.
The technical audit did not measure design opinion. It measured whether a search engine — or an AI answer engine — could read the site, understand it and cite it. Six blockers came out; these three explain the rest.
Nineteen products on one URL.
The whole catalog lived on a single page with anchor links. A buyer searching “ULSD EN 590 10 ppm FOB” needs a URL that is about that and nothing else; with anchors there is no page to index, no title to win and no spec sheet to quote.
No sitemap, no robots, no schema.
There was no sitemap.xml or robots.txt, the dynamic blog route did not exist, and not one line of JSON-LD. A site without structured data is readable to a person and invisible to the system deciding what to show that person.
WordPress URLs with no redirect.
The previous site ran on WordPress and its URLs were still cited elsewhere. Without 301s to the new routes, every inherited link landed on a 404 — and a 404 does more than lose the visit: it reports that the domain broke.
03The rule
The decision everything else followed.
One URL per product. One source of truth.
Splitting a catalog into individual pages is easy to say and expensive to maintain: nineteen spec sheets are nineteen places where a grade, an INCOTERM or a minimum volume can drift apart. So the migration to /products/[slug] shipped with the condition that makes it sustainable: a single file, products.ts, feeding the spec sheet, the catalog table, the JSON-LD and the fields that pre-fill the form.
That turns an SEO fix into an architecture decision. Changing palm's minimum from 2,000 to 3,000 MT happens once and propagates to the table, the page, the schema and the RFQ. The alternative — four places and a list of pending edits — is exactly how a catalog starts to lie.
One URLOne fileZero copies
04Art direction
Two registers, because there are two readers.
The reference was not a freight company. It was a financial terminal: crimson on black, condensed caps, the density of an institutional dashboard. That is the language of the working surface — the catalog, the product sheet, the service directory, the intelligence hub — and it is black on purpose, because whoever is there is already comparing grades.
But no visitor lands there first. They land on the homepage, and whoever lands there does not yet know whether XRT is real. So the homepage inverts the system: light ground, field and refinery photography, prose set in Inter, generous buttons. The same brand in two registers — one to persuade and one to operate — with crimson as the only element that crosses between them.
System principles
- 01Crimson only where something is actionable
- 02Barlow Condensed Black in caps for headlines
- 03Archivo Narrow on every specification table
- 04No low-opacity text on black
- 05Live price ticker as a permanent header
- 06Codes stay visible: ENE, AGR, OIL, LOG, PRT
Where the system lives
There is no separate brand manual: the palette and the type shipped as Tailwind v4 tokens (--color-xrt-*, --font-barlow, --font-archivo) inside the repository itself. The design system and the code are the same file.
05Visual system
Black holds the ground. Crimson only acts.
Action: buttons, spec links, states
- HEX
- #C8111F
- RGB
- 200 · 17 · 31
Pressed state and action borders
- HEX
- #9E0012
- RGB
- 158 · 0 · 18
Ground of the working surface
- HEX
- #111111
- RGB
- 17 · 17 · 17
Rare accent: consultation and seals
- HEX
- #C8973A
- RGB
- 200 · 151 · 58
Homepage ground and text on black
- HEX
- #FCF9F8
- RGB
- 252 · 249 · 248
Table hairlines and band separation
- HEX
- #E5E2E1
- RGB
- 229 · 226 · 225
06Typography
One that shouts, one that reads, one that fits.
Barlow Condensed
Aa Bb Cc — 0123456789
SemiBold 600 · Bold 700 · Black 900
Inter
Aa Bb Cc — 0123456789
Regular 400 · Medium 500 · SemiBold 600
Archivo Narrow
Aa Bb Cc — 0123456789
Regular 400 · SemiBold 600 · Bold 700
Ultra-Low Sulfur Diesel (ULSD)
clamp(40–72) · 0.5% · 900 · capsCompliance & Certification Matrix
clamp(28–44) · 0.5% · 900 · capsAutomated Routing Protocol
clamp(20–28) · 1% · 700 · capsXRT Group connects fuel networks, commercial fleets, and food distributors with direct-origin supply lines.
16 / 27 · 0 · 40010 ppm Sulfur / EN 590 · 3,000 MT · Platts ULSD · Intertek
13 / 18 · 6% · 600 · caps07Lead capture
The RFQ starts full, not blank.
A commodity quote request asks for legal entity, product, grade, volume, unit, ports, delivery window and INCOTERM. Asking all of that from someone who was reading a spec sheet loses them. The architecture solves it the other way around: whatever the page already knows, the page writes.
Next.js · App Router
Site and product routesproducts.ts
Single source of specificationCloudflare
WAF, bots and rate limiting/api/rfq
Verification and writeSupabase
rfq_submissions with RLSMailgun · M365
Notice to the right desk
- 01
The spec sheet introduces itself
Every product's side panel arrives with the name, the code (ENE-003), the grade, the benchmark, the origin and the minimum volume already written. What is left to fill in is three fields: entity, email and volume.
- 02
The navigator keeps the context
Whoever enters through Services answers three questions — what they trade, what they need to do, what they prioritize — and the system highlights the modules that apply. Open the RFQ drawer and those modules are already there as pills.
- 03
The perimeter filters before the code does
The domain moved from Hostinger to Cloudflare for exactly this: WAF at Medium, Bot Fight Mode, and a rate-limiting rule on /api/rfq. The invisible captcha is verified server-side before anything touches the database.
- 04
A row is written, not an email
The endpoint writes to Supabase's rfq_submissions table — entity, commodity, volume, services array, status — under Row Level Security policies. The request exists as data before it exists as a notification.
- 05
It routes to the right desk
The commodity category decides the destination: energy@xrtgroup.com for crude, diesel and jet fuel; agro@xrtgroup.com for grains and beef; oils@xrtgroup.com for oils; logistics@xrtgroup.com for freight. Nobody forwards anything by hand.
- 06
The site says what happens next
The RFQ screen publishes the response ladder: 0–4 hours for KYC pre-screening and desk confirmation, 4–24 hours for the preliminary indication, 24–72 hours for the full offer with inspection terms, T+4 days for the letter of credit.
5 pillars · 19 spec sheets · 4 desks · Houston · Rotterdam · Singapore
08The work
What is published.
Figures from the deliverable, counted from the outside: the xrtgroup.com sitemap was walked URL by URL on 25 August 2026 and all 48 return 200.
- 48
- URLs in the sitemap, all serving 200
- 19
- Product spec sheets with their own page
- 22
- Articles published in the intelligence hub
- 6
- Service modules with a code and a sheet
09SEO · GEO · AEO
Written for Google, and for whatever answers for it.
The commodity buyer does not always arrive through a blue link any more: they ask Perplexity, ChatGPT Search or Gemini and get a synthesized answer with two or three sources. A site that wants to be one of those sources has to be written to be quoted, not only to be ranked.
Schema on every template.
Organization and WebSite at the root; CollectionPage plus a Product for every spec sheet in the catalog; a Service per module with HowTo and FAQPage on services; Article and FAQPage on every post; BreadcrumbList throughout. Verified template by template in production.
Specification level, not overview level.
The content standard is INCOTERMS 2020, SGS inspection reports, Platts, CBOT and BMD benchmarks, RSPO and EUDR compliance. A generic industry overview does not get cited; a table with the differential and who publishes it does.
Every article carries its own FAQ.
Consistent H2/H3 hierarchy, comparison tables, and a question-and-answer section drawn from the same text that feeds the JSON-LD. It is the shape an answer engine can lift whole without rewriting it.
10The pieces
The site in production, as it is walked.
Fuels, protein, production oils and seed oils, each with its own condensed specification and its own CTA. The homepage does not sell “commodities”: it sells four different conversations.
Four steps and one promise: a single desk answers for the whole operation. It is the category's central objection — how many intermediaries are behind this — answered in the first scroll.
Grade, origin, INCOTERMS, minimum volume, benchmark and inspector, one row per product. Archivo Narrow exists in this project precisely so that row fits without breaking.
One URL per product, with the RFQ pinned alongside and the context already written into the notes. The buyer never retypes what the page already knows.
Three questions — what you trade, what you need to do, what you prioritize — and the directory lights up the modules that apply. A service catalog stops being a list and becomes a filter.
S-001 through S-006, with a code, a status, the protocols governing them and their own quote button. The operational figures are the client's; the format is what makes them read as infrastructure rather than brochure.
Four numbered blocks — counterparty, specification, trade terms, requirements — with each desk's address and the response ladder alongside. Whoever submits knows what happens next, and when.
AML/KYC, OFAC, EU 5AMLD, C-TPAT, AEO, ISO 9001, GAFTA and FOSFA, each with its governing body, its status and what it means operationally. In this category, compliance is product.
A featured dispatch over a grid, each item carrying its category, date, signing desk and read time. The blog is not there to have a blog: it is there so the answer an AI gives about INCOTERMS comes from here.
Sugar, grains and soft commodities as a secondary network, written as what they are: capacity on request, not a headline line. Saying it that way avoids a promise someone later has to keep.
One full-bleed band at the end of the page with two exits: open the RFQ or read about the house. No third option competing for the click.
The price ticker stays above the navigation on mobile too: it is the signal that there is a desk watching the market on the other side, and it fits in the strip where it does not get in the way.
11The result
The site can now be audited from outside.
xrtgroup.com runs in production on Next.js with the App Router, Tailwind v4 and Payload, served from a Hostinger VPS behind Cloudflare. All 48 sitemap URLs return 200 — 7 core pages, 19 product sheets and 22 articles — robots.txt declares the sitemap and blocks the API route, and the JSON-LD is deployed across every template.
What comes next is written and prioritized: holding the fortnightly editorial cadence, sustaining the RFQ response ladder now that the form takes real traffic, and reviewing the 301s for the inherited WordPress URLs as they surface in Search Console. The project is in active execution, and this page gets updated when those pieces move.
How it is built
- 01Next.js App Router · Tailwind CSS v4 · Turbopack
- 02Payload on the same Next.js runtime
- 03Hostinger VPS · repository on GitHub
- 04Cloudflare: DNS, WAF, bots and rate limit on /api/rfq
- 05Supabase (PostgreSQL) with Row Level Security
- 06Microsoft 365 with SPF, DKIM and autodiscover kept DNS Only
- 07Mailgun on a dedicated subdomain for transactional mail
- 08Mailchimp with its own DKIM keys, no conflict with M365
What this case does not claim
There are no traffic, conversion or ranking figures: the project is still in execution and those do not exist measurably yet. The operational numbers shown on the site — corridors covered, carrier nodes, registered suppliers — belong to the client and describe their operation, not our result.
More of the work
If your buyer vets you before they write to you, your site is the interview.
Commodities, heavy industry, technical B2B services: when the purchase is decided by reading, published specification is worth more than any sales argument. And it only works when it comes from a single source.
Tell us about your project