old-v2-frontend/src/pages/contact.js

import React from 'react'

import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro'

import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/best-web-development-sweden.svg'

import PageTransition from 'gatsby-plugin-page-transitions'

const ContactPage = () => (
  <PageTransition>
    <PageIntro
      tiltImage
      headline="Let's start something great"
      text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
      sectionClasses="lg:mb-8"
      image={ContactImage}
      imgClasses="-mb-12 border-white border-8 rounded"
    />

    <section className="container mx-auto my-12 p-4">
      <div className="md:flex">
        <div className="p-2 text-center">
          <div className="rounded overflow-hidden border-bottom-saburly">
            <img className="w-full" src={Stockholm} alt="Stockholm City" />
            <div className="px-6 py-4">
              <div className="uppercase font-medium text-xl mb-6">
                office in Stockholm
              </div>
              <div className="md:flex text-left justify-around text-black text-base">
                <div>
                  <h4 className="text-black">Adress</h4>
                  <p className="text-black-light">
                    Saburly AB <br />
                    Vretenvägen 13 <br />
                    171 54 Solna <br />
                    Sweden <br />
                  </p>
                </div>
                <div>
                  <h4 className="text-black">Contact</h4>
                  <p className="text-black-light">
                    Phone:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="tel:+46760477717"
                    >
                      +46760477717
                    </a>
                    <br />
                    E-mail:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="mailto:sweden@saburly.com"
                    >
                      sweden@saburly.com
                    </a>{' '}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="p-2 text-center">
          <div className="rounded overflow-hidden border-bottom-saburly">
            <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
            <div className="px-6 py-4">
              <div className="uppercase font-medium text-xl mb-6">
                office in Sarajevo
              </div>
              <div className="md:flex text-left justify-around text-base">
                <div>
                  <h4 className="text-black">Adress</h4>
                  <p className="text-black-light">
                    Saburly d.o.o <br />
                    Hakije Turajlica 2 <br />
                    71 000 Sarajevo <br />
                    Bosnia & Herzegovina <br />
                  </p>
                </div>
                <div>
                  <h4 className="text-black">Contact</h4>
                  <p className="text-black-light">
                    Phone:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="tel:+38761909238"
                    >
                      +38761909238
                    </a>{' '}
                    <br />
                    E-mail:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="mailto:bosnia@saburly.com"
                    >
                      bosnia@saburly.com
                    </a>{' '}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div className="bg-saburly-lighter p-8">
      <section className="container lg:flex justify-between mx-auto">
        <form
          action="https://formspree.io/info@saburly.com"
          className="w-full max-w-sm mx-auto pt-16 p-6"
          method="POST"
        >
          <SectionIntro headline="Send us a message" />
          <div className="md:flex flex-wrap">
            <input
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
              id="grid-first-name"
              type="text"
              placeholder="Name"
              name="name"
              required
            />

            <input
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
              id="grid-first-name"
              type="text"
              placeholder="Email"
              name="_replyto"
              required
            />

            <textarea
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
              id="grid-last-name"
              type="text"
              name="message"
              placeholder="Message"
              required
            />
          </div>

          <button
            className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
            value="Send"
            type="submit"
          >
            Send
          </button>
        </form>
        <div>
          <img
            src={FormImage}
            alt="Contact Form Image"
            className="p-10 w-full text-center block md:max-w-lg mx-auto"
          />
        </div>
      </section>
    </div>
  </PageTransition>
)

export default ContactPage