Restructuring and styling of components

src/components/Card.js

@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="m-3 w-full rounded overflow-hidden shadow-lg">
+  <div className="m-4 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
     <img className="w-full" src={ImgSprint} alt="Sprint Work" />
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">

src/components/Footer.js

@@ -5,34 +5,64 @@ import Button from './Button'
 import LogoSaburly from '../images/logo-saburly-colorful.svg'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-75 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
+  '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">
-    <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
-    <p className="text-white font-light">
-      Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
-      imperdiet.
-    </p>
-    <h4>Home</h4>
-    <ul className="text-sm">
-      <Link to="/services">
-        <li className={menuClasses}>What We Do</li>
-      </Link>
-      <Link to="/about">
-        <li className={menuClasses}>TEAM</li>
-      </Link>
-      <Link to="/blog">
-        <li className={menuClasses}>BLOG</li>
-      </Link>
-    </ul>
+    <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" />
+        <a href="mailto:info@saburly.com">E: info@saburly.com</a>
+        <a href="tel:+46760477717">P: +46760477717</a>
+      </div>
 
-    <Button
-      text="Contact Us"
-      standard
-      classes="rounded-full text-white hover:shadow"
-      url="/contact"
-    />
+      <div className="lg:w-3/4 ml-10 p-4">
+        <div className="lg:flex items-center justify-between">
+          <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-70">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-70">Office - Sweden</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
+            </p>
+          </div>
+          <div>
+            <p className="font-thin text-white opacity-70">Office - Bosnia</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
+              & Herzegovina
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </footer>
 )
 

src/components/Header.js

@@ -22,7 +22,7 @@ const Header = () => (
       </button>
 
       <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
-        <ul className="text-sm">
+        <ul className="list-reset text-sm">
           <Link to="/services">
             <li className={menuClasses}>What We Do</li>
           </Link>

src/components/SectionIntro.js

@@ -22,7 +22,7 @@ const IntroDefault = ({ ...props }) => (
     </h1>
     <p
       className={`${props.light ? headlineDark : ''} 
-    font-light leading-normal opacity-75`}
+    font-light leading-normal opacity-70`}
     >
       {props.text}
     </p>

src/components/Service.js

@@ -9,7 +9,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="bg-white p-8 shadow lg:m-0 opacity-75 lg:max-w-sm"
+      classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm"
       headline={props.title}
       text={props.text}
     />