I'm working with Astro and I'm very new to it.
This is my CityPageLayout.astro
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
const { entry } = Astro.props;
const { data } = entry;
---
<html lang="de">
<head>
<meta charset="utf-8" />
<title>{data.title}</title>
<meta name="description" content={data.excerpt} />
</head>
<body>
<Header />
<main>
<section>
<div class="container">
<h1>{data.title}</h1>
[Intro TExt]
</div>
<div class="container">
<h2>Essen & Schlafen in {data.title.replace("Salsa in ", "")}</h2>
[Accomodation Text]
</div>
</section>
</main>
<Footer />
</body>
</html>
and this my mdx file
---
title: "Salsa in Berlin"
excerpt: "Salsa tanzen in Berlin – hier findest du Tanzschulen, Clubs und Events!"
---
Intro TExt
<p>Berlin ist eine pulsierende Stadt mit einer lebendigen Salsa-Szene.</p>
<p>Hier findest du sowohl Anfänger- als auch Fortgeschrittenenkurse.</p>
Accomodation Text
<p>Diese Stadt bietet zahlreiche Möglichkeiten für eine angenehme Übernachtung.</p>
<p>Von günstigen Hostels bis hin zu luxuriösen Hotels ist alles dabei.</p>
<p>Auch kulinarisch hat die Stadt einiges zu bieten – von Streetfood bis zur gehobenen Küche.</p>
I am aware that this does not work. I mean it works but not as I want. The Intro Text should appear below the h1, and the accommodation text should appear below the h2.
I tried a lot of things but I can not make it work. The slots are always empty.