old-v2-frontend/src/components/Footer.js

import React from 'react'
import Link from 'gatsby-link'
import Button from './Button'

import LogoSaburly from '../images/logo-saburly-colorful.svg'

import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
import Twitter from '../images/twitter.svg'
import LinkedIn from '../images/linkedin.svg'

let menuClasses =
  'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'

const Footer = () => (
  <footer className="bg-indigo-darker">
    <div className="container mx-auto pt-10 pb-10 lg:flex">
      <div className="lg:w-1/4 p-4">
        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
        <div className="flex justify-between social-icons py-2">
          <div>
            <img
              src={Facebook}
              alt="Facebook Social Media"
              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
            />
          </div>
          <div>
            <img
              src={Instagram}
              alt="Instagram Social Media"
              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
            />
          </div>
          <div>
            <img
              src={Twitter}
              alt="Twitter Social Media"
              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
            />
          </div>
          <div>
            <img
              src={LinkedIn}
              alt="LinkedIn Social Media"
              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
            />
          </div>
        </div>
        <a
          className="opacity-70 hover:opacity-100 pb-1 no-underline text-white block"
          href="mailto:info@saburly.com"
        >
          E-mail: info@saburly.com
        </a>
        <a
          className="opacity-70 hover:opacity-100 pt-1 no-underline text-white block"
          href="tel:+46760477717"
        >
          Phone: +46760477717
        </a>
      </div>

      <div className="lg:w-3/4 ml-10 p-4">
        <div className="lg:flex items-center justify-around">
          <h3 className="text-white font-light">
            Let's start a new project together
          </h3>
          <Button
            text="Contact Us"
            standard
            classes="rounded-full text-white hover:shadow"
            url="/contact"
          />
        </div>

        <div className="mt-4 lg:flex justify-between">
          <nav>
            <p className="font-thin text-white opacity-50">Sitemap</p>
            <ul className="list-reset text-sm inline-block">
              <Link className="block my-2" to="/">
                <li className={menuClasses}>Home</li>
              </Link>
              <Link className="block my-2" to="/services">
                <li className={menuClasses}>What We Do</li>
              </Link>
              <Link className="block my-2" to="/about">
                <li className={menuClasses}>TEAM</li>
              </Link>
              <Link className="block my-2" to="/blog">
                <li className={menuClasses}>BLOG</li>
              </Link>
            </ul>
          </nav>
          <div>
            <p className="font-thin text-white opacity-50">Office - Sweden</p>
            <p className="text-white my-2 opacity-80 leading-normal">
              Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
            </p>
          </div>
          <div>
            <p className="font-thin text-white opacity-50">Office - Bosnia</p>
            <p className="text-white my-2 opacity-80 leading-normal">
              Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
              & Herzegovina
            </p>
          </div>
        </div>
      </div>
    </div>
  </footer>
)

export default Footer