One

Template Overview#

The One template ships with five pages:

• Landing
• Pricing
• Signup
• Signin
• Reset Password

Each page listed above includes a navbar and a footer. The primary background color is configurable across all pages, the navbar, and the footer.

The landing page ships with four sub-components, organized from top to bottom:

• Hero
• Benefits
• Pricing
• Call to Action

Template Configuration#

Background Color#

To set the primary background color, define a CSS class named bg-primary with a background-color rule.

Ex.

.bg-primary {
  background-color: #EF4444;
}

Hero#

The Hero component sits at the top of the landing page and is the first thing that comes to attention when the site is loaded. It supports two text slots, two buttons that can be customized to lead to different URLs, and an image that will occupy the right hand side of the hero.

Hero: {
  PrimaryText: string,
  SecondaryText: string,
  PrimaryLink: { text: string, to: string },
  SecondaryLink: { text: string, to: string },
  Image: string
}

API#

PrimaryText#

type: string

This text shows up large and bolded in the top left of the component.

SecondaryText#

type: string

This text shows up slightly smaller and less prominent underneath the PrimaryText.

PrimaryLink#

type: object

This property controls the text and URL behavior of the left hand side link that shows up underneath the hero text. The text property determines what is displayed inside the link button, and the to property determines where the link leads when clicked.

The to property can be a path on the current site, like '/about', or it can be an absolute URL like 'https://indiehackers.com'.

SecondaryLink#

type: object

This property works the same way as the PrimaryLink property, but controls the text and URL behavior of the right hand side button that shows up underneath the hero text.

Image#

type: string

This property is a path to the image that should be displayed on the right hand side of the hero component.

Benefits#

The Benefits components sits directly underneath the Hero component, and provides a grid of cards where you can describe what your product has to offer. The grid can have an arbitrary number of cards, and adjusts the number of columns responsively to fit them comfortably.

Benefits: [
  {
    MiniTitle: string,
    Title: string,
    Message: string,
  },
]

API#

The configuration object for the Benefits component is a list of Benefit objects. Each Benefit object supports the following properties.

MiniTitle#

type: string

The MiniTitle is a subtle, all-caps title that shows up in the top-left of each benefit card. It is typically one word, and can be used to quickly get across the theme of the benefit being described in the card.

Title#

type: string

The Title of each benefit card is a prominent bold title that explains the benefit in a single short sentence.

Message#

type: string

The Message is a slightly longer (1-2 sentence) description that explains how your product delivers the benefit in question.

Pricing#

The pricing section appears under the Benefits section and lays out the prices and corresponding feature sets for different plans your product offers. Or, if it is not a subscription product, the pricing cards can show separate products along with their prices.

Pricing: {
  Title: string,
  Plans: [
    {
      Title: string,
      Subtitle: string,
      Price: {
      Value: string, 
        Description: string, 
        Subdescription: string
      },
      Features: [
        { Text: string },
      ],
      CtaLink: { 
        To: '/signup', 
        Text: string
      },
    }
  ]
}

API#

Title#

type: string

This property sets the title text for the Pricing section. It appears large, centered, and bolded.

Plans#

type: Array