✨ Add Landingpage

2022-05-16 22:23:17 +02:00
parent f2dba0b715
commit 12dfc520c7
9 changed files with 190 additions and 3 deletions
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,55 @@
+//Import Style
+import HomeStyles from "../styles/Home.module.css";
+import styles from "../styles/LandingPage.module.css";
+//Import Components
+import FadeIn from "react-fade-in";
+import Image from "next/image";
 import Head from "next/head";
+//Import Images
+import HeadsetIcon from "../assets/icons/Headset_Icon.png";
+import ClipboardIcon from "../assets/icons/Clipboard_Icon.png";
+import BusinessCommunicationIcon from "../assets/icons/BusinessCommunication_Icon.png";

 export default function Home() {
-	return <main></main>;
+	return (
+		<main className={HomeStyles.main}>
+			<Head>
+				<title>AGS IT Solutions | Start</title>
+			</Head>
+			<div className={styles.welcomeContainer}>
+				<FadeIn transitionDuration={500} childTag={"h1"}>
+					Herzlich Willkommen auf Unserer Website
+				</FadeIn>
+				<FadeIn delay={300} transitionDuration={600} childTag={"p"}>
+					Wir sind ihr Unternehmen für IT-Dienstleistungen im Schwerpunkt Web- und
+					Software Entwicklung und dem Einrichten von Computer- und Netzwerktechnik
+				</FadeIn>
+			</div>
+			<FadeIn delay={300} transitionDuration={1500} className={styles.treeContainerLayout}>
+				<div className={styles.container}>
+					<Image
+						src={BusinessCommunicationIcon}
+						alt="Business communication icon"
+						height={100}
+						width={100}
+					/>
+					<h3>Beratung</h3>
+					<p>Wir beraten sie und finden mit Ihnen die Perfekte Lösung für ihr vorhaben</p>
+				</div>
+				<div className={styles.container}>
+					<Image src={ClipboardIcon} alt="Clipboard icon" height={100} width={100} />
+					<h3>Planung</h3>
+					<p>
+						Wir Planen Ihre Projekte von Anfang bis ende mit Ihnen durch so dass, das
+						endergebniss ihren vorstellungen endspricht
+					</p>
+				</div>
+				<div className={styles.container}>
+					<Image src={HeadsetIcon} alt="Support icon" height={100} width={100} />
+					<h3>Support</h3>
+					<p>Wir Stellen ihn Professionellen Support bei allen IT-Problemen</p>
+				</div>
+			</FadeIn>
+		</main>
+	);
 }