import React from "react";
import "../App.css";
import { Button } from "./Button";
import "./HeroSection.css";
import "@fortawesome/fontawesome-free/css/all.css";

function HeroSection() {
  return (
    <div className="hero-container">
      <h1>Herzlich Willkommen</h1>
      <div className="hero-btns">
        <Button
          className="btns"
          buttonStyle="btn--primary"
          buttonSize="btn--large"
          newTo="login"
        >
          Einloggen (wenn du schon einmal mitgemacht hast)
        </Button>
        <Button
          className="btns"
          buttonStyle="btn--primary"
          buttonSize="btn--large"
          newTo="register"
        >
          Registrieren (falls du das erste Mal hier bist)
        </Button>
        <Button
          className="btns"
          buttonStyle="btn--primary"
          buttonSize="btn--large"
          newTo="manual"
        >
          Anleitung
        </Button>
      </div>
    </div>
  );
}

export default HeroSection;