✨ Add Landingpage

2022-05-16 22:23:17 +02:00
parent f2dba0b715
commit 12dfc520c7
9 changed files with 190 additions and 3 deletions
--- a/assets/icons/BusinessCommunication_Icon.png
+++ b/assets/icons/BusinessCommunication_Icon.png
--- a/assets/icons/Clipboard_Icon.png
+++ b/assets/icons/Clipboard_Icon.png
--- a/assets/icons/Headset_Icon.png
+++ b/assets/icons/Headset_Icon.png
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
      "dependencies": {
        "next": "12.1.6",
        "react": "18.1.0",
-        "react-dom": "18.1.0"
+        "react-dom": "18.1.0",
+        "react-fade-in": "^2.0.1"
      },
      "devDependencies": {
        "eslint": "8.14.0",
@@ -2434,6 +2435,14 @@
        "react": "^18.1.0"
      }
    },
+    "node_modules/react-fade-in": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-fade-in/-/react-fade-in-2.0.1.tgz",
+      "integrity": "sha512-oqS/WT4znaXEHmL+yo0IDUDY7uC9K4RP35j1SdRUEBspR09B2iIC0i8oJ28tPOr6Ez/L2aktF9p89j+DbsTVNw==",
+      "peerDependencies": {
+        "react": "^16.8 || 17"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4623,6 +4632,12 @@
        "scheduler": "^0.22.0"
      }
    },
+    "react-fade-in": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-fade-in/-/react-fade-in-2.0.1.tgz",
+      "integrity": "sha512-oqS/WT4znaXEHmL+yo0IDUDY7uC9K4RP35j1SdRUEBspR09B2iIC0i8oJ28tPOr6Ez/L2aktF9p89j+DbsTVNw==",
+      "requires": {}
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-fade-in": "^2.0.1"
  },
  "devDependencies": {
    "eslint": "8.14.0",
--- 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>
+	);
 }
--- a/styles/LandingPage.module.css
+++ b/styles/LandingPage.module.css
@@ -0,0 +1,65 @@
+.welcomeContainer {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  text-align: center;
+  padding: 0 2vw;
+}
+
+.welcomeContainer h1 {
+  color: white;
+  background-color: #6f6f6f;
+  padding: 0.5rem;
+  border-radius: 10px;
+}
+
+.welcomeContainer p {
+  font-size: 1.4rem;
+}
+
+.treeContainerLayout {
+  width: 100%;
+  padding: 0 2vw;
+  margin: 2vw 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.treeContainerLayout .container {
+  height: 300px;
+  width: 20rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  text-align: center;
+}
+/*# sourceMappingURL=LandingPage.module.css.map */
--- a/styles/LandingPage.module.css.map
+++ b/styles/LandingPage.module.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,iBAAiB,CAAC;EACjB,KAAK,EAAE,IAAI;EAEX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;EAEtB,UAAU,EAAE,MAAM;EAElB,OAAO,EAAE,KAAK;CAYd;;AAtBD,AAYC,iBAZgB,CAYhB,EAAE,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,OAAO;EACzB,OAAO,EAAE,MAAM;EACf,aAAa,EAAE,IAAI;CACnB;;AAjBF,AAmBC,iBAnBgB,CAmBhB,CAAC,CAAC;EACD,SAAS,EAAE,MAAM;CACjB;;AAGF,AAAA,oBAAoB,CAAC;EACpB,KAAK,EAAE,IAAI;EAEX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,KAAK;EAEb,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,QAAQ;EACrB,SAAS,EAAE,IAAI;CAaf;;AAtBD,AAWC,oBAXmB,CAWnB,UAAU,CAAC;EACV,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EAEZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;EAEtB,UAAU,EAAE,MAAM;CAClB",
+    "sources": [
+        "LandingPage.module.scss"
+    ],
+    "names": [],
+    "file": "LandingPage.module.css"
+}
--- a/styles/LandingPage.module.scss
+++ b/styles/LandingPage.module.scss
@@ -0,0 +1,47 @@
+.welcomeContainer {
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+
+	text-align: center;
+
+	padding: 0 2vw;
+
+	h1 {
+		color: white;
+		background-color: #6f6f6f;
+		padding: 0.5rem;
+		border-radius: 10px;
+	}
+
+	p {
+		font-size: 1.4rem;
+	}
+}
+
+.treeContainerLayout {
+	width: 100%;
+
+	padding: 0 2vw;
+	margin: 2vw 0;
+
+	display: flex;
+	justify-content: space-around;
+	align-items: baseline;
+	flex-wrap: wrap;
+
+	.container {
+		height: 300px;
+		width: 20rem;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+
+		text-align: center;
+	}
+}