text: import React from "react"
  import { Trans } from "react-i18next"
  import { useTranslation } from "react-i18next"
  
  const HomeLayer = () => {
    const { t } = useTranslation()
    return (
      <div className="home-layer with-perspective-layer">
        <div className="perspective-scene">
          <div className="main-cube">
            <div className="wrap">
              <div className="cube" id="main-cube">
                <div className="main-front"> </div>
                <div className="main-top"></div>
                <div className="main-right"></div>
                <div className="main-bottom"></div>
                <div className="main-left"></div>
                <div className="main-back"></div>
                <div className="storage-front"></div>
                <div className="storage-top"></div>
                <div className="storage-right"></div>
                <div className="storage-bottom"></div>
                <div className="storage-left"></div>
                <div className="storage-back"></div>
                <div className="top-letter-front"></div>
                <div className="top-letter-top"></div>
                <div className="top-letter-right"></div>
                <div className="top-letter-bottom"></div>
                <div className="top-letter-left"></div>
                <div className="bottom-letter-front"></div>
                <div className="bottom-letter-top"></div>
                <div className="bottom-letter-right"></div>
                <div className="bottom-letter-bottom"></div>
                <div className="bottom-letter-left"></div>
                <div className="left-letter-front"></div>
                <div className="left-letter-top"></div>
                <div className="left-letter-right"></div>
                <div className="left-letter-bottom"></div>
                <div className="left-letter-left"></div>
                <div className="right-letter-front"></div>
                <div className="right-letter-top"></div>
                <div className="right-letter-right"></div>
                <div className="right-letter-bottom"></div>
                <div className="right-letter-left"></div>
                <div className="engine-top"></div>
                <div className="engine-right"></div>
                <div className="engine-bottom"></div>
                <div className="engine-left"></div>
                <div className="engine-back"></div>
                <div className="control-front"></div>
                <div className="control-top"></div>
                <div className="control-right"></div>
                <div className="control-bottom"></div>
                <div className="control-left"></div>
                <div className="control-back"></div>
                <div className="aircraft-front"></div>
                <div className="aircraft-top"></div>
                <div className="aircraft-right"></div>
                <div className="aircraft-bottom"></div>
                <div className="aircraft-left"></div>
                <div className="aircraft-back"></div>
                <div className="spaceship">
                  <div className="body-front"></div>
                  <div className="body-top"></div>
                  <div className="body-right"></div>
                  <div className="body-bottom"></div>
                  <div className="body-left"></div>
                  <div className="body-back"></div>
                  <div className="fin">
                    <div className="fin-front"></div>
                    <div className="fin-top"></div>
                    <div className="fin-right"></div>
                    <div className="fin-bottom"></div>
                    <div className="fin-left"></div>
                    <div className="fin-back"></div>
                  </div>
                  <div className="right-wing">
                    <div className="wing-front"></div>
                    <div className="wing-top"></div>
                    <div className="wing-right"></div>
                    <div className="wing-bottom"></div>
                    <div className="wing-left"></div>
                    <div className="wing-back"></div>
                  </div>
                  <div className="left-wing">
                    <div className="wing-front"></div>
                    <div className="wing-top"></div>
                    <div className="wing-right"></div>
                    <div className="wing-bottom"></div>
                    <div className="wing-left"></div>
                    <div className="wing-back"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="content">
          <h1 className="big-title">
            <Trans i18nKey="HomeLayer.TitlePart1">
              Hello I'm <strong>Dorian</strong>
            </Trans>{" "}
            <Trans i18nKey="HomeLayer.TitlePart2">
              and I create things with <strong>CSS</strong>
            </Trans>
          </h1>
          <p>{t("HomeLayer.Description")}</p>
        </div>
      </div>
    )
  }
  
  export default HomeLayer
  