proof of concept home page storyboarding

[thescientist13]

related to #4 , started putting together a storyboard / reference of what I would like the walkthrough section of the home page to be like

This is also using Vercel's Geist font, though bundling font files is not implemented at all, so the deploy preview will just 404 for now).

The orange clay / brick color was meant add a little bit of accent to compliment the green, and also evoke the idea of a pot for a plant, lol. Not sure if that is too on brand, but I think with a lighter color that has good contrast, seems like it could be a good option.

TODO

1. header navigation w/ social icons
2. hero banner (will try and think of an image, otherwise text and CTAs are fine for now)
3. "walk through" code and content
   • first draft
   • would like to make the text / code snippets more concise and less verbose
4. would be nice to keep the code snippets as content and not images
5. link to a Stackblitz before the deploy section showing all the features of the walk through? Should this be in addition to the getting started guide / repo? or a standalone "demo" repo just for this purpose of the home page? (demo might be more contrived then a step by step tutorial?)
6. feature bullets
7. content as code - converting code samples and home page content to markdown #15
8. showcase (some cool horizontal scroll snap effect?)
9. are we best communicating the vision? - keep the "vibes" check from the current website
10. responsiveness

Upstream Considerations

1. Be able to bundle font files references in @font-face rules, or I guess more generally, any local file in a url like a background image. - support bundling of url properties (like for @font-face + src) during CSS file optimization greenwood#1199

    <style>
      @font-face {
        font-family: "Geist-Sans";
        src: url('../../node_modules/geist/dist/fonts/geist-sans/Geist-Regular.woff2') format("truetype");
      }
    </style>

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	7542c19
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/65c95fbfdeede2000882525c
😎 Deploy Preview	https://deploy-preview-9--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

Playing around with the theming a bit, I think I'm really liking this combination, with a green accent and Nord syntax highlighting. 🤩

See it over at #16

[thescientist13]

Playing around with green and layout a bit more

[thescientist13]

based on our designs for #30 , closing this as #17 is a better representation of what we're going to need from an implementation details perspective.