Styling

src/components/Card.js

@@ -8,7 +8,7 @@ const Card = ({ ...props }) => (
     className={`h-full w-full rounded overflow-hidden bg-white ${!props.teamMember &&
       'border-bottom-saburly hover:shadow'}`}
   >
-    <div className="relative hover:opacity-50">
+    <div className={`relative ${!props.team ? 'hover:opacity-50' : ''}`}>
       {props.image && <img className="w-full" src={props.image.src} />}
       {props.teamMember && (
         <img className="w-full rounded" src={props.teamMember} />

src/components/InfoBox.js

@@ -6,7 +6,7 @@ const InfoBox = ({ ...props }) => (
     <h2 className={`${props.h2Classes} py-2 text-black my-2`}>
       {props.headline}
     </h2>
-    <p className="text-black-light leading-normal text-lg font-light">
+    <p className="text-black-light leading-normal lg:text-lg font-light">
       {props.text}
     </p>
   </div>

src/components/PageIntro.js

@@ -29,7 +29,7 @@ class PageIntro extends Component {
           />
         </svg>
         <div
-          className={`relative container mx-auto items-center flex lg:flex-row justify-between flex-col ${
+          className={`relative container mx-auto items-center flex xl:flex-row justify-between flex-col ${
             this.props.reversed ? 'flex-col-reverse' : ''
           } p-4`}
         >
@@ -37,12 +37,12 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
-              h2Classes="text-2xl md:text-4xl py-2 lg:text-5xl"
+              h2Classes="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl"
               intro={this.props.intro}
-              classes={`md:p-4 lg:text-left lg:max-w-sm content-center ${
+              classes={`lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses
               }`}
-              textClasses="text-xl opacity-80"
+              textClasses="mt-2 mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal mb-4 lg:leading-loose"
               headline={this.props.headline}
               text={this.props.text}
             />

src/components/SectionIntro.js

@@ -28,9 +28,7 @@ const IntroDefault = ({ ...props }) => (
       <p
         className={`${props.light ? headlineDark : ''} ${
           props.header ? 'saburly-text-intro' : 'text-black-light'
-        } font-light text-lg leading-smaller lg:leading-normal ${
-          props.textClasses
-        }`}
+        } font-light leading-normal md:text-lg ${props.textClasses}`}
       >
         {props.text}
       </p>

src/pages/index.js

@@ -34,7 +34,7 @@ const IndexPage = ({ ...props }) => (
       image={ImgIntro}
       imgClasses="-mb-20 p-2 md:p-8"
     >
-      <h2 className="py-4 text-2xl xsm:text-3xl text-black md:text-4xl xl:text-5xl">
+      <h2 className="my-4 text-3xl xsm:text-4xl text-black md:text-5xl">
         We{' '}
         <Typed
           strings={['imagine', 'design', 'develop', 'maintain']}
@@ -51,7 +51,7 @@ const IndexPage = ({ ...props }) => (
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">
         <Fade>
           <SectionIntro
-            h2Classes="text-2xl md:text-3xl"
+            h2Classes="text-2xl sm:text-3xl"
             headline="Because beautiful code makes our heart pound"
             text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
           />
@@ -62,7 +62,7 @@ const IndexPage = ({ ...props }) => (
         <Fade>
           <Service
             classes="py-8"
-            h2Classes="text-2xl md:text-4xl font-light text-black"
+            h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black"
             img={ImgDesign}
             title="User Experience Design"
             text="Our approach is simple: focus on how users might use the product in the best ways possible. We offer UX and interface design services for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
@@ -73,7 +73,7 @@ const IndexPage = ({ ...props }) => (
           <Service
             reversed
             classes="py-8"
-            h2Classes="text-2xl md:text-4xl font-light text-black"
+            h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black"
             img={ImgFullstack}
             title="Full-Stack Development"
             text="We are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
@@ -85,7 +85,7 @@ const IndexPage = ({ ...props }) => (
           <Service
             img={ImgMobile}
             classes="py-8"
-            h2Classes="text-2xl md:text-4xl font-light text-black"
+            h2Classes="text-2xl xsm:text-3xl sm:text-4xl font-light text-black"
             imgClasses="max-h-sm"
             title="Mobile Apps"
             text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."