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

import pascal from '../public/img/mid.png'
import marco from '../public/img/marco.png'

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 Marco and their son Pascal as a result from their passion for IT. "}
                            <br/><br/>
                            {"We get our motivation from seeing clients succeed thanks to the products we craft for them. "}
                            {"And in an effort to service those clients we keep expanding our set of skills and learning together. "}
                            <br/><br/>
                            {"Currently we specialize PHP and NodeJS based webdevelopment stacks including templaters like ReactJS and Blade, "}
                            {"but we also use pre-made platforms like WordPress and MyBB. "}
                            {"What tool we use depends entirely on what we feel is right for your budget and project. "}
                            <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>#graphql</StyledButton>
                            <StyledButton>#laravel</StyledButton>
                            <StyledButton>#express</StyledButton>
                            <StyledButton>#nextjs</StyledButton>
                            <StyledButton>#tailwindcss</StyledButton>
                            <StyledButton>#livewire</StyledButton>
                            <StyledButton>#reactjs</StyledButton>
                            <StyledButton>#typescript</StyledButton>
                            <StyledButton>#nestjs</StyledButton>
                            <StyledButton>#php</StyledButton>
                        </div>

                        <h3>{"and we're always eager to learn new stuff!"}</h3>
                    </section>    

                    <hr/>     

                    <section>

                        <div className={styles.aboutSectionReverse}>
                            <div>
                                <Image src={marco} alt="picture of marco van ginkel" />
                            </div>
                            <div>
                                <h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
                                <p>
                                    {"lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet "}
                                </p>
                            </div>
                        </div>

                        <br/>

                        <div className={styles.aboutSection}>
                            <div>
                                <h3>{"🐱‍💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
                                <p>
                                    {"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}
                                    {"I have a passion for everything tech and always dive into new technologies, but my favorite by far is webdevelopment. "}
                                    {"I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. "}
                                    {"I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "}
                                </p>
                            </div>
                            <div>
                                <Image src={pascal} alt="picture of mid" />
                            </div>
                        </div>
                        
                    </section>           
                    
                </article>
            </section>

        </div>
    )
}