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';

export default function Index() {
    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>
                        <p>
                            {"We are a new and small family business from The Netherlands developing and designing web applications for clients. "}
                            {"We specialize in TALL stack but also make use of applications like Wordpress. "}
                            {"We are service focused, meaning that if a client needs something we don't explicitly offer we can always work something out."}
                        </p>
                    </section>

                    <hr/>

                    <section style={{textAlign: "center"}}>
                        <h2>We utilize 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>

                        <br/>

                        <h3>and are always learning new stuff</h3>

                        <div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
                            <SmallStyledButton>#threejs</SmallStyledButton>
                            <SmallStyledButton>#prisma2</SmallStyledButton>
                            <SmallStyledButton>#vue</SmallStyledButton>
                            <SmallStyledButton>#nosql</SmallStyledButton>
                        </div>
                    </section>    

                    <hr/>     

                    <section>

                        <div>
                            <h3>Marco van Ginkel — Client relations and communication</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>

                        <br/>

                        <div>
                            <h3>Pascal van Ginkel — Full-stack webdeveloper</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>
                        
                    </section>           
                    
                </article>
            </section>

        </div>
    )
}