f

pages/_app.jsx

@@ -1,5 +1,6 @@
 import "../styles/variables.scss";
 import "../styles/globals.scss";
+import "../styles/LegalAndPrivacy.scss";
 import Nav from "../components/Nav";
 import Footer from "../components/Footer";
 

pages/about.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import Map from "../components/Map";
 import styles from "../styles/About.module.scss";
 import { collection, doc, getDoc, getDocs } from "firebase/firestore";
@@ -18,34 +19,30 @@ export async function getServerSideProps({ locale }) {
 	};
 }
 
-export default function About() {
+export default function About({ localeTexts }) {
 	return (
 		<div className={styles.about}>
-			<h1>About</h1>
+			<h1>{localeTexts?.about?.headline}</h1>
 			<div className={styles.aboutContent}>
 				<div className={styles.aboutContentText}>
-					<img src="/images/test.jpg" alt="" />
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis illo
-					quos ea pariatur at qui amet? Repellat recusandae illum sequi, rem,
-					deleniti delectus culpa dolorem nostrum odit excepturi provident iste?
-					Illum temporibus saepe esse reiciendis delectus veniam voluptas vero
-					voluptates earum, ea porro quos numquam ex, modi corrupti nam, iusto
-					minima deserunt non accusantium quibusdam eaque quod! Quaerat, quam
-					sunt. Assumenda vitae dconssectetur reprehenderit, cum quaerat tempore
-					nisi quod ex amet modi delectus porro! Ipsam, numquam excepturi qui ut
-					ipsa ipsum error consequatur magni alias molestiae labore explicabo
-					laboriosam repellendus. Assumenda vitae consectetur reprehenderit, cum
-					quaerat tempore nisi quod ex amet modi delectus porro! Ipsam, numquam
-					excepturi qui ut ipsa ipsum error consequatur magni alias molestiae
-					labore explicabo laboriosam repellendus.
+					<img
+						src={localeTexts?.about?.image?.url}
+						alt={localeTexts?.about?.image?.alt}
+					/>
+
+					<div
+						dangerouslySetInnerHTML={{
+							__html: localeTexts?.about?.content,
+						}}
+					></div>
 				</div>
 
 				<div className={styles.aboutContentInformation}>
-					<div>
-						<h3>Information</h3>
-						<b>Email:</b> test-test@test.com <br />
-						<b>Address:</b> Auf dem Glockenberg 26 38707 Altenau <br />
-					</div>
+					<div
+						dangerouslySetInnerHTML={{
+							__html: localeTexts?.about?.information,
+						}}
+					></div>
 					<div className={styles.aboutContentInformationText}>
 						<Map width={"100%"} height="400px" />
 					</div>

pages/index.jsx

@@ -43,25 +43,25 @@ export default function Home({ localeTexts }) {
 				<ul>
 					<Link href={"/surroundings"}>
 						<FontAwesomeIcon icon={faBreadSlice} />
-						Backeries
+						{localeTexts?.home?.surroundings?.backeries}
 					</Link>
 
 					<Link href={"/surroundings"}>
 						<FontAwesomeIcon icon={faUtensils} />
-						Amenities
+						{localeTexts?.home?.surroundings?.amenities}
 					</Link>
 					<Link href={"/surroundings"}>
 						<FontAwesomeIcon icon={faBeer} />
-						Brewery
+						{localeTexts?.home?.surroundings?.brewery}
 					</Link>
 
 					<Link href={"/surroundings"}>
 						<FontAwesomeIcon icon={faSeedling} />
-						Kräuterpark
+						{localeTexts?.home?.surroundings?.kraeuterpark}
 					</Link>
 					<Link href={"/surroundings"}>
 						<FontAwesomeIcon icon={faSpa} />
-						Spa park
+						{localeTexts?.home?.surroundings?.spaPark}
 					</Link>
 				</ul>
 			</div>

pages/legal.jsx

@@ -1,94 +1,30 @@
-import styles from "../styles/Legal.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 
-export default function Legal() {
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+export default function Legal({ localeTexts }) {
 	return (
-		<div className={styles.legal}>
-			<h1>Legal Notice | Impressum</h1>
-			<div className={styles.legalContent}>
-				<h3>Angaben gemäß § 5TMG</h3>
-				<p>
-					<b>Vorname Nachname</b>
-					<br />
-					Pension test <br />
-					Teststraße 9 <br />
-					234234 Bremen <br />
-					Deutschland <br />
-				</p>
-				<h3>Kontakt / Contact</h3>
-				<p>
-					Tel.: +49 231 123412123
-					<br />
-					E-Mail: test@test.de <br />
-				</p>
-
-				<h3>EU-Streitschlichtung</h3>
-				<p>
-					Die Europäische Kommission stellt eine Plattform zur
-					Online-Streitbeilegung (OS) bereit: <br />
-					<a href="https://ec.europa.eu/consumers/odr/">
-						https://ec.europa.eu/consumers/odr/
-					</a>
-					. <br />
-					Unsere E-Mail-Adresse finden Sie oben im Impressum. <br />
-				</p>
-
-				<h3>Verbraucherstreitbeilegung/Universalschlichtungsstelle</h3>
-				<p>
-					Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren
-					vor einer <br />
-					Verbraucherschlichtungsstelle teilzunehmen.
-				</p>
-
-				<h3>Haftung für Inhalte</h3>
-				<p>
-					Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
-					auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
-					§§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
-					verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
-					überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
-					Tätigkeit hinweisen. <br /> <br />
-					Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
-					Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
-					Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der
-					Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden
-					von entsprechenden Rechtsverletzungen werden wir diese Inhalte
-					umgehend entfernen.
-				</p>
-
-				<h3>Haftung für Links</h3>
-				<p>
-					Unser Angebot enthält Links zu externen Websites Dritter, auf deren
-					Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
-					fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
-					verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der
-					Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
-					Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige
-					Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. <br />{" "}
-					<br />
-					Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch
-					ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei
-					Bekanntwerden von Rechtsverletzungen werden wir derartige Links
-					umgehend entfernen.
-				</p>
-
-				<h3>Urheberrecht</h3>
-				<p>
-					Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
-					Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
-					Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
-					Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
-					jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite
-					sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
-					<br />
-					<br />
-					Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
-					wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden
-					Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf
-					eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen
-					entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen
-					werden wir derartige Inhalte umgehend entfernen.
-				</p>
-			</div>
+		<div className="legalAndPrivayContainer">
+			<h1>{localeTexts?.legal?.headline}</h1>
+			<div
+				className="content"
+				dangerouslySetInnerHTML={{
+					__html: localeTexts?.legal?.content,
+				}}
+			></div>
 		</div>
 	);
 }

pages/pricing.jsx

@@ -18,10 +18,10 @@ export async function getServerSideProps({ locale }) {
 	};
 }
 
-function Pricing() {
+function Pricing({ localeTexts }) {
 	return (
 		<div className={styles.pricing}>
-			<h1 className="pageHeadline">Pricing</h1>
+			<h1 className="pageHeadline">{localeTexts?.pricing?.headline}</h1>
 		</div>
 	);
 }

pages/privacy.jsx

@@ -1,9 +1,30 @@
-import styles from "../styles/Privacy.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 
-export default function Privacy() {
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const data = await getDoc(doc(db, "localeTexts", locale));
+
+	return {
+		props: { localeTexts: data.data() ?? {} },
+	};
+}
+export default function Privacy({ localeTexts }) {
 	return (
-		<div className={styles.privacy}>
-			<h1>Privacy</h1>
+		<div className="legalAndPrivayContainer">
+			<h1>{localeTexts?.privacy?.headline}</h1>
+			<div
+				className="content"
+				dangerouslySetInnerHTML={{
+					__html: localeTexts?.privacy?.content,
+				}}
+			></div>
 		</div>
 	);
 }