From 5fe02e0fd0b53f7fe94399d76b3f07f981f09c8a Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Mon, 12 Sep 2022 21:12:24 +0200
Subject: [PATCH] Created the Home page component

---
 src/pages/Home/Home.jsx | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index ea1d8c4..91df081 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,5 +1,36 @@
-const Home = () => {
-    return (<h2>Startseite</h2>)
-}
+import './styles.sass';
+import SocialBackground from '@/assets/SocialBackground.svg';
+import {faInstagram, faTwitter, faYoutube} from "@fortawesome/free-brands-svg-icons";
+import SocialLink from "@/pages/Home/components/SocialLink/index.js";
+import Kratos from "@/assets/services/Kratos.png";
+import Garry from "@/assets/services/Garry.png";
+import Tim from "@/assets/services/Tim.png";
+import Polly from "@/assets/services/Polly.png";
+import ReactTyped from "react-typed";
+
+const words = ["unique", "stand out", "global", "safer", "better", "custom"];
+
+const Home = () => (
+    <div className="home-wrapper">
+        <div className="home-content">
+            <h3>It's time to make your server <span className="text-aqua"><ReactTyped typeSpeed={100} backSpeed={50}
+                                                                                      strings={words} loop/></span></h3>
+            <div className="service-images">
+                <img src={Kratos} alt="Kratos" className="bot-img bot-kratos"/>
+                <img src={Garry} alt="Garry Giveaway" className="bot-img bot-garry"/>
+                <img src={Tim} alt="Tim Ticket" className="bot-img bot-tim"/>
+                <img src={Polly} alt="Polly" className="bot-img bot-polly"/>
+            </div>
+        </div>
+        <div className="social-container">
+            <img className="socials" src={SocialBackground} alt="Socials"/>
+            <div className="social-links">
+                <SocialLink icon={faInstagram} to="https://instagram.com/sheepstarstudio"/>
+                <SocialLink icon={faYoutube} to="https://www.youtube.com/channel/UCGZS90nHvDo3JhjFksqG7vQ"/>
+                <SocialLink icon={faTwitter} to="https://twitter.com/sheepstarstudio"/>
+            </div>
+        </div>
+    </div>
+)
 
 export default Home;
\ No newline at end of file