stefan.arnold/AGS_IT_Solutions_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add Landingpage

Browse Source
This commit is contained in:
stefan080106
2022-05-16 22:23:17 +02:00
parent f2dba0b715
commit 12dfc520c7
9 changed files with 190 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icons/BusinessCommunication_Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
assets/icons/Clipboard_Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
assets/icons/Headset_Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

17
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": { "dependencies": {
"next": "12.1.6", "next": "12.1.6",
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0" "react-dom": "18.1.0",
"react-fade-in": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"eslint": "8.14.0", "eslint": "8.14.0",
@@ -2434,6 +2435,14 @@
"react": "^18.1.0" "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": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4623,6 +4632,12 @@
"scheduler": "^0.22.0" "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": { "react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

3
package.json
View File

@@ -11,7 +11,8 @@
"dependencies": { "dependencies": {
"next": "12.1.6", "next": "12.1.6",
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0" "react-dom": "18.1.0",
"react-fade-in": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
"eslint": "8.14.0", "eslint": "8.14.0",

52
pages/index.js
View File

@@ -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 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() { 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>
);
} }

65
styles/LandingPage.module.css Normal file
View File

@@ -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 */

9
styles/LandingPage.module.css.map Normal file
View File

@@ -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"
}

47
styles/LandingPage.module.scss Normal file
View File

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