text: import Head from 'next/head'
  import Link from 'next/link'
  import Image from 'next/image'
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faHeart, faCoffee } from '@fortawesome/free-solid-svg-icons'
  import { faGithub } from '@fortawesome/free-brands-svg-icons'
  
  export default function Home() {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-white text-black">
        <Head>
          <title>電子計算機総合研究所 / ECRI</title>
          <link rel="icon" href="/favicon.png" />
        </Head>
  
        <main className="flex-1 w-full md:px-20 px-10">
          <div className="flex flex-row">
            <div>
            <Image
              src         = "/favicon.png"
              alt         = "ECRI logo"
              width       = {65}
              height      = {65}
              unoptimized = {true}
          />
            </div>
            <div className="ml-2">
              <h1 className="text-3xl font-bold"><span className="whitespace-nowrap">電子</span><span className="whitespace-nowrap">計算機</span><span className="whitespace-nowrap">総合</span><span className="whitespace-nowrap">研究所</span></h1>
              <h1 className="text-xl font-mono">Electronic Computer Research Institute</h1>
            </div>
          </div>
          <div className="mt-2">
          <h2 className="text-2xl font-bold">プロジェクト</h2>
          
          <div className="card shadow-xl max-w-lg">
          <div className="justify-end card-body">
            <h2 className="card-title">SprinkleOS</h2> 
            <p>Challenge of hand-made OS.</p> 
            <div className="card-actions">
              <Link href="https://git.pepepper.cf/ECRI/SprinkleOS">
                <a>
                  <button className="btn btn-secondary btn-sm normal-case"><FontAwesomeIcon icon={faCoffee} className="w-5 h-5 inline" />&nbsp;ECRI Gitea</button>
                </a>
              </Link>
              <Link href="https://github.com/TeamECRI/SprinkleOS">
                <a>
                  <button className="btn btn-secondary btn-sm normal-case"><FontAwesomeIcon icon={faGithub} className="w-5 h-5 inline" />&nbsp;GitHub (ミラー)</button>
                </a>
              </Link>
            </div>
          </div>
        </div> 
        
          </div>
        </main>
  
        <footer className="text-center w-full h-24">
          <p className="font-mono mt-4"><FontAwesomeIcon icon={faHeart} className="w-5 h-5 inline" /> MIT</p>
        </footer>
      </div>
    )
  }
  