import Head from 'next/head';
import Banner from '../components/Banner';
import { LinkButton } from '../components/Button';

export default function About() {
    return (
        <main className='p-4 max-w-2xl'>
            <Head>
                <title>About Comicbox</title>
            </Head>

            <section>
                <h1 className='text-4xl'>About Comicbox</h1>

                <p>
                    Comicbox is an{' '}
                    <LinkButton href='https://git.ashhhleyyy.dev/ash/comicbox'>
                        open-source
                    </LinkButton>{' '}
                    website for crowdsourcing transcriptions for webcomics.
                    Anyone can <LinkButton href='/login'>log in</LinkButton> and
                    help transcribing pages.
                </p>
            </section>

            <section>
                <h2 className='text-3xl'>How to help?</h2>

                <p>
                    You can <LinkButton href='/login'>log in</LinkButton> with
                    Discord or GitHub right away to start, just pick a comic on
                    the <LinkButton href='/'>homepage</LinkButton> and use the
                    &apos;Random Page&apos; links from there.
                    <br />
                    On the transcription page, you can draw boxes around each
                    bubble on the page, and once you have checked the order,
                    click &apos;Extract text&apos; to attempt to automatically
                    extract the text from each bubble. This may take a few
                    seconds to complete, and once it has, then all the boxes
                    will be filled with the text. You can then select these to
                    edit the text and assign the correct character. Once you are
                    done with a page, you can click save to submit your changes.
                </p>

                <Banner style='warning'>
                    I would recommend that you have fully read any comics you
                    choose before starting, as otherwise you may see pages you
                    haven&apos;t read yet.
                </Banner>
            </section>
        </main>
    );
}
