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