import Head from "next/head"

function Home() {
  return (
    <div id="main">
      <Head>
        <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png" />
        <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png" />
        <link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png" />
        <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
        <link rel="manifest" href="favicon/manifest.json" />
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png" />
        <meta name="theme-color" content="#ffffff" />
        <meta charSet="UTF-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="Julian Gerhardt" />
        <meta name="keywords" content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway" />

        <title>Start</title>
        {/* <link rel="stylesheet" href="Start.css" /> */}
      </Head>

      <div className="container">
        <img id="cover" src="images/Gear3.webp" />
        <div className="centered">
          <h1>Wanna try something new?</h1>
        </div>
      </div>

      <h1 id="gone">Wanna try something new?</h1>

      <p>Flexible - Modern - Faster then law it self. These are modern electric unicycles:</p>

      <div className="righties">
        <img src="images/ShermanStanding.jpg" />
      </div>

      <p>From 0 auf 50kmh in 3s, 100kmh top speed and 230km range make these devices the ultimate sport.</p>

      <div className="righties">
        <img src="images/UltimativeSport.jpg" />
      </div>

      <p>Meanwhile climbing 50° steep walls and taking MTB trails with ease.</p>

      <div className="righties">
        <video src="videos/MTBtrailsEase.mp4" width="auto" height="auto" autoPlay muted loop />
      </div>

      <p>Taking every path and never get stuck in traffic again.</p>

      <div className="righties">
        <video src="videos/traffic.mp4" width="auto" height="auto" autoPlay muted loop />
      </div>

      <p>But still being easy to carry and store just under your desk.</p>

      <div className="righties">
        <img src="images/KidsKS16X.jpg" />
      </div>

      <p>Interested? Then take a deep dive into PEV's and EUC's:</p>

      <a href="EUC Überblick ENG.html">
        <div id="MoreButton">
          <p>I want to read everything about it!</p>
        </div>
      </a>

      <a href="https://youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV">
        <div id="MoreButton">
          <p>Na, videos are just fine</p>
        </div>
      </a>

      <a href="StartDE.html">
        <div id="MoreButton">
          <p>Sprache</p>
        </div>
      </a>
    </div>
  )
}

export default Home
