fp/packages/next/app/about/page.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
import Link from 'next/link';
// import { getProgress } from '../lib/vods'

export default async function Page() {
    // const { complete, total } = await getProgress('projektmelody')

    return (
        <>
            <div className="content">

                <section className="hero">
                    <div className="hero-body">
                        <p className="title">About</p>
                        <p>It&apos;s the worst feeling when a VOD disappears from the internet. It means you missed out, it&apos;s gone, and you may never experience what your peers got to take part in.</p>
                        <p>Futureporn is created by fans, for fans. Missed a stream? We got you, bro.</p>
                        <p>Together we can end 404s and create an everlasting archive of lewdtuber livestreams.</p>

                    </div>

                </section>


                <div className="section">

                    <article className="mt-5 message is-success">
                        <div className="message-body">
                            <p>Futureporn needs financial support to continue improving. If you enjoy this website, please consider <Link target="_blank" href="https://patreon.com/CJ_Clippy">becoming a patron<FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt ml-1" /></Link>.</p>
                        </div>
                    </article>
                </div>

            </div>
        </>
    )
}