InnovaGroup
Back to InnovaWorks
SharePoint · SPFx · ReactDesign Showcase

A modern intranet homepage, built as a full-page SPFx web part.

Branded landing page for a renewable energy operator — quick access, department hubs, safety alerts, live site presence, a document library and an in-page assistant. One React component set, custom SCSS design tokens, light and dark themes, responsive to phone.

SPFxReact + TypeScriptSCSS design tokensMicrosoft GraphPnPjsLight / dark themingResponsive
Desktop— open it and the build responds
Responsive— the same page on a phone
Hero and quick access
Departments and forms
Panels and news
Dark theme
Theming— one component set, two themes
light
dark
Behind it— how the page is put together
01

Rendered as a single full-page SPFx web part rather than a stack of stock SharePoint parts, so the whole page is one coherent layout instead of a grid of boxes.

02

Every colour, radius and spacing value comes from a SCSS design token layer — which is what makes the light and dark themes a single switch rather than two stylesheets.

03

Quick access tiles, department hubs and the forms library are all data-driven, so the page changes with the lists behind it and never needs re-deploying.

04

The layout collapses to a single column on phone, keeping the same components rather than serving a cut-down mobile page.

Halbeck Energy is a fictional company. All branding, imagery and content were created for demonstration purposes — client intranets aren't ours to publish, so we built our own to show the work.

Want something like this for your business?

Every piece here started from how the work actually happens, then got built around it — an intranet homepage where that fits, a standalone application where it doesn't. That's the same way we'd approach yours.