← Open the working homepage

TEAMSOFFSHORE / HOMEPAGE DIRECTION

Make the next conversation
easy to start.

A clearer path from “what can I hand over?” to the right support. The navy and warm peach direction gives the three services a shared identity, while service-specific links carry a visitor's choice straight into their enquiry.

Try the working concept ↗Download views, source & handoff ↓

One clear next step

The navigation and hero keep “Find your support” visible at laptop size. Secondary links invite visitors to explore the service that fits their workload.

A useful interaction

Choosing a service pre-fills the enquiry. Timing, capacity and priorities turn that interest into a conversation with context.

Easy to maintain

All copy remains editable text. The illustration uses CSS and text; there are no image-based headlines, external fonts or large hero downloads.

Desktop · 1440 px

Brand style sheet

A proposed homepage direction, ready to refine with the team.

Navy
#15334D · CTAs / feature block

Ink
#162D43 · headings / text

Slate
#526477 · supporting copy

Warm peach
#FFC2A3 · accents

Paper
#FFFDF8 · background

Typography

A bigger team.
A lighter workload.

Arial / Helvetica / sans-serif. Clear, editable typography with a familiar rhythm.

  • Desktop hero: 81 px / 1.02; mobile: 62 px / 1.02.
  • Section title: 44 px / 1.12; mobile: 35 px.
  • Supporting copy: 12–15 px / 1.6.
  • Short uppercase labels distinguish the three service paths.

Buttons & iconography

Find your support ↗

Primary buttons use white text on navy with a 4 px corner radius. Text links keep the action prominent without competing with the primary step.

Direction arrows, simple check marks and 01 / 02 / 03 service markers form the icon system. The hero's capacity illustration stays editable in HTML and CSS.

Keyboard focus receives a visible outline. Reduced-motion preferences remove smooth scrolling.

Handoff notes

Page structure

Header → hero and service shortcuts → working principles → service cards → three-step process → enquiry → about → footer.

The layout uses two main breakpoints at 1050 px and 650 px, with fluid widths between them. The header becomes a menu button on smaller screens.

Interaction

The six service links pre-select a service. The enquiry produces a plain-text summary of service, capacity, timing and priorities; editing a field clears the old preview.

Implementation on the current site

The current site uses Wix. The source and tokens provide the implementation reference: map each section to a Wix section, retain native editable text, and connect the approved enquiry to Wix Forms. The existing appointment route can remain the secondary contact option.

The supplied demo previews an enquiry locally. Connecting the live form, setting the recipient and confirming the final copy are part of the implementation handoff.

Included files

Responsive HTML/CSS/JavaScript, desktop/tablet/mobile PNG views, this style sheet and detailed handoff notes. Open index.html to preview; no build process is required.

Concept by Severian Roth for TeamsOffshore. Service names and business context come from TeamsOffshore's published website. The proposed layout, illustration and copy hierarchy are original.