[init] initlialize next app & convert old react app

2025-10-28 20:32:13 +01:00 · 2022-12-16 17:13:47 +01:00
parent 95d8b832e9
commit e439aad1db
42 changed files with 10568 additions and 5279 deletions
--- a/components/DiashowHomePage.jsx
+++ b/components/DiashowHomePage.jsx
@@ -0,0 +1,77 @@
+import { collection, getDocs } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import SimpleImageSlider from "react-simple-image-slider";
+import { Slide } from "react-slideshow-image"; // https://react-slideshow-image.netlify.app/?path=/story/examples-slide--default
+import { db } from "../firebase-config";
+import "../styles/DiashowHomePage.module.scss";
+
+function DiashowHomePage(props) {
+	const [imageSrc, setImageSrc] = useState([]);
+	const [height, setHeight] = useState(500);
+	const diashowImagesCollectionRef = collection(db, "diashowImages");
+
+	useEffect(() => {
+		async function getImages() {
+			const data = await getDocs(diashowImagesCollectionRef);
+
+			const urls = [];
+			data.docs.forEach((doc) => {
+				urls.push(doc.data().url);
+			});
+
+			setImageSrc(urls);
+		}
+		getImages();
+	}, []);
+
+	if (typeof window !== "undefined") {
+		window.addEventListener("resize", () => {
+			setHeight(window.innerWidth <= 3000 ? 500 : 800);
+		});
+	}
+
+	return (
+		<div className="diashow-div">
+			{imageSrc?.length > 0 ? (
+				<SimpleImageSlider
+					width={"100%"}
+					height={height}
+					images={imageSrc}
+					showBullets={true}
+					showNavs={true}
+					autoPlay={true}
+					autoPlayDelay={15}
+					loop={true}
+					slideDuration={1}
+				/>
+			) : (
+				""
+			)}
+
+			{/* {diashowImages?.length > 0 ? (
+        <Slide transitionDuration={1000} autoplay={false}>
+          {diashowImages.map((diashowImage, index) => (
+            <div className="each-slide" key={index}>
+              <div
+                style={{
+                  backgroundImage: `url(${diashowImage.url})`,
+                  height: props.height,
+                }}
+              >
+                {diashowImage.showTitle ? (
+                  <span>{renderTitle(diashowImage, props.titleLanguage)}</span>
+                ) : (
+                  ""
+                )}
+              </div>
+            </div>
+          ))}
+        </Slide>
+      ) : (
+        ""
+      )} */}
+		</div>
+	);
+}
+
+export default DiashowHomePage;
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+import styles from "../styles/Footer.module.scss";
+
+export default function Footer() {
+	return (
+		<div className={styles.footer}>
+			<ul className={styles.footerLinks}>
+				<Link href="/legal">Legal Notice | Impressum</Link>
+				<Link href="/privacy">Privacy | Datenschutz</Link>
+			</ul>
+			<p className={styles.copyrightText}>&#169; domain.de</p>
+		</div>
+	);
+}
--- a/components/GalleryFullscreen.jsx
+++ b/components/GalleryFullscreen.jsx
@@ -0,0 +1,81 @@
+/* eslint-disable @next/next/no-img-element */
+import {
+	faAngleLeft,
+	faAngleRight,
+	faClose,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+import styles from "../styles/GalleryFullscreen.module.scss";
+import { useRouter } from "next/navigation";
+function GalleryFullscreen({ images, activeImage }) {
+	const router = useRouter();
+	const locale = router.locale;
+	const [currentImgIndex, setCurrentImgIndex] = useState();
+
+	useEffect(() => {
+		images.forEach((image, i) => {
+			if (image.id === activeImage.id) {
+				setCurrentImgIndex(i);
+			}
+		});
+	}, [activeImage, images]);
+
+	return (
+		<div className={styles.galleryFullscreen}>
+			<style>
+				{`* {
+                overflow: hidden !important;
+            }`}
+			</style>
+			<div className={styles.galleryFullscreenTitle}>
+				<h2>{locale === "en" ? activeImage.title.en : activeImage.title.de}</h2>
+				<div>
+					{currentImgIndex + 1} / {images.length}
+				</div>
+			</div>
+
+			<div className={styles.galleryFullscreenImgContainer}>
+				<img
+					src={activeImage.url}
+					alt={locale === "en" ? activeImage.title.en : activeImage.title.de}
+				/>
+			</div>
+
+			<FontAwesomeIcon
+				icon={faAngleLeft}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenBtnCycle} ${styles.galleryFullscreenPrev}`}
+				onClick={() =>
+					currentImgIndex > 0
+						? router.push({
+								search: "activeImg=" + images[currentImgIndex - 1].id,
+						  })
+						: router.push({
+								search: "activeImg=" + images[images.length - 1].id,
+						  })
+				}
+			/>
+			<FontAwesomeIcon
+				icon={faAngleRight}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenBtnCycle} ${styles.galleryFullscreenNext}`}
+				onClick={() =>
+					currentImgIndex < images.length - 1
+						? router.push({
+								search: "activeImg=" + images[currentImgIndex + 1].id,
+						  })
+						: router.push({
+								search: "activeImg=" + images[0].id,
+						  })
+				}
+			/>
+
+			<FontAwesomeIcon
+				icon={faClose}
+				className={`${styles.galleryFullscreenBtn} ${styles.galleryFullscreenClose}`}
+				onClick={() => router.push("/gallery")}
+			/>
+		</div>
+	);
+}
+
+export default GalleryFullscreen;
--- a/components/GalleryGrid.jsx
+++ b/components/GalleryGrid.jsx
@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect, useState } from "react";
+import styles from "../styles/GalleryGrid.module.scss";
+import { useRouter } from "next/router";
+
+function GalleryGrid({ images, baseURL }) {
+	const router = useRouter();
+	const locale = router.locale;
+
+	return (
+		<div className={styles.galleryGrid}>
+			<div className={styles.galleryGridGrid}>
+				{images.length > 0
+					? images.map((image, i) => (
+							<div
+								key={i}
+								onClick={() => router.push({ search: "activeImg=" + image.id })}
+								className="noSelect"
+							>
+								<img
+									src={image.url}
+									alt={locale === "en" ? image.title.en : image.title.de}
+								/>
+								<div className={styles.galleryImageTitle}>
+									<p>{locale === "en" ? image.title.en : image.title.de}</p>
+								</div>
+							</div>
+					  ))
+					: ""}
+			</div>
+		</div>
+	);
+}
+
+export default GalleryGrid;
--- a/components/LocaleSwitch.jsx
+++ b/components/LocaleSwitch.jsx
@@ -0,0 +1,76 @@
+import React, { useContext, useEffect } from "react";
+import Select from "react-select";
+import getConfig from "next/config";
+import { useRouter } from "next/router";
+
+export default function LocaleSwitch({ styles }) {
+	const router = useRouter();
+
+	let selectOptions = [
+		{ value: "en", label: "English" },
+		{ value: "de", label: "Deutsch" },
+	];
+
+	const customStyles = {
+		control: (provided, state) => ({
+			...provided,
+			background: "#fff",
+			borderColor: "#9e9e9ec0",
+			minHeight: "30px",
+			height: "30px",
+			boxShadow: state.isFocused ? null : null,
+			fontSize: "0.7em",
+		}),
+
+		valueContainer: (provided, state) => ({
+			...provided,
+			height: "30px",
+			padding: "0 0 0 5px",
+			margin: "-2px 0 0 0",
+		}),
+
+		input: (provided, state) => ({
+			...provided,
+			margin: "0px",
+		}),
+		indicatorSeparator: (state) => ({
+			display: "none",
+			padding: 0,
+			margin: 0,
+		}),
+		indicatorsContainer: (provided, state) => ({
+			...provided,
+			height: "30px",
+			padding: "0",
+		}),
+		dropdownIndicator: (provided, state) => ({
+			...provided,
+			padding: "0",
+		}),
+		option: (provided, state) => ({
+			...provided,
+			padding: "5px",
+			fontSize: "0.7em",
+		}),
+	};
+
+	return (
+		<div className={styles.navSelectContainer}>
+			{router.locale !== null ? (
+				<Select
+					styles={customStyles}
+					defaultValue={selectOptions.filter(
+						(option) => option.value === router.locale
+					)}
+					onChange={(v) => {
+						router.push(router.asPath, undefined, { locale: v.value });
+					}}
+					options={selectOptions}
+					classNamePrefix="nav-select"
+				/>
+			) : (
+				""
+			)}
+		</div>
+	);
+}
--- a/components/Map.jsx
+++ b/components/Map.jsx
@@ -0,0 +1,44 @@
+import "../styles/Map.module.scss";
+
+function Map({ width = "100%", height = "100%", showAddressText }) {
+	return (
+		<div
+			className="map"
+			style={
+				typeof window !== "undefined"
+					? {
+							width: width > window.innerWidth ?? "100%",
+							height: height > window.innerHeight ?? "100%",
+					  }
+					: {
+							width: "100%",
+							height: "100%",
+					  }
+			}
+		>
+			<iframe
+				id="googleMap"
+				title="Google Maps"
+				src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2074.752438061636!2d10.442157776201181!3d51.80048944135434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b37fa3d7cd9a35%3A0xf42c1941b19fcd8d!2sFerienwohnung%20Glockenberg!5e0!3m2!1sde!2sde!4v1664554395680!5m2!1sde!2sde"
+				style={{ border: "0" }}
+				width={width}
+				height={height}
+				allowfullscreen="true"
+				loading="lazy"
+				referrerpolicy="no-referrer-when-downgrade"
+			></iframe>
+			{showAddressText ? (
+				<a
+					className="textMuted"
+					href="https://www.google.com/maps/place/Ferienwohnung+Glockenberg/@51.8004894,10.4421578,17.25z/data=!4m13!1m7!3m6!1s0x47a5160eb8d1cf11:0x425ac6d94ac3f50!2sAltenau!3b1!8m2!3d51.8023804!4d10.4457294!3m4!1s0x47b37fa3d7cd9a35:0xf42c1941b19fcd8d!8m2!3d51.8004498!4d10.440787"
+				>
+					Auf dem Glockenberg 26, C1 5-6, 38707 Altenau
+				</a>
+			) : (
+				""
+			)}
+		</div>
+	);
+}
+
+export default Map;
--- a/components/Nav.jsx
+++ b/components/Nav.jsx
@@ -0,0 +1,69 @@
+import Link from "next/link";
+import styles from "../styles/Nav.module.scss";
+import LocaleSwitch from "./LocaleSwitch";
+import { useRouter } from "next/router";
+
+export default function Nav({ localeTexts }) {
+	const router = useRouter();
+	const currentRoute = router.pathname;
+
+	return (
+		<nav className={styles.nav}>
+			<h2
+				className={styles.brandName}
+				onClick={(e) => {
+					window.location = "/";
+				}}
+			>
+				{localeTexts?.nav?.brandName ?? ""}
+				{router.locale}
+			</h2>
+
+			<ul className={styles.navNavigationLeft}>
+				<Link
+					href="/"
+					className={currentRoute === "/" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.home ?? ""}
+				</Link>
+				<Link
+					href="/surroundings"
+					className={currentRoute === "/surroundings" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.surroundings ?? ""}
+				</Link>
+				<Link
+					href="/gallery"
+					className={currentRoute === "/gallery" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.gallery ?? ""}
+				</Link>
+
+				<Link
+					href="/pricing"
+					className={currentRoute === "/pricing" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.pricing ?? ""}
+				</Link>
+				<Link
+					href="/about"
+					className={currentRoute === "/about" ? `${styles.active}` : ""}
+				>
+					{localeTexts?.nav?.about ?? ""}
+				</Link>
+			</ul>
+			<div className={styles.navNavigationRight}>
+				<button
+					className={styles.btnContact}
+					id="navigationLinkBooking"
+					onClick={(e) => {
+						window.location = "/booking";
+					}}
+				>
+					{localeTexts?.nav?.booking ?? ""}
+				</button>
+				<LocaleSwitch styles={styles} />
+			</div>
+		</nav>
+	);
+}
--- a/firebase-config.js
+++ b/firebase-config.js
@@ -0,0 +1,16 @@
+import { getFirestore } from "@firebase/firestore";
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+	apiKey: "AIzaSyDWzRRpiAd9UESS_DwhoiKKcvqPgDowQ28",
+	authDomain: "react-apartment-364115.firebaseapp.com",
+	projectId: "react-apartment-364115",
+	storageBucket: "react-apartment-364115.appspot.com",
+	messagingSenderId: "460150243441",
+	appId: "1:460150243441:web:2e19e848bbcf710a839bd0",
+	measurementId: "G-LVH2RF0ENW",
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore();
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-}
+	reactStrictMode: true,
+	i18n: {
+		locales: ["en", "de"],
+		defaultLocale: "en",
+	},
+};

