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

Index + Über uns

Browse source
This commit is contained in:
astosic 2025-08-11 18:55:52 +02:00
parent 0533ad4ea3
commit 6cd592a3ff
37 changed files with 1296 additions and 1705 deletions
Download patch file Download diff file Expand all files Collapse all files

315
layouts/_default/about.html
View file

@ -1,169 +1,191 @@
{{ define "main" }}
{{ partial "page-title.html" . }}
<!-- Intro + Mission/Vision Section -->
<!-- Intro Section -->
{{ with .Params.intro_section }}
{{ if .enable }}
<section id="about-intro" class="section">
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
<!-- ROW 1: TEXT + BILD -->
<div class="row align-items-center gx-5 gy-4 mb-5">
<section id="about-intro" class="section" style="background-color:#ffffff;">
<div class="my-container">
<div class="row align-items-center gx-5 gy-4">
<!-- TEXT -->
<div class="col-lg-6 order-2 order-lg-1 text-left">
<div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
{{ .text | markdownify }}
</div>
<!-- Visual Tags -->
<div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
{{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
{{ range .tags }}
<span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
{{ index $icons . }} {{ . }}
</span>
{{ end }}
<div class="col-lg-7 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
<div class="intro-content">
<h2>Ihr Partner für nachhaltige Energielösungen</h2>
<div class="intro-text article-copy">
{{ .text | markdownify }}
</div>
</div>
</div>
<!-- BILD -->
<div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
<img
src="{{ .image | relURL }}"
alt="AMPERION – Erneuerbare Energie"
loading="lazy"
decoding="async"
class="img-fluid"
style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
</div>
<!-- VIDEO (rechts, ohne abgerundete Ecken) -->
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="600">
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
<video class="intro-video"
autoplay
muted
loop
playsinline
preload="metadata"
poster='{{ "images/brand_poster.jpg" | relURL }}'>
<source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4">
Ihr Browser unterstützt eingebettete Videos nicht.
</video>
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- ROW 2: MISSION / VISION / ZIEL -->
{{ with $.Params.mission_vision }}
{{ if .enable }}
<div class="row mt-4">
<div class="col-md-12">
<div class="tabCommon">
<ul class="nav nav-tabs">
<!-- Mission/Vision/Ziel (grau, Heading + Tabs) -->
{{ with .Params.mission_vision }}
{{ if .enable }}
<section class="mission-section section pt-0" style="background-color:#f3f3f3;">
<div class="my-container">
<div class="row justify-content-center">
<div class="col-lg-10">
<!-- Titelblock abgestimmt auf Index -->
<div class="text-center mb-4" data-aos="fade-up">
<h1>Mission · Vision · Ziel</h1>
<h2><em>Wofür wir stehen und wo wir hinwollen.</em></h2>
</div>
<div class="mission-tabs-wrapper">
<!-- Tabs -->
<ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
{{ range $index, $elements := .tabs }}
<li {{ if eq $index 0 }} class="active" {{ end }}>
<a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
<li class="nav-item" role="presentation">
<button class="nav-link {{ if eq $index 0 }}active{{ end }}"
id="tab-{{ .name | urlize }}"
data-bs-toggle="tab"
data-bs-target="#content-{{ .name | urlize }}"
type="button"
role="tab">
{{ .name }}
</button>
</li>
{{ end }}
</ul>
<div class="tab-content pt-3">
<!-- Tab Content -->
<div class="tab-content mission-tab-content">
{{ range $index, $elements := .tabs }}
<div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
{{ .content | $.Page.RenderString (dict "display" "block") }}
<div class="tab-pane fade {{ if eq $index 0 }}show active{{ end }}"
id="content-{{ .name | urlize }}"
role="tabpanel"
data-aos="fade-up"
data-aos-delay="100">
<div class="tab-inner">
{{ .content | $.Page.RenderString (dict "display" "block") }}
</div>
</div>
{{ end }}
</div>
</div>
</div>
</div>
{{ end }}
{{ end }}
</div>
</section>
{{ end }}
{{ end }}
<!-- AMPERION Mehrwerte -->
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
<div class="container text-center mb-5">
<h3 class="mb-4">
Was uns auszeichnet: <strong>AMPERION</strong> bietet <em>echte Mehrwerte</em> für Ihr Projekt
</h3>
</div>
<div class="container-fluid px-0;">
<div class="mehrwerte-grid">
<!-- Kachel 1 -->
<div class="mehrwerte-box" style="background-color: #006464;">
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
<img src="/icons/stamp.svg" alt="Staatlich geprüft Icon" class="mehrwert-icon mb-3" width="50" height="50">
<h4 class="fw-bold text-black">Staatlich geprüftes Ingenieurbüro</h4>
<p class="mb-0">Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.</p>
</div>
<!-- Kompetenzen: Layout & Karten wie "Darum AMPERION" auf der Startseite -->
<section class="section" style="background-color:#ffffff;">
<div class="my-container">
<div class="row">
<div class="text-center" data-aos="fade-up" data-aos-delay="50">
<h1>Was uns auszeichnet</h1>
<h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2>
</div>
</div>
<!-- Kachel 2 -->
<div class="mehrwerte-box" style="background-color: #007979;">
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
<img src="/icons/brain.svg" alt="Innovation Icon" class="mehrwert-icon mb-3" width="50" height="50">
<h4 class="fw-bold text-black">Erfahrung &amp; Innovation</h4>
<p class="mb-0">Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.</p>
</div>
</div>
<!-- Karten (Re-Use der Service-Card Struktur von der Startseite) -->
<div class="why-grid mt-5">
{{ $delay := 0 }}
{{ $step := 100 }}
<!-- Kachel 3 -->
<div class="mehrwerte-box" style="background-color: #008c8c;">
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz Icon" class="mehrwert-icon mb-3" width="50" height="50">
<h4 class="fw-bold text-black">Ganzheitlicher Ansatz</h4>
<p class="mb-0">Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.</p>
</div>
</div>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3">
<h3 class="service-card-title">Staatlich geprüftes Ingenieurbüro</h3>
<p class="service-card-description">
<strong>Konzessionierter Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
</p>
</article>
<!-- Kachel 4 -->
<div class="mehrwerte-box" style="background-color: #009292;">
<div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung Icon" class="mehrwert-icon mb-3" width="50" height="50">
<h4 class="fw-bold text-black">Unabhängige Beratung</h4>
<p class="mb-0">Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.</p>
</div>
</div>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3">
<h3 class="service-card-title">Erfahrung &amp; Innovation</h3>
<p class="service-card-description">
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
</p>
</article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3">
<h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
<p class="service-card-description">
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
</p>
</article>
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3">
<h3 class="service-card-title">Unabhängige Beratung</h3>
<p class="service-card-description">
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
</p>
</article>
</div>
</div>
</section>
<!-- About Section (Gründerteam) -->
<!-- Team Section (grau, konsistent) -->
{{ with .Params.about }}
{{ if .enable }}
<section class="about section">
<div class="container-fluid">
<!-- Überschrift -->
<p class="lead text-center mb-3" style="margin-top: 40px;">Das AMPERION Gründerteam</p>
<section class="section" style="background-color:#f3f3f3;">
<div class="my-container">
<!-- Zentraler Einleitungstext -->
<p class="text-center px-3" style="margin-bottom: 40px;">
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
</p>
<!-- Header -->
<div class="text-center mb-5" data-aos="fade-up">
<h1>Das AMPERION Gründerteam</h1>
<div class="row gx-5 gy-5 align-items-center">
<!-- Markus Wimmer (LINKS) -->
<div class="col-lg-4 col-md-12 order-lg-1 order-2 d-flex justify-content-center">
<div class="w-100">
<!-- Markus Wimmer -->
<div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
<div class="founder-card">
{{ with .left_person }}
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
{{ with .description }}
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
{{ end }}
<h3 class="founder-name">{{ .name | markdownify }}</h3>
<div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }}
</div>
{{ end }}
</div>
</div>
<!-- Bild (MITTE) -->
<div class="col-lg-4 col-md-12 order-lg-2 order-1 d-flex justify-content-center">
<img src="{{ .image | relURL }}"
alt="AMPERION Gründerteam"
class="img-fluid founder-img rounded shadow"
style="max-width: 100%; height: auto;">
<!-- Team Bild -->
<div class="col-lg-4 col-md-12 order-lg-2 order-1" data-aos="zoom-in" data-aos-delay="200">
<div class="team-image-wrapper">
<img src="{{ .image | relURL }}"
alt="AMPERION Gründerteam"
class="team-image w-100 rounded-3 shadow-sm">
</div>
</div>
<!-- Alexander Stosic (RECHTS) -->
<div class="col-lg-4 col-md-12 order-lg-3 order-3 d-flex justify-content-center">
<div class="w-100">
<!-- Alexander Stosic -->
<div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
<div class="founder-card">
{{ with .right_person }}
{{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
{{ with .description }}
<p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
{{ end }}
<h3 class="founder-name">{{ .name | markdownify }}</h3>
<div class="founder-description">
{{ .description | $.Page.RenderString (dict "display" "block") }}
</div>
{{ end }}
</div>
</div>
@ -174,9 +196,64 @@
{{ end }}
{{ end }}
<!-- Call to Action -->
<!-- CTA unverändert lassen (wie auf Startseite) -->
{{ $impressum := site.GetPage "page" "impressum" }}
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
<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-h energy-line-h3"></div>
<div class="energy-line-h energy-line-h4"></div>
<div class="energy-line-v energy-line-v1"></div>
<div class="energy-line-v energy-line-v2"></div>
<div class="energy-line-v energy-line-v3"></div>
<div class="energy-line-v energy-line-v4"></div>
<div class="energy-node energy-node1"></div>
<div class="energy-node energy-node2"></div>
<div class="energy-node energy-node3"></div>
<div class="energy-node energy-node4"></div>
<div class="energy-node energy-node5"></div>
<div class="energy-node energy-node6"></div>
</div>
<div class="cta__gradient-top"></div>
<div class="cta__gradient-bottom"></div>
</div>
<div class="my-container">
<div class="cta__wrap">
<h2 class="cta__title">
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
</h2>
<p class="cta__lead">
Bereit für Ihr Energieprojekt?
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
</p>
<div class="cta__actions">
<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>
</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 }}
{{ end }}

