Downloads Page - New

[kaleygel]

Project Overview

To support the launch of datum desktop in March, we'll need to have a page that highlights the main ways a user can interact with Datum.

Requirements:

• Surface download the macOS app, datumct, datum MCP
• code blocks within each section should have the ability to copy
• MacOS app should surface both homebrew and download as an installation method

Content

Build out of potential downloads page with content: https://id-preview--1e3f0394-a8ac-412c-8777-1c7c3c464a19.lovable.app/

A more simplified version: https://datumdownloads.lovable.app/

Examples

https://www.border0.com/download
https://ngrok.com/download/rust

[olliemiller]

Designs here:
Download -xl
Mobile -sm

I've worked with Matt on the structure and content of the side nav - this captures the options we'll have in place at the end of March.

Most of the components/patterns exist elsewhere too - which should make build and QA simpler. 🙂

To save a bit of time, I've not created states to show 'datumctl' or 'Datum MCP'. Nor have I created all breakpoints - just the ones with significant differences (eg the side nave switching to a dropdown menu on mobile)

@kaleygel @jacobsmith928 please review 🔍

[jacobsmith928]

@olliemiller i think we need to make this a bit more fun - the "install, run and share" language just doesn't get me going, nor does it speak to our overall value (just the desktop app). I was serious about "QUIC, get to the choppa!"

There is a lot of space between the mani navigation / header and the actual stuff we want people to use. Can we reduce and focus this on conversion?

The active state on the left could be bolder imho

[olliemiller]

@jacobsmith928 how about this:

• Tightened up the space between title and content but removing the supporting page blurb and changing the layout of the macOS section header to sit the logo and text side by side.
• Subtly brought forward the active state of the side menu - I cautious about stepping too far from the pattern we have in use on Docs / Handbook
• Changed title to "QUIC, get to the choppa!". I'm good with that - I initially went with with Kaleys title suggestion "install, run and share" because I assumed the QUIC referenced the desktop app. If you feel it's relevant for the devtools sections too then I think we're good.

Updated -xl
Updated -sm

[jacobsmith928]

Great @olliemiller - I think we have a bit more nuance to communicate on the macOS (and soon Linux and Windows) app, because it currently has a very particular purpose.

Maybe we can have a callout or description line on each download section to explain what it does for users?

macOS
Quickly and safely expose local environments to the internet, for free.

datumctl
Leverage the full power of Datum's k8s-inspired platform with a native CLI

etc

[kaleygel]

Thanks @olliemiller ! Dropped in some comments in figma. I too agree that there needs to be much more contrast on the active state. If we are stuck on dark mode, it might be a good place to infuse the neon color for contrast?

I am not convinced on the dark mode tbh - I think having a dark mode option (folks should be able to switch into it) is great, but I think our default really should be light mode. Can we explore a version that uses the grey background and the code module outlined - maybe look at the pricing page as a reference? https://www.datum.net/pricing/

[olliemiller]

As we talked about on slack - I've lifted the continuity constraints and have explored more creative solutions.

Two options (Jacob and I have a preference but I'll hold that info back for the time being - to allow @kaleygel an unbiased review 🙂)

Option 1 - inspired the Border0 pattern
Option 2 - an evolution of the first pass from yesterday, lighter, squarer and more refined

[kaleygel]

@felixwidjaja @ronggur @AriaEdo

We're moving forward with Option 2 design from the above and ready to move into dev!

Content for this is here.

Ask: Can you work on getting this into staging?

Note, it might be another day or so for code blocks to be finalized, so we can use placeholder copy for now.