hmc-guide/themes/lotusdocs/layouts/partials/landing/hero.html

123 lines
5.9 KiB
HTML

{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
<!-- Hero Start -->
{{ with .backgroundImage }}
{{ $path := .path | default "images" }}
{{ $filename := .filename }}
{{ $pathDesktop := printf "%s/%s" $path $filename.desktop }}
{{ $pathMobile := printf "%s/%s" $path $filename.mobile }}
<style>
.hero {
{{ with $filename.desktop }}
{{ with resources.Get $pathDesktop }}
@media (min-width: 768px) {
background-image: url("{{ .RelPermalink }}");
}
{{ end }}
{{ end }}
{{ with $filename.mobile }}
{{ with resources.Get $pathMobile }}
background-image: url("{{ .RelPermalink }}");
{{ end }}
{{ end }}
}
</style>
{{ end }}
<section id="{{ $sectionTitle }}" class="d-table w-100 overflow-hidden hero">
<div class="container">
<div class="row mt-5 align-items-center">
<div class="col-lg-6 col-md-6">
<div class="title-heading">
{{ with .badge }}
<span class="badge {{ if eq .pill true }}rounded-pill{{ end }} bg-{{ if eq .soft true }}soft-{{ else }}hard-{{ end }}{{ .color }} mb-1">{{ .text }}</span>
{{ end }}
<h4 class="heading mt-0 mb-3">
{{ with .titleLogo }}
{{ $path := .path | default "images" }}
{{ $filename := .filename }}
{{ $height := .height | default "70px" }}
{{ $alt := .alt | default "logo image" }}
{{ $path := printf "%s/%s" $path $filename }}
{{ with $filename }}
<span>
{{ with $image := resources.Get $path }}
{{ if eq .MediaType.SubType "svg" }}
{{ .Content | safeHTML }}
{{ else }}
{{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
<img src="{{ .RelPermalink }}" alt="{{ $alt }}" height="{{ $height }}">
{{ end }}
{{ end }}
{{ end }}
</span>
{{ end }}
{{ end }}
{{ with .title }}{{ . }}{{ end }}
</h4>
{{ with .subtitle }}
<p class="para-desc text-muted mb-0">{{ . | markdownify }}</p>
{{ end }}
<div class="mt-3">
{{ with .ctaButton }}
<a href="{{ relLangURL .url }}" class="btn btn-lg btn-primary me-2 mt-2">
{{ with .icon }}
<span class="material-icons align-middle">{{ . }}</span>
{{ end }}
{{ with .btnText }}
{{ . }}
{{ end }}
</a>
{{ end }}
{{ with .cta2Button }}
<a href="{{ relLangURL .url }}" class="btn btn-lg btn-outline-primary mt-2">
{{ with .icon }}
<span class="material-icons align-middle">{{ . }}</span>
{{ end }}
{{ with .btnText }}
{{ . }}
{{ end }}
</a>
{{ end }}
</div>
{{ with .info }}
<p class="text-muted mb-0 mt-3">{{ . | markdownify }}</p>
{{ end }}
</div>
</div>
<div class="col-lg-6 col-md-6 mt-4 pt-4 mt-sm-0 pt-sm-0">
{{ with .image }}
{{ $path := .path | default "images" }}
{{ $filename := .filename }}
{{ $alt := .alt | default "hero image" }}
{{ $boxShadow := .boxShadow | default false }}
{{ $rounded := .rounded | default false }}
{{ $path := printf "%s/%s" $path $filename }}
{{ with $filename }}
<div class="ms-lg-4">
<div class="classic-hero-image">
{{ with $image := resources.Get $path }}
{{ if eq .MediaType.SubType "svg" }}
{{ .Content | safeHTML }}
{{ else }}
{{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
<img src="{{ .RelPermalink }}" class="{{ if $boxShadow }}shadow-lg{{ else }}{{ end }} mx-auto d-block {{ if $rounded }}rounded-top-4{{ else }}{{ end }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
{{ end }}
{{ end }}
</div><!--end col-->
</div><!--end row-->
</div> <!--end container-->
</section><!--end section-->
<!-- Hero End -->
{{ end }}
{{ end }}