Redesign home page UI

[pierrephz]

Summary

New home page UI for better user experience

Screenshots

Changes

• UI layout
• Use TTUI for more consistency with our identity
• Add a Try it out section
• Rework the What's new in vX UI

Notes for Reviewers

@nejraselimovic @benolayinka ; to display new features on the homepage, please add the selected updates that need to be highlighted and add them on top of the markdown file in the right tags (see screenshot below)

Checklist

• Scope: The referenced issue is addressed, there are no unrelated changes.
• Run Locally: Verified that the docs build using make server, posted screenshots, verified external links. Test with HUGO_PARAMS_SEARCH_ENABLED=true if style changes will affect the search bar.
• New Features Marked: Documentation for new features is marked using the new-in-version shortcode, according to the guidelines in CONTRIBUTING.
• Style Guidelines: Documentation obeys style guidelines in CONTRIBUTING.
• Commits: Commit messages follow guidelines in CONTRIBUTING, there are no fixup commits left.

[mjamescompton]

@pierrephz Are you going to add the changes to the hackathon?

[pierrephz]

@mjamescompton I am going to update it with TTUI header and footer, then we can release

[KrishnaIyer]

Great @pierrephz and @mjamescompton; This will be super cool to have.

[pierrephz]

Latest changes have been done here, now @KrishnaIyer you can work on the search bar feature.
I had to replace auto generated links with static links, so someone needs to redo them

[mjamescompton]

There are a few open issues and discussions on the header which are now blocking this, shall we pull them all together and push to get this done

https://github.com/TheThingsIndustries/design/issues/128
https://github.com/TheThingsIndustries/thethingsindustries.com/issues/644
https://thethingsindustries.slack.com/archives/C04Q4Q0BTS7/p1688992309656839

cc @KrishnaIyer @kschiffer

[KrishnaIyer]

Yes that would be great. Thanks!

[mjamescompton]

I have reversed the changes to the header and footer as the conversation on the topic of the header is taking to long to resolve.

I created a new issue so that this get done @KrishnaIyer please keep track.
#1145

[mjamescompton]

@johanstokking Adding you on behalf of @KrishnaIyer to do a quick check

[johanstokking]

I'm trying to run this locally but can't make deps:

$ make deps
curl -o doc/data/frequency-plans.yml https://raw.githubusercontent.com/TheThingsNetwork/lorawan-frequency-plans/master/frequency-plans.yml
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 17586  100 17586    0     0  22450      0 --:--:-- --:--:-- --:--:-- 22546
go mod download
yarn --cwd doc
yarn install v1.22.19
warning ../../package.json: No license field
warning ../../../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error https://ttui.thethingsindustries.com/release/ttui-1.7.2.tar.gz: Integrity check failed for "@ttui/design" (computed integrity doesn't match our records, got "sha512-LOD8pj8CSk3PxO160FO/gSQM638GJwXOtNA3mLdwxf/TFqyAPHleJqeNfuJLxew6JZXsUyaelYjhz+m0p8OJmw== sha1-DlYojC9ehBSt3v2TrQOjeHGVzMM=")
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
make: *** [js.deps] Error 1

Anything I'm doing wrong?

Somehow it works in CI.

[kschiffer]

Try just make

EDIT: actually, try yarn cache clean, deleting yarn.lock and then make.

We've overwritten a previous TTUI release which is causing this issue.

[johanstokking]

Works now, thanks.

[pierrephz]

• I find the contrast of the tile backgrounds on the homepage too high. The light lines distract from reading the text

@johanstokking I did some UI fixes:

Tiles:

• Reduced the opacity of the background pattern
• Increased title font size
• Increased body text font size

→ Less distraction to read, more contrast and more impact

What's new section:

• Changed color theme from dark to light
• Increased title font size
• Increased body text font size of the items
• Removed the background pattern

→ Less distraction, better readability

–

• The "what's new" is about 3.26.0 while 3.26.2 is already in the changelog. Even though that may be tracked in Automate the documentation release process #1093, this should show the current version

@johanstokking I think the version number is already automated here

<p class="ttui-body fs-xl fw-bolder mb-cs-xl c-text-01">What's new in v{{- .Site.Params.version -}}</p>

If you pull master and rebase it should display the latest version of the docs.

The purpose of the issue #1093 is to automate the content of the what's new section; now on this new version of the home page, the highlighted new releases have to be added by hand (see screenshot below).

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

[johanstokking]

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

[pierrephz]

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

Then @mjamescompton or @ryaplots, could you have a look?

[ryaplots]

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

Then @mjamescompton or @ryaplots, could you have a look?

I am picking this up

[KrishnaIyer]

Looks great. Final couple of comments from me

1. In the current docs, we display the latest version number, on the right of the Logo. Do we not want this anymore?

2. The navigation items collapse on a laptop viewport. Should we fix this?

[pierrephz]

1. In the current docs, we display the latest version number, on the right of the Logo. Do we not want this anymore?

We removed the version number in the header to have it on the page only and save some space in the header

2. The navigation items collapse on a laptop viewport. Should we fix this?

@mjamescompton fixed the breakpoints so the header doesn't collapse on regular laptop screen anymore

[KrishnaIyer]

Ok thanks. This looks beautiful. @pierrephz great work.

@johanstokking; the final blessing please.

[johanstokking]

Awesome people, this is very good work.

[KrishnaIyer]

I think @nejraselimovic's comment is addressed to I'm merging this.