forked from markus/AMPERION_Webpage
188 lines
7.9 KiB
HTML
188 lines
7.9 KiB
HTML
{{ define "main" }}
|
||
{{ partial "page-title.html" . }}
|
||
|
||
<style>
|
||
.container-wide{width:100%;max-width:1360px;margin:0 auto;padding:0 16px}
|
||
.section{padding:56px 0} .band{background:#f4f6f6}
|
||
|
||
/* HERO */
|
||
.hero-media{border-radius:14px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
|
||
.hero-media img{display:block;width:100%;height:auto}
|
||
.hero-lead{opacity:.9;margin-top:.5rem}
|
||
|
||
/* Werte – Cards */
|
||
.value-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;
|
||
padding:18px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.06)}
|
||
.value-ico{width:44px;height:44px;border-radius:12px;margin:0 auto 8px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
background:rgba(245,166,35,.12);color:#F5A623;line-height:0}
|
||
.value-ico svg{width:22px;height:22px;display:block}
|
||
.value-title{margin:.2rem 0 .25rem;font-weight:700}
|
||
.value-text{margin:0;opacity:.9}
|
||
|
||
/* Benefits – Ticks in 2 Spalten */
|
||
.val-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
|
||
.tick{display:flex;gap:.6rem;align-items:flex-start}
|
||
.tick svg{flex:0 0 20px;margin-top:2px;color:#F5A623}
|
||
|
||
/* kleine Helfer */
|
||
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s, transform .5s}
|
||
[data-reveal].is-visible{opacity:1;transform:none}
|
||
</style>
|
||
|
||
<!-- ========= HERO ========= -->
|
||
{{ $h := .Params.hero }}
|
||
{{ $img := or (and $h $h.image) .Params.image }}
|
||
{{ $alt := or (and $h $h.image_alt) (printf "Arbeiten bei %s" .Site.Title) }}
|
||
|
||
<section class="section">
|
||
<div class="container-wide">
|
||
<div class="row align-items-center gx-5 gy-4">
|
||
<div class="col-lg-7" data-reveal>
|
||
<h3>
|
||
{{ if $h }}
|
||
{{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }}
|
||
{{ else }}
|
||
Karriere bei {{ .Site.Title }}
|
||
{{ end }}
|
||
</h3>
|
||
{{ with $h }}{{ with .lead }}
|
||
<div class="hero-lead">{{ . | markdownify }}</div>
|
||
{{ end }}{{ end }}
|
||
</div>
|
||
|
||
<div class="col-lg-5" data-reveal>
|
||
{{ with $img }}
|
||
<figure class="hero-media">
|
||
<img src="{{ . | relURL }}" alt="{{ $alt }}" width="1200" height="800" loading="eager">
|
||
</figure>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ========= UNSERE WERTE (Cards) ========= -->
|
||
{{ with .Params.values }}
|
||
<section class="section band">
|
||
<div class="container-wide">
|
||
<h3 class="mb-3">Unsere Werte</h3>
|
||
<div class="row g-4">
|
||
{{ range $i, $v := . }}
|
||
<div class="col-md-4" data-reveal>
|
||
<article class="value-card">
|
||
<div class="value-ico" aria-hidden="true">
|
||
{{/* simple Icon-Rotation */}}
|
||
{{ if eq (mod $i 3) 0 }}
|
||
<!-- target -->
|
||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="currentColor" opacity=".14"/><circle cx="12" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>
|
||
{{ else if eq (mod $i 3) 1 }}
|
||
<!-- badge -->
|
||
<svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5" fill="currentColor" opacity=".18"/><circle cx="12" cy="9" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 14l-2 7 6-3 6 3-2-7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||
{{ else }}
|
||
<!-- shield -->
|
||
<svg viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="currentColor" opacity=".14"/><path d="M12 3l7 3v6c0 5-3.6 9.4-7 10-3.4-.6-7-5-7-10V6l7-3z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||
{{ end }}
|
||
</div>
|
||
<h4 class="value-title">{{ $v.title }}</h4>
|
||
<p class="value-text">{{ $v.text }}</p>
|
||
</article>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
|
||
<!-- ========= WAS WIR BIETEN ========= -->
|
||
<section class="section">
|
||
<div class="container-wide">
|
||
<h3 class="mb-3">Was wir bieten</h3>
|
||
<div class="row g-4">
|
||
<div class="col-md-6" data-reveal>
|
||
<ul class="val-list">
|
||
{{ range .Params.benefits_left }}
|
||
<li class="tick">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||
<span>{{ . | markdownify }}</span>
|
||
</li>
|
||
{{ end }}
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-6" data-reveal>
|
||
<ul class="val-list">
|
||
{{ range .Params.benefits_right }}
|
||
<li class="tick">
|
||
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||
<span>{{ . | markdownify }}</span>
|
||
</li>
|
||
{{ end }}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CALL TO ACTION -->
|
||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||
{{ $ctaEnabled := or (and .Params.cta .Params.cta.enable) (or .Params.cta_text .Params.cta_label) }}
|
||
{{ if $ctaEnabled }}
|
||
<section id="cta" class="cta">
|
||
<div class="cta__bg" aria-hidden="true">
|
||
<div class="cta__grid"></div>
|
||
<div class="cta__energy-lines">
|
||
<div class="energy-line-h energy-line-h2"></div>
|
||
<div class="energy-line-h energy-line-h3"></div>
|
||
<div class="energy-line-v energy-line-v1"></div>
|
||
<div class="energy-line-v energy-line-v2"></div>
|
||
<div class="energy-node energy-node1"></div>
|
||
<div class="energy-node energy-node2"></div>
|
||
</div>
|
||
<div class="cta__gradient-top"></div>
|
||
<div class="cta__gradient-bottom"></div>
|
||
</div>
|
||
|
||
<div class="my-container">
|
||
<div class="cta__wrap" data-reveal>
|
||
<h3 class="cta__title">
|
||
{{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }}
|
||
</h3>
|
||
{{ with .Params.subtitle }}<p class="cta__lead">{{ . }}</p>{{ else }}
|
||
<p class="cta__lead">Wir freuen uns über deine Initiativbewerbung!</p>
|
||
{{ end }}
|
||
|
||
<div class="cta__actions">
|
||
{{ with .Params.cta_label }}
|
||
<a class="cta__btn" href="{{ ($.Params.cta_href | default "/contact/") | relURL }}">
|
||
<span aria-hidden="true">⚡</span><span>{{ . }}</span>
|
||
</a>
|
||
{{ end }}
|
||
|
||
{{ if $impressum }}
|
||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}"><span aria-hidden="true">✉️</span><span>E-Mail senden</span></a>
|
||
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}"><span aria-hidden="true">📞</span><span>Anrufen</span></a>
|
||
{{ end }}
|
||
</div>
|
||
|
||
<div class="cta__social">
|
||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram"><img src="/images/social/instagram.svg" alt="Instagram Profil AMPERION"></a>
|
||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn"><img src="/images/social/linkedin.svg" alt="Linkedin Profil AMPERION"></a>
|
||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook"><img src="/images/social/facebook.svg" alt="Facebook Profil AMPERION"></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
|
||
|
||
<script>
|
||
(function(){
|
||
if (window.__careerRevealInit) return; window.__careerRevealInit = true;
|
||
var els = document.querySelectorAll("[data-reveal]");
|
||
if(!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('is-visible')); return; }
|
||
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target); } }); },{threshold:.12});
|
||
els.forEach(e=>io.observe(e));
|
||
})();
|
||
</script>
|
||
|
||
{{ end }}
|