import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Index.module.css'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

export default function Index() {
    return (
        <div className={styles.page}>
            <div className={styles.topcontainerbackg + " slide-in-right"}>

            </div>

            <div className={styles.topcontainer + " slide-in-left"}>
                <div className={styles.topcontent + " " + styles.menu}>
                    <a href="#">Home</a>
                    <a href="#">Music</a>
                    <a href="#">Modelling</a>
                </div>
                <div className={styles.topcontent}>
                    <h1>INVESVPO</h1>
                    <p>aka Fuhz — Elikas — C2RW</p>
                </div>
            </div>

            <div className={styles.bottomcontainer + " slide-in-up"}>
                <div className={styles.topcontent}>
                    <h3>{`
                        Hey I'm Invesvpo, I make some cool 3d models including guns and I'm trying to learn more. 
                        I also make music. A lot of my songs are made to be downtempo ambient songs. Check out my Spotify below.
                    `}</h3>
                </div>

                <div className={styles.topcontent + " " + styles.links}>
                    <a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a>
                    <a href="#"><p><FontAwesomeIcon icon={faSpotify} /> Spotify</p></a>
                    <a href="#"><p><FontAwesomeIcon icon={faDiscord} /> Discord</p></a>
                    <a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a>
                </div>

                <footer className={styles.topcontent}>
                    <p className="text-center">Made by DubbelNull</p>
                </footer>
            </div>
        </div>
    )
}