From c56862d876b674ed0948e14eff43f8f4e609e467 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 12 Sep 2018 11:42:14 +0200
Subject: [PATCH] Refactor contact to card

---
 src/components/Card.js |   3 +-
 src/pages/about.js     |  20 +++---
 src/pages/contact.js   | 147 +++++++++++++++++++----------------------
 3 files changed, 79 insertions(+), 91 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index e9e66a8..7faded1 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -5,7 +5,7 @@ import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
   <article
-    className={`h-full w-full rounded overflow-hidden bg-white ${!props.teamMember &&
+    className={`h-full w-full rounded overflow-hidden bg-white ${!props.unshadowed &&
       'border-bottom-saburly hover:shadow'}`}
   >
     <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
@@ -28,6 +28,7 @@ const Card = ({ ...props }) => (
         )}
       </div>
     </div>
+    {props.children}
   </article>
 )
 
diff --git a/src/pages/about.js b/src/pages/about.js
index 7bbe710..60e31f6 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -63,34 +63,34 @@ const AboutPage = () => (
       </Fade>
       <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Moris} title="Moris Pasic" />
+          <Card team unshadowed teamMember={Moris} title="Moris Pasic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Senad} title="Senad Uka" />
+          <Card team unshadowed teamMember={Senad} title="Senad Uka" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Edin} title="Edin Dazdarevic" />
+          <Card team unshadowed teamMember={Edin} title="Edin Dazdarevic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Mediha} title="Mediha Zukic" />
+          <Card team unshadowed teamMember={Mediha} title="Mediha Zukic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Mirna} title="Mirna Milic" />
+          <Card team unshadowed teamMember={Mirna} title="Mirna Milic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Nina} title="Nina Juresic" />
+          <Card team unshadowed teamMember={Nina} title="Nina Juresic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Bilal} title="Bilal Catic" />
+          <Card team unshadowed teamMember={Bilal} title="Bilal Catic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Almira} title="Almira Krdzic" />
+          <Card team unshadowed teamMember={Almira} title="Almira Krdzic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Mickey} title="Miralem Halilovic" />
+          <Card team unshadowed teamMember={Mickey} title="Miralem Halilovic" />
         </div>
         <div className="md:w-1/3 p-2">
-          <Card team teamMember={Nedim} title="Nedim Uka" />
+          <Card team unshadowed teamMember={Nedim} title="Nedim Uka" />
         </div>
       </div>
     </section>
diff --git a/src/pages/contact.js b/src/pages/contact.js
index df3b1e4..eeb56a5 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -3,6 +3,7 @@ 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 ContactImage from '../images/saburly-web-agency.jpg'
 import Sarajevo from '../images/sarajevo-web-agency.jpg'
@@ -22,93 +23,79 @@ const ContactPage = () => (
       imgClasses="-mb-12 border-white rounded-lg"
     />
 
-    <section className="container mx-auto my-12 p-4">
-      <div className="md:flex">
+    <section className="my-20 container mx-auto w-full md:flex w-full">
+      <div className="p-2">
         <Fade left>
-          <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="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 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>
-          </div>
+          </Card>
         </Fade>
+      </div>
+      <div className="p-2">
         <Fade right>
-          <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="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 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>
-          </div>
+          </Card>
         </Fade>
       </div>
     </section>