More info to main page

[ai]

Main page looks really awesome. But it is not really informational.

What questions visitor will have:

1. What is this site about?
2. What is postcss-preset-env?
3. Why should I use it?
4. Is it small “indie” tool or everyone is using it.

If we will answer this questions on the main page, it will improve conversion.

[jonathantneal]

These all seem like good ideas. Open to a PR. I have trouble marketing my own stuff.

[ai]

Sure. I will send people from Cult of Martians.

[severin-d]

Created draft version. I'm afraid that it's still not enough informative.

Any requests or remarks?

[ai]

@severin-d can you show a screenshot?

[severin-d]

@ai Here it is

Headings on screenshot looks more bolder, than there are in reality.

[ai]

1. It is not a project of Evil Martian ;). You can remove the name from the footer.
2. Header gradient has no purpose. It is better to use top space for some purpose.
3. The code example is the most important part. You put it in the middle of the page.
4. It will be better to start by understanding how to convince people to use the tool. What is the most important information? Not from visual design.

[severin-d]

@ai Roger that. Will fix it soon.

Can you suggest some information blocks?

[severin-d]

Updated hero block design and repainted some elements. Will add more info soon

You can find screenshot here

[ai]

1. If we will have a header, it will be better to use the same header as in features pages
2. node use cases are extremely rare (and a developer will know how to use PostCSS). It will be better if we will tell how to add the plugin to PostCSS config.
3. Dark color under header doesn’t look good (compare to the current page).
4. Stages section doesn’t explain why it is important.
5. I think we can remove Flexible plugin system. I don't see how it could convince people.

[severin-d]

I get over it.
https://screenshots.firefox.com/vyIKEH8iZiLJeamL/127.0.0.1

[ai]

1. At Getting Started you posted not a config ;). Let’s add switcher Webpack / CLI / Gulp. Then we will recommend even to install postcss-loader, etc. Then you need to tell to create postcss.config.js (here is docs about config).
2. Maybe we should add the gradient for all header with input/output example?

[severin-d]

updated

[ai]

1. You must show postcss.config.js example.
2. And add code highlight.
3. Why text in header are moved?

[severin-d]

I think it would be nice if links to GitHub and npm repos were in header section. What do you think about it? btw, I have no ideas about footer, any suggestions?

[ai]

Perfect 😍

Let’s wait for @jonathantneal review. His experience in promoting his plugin is much better than our :D.