Skip to content

Web Landing Page Scaffold (Gatsby, React, Markdown)

License

Notifications You must be signed in to change notification settings

HumanVenturesStudio/hitw-landing-page

Repository files navigation

web-landing-scaffold

Humans in the Wild
Landing Page Starter Kit

Landing Page Architecture


🧐 What's inside?

A quick look at the files and directories you'll focus on

    .
    ├── config
    |       - Google Fonts
    |       - Local Fonts
    |       - Manifest
    |       - Metadata
    |       - Scripts
    |       - Styles
    |       - Theme
    ├── content
    |       - Header
    |       - Navigation
    |       - Hero
    |       - Callout 1
    |       - Callout 2
    |       - Callout 3
    |       - Callout 4
    |       - Conversion
    |       - Footer
    |       - Success
    ├── src ** Danger Zone **
    ├── static
    |       - Fav Icon
    |       - Images
    |       - Fonts
    |       - Videos
    └── ...

Landing Page Configuation

/config

This directory contains site-wide configuration.

/config/google-fonts.js

Add Google Fonts here and use them in theme.css

/config/local-fonts.css

Define @font-face definitions here that reference font files stored in /static/fonts/ and use them in theme.css

/config/manifest.js

For native-app-like behavior (Progress Web App), similarly to SEO, customize this to affect how your landing page behaves on some mobile devices when using "Add to Homescreen".

/config/metadata.js

For SEO, set the landing page title, description, and more.

/config/styles.css

Add custom styles here

/config/styles.css

Add custom javascript here

/config/theme.css

Apply colors, fonts, sizing, and more for the landing page. This uses CSS Variables to apply styles across the landing page.

Landing Page Content

/content

This directory contains content for the blocks on the page. The content is formated in Markdown and accepts some HTML as well.

/content/Header.md

  • Hide / Show the Header Block

/content/Navigation.md

  • Add / Remove Navigation Links
  • Hide / Show Navigation inside Header Block

/content/Hero.md

  • Hide / Show Hero Block

/content/Callout1.md

  • Hide / Show Callout Block

/content/Callout2.md

  • Hide / Show Callout Block

/content/Callout3.md

  • Hide / Show Callout Block

/content/Callout4.md

  • Hide / Show Callout Block

/content/Conversion.md

  • Hide / Show Conversion Block
  • This is the Mailchimp Form
  • Replace the built-in form with anything else

/content/Footer.md

  • Hide / Show Footer Block

/content/Logo.md

  • Hide / Show Logo
  • Set Logo Image File

/content/Success.md

  • Content for Success Page
  • Set Redirect Behavior

Landing Page Source Code

/src

Danger Zone. This directory contains all of the code for pulling in your content and applying functionality to it. src is a convention for “source code”. Make advanced changes in here or no changes at all!

Landing Page Static Files

/static

This directory contains images, videos, fonts, and the fav icon. Replace any "starter kit" assets with your own. Make sure they have the same case-sensitive file names!

🎓 Powered by Gatsby

These landing pages are built using the Gatsby framework. For a deeper dive into the source code and underlying framework, find full documentation for Gatsby here, on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

About

Web Landing Page Scaffold (Gatsby, React, Markdown)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages