feat: home page template with carousel, news, about, services, team sections

- Extends base.html, uses shared image macro for resize_image - Refactored img shortcode to forward to macros/image.html (DRY) - News pulled via get_page from content/news.md - Notfall section skipped (was unpublished in grav) - Map call commented out until shortcode lands in Task 20
2026-05-20 22:39:59 +02:00
parent 218b82372d
commit 9cf54f9459
3 changed files with 119 additions and 22 deletions
@@ -1,8 +1,98 @@
-<!DOCTYPE html>
-<html lang="de">
-<head><meta charset="utf-8"><title>{{ config.title }}</title></head>
-<body>
-  <h1>{{ config.title }}</h1>
-  <p>{{ section.content | safe }}</p>
-</body>
-</html>
+{% extends "base.html" %}
+{% import "macros/image.html" as image %}
+
+{% block content %}
+
+{# ───────── Carousel ───────── #}
+<div id="x-corp-carousel" class="carousel slide hero-slide" data-ride="carousel">
+  <ol class="carousel-indicators">
+    {% for slide in section.extra.slides %}
+      <li data-target="#x-corp-carousel"
+          data-slide-to="{{ loop.index0 }}"
+          class="{% if loop.first %}active{% endif %}"></li>
+    {% endfor %}
+  </ol>
+  <div class="carousel-inner" role="listbox">
+    {% for slide in section.extra.slides %}
+      <div class="item{% if loop.first %} active{% endif %}">
+        {{ image::render(src=slide.image, width=1920, alt=slide.alt) }}
+        <div class="carousel-caption">
+          <p>{{ slide.heading }}</p>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  <a class="left carousel-control" href="#x-corp-carousel" role="button" data-slide="prev">
+    <i class="fa fa-angle-left" aria-hidden="true"></i>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="right carousel-control" href="#x-corp-carousel" role="button" data-slide="next">
+    <i class="fa fa-angle-right" aria-hidden="true"></i>
+    <span class="sr-only">Next</span>
+  </a>
+</div>
+
+{# ───────── News (loaded from content/news.md) ───────── #}
+{% set news_page = get_page(path="news.md") %}
+<section class="ptb-100" id="aktuelles">
+  <div class="container">
+    {{ news_page.content | safe }}
+  </div>
+</section>
+
+{# ───────── About columns ───────── #}
+<section class="ptb-100">
+  <div class="container">
+    <div class="row">
+      {% for col in section.extra.about_columns %}
+        <div class="col-md-6">{{ col.text | markdown(inline=false) | safe }}</div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+{# ───────── Service grid ───────── #}
+<section class="ptb-100 bg-gray">
+  <div class="container">
+    <h2 class="text-center">Unsere Leistungen</h2>
+    <div class="row">
+      {% for card in section.extra.service_cards %}
+        <div class="col-md-4 col-sm-6">
+          <a href="{{ card.url }}" class="service-card">
+            {{ image::render(src=card.image, width=600, alt=card.title) }}
+            <h3>{{ card.title }}</h3>
+            <p>{{ card.description }}</p>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+{# ───────── Team preview ───────── #}
+{% if section.extra.team_preview %}
+<section class="ptb-100">
+  <div class="container">
+    <h2 class="text-center">Unser Team</h2>
+    <div class="row">
+      {% for member in section.extra.team_preview %}
+        <div class="col-md-4 col-sm-6 text-center">
+          <a href="{{ member.url }}">
+            {{ image::render(src=member.image, width=400, alt=member.name) }}
+            <h4>{{ member.name }}</h4>
+            <p>{{ member.position }}</p>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{# Notfall block intentionally skipped — was `published: false` in Grav. #}
+
+{# ───────── Map ───────── #}
+{# Map shortcode added in Task 20; left as a placeholder comment here. #}
+{# {{ map() }} #}
+
+{% endblock %}