Refactor contact to card

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>
 )
 

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>

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,29 +23,23 @@ const ContactPage = () => (
       imgClasses="-mb-12 border-white rounded-lg"
     />
 
-    <section className="container mx-auto my-12 p-4">
+    <section className="my-20 container mx-auto w-full md:flex w-full">
-      <div className="md:flex">
+      <div className="p-2">
         <Fade left>
-          <div className="p-2 text-center">
+          <Card team teamMember={Stockholm} title="OFFICE IN STOCKHOLM">
-            <div className="rounded overflow-hidden border-bottom-saburly">
+            <div className="xsm:flex text-left justify-around text-black text-base p-4">
-              <img className="w-full" src={Stockholm} alt="Stockholm City" />
+              <div className="py-2">
-              <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">
+                <p className="text-black-light font-serif">
                   Saburly AB <br />
                   Vretenvägen 13 <br />
                   171 54 Solna <br />
                   Sweden <br />
                 </p>
               </div>
-                  <div>
+              <div className="py-2">
                 <h4 className="text-black">Contact</h4>
-                    <p className="text-black-light">
+                <p className="font-serif text-black-light">
                   Phone:{' '}
                   <a
                     className="saburly-color hover:text-purple-light no-underline"
@@ -63,31 +58,25 @@ const ContactPage = () => (
                 </p>
               </div>
             </div>
-              </div>
+          </Card>
-            </div>
-          </div>
         </Fade>
-        <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 className="p-2">
-                  <div>
+        <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="text-black-light">
+                <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>
+              <div className="py-2">
                 <h4 className="text-black">Contact</h4>
-                    <p className="text-black-light">
+                <p className="font-serif text-black-light">
                   Phone:{' '}
                   <a
                     className="saburly-color hover:text-purple-light no-underline"
@@ -106,9 +95,7 @@ const ContactPage = () => (
                 </p>
               </div>
             </div>
-              </div>
+          </Card>
-            </div>
-          </div>
         </Fade>
       </div>
     </section>