Landing pages flow & content

[fsdiogo]

Hey @ipfs-shipyard/gui!

As we talked in the GUI & In Web Browsers Sync, we need to define the flow and content of the landing pages for Companion.

Welcome Page

After the extension is installed, the user would be presented with a page that showed something like a thank you message for installing Companion, and also checked if a node is already running, giving simple instructions how to run one if not. We could have some links about the dweb and some IPFS resources.

I think a split screen layout would work great for this:

In the left side we would have the Companion related thank you message and node checks, in the right side we would have the links to resources or other apps.

The content is key and it will help with the design, so I'm asking you for some feedback about what should be present here.

References

• Issue Display a Landing Page on New Installs / Big Updates #324
• PR [WIP] Add landing pages #326

[lidel]

I like the split screen idea, looks different than usual landing page and keeps user engaged. 👍

Some Ideas for left pane

• Key feature: provide immediate feedback about connectivity status
  • If online, make it more engaging by displaying "Connected to N Peers" and the heartbeat animation
  • If offline, display two options: "Install go-ipfs" (in future we will replace this with "Install IPFS Desktop") or "Start Embedded JS-IPFS Node".
    • We may even automate it further so it automatically switches to embedded node if HTTP API is down
  • IPFS API (after init) can be accessed like this (we can expose other methods/plumbing this way as well):

    const ipfs = (await browser.runtime.getBackgroundPage()).ipfsCompanion.ipfs

• I wonder if we could re-use animation from https://ipfs.io 🤔 Thoughts?

Unsure where to put

• (Highlight) a button/link to "Share files via IPFS"
  • It is a good tool to play with after install, if we make it smooth experience it will get user hooked
• Other "killer apps": IPFS Files from new WebUI (IPFS Drive :P), PeerPad etc

Some ideas for content for the right pane

• [One good onboarding video, but for now it could be a talk about IPFS project]
• New to IPFS? Read IPFS Documentation to learn basic concepts and working with IPFS.
• Got questions? Visit Discussion and Support Forum
• Want to help? Join the IPFS Community!
• Links to Related Projects (could be displayed as stacked hexagons to make it more interesting):
  • https://libp2p.io
  • https://multiformats.io
  • https://ipld.io

[fsdiogo]

The ideas for the left pane sound pretty good. I think the animation from ipfs.io is far too soft, I bet it gets unnoticed by most of the people. I think if the IPFS logo gets the heartbeat animation it will be sufficient, I'll probably add that and see how it goes.

The right pane looks good too, I'll try find a way to make that look clean but attention drawing. As you said in another thread, less is more, we want to keep this page uncluttered but draw the user to learn more and follow some links.

Thanks for the feedback @lidel!

[lidel]

Released to beta channel v2.5.0.11550 🎊 🚀
Thanks @fsdiogo !