Hero

Create pro-quality landing page with a beautiful hero section.

Usage

HeroSection, ScreenContainer, Hero, HeroBody, HeroTitle and HeroTeaser are primitives to build a hero.

import { Link } from 'gatsby'
import {
  Button,
  Hero,
  HeroBody,
  HeroSection,
  HeroTitle,
  HeroTeaser,
  ScreenContainer,
} from 'smooth-doc/components'
import heroBackgroundURL from './images/hero-background.png'

render(
  <HeroSection>
    <ScreenContainer>
      <Hero backgroundImageURL={heroBackgroundURL}>
        <HeroBody>
          <HeroTitle>Create awesome docs without compromise</HeroTitle>
          <HeroTeaser>
            A ready-to-use Gatsby theme to build docs for all your projects.
            Smooth DOC makes documentation easy.
          </HeroTeaser>
        </HeroBody>
      </Hero>
    </ScreenContainer>
  </HeroSection>,
)

Display actions

Use HeroActionList and HeroAction with Button to add actions.

import { Link } from 'gatsby'
import {
  Button,
  Hero,
  HeroBody,
  HeroSection,
  HeroTitle,
  HeroTeaser,
  ScreenContainer,
  HeroActionList,
  HeroAction,
} from 'smooth-doc/components'
import heroBackgroundURL from './images/hero-background.png'

render(
  <HeroSection>
    <ScreenContainer>
      <Hero backgroundImageURL={heroBackgroundURL}>
        <HeroBody>
          <HeroTitle>Create awesome docs without compromise</HeroTitle>
          <HeroTeaser>
            A ready-to-use Gatsby theme to build docs for all your projects.
            Smooth DOC makes documentation easy.
          </HeroTeaser>
          <HeroActionList>
            <HeroAction>
              <Button as={Link} to="/docs/getting-started">
                Getting Started
              </Button>
            </HeroAction>
            <HeroAction>
              <Button
                variant="neutral"
                as="a"
                href="https://github.com/gregberge/smooth-doc"
              >
                Browse GitHub
              </Button>
            </HeroAction>
          </HeroActionList>
        </HeroBody>
      </Hero>
    </ScreenContainer>
  </HeroSection>,
)

import { Link } from 'gatsby'
import {
  Button,
  Hero,
  HeroBody,
  HeroSection,
  HeroTitle,
  HeroTeaser,
  ScreenContainer,
  HeroActionList,
  HeroAction,
} from 'smooth-doc/components'
import heroBackgroundURL from './images/hero-background.png'

render(
  <HeroSection>
    <ScreenContainer>
      <Hero backgroundImageURL={heroBackgroundURL}>
        <HeroBody>
          <HeroTitle>Create awesome docs without compromise</HeroTitle>
          <HeroTeaser>
            A ready-to-use Gatsby theme to build docs for all your projects.
            Smooth DOC makes documentation easy.
          </HeroTeaser>
          <HeroActionList>
            <HeroAction>
              <Button as={Link} to="/docs/getting-started">
                Getting Started
              </Button>
            </HeroAction>
            <HeroAction>
              <Button
                variant="neutral"
                as="a"
                href="https://github.com/gregberge/smooth-doc"
              >
                Browse GitHub
              </Button>
            </HeroAction>
          </HeroActionList>
        </HeroBody>
      </Hero>
    </ScreenContainer>
  </HeroSection>,
)