From 8067c6a9f36e22a55755eef42719f70765afb980 Mon Sep 17 00:00:00 2001
From: Stefan080106 <stefan08.arnold@gmail.com>
Date: Fri, 27 May 2022 14:17:18 +0200
Subject: [PATCH 1/3] :lipstick: Update responisive style

---
 styles/Home.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/Home.module.css b/styles/Home.module.css
index 1ab2efa..8585ed7 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -4,8 +4,8 @@
 }
 
 .main {
-	min-height: 85vh;
-	padding: 4rem 0;
+	min-height: 82vh;
+	/* padding: 4rem 0; */
 	flex: 1;
 	display: flex;
 	flex-direction: column;

From 54e8b2491d5295bdd58c04dfd483f9fb92d52e9a Mon Sep 17 00:00:00 2001
From: Stefan080106 <stefan08.arnold@gmail.com>
Date: Fri, 27 May 2022 15:11:50 +0200
Subject: [PATCH 2/3] :sparkles: Create new Container-Component for unsere
 Leistungen

---
 components/UnserLeistungen-Container.js | 56 +++++++++++++++++++++++++
 pages/index.js                          |  9 +++-
 pages/unsere-leistungen.js              | 48 ++-------------------
 3 files changed, 66 insertions(+), 47 deletions(-)
 create mode 100644 components/UnserLeistungen-Container.js

diff --git a/components/UnserLeistungen-Container.js b/components/UnserLeistungen-Container.js
new file mode 100644
index 0000000..3da234e
--- /dev/null
+++ b/components/UnserLeistungen-Container.js
@@ -0,0 +1,56 @@
+// Import Elements
+import FadeIn from "react-fade-in/lib/FadeIn";
+import Image from "next/image";
+// Import Style
+import styles from "../styles/LandingPage.module.css";
+//Import Images
+import WorldIcon from "../assets/icons/World_Icon.png";
+import LaptopAppIcon from "../assets/icons/LaptopApp_Icon.png";
+import LaptopCmdIcon from "../assets/icons/LaptopCmd_Icon.png";
+import SupportIcon from "../assets/icons/Support_Icon.png";
+
+const UnserLeistungenContainer = (props) => {
+	return (
+		<FadeIn delay={200} transitionDuration={1500} className={styles.treeContainerLayout}>
+			<div className={styles.container}>
+				<Image src={WorldIcon} alt="Laptop icon" height={100} width={100} />
+				<h3>Webentwicklung</h3>
+				<p>Wir entwickeln ihre Website/Webanwendung nach ihren ansprüchen</p>
+			</div>
+			<div className={styles.container}>
+				<Image src={LaptopAppIcon} alt="Laptop App icon" height={100} width={100} />
+				<h3>Softwareentwicklung</h3>
+				<p>
+					Wir entwickeln ebendso ihre Software anwendung (Mobile- / Desktop App) auf
+					Javascript basis mithilfe von{" "}
+					<a
+						style={{ color: "#057CA6" }}
+						target="_blank"
+						rel="noopener noreferrer"
+						href="https://www.electronjs.org/"
+					>
+						electron
+					</a>
+				</p>
+			</div>
+			<div className={styles.container}>
+				<Image src={LaptopCmdIcon} alt="Laptop CMD icon" height={100} width={100} />
+				<h3>Server / Computer Einrichtung</h3>
+				<p>
+					Wir bieten auch das Installieren oder Einrichten von Betriebssystem oder
+					Software auf Servern oder Computern an.
+				</p>
+			</div>
+			<div className={styles.container}>
+				<Image src={SupportIcon} alt="Support icon" height={100} width={100} />
+				<h3>Support</h3>
+				<p>
+					Wir Helfen ihnen bei ihren Problemen an ihrem PC, Server oder mit einer
+					Software.
+				</p>
+			</div>
+		</FadeIn>
+	);
+};
+
+export default UnserLeistungenContainer;
diff --git a/pages/index.js b/pages/index.js
index 06ab773..09fd832 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -9,6 +9,7 @@ import Head from "next/head";
 import HeadsetIcon from "../assets/icons/Headset_Icon.png";
 import ClipboardIcon from "../assets/icons/Clipboard_Icon.png";
 import BusinessCommunicationIcon from "../assets/icons/BusinessCommunication_Icon.png";
+import UnserLeistungenContainer from "../components/UnserLeistungen-Container";
 
 export default function Home() {
 	return (
@@ -25,7 +26,11 @@ export default function Home() {
 					Software Entwicklung und dem Einrichten von Computer- und Netzwerktechnik
 				</FadeIn>
 			</div>
-			<FadeIn delay={300} transitionDuration={1500} className={styles.treeContainerLayout}>
+			<FadeIn delay={300} transitionDuration={600} childTag={"h1"}>
+				Unsere Leistungen
+			</FadeIn>
+			<UnserLeistungenContainer />
+			{/* <FadeIn delay={300} transitionDuration={1500} className={styles.treeContainerLayout}>
 				<div className={styles.container}>
 					<Image
 						src={BusinessCommunicationIcon}
@@ -49,7 +54,7 @@ export default function Home() {
 					<h3>Support</h3>
 					<p>Wir Stellen ihn Professionellen Support bei allen IT-Problemen</p>
 				</div>
-			</FadeIn>
+			</FadeIn> */}
 		</main>
 	);
 }
diff --git a/pages/unsere-leistungen.js b/pages/unsere-leistungen.js
index e5ea3cd..813c76a 100644
--- a/pages/unsere-leistungen.js
+++ b/pages/unsere-leistungen.js
@@ -1,13 +1,9 @@
 import Head from "next/head";
 import Image from "next/image";
 import StandardStyles from "../styles/Home.module.css";
-import styles from "../styles/LandingPage.module.css";
 import FadeIn from "react-fade-in";
-//Import Images
-import WorldIcon from "../assets/icons/World_Icon.png";
-import LaptopAppIcon from "../assets/icons/LaptopApp_Icon.png";
-import LaptopCmdIcon from "../assets/icons/LaptopCmd_Icon.png";
-import SupportIcon from "../assets/icons/Support_Icon.png";
+
+import UnserLeistungenContainer from "../components/UnserLeistungen-Container.js";
 
 export default function Home() {
 	return (
@@ -18,45 +14,7 @@ export default function Home() {
 			<FadeIn transitionDuration={500} childTag={"h1"}>
 				Unsere Leistungen
 			</FadeIn>
-			<FadeIn delay={200} transitionDuration={1500} className={styles.treeContainerLayout}>
-				<div className={styles.container}>
-					<Image src={WorldIcon} alt="Laptop icon" height={100} width={100} />
-					<h3>Webentwicklung</h3>
-					<p>Wir entwickeln ihre Website/Webanwendung nach ihren ansprüchen</p>
-				</div>
-				<div className={styles.container}>
-					<Image src={LaptopAppIcon} alt="Laptop App icon" height={100} width={100} />
-					<h3>Softwareentwicklung</h3>
-					<p>
-						Wir entwickeln ebendso ihre Software anwendung (Mobile- / Desktop App) auf
-						Javascript basis mithilfe von{" "}
-						<a
-							style={{ color: "#057CA6" }}
-							target="_blank"
-							rel="noopener noreferrer"
-							href="https://www.electronjs.org/"
-						>
-							electron
-						</a>
-					</p>
-				</div>
-				<div className={styles.container}>
-					<Image src={LaptopCmdIcon} alt="Laptop CMD icon" height={100} width={100} />
-					<h3>Server / Computer Einrichtung</h3>
-					<p>
-						Wir bieten auch das Installieren oder Einrichten von Betriebssystem oder
-						Software auf Servern oder Computern an.
-					</p>
-				</div>
-				<div className={styles.container}>
-					<Image src={SupportIcon} alt="Support icon" height={100} width={100} />
-					<h3>Support</h3>
-					<p>
-						Wir Helfen ihnen bei ihren Problemen an ihrem PC, Server oder mit einer
-						Software.
-					</p>
-				</div>
-			</FadeIn>
+			<UnserLeistungenContainer />
 			{/* TODO: Auftrage hinzufügen */}
 			{/* <FadeIn transitionDuration={500} childTag={"h1"}>
 				Unsere Aufträge

From e6899eca4f1eb2c588f9b493716da1e146961a20 Mon Sep 17 00:00:00 2001
From: Stefan080106 <stefan08.arnold@gmail.com>
Date: Fri, 27 May 2022 16:41:41 +0200
Subject: [PATCH 3/3] :pencil: Update text

---
 components/UnserLeistungen-Container.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/UnserLeistungen-Container.js b/components/UnserLeistungen-Container.js
index 3da234e..291675a 100644
--- a/components/UnserLeistungen-Container.js
+++ b/components/UnserLeistungen-Container.js
@@ -15,14 +15,18 @@ const UnserLeistungenContainer = (props) => {
 			<div className={styles.container}>
 				<Image src={WorldIcon} alt="Laptop icon" height={100} width={100} />
 				<h3>Webentwicklung</h3>
-				<p>Wir entwickeln ihre Website/Webanwendung nach ihren ansprüchen</p>
+				<p>
+					{" "}
+					Die Entwicklung Ihrer Website und Webanwendungen erfolgt nach Ihren
+					Vorstellungen
+				</p>
 			</div>
 			<div className={styles.container}>
 				<Image src={LaptopAppIcon} alt="Laptop App icon" height={100} width={100} />
 				<h3>Softwareentwicklung</h3>
 				<p>
-					Wir entwickeln ebendso ihre Software anwendung (Mobile- / Desktop App) auf
-					Javascript basis mithilfe von{" "}
+					Ihre Software Anwendung (Mobile- / Desktop App) entwickeln Wir auf Javascript
+					Basis mithilfe von{" "}
 					<a
 						style={{ color: "#057CA6" }}
 						target="_blank"
@@ -37,17 +41,14 @@ const UnserLeistungenContainer = (props) => {
 				<Image src={LaptopCmdIcon} alt="Laptop CMD icon" height={100} width={100} />
 				<h3>Server / Computer Einrichtung</h3>
 				<p>
-					Wir bieten auch das Installieren oder Einrichten von Betriebssystem oder
-					Software auf Servern oder Computern an.
+					Wir bieten Ihnen das Installieren/Einrichten von Betriebssysteme/Software auf
+					Servern oder Computern an
 				</p>
 			</div>
 			<div className={styles.container}>
 				<Image src={SupportIcon} alt="Support icon" height={100} width={100} />
 				<h3>Support</h3>
-				<p>
-					Wir Helfen ihnen bei ihren Problemen an ihrem PC, Server oder mit einer
-					Software.
-				</p>
+				<p>Bei Problemen an Ihrem PC, Server oder mit einer Software helfen wir Ihnen</p>
 			</div>
 		</FadeIn>
 	);