LPS - Landing Pages

📚 About

Landing Page is a website with all the elements to convert visitors into leads, opportunities, or customers. Also, like landing pages or conversion pages, Landing Pages are widely used in Digital Marketing campaigns, as they tend to have high conversion rates.

🛠 Design Pattern

Monorepo (ttoss Monorepo Template), as the name says, would be a single repository to keep the code of several projects. Each app domain is within this repository: backend, IoT, machine learning, web, and mobile apps. This repository structure is helpful because we can access any part of the application without changing the repository.

🚀 Projects

• Simulare

📌 Technologies

• TypeScript
• Next.js
• Fullpage.js
• ThemeUI
• React Hook Form
• Yup
• React.js
• ESlint
• Husky
• Commitlint
• Jest
• Lint Staged
• NPM Check Updates
• Prettier
• Stylelint

🔖 Design

We've adopted some specifications to define our Theme UI theme . You can check our full theme specifications here.

• Breakpoints

We defined six breakpoints ['40rem', '48rem', '64rem', '80rem', '96rem', '120rem'], which is equivalent to screens with [640, 768, 1024, 1280, 1536, 1920] pixels,if the root font size is equal to16px. Defining this array of breakpoints comes in handy because we can work with array props to implement responsiveness.

• Font Sizes

We defined our font size based on Tailwind CSS convention.

fontSizes: {
  xs: '0.75rem',
  sm: '0.875rem',
  base: '1rem',
  lg: '1.125rem',
  xl: '1.25rem',
  '2xl': '1.5rem',
  '3xl': '1.875rem',
  '4xl': '2.25rem',
  '5xl': '3rem',
  '6xl': '3.75rem',
  '7xl': '4.5rem',
  '8xl': '6rem',
  '9xl': '8rem',
}

If we want some text has sm for the first screen (< 40rem) and lg for the following screen sizes, then we can define a text component with the following style:

<Text sx={{ fontSize: ['sm', 'lg'] }}>

• FontFamily

  We've added a fonts key to define the fontFamily, based on the body and heading props.

 fonts: {
    body: 'Montserrat',
    heading: '"Source Sans Pro", sans-serif',
  },

Our component can be defined according to the examples below:

// examples: 1, 2 and 3

return(

<Text sx={{ fontFamily: "body" }}>example 1</Text>

<Text sx={{ fontFamily: "heading" }}>example 2</Text>

<Text sx={{ fontFamily: ["body","heading"] }}>example 3</Text>
)

• Spaces

For the space array, we opt to use the Fibonacci sequence.

space: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597];

We repeat the number 1 twice to match the indexes - Fib(10) = space[10] = 55.

// Like this example below

<Box sx={{ marginBottom: [4, 5, 3, 7] }}>

📝 License

This project is under the MIT license. See the LICENSE file for more details.