Styling and fixing about us bug

src/components/PageIntro.js

@@ -37,12 +37,12 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
-              h2Classes="text-2xl md:text-4xl lg:text-5xl"
+              h2Classes="text-2xl md:text-4xl py-2 lg:text-5xl"
               intro={this.props.intro}
-              classes={`p-4 lg:text-left lg:max-w-sm content-center ${
+              classes={`md:p-4 lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses
               }`}
-              textClasses="font-medium opacity-80"
+              textClasses="text-xl opacity-80"
               headline={this.props.headline}
               text={this.props.text}
             />

src/components/SectionIntro.js

@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
         className={`
       ${
         props.light ? headlineDark : headlineLight
-      } opacity-50 text-sm font-light text-black uppercase py-2 pb-1`}
+      } opacity-50 text-sm font-light text-black uppercase py-1`}
       >
         {props.intro}
       </h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
     {props.headline && (
       <h2
         className={`${props.light ? headlineDark : ''} ${props.h2Classes}
-    text-black py-4`}
+    text-black py-1`}
       >
         {props.headline}
       </h2>
@@ -28,7 +28,9 @@ const IntroDefault = ({ ...props }) => (
       <p
         className={`${props.light ? headlineDark : ''} ${
           props.header ? 'saburly-text-intro' : 'text-black-light'
-        } font-light text-lg leading-normal ${props.textClasses}`}
+        } font-light text-lg leading-smaller lg:leading-normal ${
+          props.textClasses
+        }`}
       >
         {props.text}
       </p>

src/pages/about.js

@@ -22,7 +22,6 @@ import Nedim from '../images/developer-nedim.svg'
 
 const AboutPage = () => (
   <PageTransition>
-    <Fade top>
     <PageIntro
       tiltImage
       headline="We know software"
@@ -30,7 +29,6 @@ const AboutPage = () => (
       image={IntroImage}
       imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12"
     />
-    </Fade>
 
     <section className="container mx-auto p-4 md:p-0 my-20">
       <Fade>
@@ -63,7 +61,6 @@ const AboutPage = () => (
           textClasses="text-center"
         />
       </Fade>
-      <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" />
@@ -96,7 +93,6 @@ const AboutPage = () => (
           <Card team teamMember={Nedim} title="Nedim Uka" />
         </div>
       </div>
-      </Fade>
     </section>
   </PageTransition>
 )

src/pages/contact.js

@@ -13,7 +13,6 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ContactPage = () => (
   <PageTransition>
-    <Fade top>
     <PageIntro
       tiltImage
       headline="Let's connect"
@@ -22,7 +21,6 @@ const ContactPage = () => (
       image={ContactImage}
       imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
     />
-    </Fade>
 
     <section className="container mx-auto my-12 p-4">
       <div className="md:flex">

src/pages/index.js

@@ -29,13 +29,12 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const IndexPage = ({ ...props }) => (
   <PageTransition>
-    <Fade top>
     <PageIntro
       text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}
       imgClasses="-mb-20 p-2 md:p-8"
     >
-        <h2 className="px-4 text-2xl text-black md:text-4xl xl:text-5xl pt-1">
+      <h2 className="py-4 text-2xl xsm:text-3xl text-black md:text-4xl xl:text-5xl">
         We{' '}
         <Typed
           strings={['imagine', 'design', 'develop', 'maintain']}
@@ -47,7 +46,6 @@ const IndexPage = ({ ...props }) => (
         great<br />digital experiences
       </h2>
     </PageIntro>
-    </Fade>
 
     <main>
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">

src/pages/services.js

@@ -16,7 +16,6 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ServicesPage = () => (
   <PageTransition>
-    <Fade top>
     <PageIntro
       tiltImage
       straight
@@ -26,7 +25,6 @@ const ServicesPage = () => (
       image={IntroImage}
       imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
     />
-    </Fade>
     <section className="px-4 py-16">
       <Fade>
         <div className="container mx-auto">

src/styles/general.css

@@ -188,3 +188,9 @@ a {
 .blog-post p {
   margin: 1.5rem 0;
 }
+
+@media (max-width: 575px) {
+  .container {
+    max-width: 95%;
+  }
+}

tailwind.config.js

@@ -165,6 +165,7 @@ module.exports = {
   */
 
   screens: {
+    xsm: '370px',
     sm: '576px',
     md: '768px',
     lg: '992px',
@@ -314,6 +315,8 @@ module.exports = {
   leading: {
     none: 1,
     tight: 1.25,
+    smaller: 1.5,
+    mid: 1.6,
     normal: 1.77,
     loose: 1.84,
     looser: 1.9,