# Marketing page template

A marketing page template using Material UI and Croct.

By Material UI. Categories: framework, interface, language, library.

[Demo](https://material-ui-marketing-page.preview.croct.live) · [Deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcroct-tech%2Fvercel-template&project-name=material-ui-marketing-page&repository-name=material-ui-marketing-page&demo-title=Marketing+page+template&demo-description=A+marketing+page+template+using+Material+UI+and+Croct.&demo-image=https%3A%2F%2Fcdn.croct.io%2Fassets%2Ftemplates%2Fcovers%2Flibrary-material-ui-marketing-page.png&external-id=material-ui%3A%2F%2Ftemplate%2Fmarketing-page&integration-ids=oac_cTQZ22CIXn5XgZXYk2nBwFdU&demo-url=https%3A%2F%2Fmaterial-ui-marketing-page.preview.croct.live) · [Source](https://github.com/croct-tech/templates/blob/master/templates/material-ui/template/marketing-page/)

## Installation

```sh
npx croct@latest use material-ui://template/marketing-page
```

# Introduction

This template adds the
entire [Material UI marketing page template](https://mui.com/material-ui/getting-started/templates/marketing-page/?utm_source=croct)
to your project.

It comes fully integrated with Croct, giving you CMS, AB testing, and personalization out of the box.

> [!NOTE Forever-free]
> This template is compatible with features available on the forever-free plan.

## Usage

To create a new project using this template, run:

```croct-cmd
croct use material-ui://template/marketing-page
```

You can customize the template by specifying options, like defining which sections should be integrated with Croct
slots:

```croct-cmd
croct use material-ui://template/marketing-page --slots='["hero-section","pricing-section"]'
```

## Options

The following options are available for this template:

| Option        | Description                                                                                                                                                                     | Required | Default                                |
|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------------|
| `projectName` | The name of the project.                                                                                                                                                        | No       | `my-app`                               |
| `version`     | The Next.js version to use.                                                                                                                                                     | No       | `latest`                               |
| `router`      | The router to use (`app` or `page`).                                                                                                                                            | No       | `app`                                  |
| `javascript`  | Whether to use JavaScript instead of TypeScript.                                                                                                                                | No       | `false`                                |
| `slots`       | Tha list of slots to use (`navbar`, `hero-section`, `logo-collection`, `features-section`, `testimonials-section`, `highlights-section`, `pricing-section`, and `faq-section`). | No       | `["hero-section", "features-section"]` |