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

✨ Create new Container-Component for unsere Leistungen

Browse Source
This commit is contained in:
Stefan080106
2022-05-27 15:11:50 +02:00
parent 8067c6a9f3
commit 54e8b2491d
3 changed files with 66 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/UnserLeistungen-Container.js Normal file
View File

@@ -0,0 +1,56 @@
// 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>Wir entwickeln ihre Website/Webanwendung nach ihren ansprüchen</p>
</div>
<div className={styles.container}>
<Image src={LaptopAppIcon} alt="Laptop App icon" height={100} width={100} />
<h3>Softwareentwicklung</h3>
<p>
Wir entwickeln ebendso ihre Software anwendung (Mobile- / Desktop App) 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 auch das Installieren oder Einrichten von Betriebssystem oder
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>
Wir Helfen ihnen bei ihren Problemen an ihrem PC, Server oder mit einer
Software.
</p>
</div>
</FadeIn>
);
};
export default UnserLeistungenContainer;

9
pages/index.js
View File

@@ -9,6 +9,7 @@ import Head from "next/head";
import HeadsetIcon from "../assets/icons/Headset_Icon.png";
import ClipboardIcon from "../assets/icons/Clipboard_Icon.png";
import BusinessCommunicationIcon from "../assets/icons/BusinessCommunication_Icon.png";
import UnserLeistungenContainer from "../components/UnserLeistungen-Container";
export default function Home() {
return (
@@ -25,7 +26,11 @@ export default function Home() {
Software Entwicklung und dem Einrichten von Computer- und Netzwerktechnik
</FadeIn>
</div>
<FadeIn delay={300} transitionDuration={1500} className={styles.treeContainerLayout}>
<FadeIn delay={300} transitionDuration={600} childTag={"h1"}>
Unsere Leistungen
</FadeIn>
<UnserLeistungenContainer />
{/* <FadeIn delay={300} transitionDuration={1500} className={styles.treeContainerLayout}>
<div className={styles.container}>
<Image
src={BusinessCommunicationIcon}
@@ -49,7 +54,7 @@ export default function Home() {
<h3>Support</h3>
<p>Wir Stellen ihn Professionellen Support bei allen IT-Problemen</p>
</div>
</FadeIn>
</FadeIn> */}
</main>
);
}

48
pages/unsere-leistungen.js
View File

@@ -1,13 +1,9 @@
import Head from "next/head";
import Image from "next/image";
import StandardStyles from "../styles/Home.module.css";
import styles from "../styles/LandingPage.module.css";
import FadeIn from "react-fade-in";
//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";
import UnserLeistungenContainer from "../components/UnserLeistungen-Container.js";
export default function Home() {
return (
@@ -18,45 +14,7 @@ export default function Home() {
<FadeIn transitionDuration={500} childTag={"h1"}>
Unsere Leistungen
</FadeIn>
<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>Wir entwickeln ihre Website/Webanwendung nach ihren ansprüchen</p>
</div>
<div className={styles.container}>
<Image src={LaptopAppIcon} alt="Laptop App icon" height={100} width={100} />
<h3>Softwareentwicklung</h3>
<p>
Wir entwickeln ebendso ihre Software anwendung (Mobile- / Desktop App) 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 auch das Installieren oder Einrichten von Betriebssystem oder
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>
Wir Helfen ihnen bei ihren Problemen an ihrem PC, Server oder mit einer
Software.
</p>
</div>
</FadeIn>
<UnserLeistungenContainer />
{/* TODO: Auftrage hinzufügen */}
{/* <FadeIn transitionDuration={500} childTag={"h1"}>
Unsere Aufträge