280
layouts/_default/index1.html
View file

@ -1,280 +0,0 @@
{{ define "main" }}
<header>
<!-- banner -->
{{ with .Params.banner }}
{{ if .enable }}
<section class="slider {{ if .bg_overlay }}overly{{ end }}" style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
<!-- Scroll-Button unten -->
<div class="scrolldown" style="position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%);">
<a href="#about" class="btn btn-secondary" style="cursor: pointer;">
<div class="chevrons">
<div class='chevrondown'></div>
<div class='chevrondown'></div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- /banner -->
</header>
<!-- about -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section"> <!-- Add id="about" here -->
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block">
<div class="section-title">
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
</div>
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="block">
<img src="{{ .image | relURL }}" class="img-responsive" alt="Img">
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- /about -->
{{ with .Params.about }}
{{ if .enable }}
<section class="about section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="about-img">
<img class="img-responsive" src="{{ .image | relURL }}">
</div>
</div>
<div class="col-md-6">
{{ with .title }}<h2 class="mt-40">{{ . | markdownify }}</h2>{{ end }}
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
{{ with .button }}
{{ if .enable }}
<a href="{{ .link | relURL }}" class="btn btn-small mt-20">{{ .label }}</a>
{{ end }}
{{ end }}
</div>
</div>
<div class="row counter-box text-center mt-50">
{{ range .funfacts }}
<div class="col-md-2">
<div class="counter-item">
{{ with .icon }}<i class="{{ . }}"></i>{{ end }}
{{ with .count }}<h4 class="count" data-count="{{ . }}">0</h4>{{ end }}
{{ with .name }}<span>{{ . }}</span>{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
{{ end }}
<section class="text-and-image-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Bild auf der linken Seite -->
<div class="image-section">
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<!-- Text auf der rechten Seite -->
<div class="text-section" style="max-width: 100%;">
<h2>Unser Angebot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<!-- Bild auf der linken Seite -->
<div class="image-section">
<img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<!-- Text auf der rechten Seite -->
<div class="text-section" style="max-width: 100%;">
<h2>Unser Angebot</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</div>
</div>
</section>
<!-- portfolio -->
{{ with .Params.portfolio }}
{{ if .enable }}
<section class="feature bg-2" style="background-image: url('{{ .bg_image | relURL }}')">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6">
{{ with .title }}<h2 class="section-subtitle">{{ . | markdownify }}</h2>{{ end }}
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
{{ with .button }}
{{ if .enable }}
<a href="{{ .link | relLangURL }}" class="btn btn-view-works">{{ .label }}</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- /portfolio -->
<!-- service -->
{{ if .Params.service.enable }}
{{ partial "service.html" . }}
{{ end }}
<!-- /service -->
<!-- call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /call to action -->
<!-- funfacts -->
{{ with .Params.funfacts }}
{{ if .enable }}
<section class="testimonial">
<div class="container">
<div class="row">
<div class="section-title text-center">
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
{{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="block">
<ul class="counter-box clearfix">
{{ range .funfact_item }}
<li class="counter-item">
<!-- Anstelle eines Icons, das Bild einbinden -->
<img src="{{ .image | relURL }}" alt="{{ .name }}" style="width: 50px; height: auto;"> <!-- Stil nach Bedarf anpassen -->
<h4 class="count" data-count="{{ .count }}">0</h4>
<span>{{ .name | markdownify }}</span>
</li>
{{ end }}
</ul>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="testimonial-carousel text-center">
<div class="testimonial-slider owl-carousel">
{{ range .testimonial_slider }}
<div>
{{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
<div class="user">
<img src="{{ .image | relURL }}" alt="client">
<p><span>{{ .name | markdownify }}</span> {{ .designation | markdownify }}</p>
</div>
</div>
{{ end }}
</div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<script>
const canvas = document.getElementById('sinusCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const wave = {
y: canvas.height / 2,
length: 0.004,
amplitude: 160,
amplitudeVariation: 60,
frequency: 0.007
};
let increment = wave.frequency;
function animate() {
requestAnimationFrame(animate);
// Setzt den Hintergrundfarbe, um den Kontrast zu erhöhen und die weiße Welle sichtbar zu machen
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; // Leichter Trail-Effekt mit dunklem Hintergrund
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(-330, wave.y);
ctx.lineWidth = 1 + Math.abs(Math.sin(increment) * 10); // Dynamische Anpassung der Linienstärke
for (let i = 0; i < canvas.width; i++) {
ctx.lineTo(
i,
wave.y +
Math.sin(i * wave.length + increment) *
wave.amplitude *
Math.sin(increment)
);
}
ctx.strokeStyle = 'white'; // Stellt die Linienfarbe auf Weiß ein
ctx.stroke();
increment += wave.frequency;
}
animate();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var scrollDownButton = document.querySelector('.scroll-down-button');
scrollDownButton.addEventListener('click', function() {
document.querySelector('#about').scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
{{ end }}