[r/gnoland/home] Better CTA & content organization

[leohhhn]

Description

This issue is meant to start a discussion on what the gno.land home page is meant to showcase to anyone landing on it.

The main problem I see with the current home page is that the call to action is not clear and not prominent. What do we want to tell the users when they open up gno.land?

The home page should showcase a few main things, following a unified flow:

• What is gno.land?
• What is gno.land's main selling point - why should someone use gno.land? This segments into devs & non-devs
  • If you are a developer - why should you build on gno.land?
  • If you are a web3 user - why should you use apps built on gno.land, why should you participate in discussions?
• What are the main things happening in gno.land?
  • What ecosystem applications(user), libraries, frameworks (dev) are available for use?
  • What is new?
• What is my next step?
  • How do I interact with gno.land apps?
  • What resources and tools are available to aid development?

To answer this question, we need to think about a few things:

• Who are the users landing on our homepage?
• What do we want them to do next, depending on their profile?

Going back to the target group discussion, we have two primary groups of developers, and normal web3 users.

With the "Why Gno" article coming out, and the gnoweb revamp looming, I think this is the perfect timing to revamp the home page as well. I'm looking for opinions on content, and I can get started on the work quickly.

cc @alexiscolin @moul @thehowl

[moul]

Can you involve the marketing team so they can help, review, advise?

[Ticojohnny]

The tabs at the top-right of the page are amusing, but they don't seem particularly useful for most visitors. We're sacrificing prime real estate in the initial user flow. In my opinion, these tabs should read:

• Main
• Products
• For Developers
• Resources

I'll explain what I think each of these should contain, the current source/docs links could move to the bottom anchor.

Main
Everything in "Learn About gno.land" should be the primary focus of the homepage. It should be cleaned out and be very minimal.

Products
We should not avoid the fact that gno.land is targeted at developers. The homepage should reflect this, so this tab should provide direct links to all current "flagship" products. Each product should either have a detailed page explaining it or link directly to the GitHub README—or both. These include:

• Gno
• GnoVM
• gno.land
• gnobro
• gnoweb
• gnostudio
• portal loop
• etc.

For Developers
The "Build with Gno" section should probably be renamed For Developers and become the third tab.
Each link here should follow a clear and consistent naming approach, such as:
"Write Gno in the browser" → "Code with Gno"
"Visit the official documentation" → "Documentation"
"Gno By Example" → "Tutorials"

Alternatively, these links could lean into branding, for example:
"Write Gno in the browser" → play.gno.land
"Gno By Example" → gno by example
"Get Testnet GNOTS" → faucet hub

Resources
"Explore the universe" should probably be renamed Resources and link to third-party products and community resources, such as:
*Wallet
*Explorers
*Social links

Additional Notes

• Links must be functional and current. For example:
  • The Gno Playground paragraph is randomly floating in the middle of the page.
  • The Fund and Grants Program page needs significantly more details and a functional link.
  • Both these links lead to "Error: Not Found":
  • https://gno.land/r/demo/nft
  • https://gno.land/r/gnoland/dao
  • All /r/ sys realm links are broken.
• The Community Faucet link is misleading for non-technical users:
• https://gno.land/r/gnoland/faucet.
• All realms should move to the For Developers page, separate from the Main page. As admirable as the millipede art is, it does not provide much value on the home page.
• Duplicate links should be avoided. For instance, "Faucet Hub" and "Get Testnet Gnots" both lead to the same place, so we should consolidate them.
• If the tabs idea does not seem suiting, at the very least we should lock the anchor so that you don't have to scroll to the very bottom to see the Github and social links.

[leohhhn]

The tabs are there because of gnoweb. We can focus on the main content of the page; ie what you see under the search bar. This is what we can influence. A lot of things are broken, not needed, misleading, etc.

I can imagine the 4 categories you suggested as part of the main page content. Down the line, we hopefully have ways to create more than one column so we can organize data in a better manner (#3255)

[alexiscolin]

@leohhhn Here is a structure I think might works well because it’s simple and clear. It helps people visiting gno.land quickly understand what the platform is about and find what they’re looking for. It would be easy to highlight Gno’s unique features, show what’s happening in the ecosystem, and guide both developers and users to the right tools and resources.

1. Hero Section
   To create a strong first impression and encourage immediate action.

• Content: Brief introduction to gno.land with a high-impact tagline.
• Prominent CTAs targeting developers and users. I mean direct them to specific content page with dedicated content (they can understand and resonate with).

2. About gno.land
   To provide a concise overview of the platform’s purpose and core features, with a summary of what gno.land is and its mission. Include a link to learn more for curious visitors.

3. Features
   I like @Ticojohnny's idea of the products, but I would write "Features" instead. Here we could showcase flagship technologies, including Gno, GnoVM, gno.land, gnobro, gnoweb, etc.

4. Product (instead of resources, which I usually think of as docs):
   List the main products (browser tools, IDE, wallet, block explorers, etc.) with brief descriptions and direct links to detailed resources, documentation, or GitHub pages, plus a general CTA (to the ecosystem page).

5. Key Statistics

• Purpose: Build trust by highlighting ecosystem impact.
• Content: Showcase key metrics like active developers, dApps, transaction volume, or other relevant data (TBD).

6. Developer and Community Resources
   To provide a unified section for both developers and community users to access essential tools and resources. Include links to various docs, tutorials, testnet access, etc., along with clear CTAs encouraging users to explore tools or join the ecosystem.

7. Ecosystem Highlights
   Showcase activity and innovation in the ecosystem, including the latest blog posts and events, to keep users informed and engaged with dynamic content.

8. Social
   To provide essential links and maintain connectivity. As usual, include social media platforms and a newsletter subscription form.

[moul]

I suggest this approach for the new version of the home realm:

1. import r/events, r/awesomegno, r/...
2. use something like

var layout string = ```
# Welcome on gno.land

Intro paragraph

## Blog
:latest-blogposts:

## Events
:next-events:
```

func Render(_ string) string {
    r := strings.NewReplacer(
        ":latest-blogposts:", blog.LatestBlogpostBlock(),
        ":next-events:", events.NextEventsBlock(),
        ":awesome-gno:", awesomegno.RenderBlock(),
    )
    content := r.Replace(layout)
    return content
}

func UpdateLayout(newLayout string) {
    assertIsAdmin()
    layout = newLayout
}

[moul]

can be even more efficient with: #3710