Styling about page

src/pages/about.js

@@ -32,19 +32,19 @@ const AboutPage = () => (
       />
     </Fade>
 
-    <section className="container mx-auto my-20 p-10">
+    <section className="container mx-auto my-20">
       <Fade>
-        <div className="text-center lg:flex justify-center items-center">
+        <div className="saburly-main-bg rounded-lg p-10 text-center lg:flex justify-center items-center">
           <img
             src={MeaningSaburly}
             className="max-h-xs"
             alt="User Experience Design Agency"
           />
           <div>
-            <p className="py-2 font-light text-grey-darkest text-center">
+            <p className="py-2 font-light text-white opacity-80 text-center">
               Saburly comes from an old Bosnian saying and is about
             </p>
-            <h5 className="text-center text-xl md:text-2xl lg:text-4xl italic font-light text-black">
+            <h5 className="text-center text-xl md:text-2xl lg:text-4xl italic font-light text-black text-white opacity-100">
               "Achieving success through patience, strategic planning and
               perseverance"
             </h5>
@@ -53,7 +53,7 @@ const AboutPage = () => (
       </Fade>
     </section>
 
-    <section className="container mx-auto my-20 p-4">
+    <section className="container mx-auto my-20">
       <Fade>
         <SectionIntro
           classes="max-w-lg mx-auto"
@@ -64,7 +64,7 @@ const AboutPage = () => (
         />
       </Fade>
       <Fade>
-        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
+        <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" subtitle="CEO" />
           </div>