gatsby starter saas marketing

☁️ Un simple démarreur de site de marketing d'une page pour les sociétés SaaS et les pirates indépendants.

Démo en direct: https://gatsby-starter-saas-marketing.netlify.com/ - ️ Le déploiement de démonstration en direct n'est plus disponible sur Netlify.

Commencer ?

Installer Gatsby CLI - Plus d'informations

npm install -g gatsby-cli

ou

yarn global add gatsby-cli

Installez le démarreur localement:

gatsby new gatsby-starter-saas-marketing https://github.com/keegn/gatsby-starter-saas-marketing

Installez les dépendances:

yarn install

Démarrer le serveur de développement:

gatsby develop

À la racine du projet, compilez votre application de déploiement:

gatsby build

Nettoyez le cache pour corriger certaines erreurs - exécutez la commande Clean avant de démarrer le serveur de développement:

gatsby clean

À la racine du projet, servez la construction de production de votre site:

gatsby serve

Styles

Ce démarreur utilise des composants stylisés. Le fichier de thème contient les styles de base src/styles/theme.js et le fichier de styles global contient des styles d'élément de base et un style réinitialisation src/styles/GlobalStyles.js .

Navigation

Ce démarreur utilise React-Anchor-Link-Smooth-Scroll et React-ScrollSpy. Pour lier un élément de navigation à une section, ajoutez simplement une valeur d'ID et de chaîne à un élément parent de section qui correspond à la même valeur de chaîne de navigation dans navigation.js

️ Seule la section Features est liée. Les sections de produit et de prix ne sont intentionnellement pas liées et jetteront une TypeError dans la console lorsqu'elles sont cliquées (car elles n'existent pas dans le démarreur). Veuillez contacter si vous souhaitez aider à prolonger cette fonctionnalité.

Déploiement sur netlify

Guide de déploiement

Collectez des e-mails avec les formulaires Netlify

Gestion de formulaire avec gatsby.js v2 et netlify

Exemple d'utilisation du formulaire Netlify

Dans header.js le remplacement des composants <HeaderForm>...</HeaderForm> existants par ce qui suit devrait fournir un exemple de travail une fois votre site déployé:

 <HeaderForm
 name="early-access"
 method="post"
 data-netlify-honeypot="bot-field"
 data-netlify="true"
>
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="early-access" />
  <HeaderInput
   type="email"
   placeholder="Your email"
   name="email"
   id="email"
   required
  />
  <HeaderButton>Early access</HeaderButton>
</HeaderForm>