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 lg:flex">
      <div className="lg:w-1/4 p-4">
        <img src={LogoSaburly} alt="Saburly Logo" className="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>
        <div>
          <a
            className="text-center lg:text-left opacity-70 hover:opacity-100 py-4 lg:py-1 text-xl lg:text-sm no-underline text-white block"
            href="mailto:info@saburly.com"
          >
            E-mail: info@saburly.com
          </a>
          <a
            className="text-center text-xl lg:text-sm lg:text-left opacity-70 hover:opacity-100 no-underline text-white block"
            href="tel:+46760477717"
          >
            Phone: +46760477717
          </a>
        </div>
      </div>

      <div className="lg:w-3/4 ml-10 p-4">
        <div className="p-4 text-center lg:text-left sm: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>
    <div className="sm:flex items-center text-center justify-center pb-8">
      <Button
        text="Say Hello"
        standard
        classes="rounded-full text-white hover:shadow mx-2"
        url="/contact"
      />
    </div>
  </footer>
)

export default Footer