diff --git a/assets/icons/BusinessCommunication_Icon.png b/assets/icons/BusinessCommunication_Icon.png new file mode 100644 index 0000000..3f6eeee Binary files /dev/null and b/assets/icons/BusinessCommunication_Icon.png differ diff --git a/assets/icons/Clipboard_Icon.png b/assets/icons/Clipboard_Icon.png new file mode 100644 index 0000000..d474174 Binary files /dev/null and b/assets/icons/Clipboard_Icon.png differ diff --git a/assets/icons/Headset_Icon.png b/assets/icons/Headset_Icon.png new file mode 100644 index 0000000..6aa6c6a Binary files /dev/null and b/assets/icons/Headset_Icon.png differ diff --git a/package-lock.json b/package-lock.json index 0b02322..c39e1cf 100644 --- 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", diff --git a/package.json b/package.json index 9817040..df8ad45 100644 --- 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", diff --git a/pages/index.js b/pages/index.js index 3cdd76d..06ab773 100644 --- 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
; + return ( +
+ + AGS IT Solutions | Start + +
+ + Herzlich Willkommen auf Unserer Website + + + Wir sind ihr Unternehmen für IT-Dienstleistungen im Schwerpunkt Web- und + Software Entwicklung und dem Einrichten von Computer- und Netzwerktechnik + +
+ +
+ Business communication icon +

Beratung

+

Wir beraten sie und finden mit Ihnen die Perfekte Lösung für ihr vorhaben

+
+
+ Clipboard icon +

Planung

+

+ Wir Planen Ihre Projekte von Anfang bis ende mit Ihnen durch so dass, das + endergebniss ihren vorstellungen endspricht +

+
+
+ Support icon +

Support

+

Wir Stellen ihn Professionellen Support bei allen IT-Problemen

+
+ +
+ ); } diff --git a/styles/LandingPage.module.css b/styles/LandingPage.module.css new file mode 100644 index 0000000..594e03b --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/styles/LandingPage.module.css.map b/styles/LandingPage.module.css.map new file mode 100644 index 0000000..bc0a581 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/styles/LandingPage.module.scss b/styles/LandingPage.module.scss new file mode 100644 index 0000000..14fe593 --- /dev/null +++ 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; + } +}