> For the complete documentation index, see [llms.txt](https://zakariaes-organization.gitbook.io/saascore-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zakariaes-organization.gitbook.io/saascore-docs/landing-page/hero.md).

# Hero

The `Hero_centered` component is highly customizable and defines the content and structure of the hero section in your SAAS boilerplate. It includes metadata for headings, descriptions, call-to-action buttons, and images.

```jsx
const data = {
    heading: "This Saas Boilerplate is Awesome",
    coloredWord: "Saas",
    secondaryButton: {
        text: "Another button",
        link: "/",
    },
    description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. ",
    cta: {
        text: "Get Started",
        link: "/#pricing",
    },
    image: {
        //recommended image size: 1200x630
        hero_centered: {
            // image displayed on light mode
            light: {
                src: heroImage_centered_light,
                alt: "hero image",
            },
            // image displayed on dark mode
            dark: {
                src: heroImage_centered_dark,
                alt: "hero image",
            },
            fading_effect: true,
        },
    },
};
```