Home Page

[thescientist13]

Overview

As part of the website redesign, we will want to re-think the home page in terms of the story that it can tell about Greenwood and its philosophies. Taking a "show" don't tell approach, I would like to highlight usage of Greenwood, as a way to emphasize and demonstrate how much we love web standards. Aside from the traditional hero banner / CTA section, the next section I would like to focus on is a narrative driven walk-through of Greenwood highlighting features like hybrid routing / rendering, API endpoints, SSR w/ Web Components, etc.

From there, we can have feature bullets and links to explore further. And, if possible, end it all with a nice showcase of Greenwood projects demonstrating things like serverless adapters, htmx, and general community focused integrations.
Mockup

Hero

Would obviously like to have a nice pull quote and nice image, but not sure what to put or what to show off?

Current copy is

Your full-stack workbench for the web
Greenwood embraces web standards to keep the focus on your work, not the framework. It's web dev refreshed!

For some pull quotes, some thoughts are:

• The Full-Stack Web is here
• Stop using some body else’s API
• Completely independent / vendor less
• Building the web from front to back
• The evergreen web framework

Zero-To-Hero Walkthrough

Would like to showcase going from static to dynamic with Greenwood across a good cross section of the feature set, kind of like the Vercel mantra Deploy, Preview, Ship.

So thinking we could highlight these features to "build" a feature?

1. Starting with HTML
2. SSR pages
3. API Endpoints
4. Web Components

Then... deploy! 🚀

Feature Bullets

• HTML first
• Bundleless development
• SSR, SPA, SSG, etc
• Content as Data
• Static Asset Bundling
• Real, Full-Stack (isomorphic) Web Components (WCC)
• File Based Routing

Community Showcase

Some examples that could help demonstrate some "social proof" could be:

• htmx + serverless - https://github.com/thescientist13/greenwood-htmx
• Lit SSR + serverless (WIP) - https://github.com/thescientist13/greenwood-demo-adapter-vercel-lit
• Something with Tailwind - https://github.com/AnalogStudiosRI/www.blissfestri.com
• TypeScript - https://github.com/AnalogStudiosRI/www.analogstudios.net
• Hackernews (TODO)
• Movies App? (TODO)

---

Content Status

1. Hero
   • headline / pull quote
   • image
   • CTAs
2. Walkthrough
   • steps to success and copy
   • how to demonstrate (images)
3. Features
   • how to present
   • what to say
4. Showcase
   • project types

[thescientist13]

Got a home page preview going here
https://deploy-preview-18--super-tapioca-5987ce.netlify.app/

Would still like to refine the code walk through example but I'm digging it so far.

[Auhseh]

Hello Owen,
Here’s my contribution. Will update this file with future progress

P.s I see your vision now 😄, Geist is 🔥

https://www.figma.com/file/ePhyD5qNMrBAcHwQ08BnQC/GreenWood?type=design&node-id=113%3A740&mode=design&t=400dqKMaa6XxjPvW-1

[thescientist13]

Wanted to present you this take on the home page I have been thinking of the past week in terms of content and content section, to see what you think. Obviously this is somewhat hacked together but should provide a good reference. I'm really like the shape of this one in particular. (styleguide TBD)

Also, might be good to make the build and deploy providers logos a bit bigger so they really catch your eye on the way down. Eventually the hope is to support AWS and Cloudflare which will have nice bright logos! ✨

General notes and thoughts guiding me to this

• Let's make sure we can try and link out to a guide or doc for most features and examples (this would be good to help encourage people to prob the website past just the home page). Mostly on me to make the content to link to, but let's explore adding more "CTA"s like learn more, see a demo, etc in strategic areas of the content.
• Rename The web has evolved... to -> Why Greenwood?
• Rename Build and deploy... to -> Run anywhere the web can run
• Added a Build with "friends" section to show off ecosystem compat (open to better heading wording here)

[thescientist13]

This will also be good motivation for us to test out Greenwood with more libraries in the ecosystem like Stencil, Lightning Web Components, and FAST so we can expand out the logos.

Not sure if it should just be one box so either side doesn't look to lopsided?

[Auhseh]

I love this Owen, this is perfect!

I’ll:

• make the Provider logos bigger as suggested
• Tweak the Headings as suggested
• Integrate the new libraries section into the design
• Integrate the CTAs as suggested

But overall, I love how much progress we’ve made.

Also, +1 on testing with more libraries

[thescientist13]

One last feedback item after meeting with the team was that we think for the footer we can probably just have the links and logos, that way we can have the same footer across the site and I think we might want to save that space for the eventual showcase section.

Otherwise I think this is shaping up really nicely and I am very excited to start working on it!

[thescientist13]

Also, I will play around with some of the sizing here for maybe more of 40 / 60 split between content and code? I am ok with taking out some content if the code section can get more room, not that we have our features section on the home page.

That was one of reasonings behind putting the content at the top, so there could be plenty of room for the code snippets.

But also knowing that we need to make it look good for mobile presents an interesting set of circumstances though for this treatment more broadly, so there are going to have to be scroll bars at some point I imagine? We can chat a bit about this on our call though.

[Auhseh]

Also, I will play around with some of the sizing here for maybe more of 40 / 60 split between content and code? I am ok with taking out some content if the code section can get more room, not that we have our features section on the home page.

That was one of reasonings behind putting the content at the top, so there could be plenty of room for the code snippets.

But also knowing that we need to make it look good for mobile presents an interesting set of circumstances though for this treatment more broadly, so there are going to have to be scroll bars at some point I imagine? We can chat a bit about this on our call though.

I played around with this in the implementation, I think that could work.

Re: Mobile, I think we can hide the Code snippets on mobile and just show the content.

[thescientist13]

Ok, moving this over to an issue now that we've got our production draft almost ready 💯
#30