How to customize the hero section on the homepage?

[zalexzperez]

Hello,

I'm trying to modify the top section of the homepage:

I was able to hide the background dotted image using backgroundDots in params.toml, and the phrase "Congrats on setting up..." but I'm unsure how to:

1- Remove or modify the purple button ("Example guide") and, of course, add one or more buttons.
2- Add an image at the top, like in this showcased example site.

Could you provide guidance on how to achieve these changes?
Thanks in advance!

[h-enk]

Copy node_modules/@thulite/doks-core/layouts/index.html to /layouts/index.html and make your changes in the latter (see lines 1..14)

Add a button using Bootstrap markup — see Buttons

Add an image using a Thulite Images' partial, for example img or picture

[zalexzperez]

Thank you for your answer.

I'm still having trouble with images, though!
The image I'm adding to the column col-lg-12 is always shrunk/stretched to take up 100% width.

I used Thulite img partial like this {{- partial "img" (dict "page" . "src" "images/pcb.jpg") }} and also tried including the width argument in this way: {{- partial "img" (dict "page" . "src" "images/pcb.jpg" "width" 200) }} but, there's this rule (applied from /node_modules/@thulite/doks-core/assets/scss/components/_images.scss):

img[data-sizes="auto"] {
    display: block;
    width: 100%;
} 

that forces it to 100% width. Finally, I tried including the sizes argument like this: "(max-width: 400px) 25vw, 40vw", and the above rule disappears, but it's still as wide as the column!

So, what's the appropriate way to just set a specific image's width while keeping the original aspect ratio?

[h-enk]

Use the process (optional) and class arguments. Adding w-auto as class will do the trick

For example:

{{- partial "img" (dict "page" . "src" "images/boris-smokrovic-T_diWdiLbg0-unsplash.jpg" "alt" "Orange and green bird on branch of tree" "process" "fill 360x240" "class" "w-auto mx-auto mb-5") }}