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.

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,
        },
    },
};