Renaming and autoformatting

- renamed the react files to jsx
- autoformat with vscode

frontend/src/components/HeroSection.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import "../App.css";
+import { Button } from "./Button";
+import "./HeroSection.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+import { useAuth } from "../auth/AuthProvider";
+
+export default function HeroSection() {
+  const [isLoggedIn] = useAuth();
+
+  return (
+    <div className="hero-container">
+      <h1>Herzlich Willkommen</h1>
+      <div className="hero-btns">
+        {isLoggedIn ? (
+          <Button
+            className="btns"
+            buttonStyle="btn--primary"
+            buttonSize="btn--large"
+            newTo="study"
+          >
+            Zur Studie
+          </Button>
+        ) : (
+          <>
+            <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>
+  );
+}