Four directions for the new TPN homepage
Each page is a complete, live homepage mockup with real copy from the research: the same sections and facts, dressed in four different visual worlds. They're designed on a 1440 px grid and adapt down to tablet and phone; detailed phone design comes once a direction is chosen.
4-page site: Home · Network · About · NewsEmail contact in the navWordPress + Elementor 4
The directions
Every hero tells the same story, the network across the Pacific, in its own style; two of them are live Three.js scenes. All maps are flat and Pacific-centred, so every landing point stays readable, unlike a globe where the ends of the routes disappear over the edge.
What every direction shares
The same content and information architecture, so the choice is purely about look, feel and tone.
Homepage sections
- Header: Home · Network · About · News · email address; condenses on scroll
- Hero: “An undersea network directly connecting Asia to the US”, the shared subline and one button: Explore the network
- Facts: 39,000+ km · 4 fibre pairs · 8 markets · 2026
- About teaser
- Network teaser: Echo, Tabua and Topaz specs in the same five rows, with a map where the hero doesn’t already show one (Open Horizon shows the map alone)
- Key partners & consultants (logo, name, role for each)
- TPN in the news: 3 items plus View all
- From LinkedIn: 3 posts plus View all
- Footer: the four main pages, head office and contact
Questions for TPN
Needed before build. For now the mockups use TPN’s current wording for each of these.
Network facts
- Topaz length: the mockups show about 10,000 km as a placeholder. What is the confirmed figure?
- Tabua wording: “owns one fibre pair” or “holds an IRU on one pair”?
- Sydney landing name: Boora Point (TPN map) or Maroubra (press)?
- Measured or design latency for the key city pairs
- Product list: wave rates, spectrum units, terms
Company
- Founding year: 2016 or 2019?
- Real photography: cable ships, landings, NOC, team portraits. Current images are AI-generated.