Oracle FM Website
Corporate website for a tech-enabled, multi-disciplinary FM contractor—from discovery to launch
Discovery to Launch: One Contractor, Multiple Disciplines, Zero Downtime
Oracle FM needed a modern, content-driven website to serve enterprise clients, showcase services and sectors, support lead generation, and give content teams the ability to update copy and structure without developer dependency. The solution combined a Next.js front end, a Git-based CMS with GitHub as the source of truth, and Netlify for hosting and previews—enabling both terminal-based development and editor-friendly content workflows from a single codebase.
GitHub as CMS
Content in repo with PR-based workflow; editors use CMS UI that writes via GitHub API. Single source of truth and full history.
Oracle Assistant & AI Omnibox
Site-wide AI assistant (Google Generative AI) plus command palette for search, questions, tools, and quick actions in one surface.
Netlify + Next.js
Static/SSG with API routes for forms and CMS write-back; Netlify for Git integration, serverless/edge, and preview deploys.
Discovery & Goals
Brand & positioning
Present Oracle FM as “one contractor, multiple disciplines—zero downtime,” trusted by global workplace providers for compliance, maintenance, projects, and building safety.
Audience
Enterprise clients (CBRE, JLL, Rendall & Rittner, NHS Estates), facilities managers, and procurement leads seeking compliance visibility and project delivery.
Conversion
Drive demo requests, resource downloads (e.g. “Facilities Manager’s 2026 Compliance Pack”), and contact enquiries.
Differentiation
Highlight the AI Compliance Portal (live dashboards, predictive alerts, automated reporting) and the in-site Oracle Assistant for instant, context-aware answers.
Strategy & Architecture
Content model
- •Site-wide:
content/site.json— name, description, siteUrl, nav, OG image, organisation schema, AI Compliance Portal copy. - •Page-level: One JSON per page (e.g. homepage, about, services) with hero, CTAs, section copy.
- •Page structure:
content/page-components.json— ordered component instances per page for non-developer reordering. - •Blog: Markdown in
content/blog/with frontmatter, validated via Zod.
GitHub as CMS
Editors needed to edit content without touching code; PR-based workflow and preview deploys were required for review before publish.
Content lives in the same repo. Developer workflow: edit in IDE, validate, commit, push; Netlify builds. Editor workflow: CMS UI reads/writes via app APIs using GitHub API; edits create a branch and open a PR. Review and merge in GitHub; Netlify deploys from main.
Development Phases
Goals, audience, content structure
Brand positioning, conversion goals, content types (marketing, verticals, resources, product, legal). Technical constraints: CMS without code, static/SSG, Netlify, Next.js + HeroUI + Tailwind.
Content model & CMS
JSON + page-components model; GitHub as CMS with branch/PR workflow; sync scripts for developers.
Design system & key features
HeroUI v2, Tailwind, Framer Motion. Oracle Assistant, command menu, responsive layout, page builder pattern. AI tools and AI omnibox design.
Implementation
PageComponentRenderer, CMS APIs, forms/booking with Netlify DB (Neon), Resend, Google Generative AI for assistant.
Authoring and validation
CMS authoring with pre-save Zod validation; pre-push validate:content; full route and form testing.
Go-live & post-launch
Push to main → Netlify build → publish. DNS to Netlify. Post-launch: sync workflow for devs, PR workflow for editors, build control via netlify-ignore.
Key Features: AI Tools & AI Omnibox
AI-powered tools
The site ships AI-powered tools for facilities managers: Fire Risk Estimator, Fire Alarm System Sizer, Waking Watch Calculator, PPM Cost Calculator, BSR Readiness Checker, Image Upload Compliance Check. Tool definitions live in content/aitools.json. Users can run tools from the AI Tools hub or inside the AI omnibox without leaving the modal.
AI omnibox (command menu)
Single global bar (⌘K / Ctrl+K or navbar icon): search the site, ask the Oracle Assistant, run a tool, or complete a quick action. Single input supports navigation/search, conversational queries (routed to /api/assistant), and calculation intent. Quick actions (Book a Survey, Request a Demo, Download Compliance Pack, etc.) open forms inline. Prompt chips and suggestion chips guide users. Tool runner and result panel live inside the same modal.
Content flexibility vs. safety
Editors need to reorder sections and edit copy without full redeploys or breaking the site.
Page-component JSON plus Zod validation on save and pre-push. CMS edits create a PR; invalid content never gets committed. Single source of truth in the repo.
Technology Stack
Framework & UI
- Next.js 15 (Pages Router)
- TypeScript
- HeroUI v2
- Tailwind CSS 4
- Framer Motion
- next-themes
Content & CMS
- JSON + Markdown in repo
- GitHub API for CMS writes
- Zod validation
- page-components.json
Backend & hosting
- Netlify
- Netlify DB (Neon Postgres)
- API routes (forms, booking, CMS)
Integrations
- NextAuth (CMS/admin)
- Resend (email)
- Google Generative AI (Oracle Assistant)
Scripts & Workflows
npm run sync— Fetch origin, pull main when worktree cleannpm run validate:content— Validate all content JSON and blog frontmatter (Zod)npm run db:migrate— Run Neon/Postgres migrationsnpm run build— Next.js production build (Netlify)
Technical Challenges & Solutions
Two workflows, one source of truth
Terminal-based development and CMS-based content updates coexist: developers sync and validate; editors edit via CMS → branch + PR → review → merge. Single repo, full history, no staging content store.
Intent in one input
Omnibox unifies search, assistant questions, tool execution, and quick actions. Intent detection routes natural language to the right handler (answer, tool, or action) so users don’t need separate entry points.
Outcomes & Takeaways
Single repo
Two workflows
Dev + editor workflows with one source of truth and clear sync steps
Content as data
Page builder
JSON + page-components enable flexible composition and schema-validated updates
Launch ready
Validation & PR
Zod validation and PR-based content review for repeatable launch path
Differentiation
AI front & centre
Oracle Assistant and AI Compliance Portal embedded from hero to dedicated pages
The Oracle FM website delivers a modern, content-driven experience that serves enterprise clients, supports lead generation, and gives content teams the ability to update copy and structure without developer dependency. GitHub as CMS, Netlify, and the AI omnibox provide a repeatable path from discovery to launch and ongoing iteration.
Experience the site
Visit the live website to see the Oracle Assistant, AI tools, command menu, and content-driven structure in action.
Visit oraclefm.com