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

import React from 'react'

import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro'
import Fade from 'react-reveal/Fade'
import Card from '../components/Card'
import SEO from '../components/SEO'

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>
  <SEO siteTitle="Saburly - Contact Us" siteDescription="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions" siteImage={ContactImage} siteUrl="https://saburly.com/contact" />
    <PageIntro
      tiltImage
      headline="Let's connect"
      text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions."
      sectionClasses="lg:mb-8"
      image={ContactImage}
      imgClasses="-mb-12 border-white rounded-lg"
    />

    <section className="my-20 container mx-auto w-full md:flex w-full">
      <div className="p-2">
        <Fade left>
          <Card team teamMember={Stockholm} title="OFFICE IN STOCKHOLM">
            <div className="xsm:flex text-left justify-around text-black text-base p-4">
              <div className="py-2">
                <h4 className="text-black">Adress</h4>
                <p className="text-black-light font-serif">
                  Saburly AB <br />
                  Vretenvägen 13 <br />
                  171 54 Solna <br />
                  Sweden <br />
                </p>
              </div>
              <div className="py-2">
                <h4 className="text-black">Contact</h4>
                <p className="font-serif text-black-light">
                  Phone:{' '}
                  <a
                    className="saburly-color hover:text-purple-light no-underline"
                    href="tel:+46760477717"
                  >
                    +46760477717
                  </a>
                  <br />
                  E-mail:{' '}
                  <a
                    className="saburly-color hover:text-purple-light no-underline"
                    href="mailto:sweden@saburly.com"
                  >
                    sweden@saburly.com
                  </a>{' '}
                </p>
              </div>
            </div>
          </Card>
        </Fade>
      </div>
      <div className="p-2">
        <Fade right>
          <Card team teamMember={Sarajevo} title="OFFICE IN SARAJEVO">
            <div className="xsm:flex text-left justify-around text-base p-4">
              <div className="py-2">
                <h4 className="text-black">Adress</h4>
                <p className="font-serif text-black-light">
                  Saburly d.o.o <br />
                  Hakije Turajlica 2 <br />
                  71 000 Sarajevo <br />
                  Bosnia & Herzegovina <br />
                </p>
              </div>
              <div className="py-2">
                <h4 className="text-black">Contact</h4>
                <p className="font-serif text-black-light">
                  Phone:{' '}
                  <a
                    className="saburly-color hover:text-purple-light no-underline"
                    href="tel:+38761909238"
                  >
                    +38761909238
                  </a>{' '}
                  <br />
                  E-mail:{' '}
                  <a
                    className="saburly-color hover:text-purple-light no-underline"
                    href="mailto:bosnia@saburly.com"
                  >
                    bosnia@saburly.com
                  </a>{' '}
                </p>
              </div>
            </div>
          </Card>
        </Fade>
      </div>
    </section>

    <div className="bg-saburly-lighter p-8">
      <Fade>
        <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="We'd love to hear from you" />
            <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>
      </Fade>
    </div>
  </PageTransition>
)

export default ContactPage