import Head from 'next/head';
import styles from '../styles/About.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';

export default function About() {
    return (
        <div className={"page " + styles.about}>
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME} | About</title>
            </Head>

            <section className="container">
                <article className="content">

                    <section>
                        <h2>{"ℹ️ About DubbelNull"}</h2>
                        <h5>
                            {"We are a new and small IT business from The Netherlands developing and designing all sorts of applications for clients. "}
                            {"In January of 2021 DubbelNull was founded by father and son Marco and Pascal as a result of their passion for IT. "}
                            <br/><br/>
                            {"Currently we specialize PHP and NodeJS based webdevelopment stacks like: Wordpress, NestJS, SvelteKit, Laravel and more."}
                            {"What tool we use depends entirely on what we feel is right for your budget and project, and adapting to other ones is never out of the question."}
                            <br/><br/>
                            {"For more information on exactly what kind of projects we handle, feel free to visit our "} <Link href="/services">Services</Link> {" page. "}
                        </h5>
                    </section>

                    <hr/>

                    <section style={{textAlign: "center"}} id="technologies">
                        <h2>{"We 💖 the newest tech"}</h2>

                        <div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
                            <StyledButton>#wordpress</StyledButton>
                            <StyledButton>#realtime</StyledButton>
                            <StyledButton>#laravel</StyledButton>
                            <StyledButton>#mybb</StyledButton>
                            <StyledButton>#tailwindcss</StyledButton>
                            <StyledButton>#svelte</StyledButton>
                            <StyledButton>#typescript</StyledButton>
                            <StyledButton>#nestjs</StyledButton>
                            <StyledButton>#scalable</StyledButton>
                            <StyledButton>#php</StyledButton>
                            <StyledButton>#vercel</StyledButton>
                        </div>

                        <h3>{"and we're very flexible with using other options"}</h3>
                    </section>

                    <hr/>

                    <section style={{display: "flex", gap: "50px"}}>

                        <div>
                            <h3 className={styles.tagspan}>{"💻 Pascal van Ginkel"} <span><span className={styles.tag}>{"Full-stack webdeveloper"}</span></span></h3>
                            <p>
                                {"Hello, I'm Pascal. I am a software engineer and in charge of development at DubbelNull. "}
                            </p>
                        </div>

                        <div>
                            <h3 className={styles.tagspan}>{"💼 Marco van Ginkel"} <span><span className={styles.tag}>{"Client relations & communication"}</span></span></h3>
                            <p>
                                {"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
                            </p>
                        </div>

                    </section>

                </article>
            </section>

        </div>
    )
}