diff --git a/content/blog/2024/03/2024-03-30_geburtstagsklettern/index.md b/content/blog/2024/03/2024-03-30_geburtstagsklettern/index.md
index 3ab3b70df49d40842b3645403620e4d0196703bb..d785d735b44433a0224eb51737d6d868c4df0759 100644
--- a/content/blog/2024/03/2024-03-30_geburtstagsklettern/index.md
+++ b/content/blog/2024/03/2024-03-30_geburtstagsklettern/index.md
@@ -22,7 +22,7 @@ regelmäßig zusammen klettern gehen, drei der aktiven Jugendlichen dabei.
 In der Teckids-Gemeinschaft gehört es dazu, auch nicht technische Aktivitäten
 zusammen zu machen. Bei unseren [Campdays](@/gemeinschaft/campdays.md) finden
 regelmäßig Ausflüge statt, bei denen wir zum Beispiel Escape Rooms spielen,
-beim Team-Pausentag während [Hack'n'Sun](@/projekte/hack-n-fun/freizeiten/hacknsun.md)
+beim Team-Pausentag während [Hack'n'Sun](@/projekte/hack-n-fun/freizeiten/hacknsun/index.md)
 waren wir im Freibad, und unsere Kletter-Gruppe trifft sich eher spontan.
 
 Ob es dabei bleibt, dass unsere kletterfreudigen Kinder und Erwachsenen
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun.md b/content/projekte/hack-n-fun/freizeiten/hacknsun.md
deleted file mode 100644
index 4c6233eedb2706bd75170d68985a347aea84e92d..0000000000000000000000000000000000000000
--- a/content/projekte/hack-n-fun/freizeiten/hacknsun.md
+++ /dev/null
@@ -1,3 +0,0 @@
-+++
-titel = "Hack'n'Sun"
-+++
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/essen.jpg b/content/projekte/hack-n-fun/freizeiten/hacknsun/essen.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..360359bcbfe1ca67f507885bb2caae72e271a271
Binary files /dev/null and b/content/projekte/hack-n-fun/freizeiten/hacknsun/essen.jpg differ
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/hacken_am_lagerfeuer.jpg b/content/projekte/hack-n-fun/freizeiten/hacknsun/hacken_am_lagerfeuer.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e09c27feb6eb947b49dce19aaf3636740131230c
Binary files /dev/null and b/content/projekte/hack-n-fun/freizeiten/hacknsun/hacken_am_lagerfeuer.jpg differ
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md b/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..78492f20fa89efe74ee37fee8e57d533ced0c835
--- /dev/null
+++ b/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md
@@ -0,0 +1,60 @@
++++
+title = "Hack'n'Sun"
+
+template = "pages/raw.html"
++++
+
+{% hero_section(title="Hack'n'Sun", background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=true) %}
+Technik, Hacking, Spaß und Freizeit bei Sonne und Lagerfeuer
+{% end %}
+
+{% photo_section(title="Computer und Draußen, so viel du magst", img="hacken_am_lagerfeuer.jpg", alt="Kinder mit Laptops an einer Lagerfeuerstelle", credit="Dominik George, CC-BY-SA") %}
+Bei Hack'n'Sun geht es um genau das, was der Name sagt – Hacken, also das Basteln mit Technik,
+und Sonne, denn wir sind die ganze Zeit draußen an der frischen Luft.
+
+Mehrere Tage lang treffen wir uns in einer großen Gruppe auf einem Jugendzeltplatz.
+Dort werden Pavillons aufgebaut, in denen [Workshops](@/projekte/hack-n-fun/workshops/index.md)
+stattfinden, und daneben ein großes Zeltlager.
+
+Tagsüber kann man zusammen alle möglichen versciedenen Dinge mit Elektronik, Programmieren
+und vielem mehr machen, und abends am Lagerfeuer sitzen, Toben, Beach-Volleyball spielen oder
+eine Nachtwanderung machen. Und wer nicht aufhören kann, an seinem Spiel zu programmieren, kann
+auch mit dem Laptop am Lagerfeuer sitzen.
+{% end %}
+
+{% photo_section(title="Lernen und Technikbasteln", img="workshopraum.jpg", alt="Programmierworkshop in einem Raum", credit="Dominik George, CC-BY-SA", align="right") %}
+In den [Workshops](@/projekte/hack-n-fun/workshops/index.md) bieten die Kinder und
+Jugendlichen aus der [Teckids-Gemeinschaft](@/gemeinschaft/wer.md) allen
+Teilnehmenden an, selber Spiele, Apps oder elektronische Geräte zu
+entwerfen und zu bauen. Denn Technik kann man
+[hinterfragen, verstehen und selber bauen](@/infos/verstehen/index.md)!
+
+Die Workshops sind so gestaltet, dass am Vormittag und am Nachmittag mehrere
+Workshops von etwa drei Stunden Dauer angeboten werden. Die Tutor\*innen aus
+dem Team haben verschiedene Themen vorbereitet, so dass alle erstmal ausprobieren
+können, was möglich ist.
+
+Wer nach drei Stunden genug von einem Thema hat, kann am Nachmittag ein anderes
+Thema ausprobieren. Wer sich in sein Thema aber noch mehr vertiefen möchte, kann
+auch noch länger bei seinem Thema bleiben. Eigene Ideen sind auch jederzeit
+willkommen!
+{% end %}
+
+{% photo_section(title="Essen, Trinken, Schlafen", img="essen.jpg", alt="Niklas mit Kochmütze verteilt Crêpes", credit="Dominik George, CC-BY-NC-ND") %}
+Natürlich ist auch für das leibliche Wohl gesorgt, denn während der Freizeit
+leben alle zusammen als Gemeinschaft. Beim Essen versuchen wir, uns den Wünschen
+der Teilnehmenden anzupassen. Bei der Anmeldung darf man schon sein Lieblingsessen
+angeben, und auch vor Ort haben wir immer ein offenes Ohr für Wünsche.
+
+Ãœblicherweise gibt es:
+
+* Frühstück ab etwa 9 Uhr, mit Brötchen, Aufschnitt, Rührei, Müsli
+* Snacks während des ganzen Tages (Obst, Rohkost, Kekse, Studentenfutter)
+* Nachmittagsüberraschung
+* Warmes Abendessen (z.B. Nudeln, selbstgemachte Pizza oder Grillen)
+
+Ãœbernachten kann man entweder mit einer Kleingruppe oder alleine im selbt mitgebrachten
+Zelt oder in einer größeren Gruppe in unseren Gruppenzelten.
+{% end %}
+
+{{ event_section(title="Die nächsten Hack'n'Sun", slug="hacknsun-2024-bn") }}
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/loeten_wiese.jpg b/content/projekte/hack-n-fun/freizeiten/hacknsun/loeten_wiese.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f486943217a49e7ca6f3276f9b18ac99e093c49f
Binary files /dev/null and b/content/projekte/hack-n-fun/freizeiten/hacknsun/loeten_wiese.jpg differ
diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/workshopraum.jpg b/content/projekte/hack-n-fun/freizeiten/hacknsun/workshopraum.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..514d2d905e609e467b7d56826a651a76f4d37a74
Binary files /dev/null and b/content/projekte/hack-n-fun/freizeiten/hacknsun/workshopraum.jpg differ
diff --git a/content/projekte/hack-n-fun/freizeiten/index.md b/content/projekte/hack-n-fun/freizeiten/index.md
index 7caba68e9aa50b5d6d61d4ae208e3e7e6ebccf80..46d698cbd9f7afe090b5f7fb90d006788e64a648 100644
--- a/content/projekte/hack-n-fun/freizeiten/index.md
+++ b/content/projekte/hack-n-fun/freizeiten/index.md
@@ -9,7 +9,7 @@ zielgruppe = ["Kinder und Jugendliche", "Eltern"]
 image = "hacken_am_lagerfeuer.jpg"
 alt = "Mehrere Jugendliche sitzen an einen Lagerfeuer und entwickeln an ihrem eigenem Spiel"
 title = "Hack'n'Sun"
