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;