✨ Create new Container-Component for unsere Leistungen

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;

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>
 	);
 }

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 UnserLeistungenContainer from "../components/UnserLeistungen-Container.js";
-import LaptopAppIcon from "../assets/icons/LaptopApp_Icon.png";
-import LaptopCmdIcon from "../assets/icons/LaptopCmd_Icon.png";
-import SupportIcon from "../assets/icons/Support_Icon.png";
 
 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}>
+			<UnserLeistungenContainer />
-				<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>
 			{/* TODO: Auftrage hinzufügen */}
 			{/* <FadeIn transitionDuration={500} childTag={"h1"}>
 				Unsere Aufträge