Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Gatsby Theme Teranova

Teranova is a free open-source gatsby theme which you can use to make a simple, modern and customizable responsive landing page.

You can view the live demo to see how it looks.

Features

  • 4 different sections (header, about us, services, contact) by default
  • Easy to customize styles with theme UI
  • Google map embed and Google analytics
  • Smooth scrolling links
  • MDX support
  • Good SEO support with React Helmet and a default seo component
  • PWA
  • Sitemap (in case you want to add extra pages)
  • Responsive design
  • Emotion for styling
  • Prefetched google fonts
  • Supports any google font

Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    npm i gatsby-theme-teranova

    or

    yarn add gatsby-theme-teranova
  2. Add the theme to your gatsby-config.js with any of the following options. Every option has a default value which is given below so there are no required options.

    module.exports = {
      plugins: [
        {
          resolve: "gatsby-theme-teranova",
          options: {
            title: 'Teranova',
            description: 'A single page gatsby theme created by Nirjan Khadka',
            image: '/images/banner.png', // for image meta tag (lmage location within the static folder)
            twitterUsername: '@nk13_codes', // the site link (eg: https://twitter.com/) will be added for all social links so just put the profile name here
            facebookUsername: 'nk13_codes',
            instagramUsername: 'nk13_codes',
            phone: '555 219 619',
            email: 'info@teranova.com',
            address: 'Stewart Street, Marks Avenue, California',
            mapUrl: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3306.033277112893!2d-118.26944278515673!3d34.04301748060843!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c7b85dea2a93%3A0x1ff47c3ceb7bb2d5!2sSTAPLES+Center!5e0!3m2!1sen!2snp!4v1564632144369!5m2!1sen!2snp', // google maps iframe url
            logo: '/images/logo.svg', // link from the static folder
            trackingId: 'UA-135638651-2', // GA key
            // options for gatsby plugin manifest (go to there docs to learn more)
            shortName: 'teranova',
            pathPrefix: '/',
            backgroundColor: '#F9F9F9',
            themeColor: '#FFD700',
            favicon: 'static/images/favicon.png', // path from the root
            // gatsby sitemap plugin needs this
            siteUrl: 'https://teranova.netlify.com',
          
            // font options
            headingFont:  'Vollkorn', // accepts any google font name 
            bodyFont: 'Roboto',
    
            // content direcoty name
            contentFolder: 'teranova-theme-data',
                    
            // navbar links
            navLinks: [
                {
                    label: 'About',
                    link: '#about'
                },
                {
                    label: 'Services',
                    link: '#services'
                },
                {
                    label: 'Contact',
                    link: '#contact'
                }
            ]
          }
        }
      ]
    };
  3. There are mdx files and images for intro, services and about blocks in the content directory (teranova-theme-data by default). You can edit them to change the content of the site.

    1. intro.mdx with content that looks like this:
    ---
    type: intro
    img: ./banner.jpg
    ---
    
    ## Making good times Better
    
    We are a company dedicated to making your
    satisfaction into our goals. You don’t need to worry about a single thing.And
    now we are offering special discounts right now.
    1. about.mdx with content that looks like this:
    ---
    type: about
    img: ./about.jpg
    title: About us
    ---
    
    We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars.
    
    We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars.
    
    We Believe in a stronger community and a chance for redemption for every one and provide the opportunities that can lead to a better life for everyone. So, What are you waiting for? Join us today and be your best self. No more waiting, Join us before march to win exclusive prizes and a chance to win a million dollars.
    1. A service mdx file with looks like this:
    ---
    title: Branding
    type: service
    ---
    
    We provide the best branding solutions and optimized designs to go along with a rangle of supporting features for companies of all sizes.
  4. Add static/images/favicon.png to your project. The gatsby-plugin-manifest needs this image.

  5. Start your site

    gatsby develop
  6. You can override colors by creating a src/gatsby-theme-teranova/theme.js file and exporting an object with the following properties:

    export const theme = {
      fonts: {
        // only use the fonts that have been set in the theme options
        families: ["Roboto", "Vollkorn"],
        body: '"Roboto",sans-serif',
        heading: '"Vollkorn",serif'
      },
      fontSizes: [0.75, 1, 1.33, 1.77, 2.369, 3.157],
      fontWeights: {
        body: 400,
        heading: "700",
        bold: 700
      },
      spacing: [0.618, 1, 1.618, 2.618, 4.236, 6.854, 11.089],
      lineHeights: {
        body: 1.7,
        heading: 1.2
      },
      letterSpacings: {
        body: "normal",
        caps: "0.2rem"
      },
      colors: {
        primary: "#FFD700",
        dark: "#333",
        grey: "#B2AB99",
        secondaryLight: "#00FFD8",
        secondary: "#03866e",
        darkLight: "#5A5751",
        greyLight: "#F9F9F9",
        white: "#FEFEFE",
        secondaryDark: "#065648",
        primaryGradient:
          "linear-gradient(to right, rgba(242, 153, 74,0.9), rgba(242, 201, 76,0.4))"
      }
    };
  7. You can use gatsby theme shadowing to change any of the default components. You might want to change the layout component which orders the sections and provides some global css rules. To shadow that component create a src/gatsby-theme-teranova/components/layout.js. The default layout.js file looks like this

import React from 'react';
import Header from 'gatsby-theme-teranova/src/components/header';
import SEO from 'gatsby-theme-teranova/src/components/seo';
import 'normalize.css';
import { theme } from 'gatsby-theme-teranova/src/theme';
import { ThemeProvider } from 'theme-ui';
import { Global, css } from '@emotion/core';
import Footer from 'gatsby-theme-teranova/src/components/footer';
import Intro from 'gatsby-theme-teranova/src/components/intro';
import About from 'gatsby-theme-teranova/src/components/about';
import Services from 'gatsby-theme-teranova/src/components/services';
import Contact from 'gatsby-theme-teranova/src/components/contact';

function Layout() {
  return (
    <ThemeProvider theme={theme}>
      <Global
        styles={css`
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
          body {
            line-height: ${theme.lineHeights.body};

            font-family: ${theme.fonts.body};
            color: ${theme.colors.dark};
          }
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            line-height: ${theme.lineHeights.heading};
            font-weight: ${theme.fontWeights.heading};
            font-family: ${theme.fonts.heading};
          }
          h1 {
            font-size: ${theme.fontSizes[5]}rem;
          }
          h2 {
            font-size: ${theme.fontSizes[4]}rem;
          }
          h3 {
            font-size: ${theme.fontSizes[3]}rem;
          }
          h4 {
            font-size: ${theme.fontSizes[2]}rem;
          }
          h5 {
            font-size: ${theme.fontSizes[1]}rem;
          }
          a {
            text-decoration: none;
            color: ${theme.colors.secondary};
            transition: color 200ms ease-out;
            &:hover,
            &:focus {
              color: ${theme.colors.primary};
            }
          }
        `}
      />
      <SEO />
      <Header />
      <main>
        <Intro />

        <About />

        <Services />

        <Contact />
      </main>
      <Footer />
    </ThemeProvider>
  );
}

export default Layout;

If you get stuck then take a look at the examples in this repo or create an issue with sufficient info on the problem. Collaborators are welcomed.

About

A gatsby theme for responsive landing pages

Resources

License

Packages

No packages published