astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

Update3008251310

Browse source
This commit is contained in:
astosic 2025-08-30 13:10:37 +02:00
parent 68db76b963
commit af6021b9cf
12 changed files with 193 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

112
layouts/_default/leistung.html
View file

@ -23,39 +23,82 @@
{{ $ergebnisPhoto := cond (gt (len $photos) 1) (index $photos 1) nil }}
{{ $.Scratch.Set "ergebnisPhoto" $ergebnisPhoto }}
<!-- ===== Inline-Styles ===== -->
<!-- ===== Styles (optimiert für 1 oder 3 Spalten) ===== -->
<style>
.container-wide{width:100%;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.container-wide {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
@media (min-width:1200px){.container-wide{max-width:1280px}}
@media (min-width:1400px){.container-wide{max-width:1360px}}
@media (min-width:1600px){.container-wide{max-width:1440px}}
.service-hero__media{border-radius:12px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.06)}
.service-hero__media img{display:block;width:100%;height:auto}
.service-hero__text p{margin-bottom:1rem}
/* USP inline unter dem Text – Icons oben, #F5A623 */
.usp-inline{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
@media (min-width:992px){.usp-inline{grid-template-columns:repeat(3,1fr)}}
.service-hero__media {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(0,0,0,.06);
}
.service-hero__media img {
display: block;
width: 100%;
height: auto;
}
.service-hero__text p { margin-bottom: 1rem }
.usp-item{
display:flex; flex-direction:column;
align-items:center; /* vorher: flex-start */
text-align:center; /* Text mittig */
gap:8px; padding:12px 14px; border-radius:12px;
background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.usp-icon{
color:#F5A623; background:rgba(245,166,35,.12);
width:44px; height:44px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
margin:0 auto 8px; /* zentriert die Iconbox */
}
/* USP Grid */
.usp-container {
display: grid;
grid-template-columns: 1fr; /* Standard: Handy -> untereinander */
gap: 2rem;
margin-top: 2rem;
justify-items: center;
text-align: center;
}
.usp-icon svg{display:block;width:24px;height:24px}
.usp-text{font-weight:500;margin:0}
/* Desktop: immer 3 nebeneinander */
@media (min-width: 992px) {
.usp-container {
grid-template-columns: repeat(3, 1fr);
}
}
.usp-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 12px 14px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.usp-icon {
color: #F5A623;
background: rgba(245,166,35,.12);
width: 44px; height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
}
.usp-icon svg {
display: block;
width: 24px;
height: 24px;
}
.usp-text {
font-weight: 500;
margin: 0;
}
</style>
<!-- =========================
HERO: Bild links, Intro rechts (breit)
========================= -->
@ -83,21 +126,13 @@
</div>
{{ end }}
</div>
</div>
<!-- Eigenständiger Container für USPs unterhalb der Text-/Bild-Reihe -->
<!-- USP-Container -->
{{ with .Params.usp }}
<div class="usp-container" style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
justify-items: center;
gap: 2rem;
margin-top: 2rem;
text-align: center;
">
<div class="usp-container">
{{ range $i, $u := . }}
<div class="usp-item" style="display:flex; flex-direction:column; align-items:center;">
<div class="usp-item">
<div class="usp-icon" aria-hidden="true">
{{ if eq (mod $i 3) 0 }}
<!-- Shield -->
@ -121,7 +156,7 @@
</svg>
{{ end }}
</div>
<p class="usp-text" style="text-align:center;">{{ $u | markdownify }}</p>
<p class="usp-text">{{ $u | markdownify }}</p>
</div>
{{ end }}
</div>
@ -132,6 +167,7 @@
<!-- =========================
FEATURES CAROUSEL (Große Cards mit Auto-Play)
Quelle: .Params.features (array of {title, text, icon?})
@ -558,6 +594,7 @@
<!-- =========================
OUTCOMES (Nutzen/Ergebnisse)
Quelle: .Params.outcomes (array of strings)
@ -645,11 +682,6 @@
{{ .Params.cta_text | default "Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen." }}
</h3>
{{/* Optional: Bei Bedarf zweite Zeile aus subtitle wiederverwenden */}}
{{ with .Params.subtitle }}
<p class="cta__lead">{{ . }}</p>
{{ end }}
<div class="cta__actions">
{{ with .Params.cta_label }}
<a class="cta__btn" href="{{ $.Params.cta_href | default "/contact/" }}">