-module.exports = nextConfig
+module.exports = nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,18 +1,30 @@
 {
-  "name": "next-apartment",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "eslint": "8.29.0",
-    "eslint-config-next": "13.0.6",
-    "next": "13.0.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  }
+	"name": "next-apartment",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@formatjs/intl-localematcher": "^0.2.32",
+		"@fortawesome/fontawesome-svg-core": "^6.2.0",
+		"@fortawesome/free-regular-svg-icons": "^6.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.2.0",
+		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@googlemaps/react-wrapper": "^1.1.35",
+		"@react-google-maps/api": "^2.13.1",
+		"firebase": "^9.14.0",
+		"eslint": "8.29.0",
+		"eslint-config-next": "13.0.6",
+		"next": "13.0.6",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"sass": "^1.56.2",
+		"react-select": "^5.7.0",
+		"react-simple-image-slider": "^2.4.1",
+		"react-slideshow-image": "^4.0.5"
+	}
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,7 +0,0 @@
-import '../styles/globals.css'
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-
-export default MyApp
--- a/pages/_app.jsx
+++ b/pages/_app.jsx
@@ -0,0 +1,16 @@
+import "../styles/variables.scss";
+import "../styles/globals.scss";
+import Nav from "../components/Nav";
+import Footer from "../components/Footer";
+
+export default function App({ Component, pageProps }) {
+	return (
+		<>
+			<Nav {...pageProps} />
+			<main>
+				<Component {...pageProps} />
+			</main>
+			<Footer {...pageProps} />
+		</>
+	);
+}
--- a/pages/about.jsx
+++ b/pages/about.jsx
@@ -0,0 +1,56 @@
+import Map from "../components/Map";
+import styles from "../styles/About.module.scss";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { db } from "../firebase-config";
+
+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 About() {
+	return (
+		<div className={styles.about}>
+			<h1>About</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.
+				</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 className={styles.aboutContentInformationText}>
+						<Map width={"100%"} height="400px" />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/pages/gallery.jsx
+++ b/pages/gallery.jsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import GalleryFullscreen from "../components/GalleryFullscreen";
+import GalleryGrid from "../components/GalleryGrid";
+import { db } from "../firebase-config";
+import styles from "../styles/Gallery.module.scss";
+import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+
+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 Gallery({ localeTexts }) {
+	const router = useRouter();
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [activeImage, setActiveImage] = useState(null);
+	const [images, setImages] = useState([]);
+	const imagesCollectionRef = collection(db, "galleryImages");
+
+	useEffect(() => {
+		async function getImages() {
+			const data = await getDocs(imagesCollectionRef);
+			setImages(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
+		}
+
+		getImages();
+
+		setActiveImage(
+			images.find((image) => {
+				return image.id === router.query?.activeImg;
+			})
+		);
+	}, []);
+
+	useEffect(() => {
+		setActiveImage(
+			images.find((image) => {
+				return image.id === router.query?.activeImg;
+			})
+		);
+	}, [searchParams, images, activeImage, router]);
+
+	return (
+		<div className={styles.gallery}>
+			<h1 className="pageHeadline">{localeTexts?.gallery?.headline}</h1>
+			{activeImage ? (
+				<GalleryFullscreen activeImage={activeImage} images={images} />
+			) : (
+				<GalleryGrid images={images} />
+			)}
+		</div>
+	);
+}
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,71 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -0,0 +1,84 @@
+import Head from "next/head";
+import Nav from "../components/Nav";
+import Image from "next/image";
+import Link from "next/link";
+import {
+	faBeer,
+	faBreadSlice,
+	faSeedling,
+	faSpa,
+	faUtensils,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useContext } from "react";
+import "react-slideshow-image/dist/styles.css";
+//import { LocaleTextsContext } from "../App";
+import DiashowHomePage from "../components/DiashowHomePage";
+import Map from "../components/Map";
+import styles from "../styles/Home.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+
+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 Home({ localeTexts }) {
+	return (
+		<div className={styles.home}>
+			<DiashowHomePage titleLanguage={"eng"} height={"600px"} />
+
+			<div className={styles.homeSurroundings}>
+				<ul>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faBreadSlice} />
+						Backeries
+					</Link>
+
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faUtensils} />
+						Amenities
+					</Link>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faBeer} />
+						Brewery
+					</Link>
+
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faSeedling} />
+						Kräuterpark
+					</Link>
+					<Link href={"/surroundings"}>
+						<FontAwesomeIcon icon={faSpa} />
+						Spa park
+					</Link>
+				</ul>
+			</div>
+
+			<div className={styles.homeGrid}>
+				<div className={styles.homeIntroduction}>
+					<h2>{localeTexts?.home?.introduction?.headline ?? ""}</h2>
+					<p
+						dangerouslySetInnerHTML={{
+							__html: localeTexts?.home?.introduction?.text ?? "",
+						}}
+					></p>
+				</div>
+				<div className={styles.homeMapContainer}>
+					<Map showAddressText />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/pages/legal.jsx
+++ b/pages/legal.jsx
@@ -0,0 +1,94 @@
+import styles from "../styles/Legal.module.scss";
+
+export default function Legal() {
+	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>
+	);
+}
--- a/pages/pricing.jsx
+++ b/pages/pricing.jsx
@@ -0,0 +1,29 @@
+import styles from "../styles/Pricing.module.scss";
+import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { db } from "../firebase-config";
+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() ?? {} },
+	};
+}
+
+function Pricing() {
+	return (
+		<div className={styles.pricing}>
+			<h1 className="pageHeadline">Pricing</h1>
+		</div>
+	);
+}
+
+export default Pricing;
--- a/pages/privacy.jsx
+++ b/pages/privacy.jsx
@@ -0,0 +1,9 @@
+import styles from "../styles/Privacy.module.scss";
+
+export default function Privacy() {
+	return (
+		<div className={styles.privacy}>
+			<h1>Privacy</h1>
+		</div>
+	);
+}
--- a/pages/surroundings.jsx
+++ b/pages/surroundings.jsx
@@ -0,0 +1,66 @@
+/* eslint-disable @next/next/no-img-element */
+import styles from "../styles/Surroundings.module.scss";
+import { db } from "../firebase-config";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
+import { useRouter } from "next/router";
+
+export async function getInitialProps({ router }) {
+	let pageProps = {};
+	const { locale } = router;
+
+	return { pageProps, locale };
+}
+
+export async function getServerSideProps({ locale }) {
+	const dataLocale = await getDoc(doc(db, "localeTexts", locale));
+	const dataSurroundings = await getDocs(collection(db, "surroundings"));
+
+	return {
+		props: {
+			localeTexts: dataLocale.data() ?? {},
+			surroundings:
+				dataSurroundings.docs.map((doc) => ({ ...doc.data(), id: doc.id })) ??
+				{},
+		},
+	};
+}
+
+export default function Surroundings({ surroundings, localeTexts }) {
+	const { locale } = useRouter();
+	return (
+		<div className={styles.surroundings}>
+			<h1 className="pageHeadline">{localeTexts?.surroundings?.headline}</h1>
+
+			{surroundings.map((s, i) => {
+				{
+					console.log(locale);
+				}
+				return (
+					<div className={styles.surroundingsItem} key={i}>
+						<h4>{locale === "en" ? s.title.en : s.title.de}</h4>
+						<div className={styles.surroundingsItemImgContainer}>
+							<img
+								src={s.image.url}
+								alt={locale === "en" ? s.title.en : s.title.de}
+							/>
+							<div>
+								{s.links.map((l, i2) => {
+									return (
+										<a key={i2} href={l.url}>
+											{locale === "en" ? l.text.en : l.text.de}
+										</a>
+									);
+								})}
+							</div>
+						</div>
+						<div
+							dangerouslySetInnerHTML={{
+								__html: locale === "en" ? s.text.en : s.text.de,
+							}}
+						/>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
--- a/public/images/banner1.jpg
+++ b/public/images/banner1.jpg
--- a/public/images/banner2.jpg
+++ b/public/images/banner2.jpg
--- a/public/images/test.jpg
+++ b/public/images/test.jpg
--- a/public/images/test2.jpg
+++ b/public/images/test2.jpg
--- a/styles/About.module.scss
+++ b/styles/About.module.scss
@@ -0,0 +1,99 @@
+@import "./variables.scss";
+
+.about {
+	h1 {
+		text-align: center;
+		padding-top: 10px;
+		padding-bottom: 20px;
+	}
+
+	.aboutContent {
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		padding-left: 30px;
+		padding-right: 30px;
+		column-gap: 20px;
+		row-gap: 30px;
+
+		.aboutContentText {
+			font-size: 14pt;
+			text-align: left;
+			line-height: 2em;
+			color: #555555;
+			border-right: 2px solid #36363641;
+			letter-spacing: 1px;
+
+			img {
+				width: 500px;
+				float: left;
+				padding-right: 10px;
+			}
+		}
+
+		.aboutContentInformation {
+			display: block;
+			font-size: 12pt;
+			text-align: left;
+			line-height: 2em;
+			letter-spacing: 0.5px;
+			.aboutContentInformationContent {
+				display: grid;
+				grid-template-columns: 1fr;
+
+				@media (max-width: 1000px) {
+					grid-template-columns: 1fr 1fr;
+					gap: 10px;
+
+					p {
+						grid-column: 2;
+						grid-row: 1;
+					}
+					.map {
+						grid-column: 1;
+						grid-row: 1;
+					}
+				}
+
+				@media (max-width: 550px) {
+					grid-template-columns: 1fr;
+					p {
+						grid-column: 1;
+						grid-row: 1;
+					}
+					.map {
+						grid-column: 1;
+						grid-row: 2;
+					}
+				}
+			}
+		}
+
+		@media (max-width: 1400px) {
+			.aboutContentText {
+				font-size: 12pt;
+				letter-spacing: 0.5px;
+
+				img {
+					width: 400px;
+				}
+			}
+		}
+
+		@media (max-width: 1000px) {
+			grid-template-columns: 1fr;
+
+			.aboutContentText {
+				border-right: 0px solid #36363641;
+				border-bottom: 2px solid #36363641;
+			}
+		}
+
+		@media (max-width: 650px) {
+			padding-left: 5px;
+			padding-right: 5px;
+			img {
+				width: 100% !important;
+			}
+		}
+	}
+}
--- a/styles/DiashowHomePage.module.scss
+++ b/styles/DiashowHomePage.module.scss
@@ -0,0 +1,5 @@
+.diashow-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/styles/Footer.module.scss
+++ b/styles/Footer.module.scss
@@ -0,0 +1,45 @@
+@import "./variables.scss";
+
+.footer {
+	margin-top: 80px;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	background-color: $footer-color;
+
+	.footerLinks {
+		align-items: baseline;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		list-style: none;
+
+		a {
+			color: $footer-link-color;
+			padding-inline: 1rem;
+			cursor: pointer;
+			transition: 50ms linear;
+			text-decoration: none;
+			@media (max-width: 400px) {
+				padding-bottom: 5px;
+			}
+			&:visited {
+				color: $footer-link-color;
+				text-decoration: none;
+			}
+			&:hover {
+				text-decoration: underline;
+				color: $footer-link-color-hover;
+			}
+		}
+	}
+
+	.copyrightText {
+		color: $footer-link-color;
+		padding-right: 10px;
+	}
+}
--- a/styles/Gallery.module.scss
+++ b/styles/Gallery.module.scss
@@ -0,0 +1,3 @@
+@import "./variables.scss";
+.gallery {
+}
--- a/styles/GalleryFullscreen.module.scss
+++ b/styles/GalleryFullscreen.module.scss
@@ -0,0 +1,121 @@
+.galleryFullscreen {
+	z-index: 100 !important;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: calc(100%);
+	background-color: rgb(16, 15, 16);
+	position: fixed;
+	top: 0px;
+	padding-top: 40px;
+
+	.galleryFullscreenTitle {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: -100px;
+		h2 {
+			text-align: center;
+			color: white;
+		}
+		div {
+			padding-left: 20px;
+			padding-right: 20px;
+			margin-inline: 10px;
+			height: 15px;
+			border-radius: 50px;
+			background-color: rgb(255, 255, 255);
+			padding-left: 5px;
+			padding-right: 5px;
+			padding-bottom: 2px;
+			padding-top: -2px;
+			letter-spacing: 1px;
+			font-size: 12pt;
+			font-weight: bold;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: black;
+		}
+	}
+
+	.galleryFullscreenImgContainer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgb(6, 6, 6, 0);
+
+		img {
+			width: 100%;
+			max-height: 800px;
+			aspect-ratio: 16/9;
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+			border-radius: 20px;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: none;
+			-o-user-select: none;
+			user-select: none;
+		}
+
+		@media (min-width: 1920px) {
+			width: 80em;
+		}
+
+		@media (max-width: 1700px) {
+			width: 70em;
+		}
+
+		@media (max-width: 1450px) {
+			width: 80%;
+		}
+
+		@media (max-width: 1180px) {
+			width: 100%;
+			img {
+				border-radius: 0px;
+			}
+		}
+	}
+
+	.galleryFullscreenClose {
+		top: 10px;
+		right: 10px;
+		cursor: pointer;
+	}
+
+	.galleryFullscreenBtn {
+		color: white;
+		width: 50px;
+		height: 50px;
+		position: absolute;
+		cursor: pointer;
+		transition: all 100ms linear;
+		border-radius: 50px;
+		&:hover {
+			background-color: rgba(182, 182, 182, 0.15);
+		}
+	}
+	.galleryFullscreenBtnCycle {
+		top: calc(50vh - 25px);
+
+		@media (max-width: 1180px) {
+			background-color: rgba(28, 28, 28, 0.5);
+			&:hover {
+				background-color: rgba(28, 28, 28, 0.8);
+			}
+		}
+	}
+
+	.galleryFullscreenPrev {
+		left: 50px;
+	}
+
+	.galleryFullscreenNext {
+		right: 50px;
+	}
+}
--- a/styles/GalleryGrid.module.scss
+++ b/styles/GalleryGrid.module.scss
@@ -0,0 +1,64 @@
+.galleryGrid {
+	.galleryGridGrid {
+		display: grid;
+		padding-left: 50px;
+		padding-right: 50px;
+		grid-template-columns: 1fr 1fr 1fr;
+		column-gap: 5px;
+		row-gap: 5px;
+
+		@media (max-width: 1500px) {
+			padding-left: 10px;
+			padding-right: 10px;
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 1100px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 650px) {
+			grid-template-columns: 1fr;
+			column-gap: 0px;
+			row-gap: 2px;
+			padding-left: 0px;
+			padding-right: 0px;
+		}
+
+		@media (max-width: 350px) {
+			grid-template-columns: 1fr;
+		}
+		div {
+			border-radius: 0 0 10px 10px;
+			display: block;
+			text-align: center;
+			font-weight: bold;
+			transition: 80ms linear;
+			&:hover .galleryImageTitle {
+				background-color: rgba(19, 17, 17, 0.7);
+				opacity: 1;
+			}
+
+			.galleryImageTitle {
+				margin-top: -34px;
+				width: 100%;
+				height: 30px;
+				position: relative;
+				text-align: center;
+				font-weight: bold;
+				font-size: 15pt;
+				opacity: 0;
+				display: block;
+				color: white;
+			}
+
+			img {
+				width: 100%;
+				aspect-ratio: 16/9;
+				transition: 50ms linear;
+				cursor: pointer;
+				border-radius: 10px;
+			}
+		}
+	}
+}
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,129 +0,0 @@
-.container {
-  padding: 0 2rem;
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
-}
--- a/styles/Home.module.scss
+++ b/styles/Home.module.scss
@@ -0,0 +1,122 @@
+@import "./variables.scss";
+
+.home {
+	/* Children */
+	.homeSurroundings {
+		background-color: $home-surroundings-background-color;
+		font-size: $home-surroundings-font-size;
+		font-weight: bold;
+		color: $home-surroundings-font-color;
+
+		/* Children */
+		ul {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: wrap;
+			list-style: none;
+			padding: 10px 0px 10px 0px;
+			margin: 0 auto 0 auto;
+			padding-inline: 10px;
+
+			/* Media queries */
+			@media (min-width: 1050px) {
+				padding-inline: 80px;
+			}
+
+			/* Children */
+			a {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				transition: color 50ms ease-in-out;
+				padding: 0 0 3px 0;
+				transition: 50ms;
+				transition-timing-function: linear;
+				cursor: pointer;
+
+				&:visited {
+					color: $home-surroundings-font-color;
+				}
+
+				/* Media queries */
+				@media (max-width: 650px) {
+					padding-left: 10px;
+					padding-right: 10px;
+				}
+
+				/* Children */
+				svg {
+					width: $home-surroundings-font-size;
+					aspect-ratio: 1;
+					margin-right: 5px;
+				}
+			}
+		}
+	}
+
+	.homeGrid {
+		display: grid;
+		grid-template-columns: 1fr 0.5fr;
+		margin: 2em 0 0 0;
+		padding: 0 2.5em 0 2.5em;
+
+		/* Media queries */
+		@media screen and (max-width: $home-grid-breakpoint-1) {
+			padding-left: 10px;
+			padding-right: 10px;
+			grid-template-columns: 1fr;
+		}
+
+		/* Children */
+		div {
+			display: block;
+			width: 100%;
+			margin: 0 auto 0 auto;
+
+			/* Children */
+			h2 {
+				margin-top: 10px;
+				padding-bottom: 10px;
+				letter-spacing: 3px;
+				/* Media queries */
+				@media screen and (max-width: $home-grid-breakpoint-1) {
+					text-align: center;
+				}
+			}
+		}
+
+		.homeIntroduction p {
+			font-size: 1.3em;
+			line-height: 2em;
+
+			/* Media queries */
+			@media screen and (max-width: $home-grid-breakpoint-1) {
+				padding-left: 50px;
+				padding-right: 50px;
+			}
+
+			@media screen and (max-width: $home-grid-breakpoint-2) {
+				text-align: center;
+				padding-left: 20px;
+				padding-right: 20px;
+			}
+
+			@media screen and (max-width: $home-grid-breakpoint-3) {
+				font-size: 13pt;
+			}
+
+			@media screen and (max-width: $home-grid-breakpoint-4) {
+				font-size: 13pt;
+				text-align: center;
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+		}
+
+		.homeMapContainer {
+			width: 90%;
+		}
+	}
+}
--- a/styles/Legal.module.scss
+++ b/styles/Legal.module.scss
@@ -0,0 +1,27 @@
+@import "./variables.scss";
+
+.legal {
+	h1 {
+		text-align: center;
+		padding-top: 10px;
+		padding-bottom: 20px;
+	}
+
+	.legalContent {
+		width: 80%;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		font-size: 14pt;
+		text-align: left;
+		line-height: 2em;
+		color: #555555;
+		letter-spacing: 1px;
+
+		h3 {
+			margin-top: 40px;
+			margin-bottom: 10px;
+			color: black;
+		}
+	}
+}
--- a/styles/Map.module.scss
+++ b/styles/Map.module.scss
@@ -0,0 +1,16 @@
+.map {
+  display: flex;
+  flex-direction: column;
+
+  a {
+    flex: 1;
+    float: right;
+    width: 100%;
+    text-align: right;
+  }
+
+  #googleMap {
+    flex: 1;
+    aspect-ratio: 1;
+  }
+}
--- a/styles/Nav.module.scss
+++ b/styles/Nav.module.scss
@@ -0,0 +1,168 @@
+@import "./variables.scss";
+
+.nav {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 $navbar-padding-right 0 $navbar-padding-left;
+	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
+	height: $navbar-height;
+	background-color: $navbar-background-color;
+	color: $navbar-color;
+	font-size: $navbar-font-size;
+
+	/* Media queries */
+	@media screen and (max-width: $navbar-breakpoint-1) {
+		padding: 0 10px 0 10px;
+	}
+
+	@media screen and (max-width: $navbar-breakpoint-2) {
+		flex-direction: column;
+		padding: 0 0 5px 0;
+	}
+
+	@media screen and (max-width: $navbar-breakpoint-4) {
+		padding: 0 0 20px 0;
+	}
+	@media screen and (max-width: $navbar-breakpoint-5) {
+		padding: 0 0 45px 0;
+	}
+
+	/* Children */
+	* {
+		letter-spacing: 0px;
+	}
+
+	.brandName {
+		font-size: $navbar-brand-font-size;
+		color: $navbar-brand-color;
+		text-decoration: $navbar-brand-text-decoration;
+		padding: 0 0 0 15px;
+		margin: -4px 0 0 0;
+
+		&:hover {
+			cursor: pointer;
+		}
+
+		/* Media queries */
+		@media screen and (max-width: $navbar-breakpoint-2) {
+			font-size: calc($navbar-brand-font-size - 0.5rem);
+		}
+
+		@media screen and (max-width: $navbar-breakpoint-2) {
+			padding: 15px 0 0 0;
+		}
+	}
+
+	.navNavigationLeft {
+		align-items: baseline;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		list-style: none;
+		padding: 0;
+		margin: 0 auto 0 20px;
+
+		/* Media queries */
+		@media screen and (max-width: $navbar-breakpoint-2) {
+			justify-content: center;
+			width: 100%;
+			margin-left: 0px;
+		}
+
+		/* Children */
+		li {
+			padding-inline: 1rem;
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+
+		a {
+			padding-inline: 0.8rem;
+			margin-inline: 5px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: $navbar-navigation-color;
+			text-decoration: none;
+			transition: color 50ms ease-in-out;
+			border-radius: $navbar-navigation-border-radius;
+			font-weight: bold;
+			font-size: 12pt;
+			transition: 50ms;
+			transition-timing-function: linear;
+			border-bottom: 3px solid transparent;
+
+			@media (max-width: $navbar-breakpoint-3) {
+				padding-inline: 0.2rem;
+				margin-inline: 2px;
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+
+			&:hover {
+				color: $navbar-navigation-color-active;
+				background-color: $navbar-navigation-active-background-color-hover;
+			}
+		}
+
+		.active {
+			background-color: $navbar-navigation-active-background-color;
+			border-bottom: 3px solid $navbar-navigation-active-border-color;
+			border-radius: $navbar-navigation-border-radius;
+			color: $navbar-navigation-color-active;
+
+			&:hover {
+				color: $navbar-navigation-color-active;
+				background-color: $navbar-navigation-active-background-color;
+			}
+		}
+	}
+	.navNavigationRight {
+		align-items: center;
+		justify-content: center;
+		column-gap: 10px;
+		display: flex;
+		flex-direction: row;
+		list-style: none;
+		padding: 0;
+		margin-right: auto;
+		margin-right: 20px;
+
+		.btnContact {
+			border: 1px solid #2176ff;
+			background-color: #2176ff;
+			color: white;
+			font-weight: bold;
+			border-radius: 5px;
+			padding: 8px;
+			cursor: pointer;
+			&:hover {
+				transition: 100ms linear;
+				background-color: #0568d2;
+			}
+
+			@media (max-width: $navbar-breakpoint-2) {
+				position: absolute;
+				top: 5px;
+				right: 5px;
+			}
+
+			@media (max-width: $navbar-breakpoint-4) {
+				padding: 5px;
+			}
+		}
+
+		.navSelectContainer {
+			caret-color: transparent;
+			@media (max-width: $navbar-breakpoint-2) {
+				position: absolute;
+				top: 5px;
+				left: 5px;
+			}
+		}
+	}
+}
--- a/styles/Pricing.module.scss
+++ b/styles/Pricing.module.scss
--- a/styles/Privacy.module.scss
+++ b/styles/Privacy.module.scss
--- a/styles/Surroundings.module.scss
+++ b/styles/Surroundings.module.scss
@@ -0,0 +1,72 @@
+@import "./variables.scss";
+
+.surroundings {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 0 50px 0 50px;
+
+	/* Media queries */
+	@media screen and (max-width: $surroundings-breakpoint-2) {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	/* Children */
+	.surroundingsItem {
+		display: block;
+		padding: 0px 0px 10px 0px;
+		margin: 0 0 20px 0;
+		border-bottom: 3px solid #5555558e;
+		font-size: 15pt;
+		text-align: left;
+		line-height: 2em;
+		color: #555555;
+
+		.surroundingsItemImgContainer {
+			width: 500px;
+			float: left;
+
+			/* Media queries */
+			@media screen and (max-width: $surroundings-breakpoint-1) {
+				display: block;
+				font-size: 13pt;
+				text-align: center;
+			}
+
+			@media screen and (max-width: $surroundings-breakpoint-2) {
+				width: 100% !important;
+			}
+
+			@media screen and (min-width: $surroundings-breakpoint-2) {
+				padding-right: 20px;
+				padding-left: 20px;
+			}
+
+			@media screen and (max-width: $surroundings-breakpoint-3) {
+				padding-right: 0px;
+				padding-left: 0px;
+			}
+
+			/* Children */
+			img {
+				width: 100%;
+				height: 100%;
+			}
+			a {
+				font-size: 11pt;
+				padding-left: 10px;
+				user-select: none;
+			}
+		}
+
+		h4 {
+			padding-left: 20px;
+
+			/* Media queries */
+			@media screen and (max-width: $surroundings-breakpoint-1) {
+				text-align: center;
+			}
+		}
+	}
+}
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,26 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -0,0 +1,108 @@
+@import "./variables.scss";
+
+* {
+	margin: 0;
+	padding: 0;
+
+	/* Scrollbar FireFox*/
+	scrollbar-width: $scrollbar-width;
+	scrollbar-color: $scrollbar-foreground-color $scrollbar-background-color;
+
+	&:visited {
+		text-decoration: none;
+	}
+}
+
+/* Scrollbar Webkit */
+*::-webkit-scrollbar {
+	width: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+	background: $scrollbar-background-color;
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: $scrollbar-foreground-color;
+	border-radius: 10px;
+	border: 3px solid transparent;
+}
+
+body,
+html {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: 100%;
+	text-align: left;
+	color: $text-color;
+}
+
+#__next {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+
+	main {
+		width: 100%;
+		flex: 1;
+	}
+}
+
+p,
+a {
+	letter-spacing: 1px;
+	&:visited {
+		color: $text-color;
+	}
+}
+
+a {
+	font-weight: bold;
+	text-decoration: none;
+	color: rgb(34, 148, 255);
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	&:visited {
+		text-decoration: none;
+		color: rgb(34, 148, 255);
+	}
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: $text-headline-color;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+		monospace;
+}
+
+.textMuted {
+	color: $text-muted;
+}
+
+.pageHeadline {
+	text-align: center;
+	padding-top: 10px;
+	padding-bottom: 20px;
+}
+
+.noSelect {
+	-webkit-touch-callout: none; /* iOS Safari */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror HTML */
+	-moz-user-select: none; /* Old versions of Firefox */
+	-ms-user-select: none; /* Internet Explorer/Edge */
+	user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -0,0 +1,53 @@
+// General
+$text-muted: #54585a;
+$text-color: #555555;
+$text-headline-color: #000000;
+
+// Scrollbar styling
+$scrollbar-background-color: rgb(195, 195, 195);
+$scrollbar-foreground-color: rgb(44, 48, 50);
+$scrollbar-width: 10px;
+
+// Navbar styling (nav.scss)
+$navbar-height: 75px;
+$navbar-padding-left: 60px;
+$navbar-padding-right: $navbar-padding-left;
+$navbar-background-color: #f9f9f9;
+$navbar-color: rgb(29, 29, 29);
+$navbar-navigation-color: #424242;
+$navbar-navigation-color-active: #000000;
+$navbar-navigation-active-background-color: #d0cfcf;
+$navbar-navigation-active-border-color: #00000000;
+$navbar-navigation-active-background-color-hover: #e5e5e5;
+$navbar-navigation-border-radius: 50px;
+
+$navbar-font-size: 1.15rem;
+$navbar-brand-font-size: 1.8rem;
+$navbar-brand-color: rgb(12, 12, 12);
+$navbar-brand-text-decoration: none;
+
+$navbar-breakpoint-1: 1100px;
+$navbar-breakpoint-2: 910px;
+$navbar-breakpoint-3: 510px;
+$navbar-breakpoint-4: 480px;
+$navbar-breakpoint-5: 250px;
+
+// Footer styling (Footer.scss)
+$footer-color: #edebeb;
+$footer-link-color: #6c6c6c;
+$footer-link-color-hover: #000000;
+
+// Home styling
+$home-surroundings-background-color: #1f294c;
+$home-surroundings-font-size: 1.2em;
+$home-surroundings-font-color: #fff;
+
+$home-grid-breakpoint-1: 1250px;
+$home-grid-breakpoint-2: 900px;
+$home-grid-breakpoint-3: 730px;
+$home-grid-breakpoint-4: 400px;
+
+// Surroundings sytling
+$surroundings-breakpoint-1: 1200px;
+$surroundings-breakpoint-2: 950px;
+$surroundings-breakpoint-3: 750px;