Update120825
This commit is contained in:
parent
0962f9325b
commit
2ae734e906
13 changed files with 368 additions and 173 deletions
|
|
@ -157,16 +157,15 @@
|
|||
</div>
|
||||
|
||||
<p class="form-legal">
|
||||
<label>
|
||||
<input type="checkbox" required>
|
||||
Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button class="cta__btn" type="submit">
|
||||
<button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
|
||||
<span aria-hidden="true">➜</span><span>Nachricht senden</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{{ end }}{{ end }}
|
||||
|
|
|
|||
188
layouts/_default/karriere.html
Normal file
188
layouts/_default/karriere.html
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
{{ 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>
|
||||
<h2>
|
||||
{{ if $h }}
|
||||
{{ with $h.title }}{{ . }}{{ else }}Karriere bei {{ $.Site.Title }}{{ end }}
|
||||
{{ else }}
|
||||
Karriere bei {{ .Site.Title }}
|
||||
{{ end }}
|
||||
</h2>
|
||||
{{ 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">
|
||||
<h2 class="mb-3">Unsere Werte</h2>
|
||||
<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>
|
||||
<h3 class="value-title">{{ $v.title }}</h3>
|
||||
<p class="value-text">{{ $v.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
<!-- ========= WAS WIR BIETEN ========= -->
|
||||
<section class="section">
|
||||
<div class="container-wide">
|
||||
<h2 class="mb-3">Was wir bieten</h2>
|
||||
<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-h1"></div>
|
||||
<div class="energy-line-h energy-line-h2"></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>
|
||||
<h2 class="cta__title">
|
||||
{{ .Params.cta_text | default "Gestalte die Energiewende mit uns." }}
|
||||
</h2>
|
||||
{{ 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 "/kontakt/") | 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=""></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=""></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=""></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 }}
|
||||
|
|
@ -329,8 +329,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{{/* Fallback/Ergänzung: direkte Kontaktwege aus Impressum */}}
|
||||
{{ if $impressum }}
|
||||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue