// 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>
					{" "}
					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>
					Ihre Software Anwendung (Mobile- / Desktop App) entwickeln Wir 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 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>Bei Problemen an Ihrem PC, Server oder mit einer Software helfen wir Ihnen</p>
			</div>
		</FadeIn>
	);
};

export default UnserLeistungenContainer;