-link = "@/projekte/hack-n-fun/freizeiten/hacknsun.md"
+link = "@/projekte/hack-n-fun/freizeiten/hacknsun/index.md"
 description = "Unsere Jährliche Sommerfreizeit mit vielen Workshops, Spielen und viel spaß!"
 
 [[extra.further.freizeit]]
diff --git a/events.json b/events.json
index cc1bb0fa51d962a4008d4180bdb1de0eea578750..376a2e6b81464558f0c786b10f5b093c6b3f078a 100644
--- a/events.json
+++ b/events.json
@@ -5,5 +5,12 @@
     "location": "Graz",
     "date": "2024-04-06",
     "cost": 40
+  },
+  "hacknsun-2024-bn": {
+    "display_name": "Hack'n'Sun 2024 (Jugendzeltplatz Bonn)",
+    "description": "Große Sommerfreizeit in Bonn-Bad Godesberg mit Ausflügen zu FrOScon und Museen",
+    "location": "Bonn",
+    "date": "2024-08-19",
+    "cost": 150
   }
 }
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 241d57340e6f7fb2a2759697ba3a1a9ef513fdee..f6b19c4cf87039ba20ecf4eed87e9a832c6815e2 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -3,7 +3,7 @@
   height: 70%;
 }
 
-figure.image > figcaption {
+figure.image>figcaption {
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -31,3 +31,20 @@ figure.image > figcaption {
 .author-images>figure:last-child {
   margin-right: 0;
 }
+
+.hero.has-background {
+  position: relative;
+  overflow: hidden;
+
+  img.hero-background {
+    position: absolute;
+    object-fit: cover;
+    object-position: center center;
+    width: 100%;
+    height: 100%;
+  }
+
+  img.hero-background.is-transparent {
+    opacity: 0.3;
+  }
+}
diff --git a/templates/pages/raw.html b/templates/pages/raw.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2d9395c41d8ef2be2c04a98e06c500d1d9df166
--- /dev/null
+++ b/templates/pages/raw.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block main %}
+  {{ page.content | safe }}
+{% endblock %}
diff --git a/templates/shortcodes/event_section.html b/templates/shortcodes/event_section.html
new file mode 100644
index 0000000000000000000000000000000000000000..28fafa63ffbba9b842c7641ca13c9c8178c24f8c
--- /dev/null
+++ b/templates/shortcodes/event_section.html
@@ -0,0 +1,7 @@
+<section class="section">
+  <div class="container">
+    {% if title %}<h2 class="title is-2">{{ title }}</h2>{% endif %}
+    {% set no_title = true -%}
+    {% include "shortcodes/teckids_event.html" %}
+  </div>
+</section>
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
new file mode 100644
index 0000000000000000000000000000000000000000..e27fddfebba3e30d3dbbdf940bb924c348588682
--- /dev/null
+++ b/templates/shortcodes/hero_section.html
@@ -0,0 +1,12 @@
+<section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
+  {% if background_img %}
+    {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
+  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" />
+  {% endif -%}
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="title">{{ title }}</h1>
+      {% if body %}<p class="subtitle">{{ body }}</p>{% endif -%}
+    </div>
+  </div>
+</section>
diff --git a/templates/shortcodes/photo_section.html b/templates/shortcodes/photo_section.html
index 6d7a255845bd3176f29b096d0e9b4382b50317b5..2e853858bb690a1a7bdc9700e91db45f41b68394 100644
--- a/templates/shortcodes/photo_section.html
+++ b/templates/shortcodes/photo_section.html
@@ -1,17 +1,19 @@
 <section class="section">
-  <h2 class="title is-2">{{ title }}</h2>
-  <div class="columns is-vcentered">
-    <div class="column">
-      <figure class="image is-4by3">
-        {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ img, width=800, height=600) -%}
-        <img src="{{image.url}}" alt="{{ alt }}"/>
-        {% if credit %}
-        <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ credit }}</figcaption>
-        {% endif %}
-      </figure>
-    </div>
-    <div class="column content">
-      {{ body|markdown|safe }}
+  <div class="container">
+    {% if title %}<h2 class="title is-2">{{ title }}</h2>{% endif %}
+    <div class="columns is-vcentered mt-4">
+      <div class="column is-one-third {% if align|default(value="left") == "right" %}is-pulled-right{% endif %}">
+        <figure class="image is-4by3">
+          {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ img, width=800, height=600) -%}
+          <img src="{{image.url}}" alt="{{ alt }}"/>
+          {% if credit %}
+          <figcaption class="p-1 has-text-white has-background-black is-size-7 is-italic">{{ credit }}</figcaption>
+          {% endif %}
+        </figure>
+      </div>
+      <div class="column is-two-thirds content">
+        {{ body|markdown|safe }}
+      </div>
     </div>
   </div>
 </section>
diff --git a/templates/shortcodes/teckids_event.html b/templates/shortcodes/teckids_event.html
index 62571240fa1c09dd9fbfab400e30e7b254f51fb3..69e489a7ce6d8531fa8dc399a246fcd371e07ef7 100644
--- a/templates/shortcodes/teckids_event.html
+++ b/templates/shortcodes/teckids_event.html
@@ -1,6 +1,6 @@
 {% set events_data = load_data(path="events.json") -%}
 {% set event = events_data[slug] -%}
-<h2>{{ title | default(value="Informationen und Anmeldung") }}</h2>
+{% if not no_title %}<h2 class="title is-2">{{ title | default(value="Informationen und Anmeldung") }}</h2>{% endif %}
 <section class="section event-section">
   <div class="card event-card">
     <div class="card-content">