Add functionality for dynamic header movement, design tweaks

src/components/Header.css

@@ -1,6 +1,3 @@
-.side-toggle {
-}
-
 .menu_icon [class*='menu_bar-'] {
   background: #ffffff;
   -webkit-transform: rotate(0deg);
@@ -68,3 +65,8 @@
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
 }
+
+.saburly-menu,
+.headroom {
+  z-index: 9999;
+}

src/components/Header.js

@@ -4,6 +4,8 @@ import LogoSaburly from '../images/saburly-logo-4.svg'
 import LogoSaburlyWhite from '../images/saburly-logo-white.svg'
 import Button from './Button'
 
+import Headroom from 'react-headroom'
+
 import './Header.css'
 
 let menuClasses =
@@ -12,48 +14,50 @@ let menuClasses =
 class Header extends Component {
   render() {
     return (
-      <header className="saburly-main-bg saburly-bottom-shadow">
-        <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
-          <Link to="/">
-            <div className="max-w-xs mr-8">
-              <img
-                src={LogoSaburlyWhite}
-                className="w-full saburly-logo"
-                alt="Saburly Logo"
-              />
+      <Headroom>
+        <header className="saburly-main-bg saburly-menu saburly-bottom-shadow">
+          <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
+            <Link to="/">
+              <div className="max-w-xs mr-8">
+                <img
+                  src={LogoSaburlyWhite}
+                  className="w-full saburly-logo"
+                  alt="Saburly Logo"
+                />
+              </div>
+            </Link>
+
+            <div className="side-toggle">
+              <button className="menu_icon visible lg:invisible">
+                <span className="menu_bar-top" />
+                <span className="menu_bar-mid" />
+                <span className="menu_bar-bot" />
+              </button>
             </div>
-          </Link>
 
-          <div className="side-toggle">
-            <button className="menu_icon visible lg:invisible">
-              <span className="menu_bar-top" />
-              <span className="menu_bar-mid" />
-              <span className="menu_bar-bot" />
-            </button>
-          </div>
+            <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
+              <ul className="list-reset font- text-sm">
+                <Link to="/services">
+                  <li className={menuClasses}>Services</li>
+                </Link>
+                <Link to="/about">
+                  <li className={menuClasses}>About Us</li>
+                </Link>
+                <Link to="/blog">
+                  <li className={menuClasses}>Blog</li>
+                </Link>
 
-          <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
-            <ul className="list-reset font- text-sm">
-              <Link to="/services">
-                <li className={menuClasses}>Services</li>
-              </Link>
-              <Link to="/about">
-                <li className={menuClasses}>About Us</li>
-              </Link>
-              <Link to="/blog">
-                <li className={menuClasses}>Blog</li>
-              </Link>
-
-              <Button
-                text="Contact"
-                standard
-                classes="rounded-full font-medium text-white hover:shadow"
-                url="/contact"
-              />
-            </ul>
-          </div>
-        </nav>
-      </header>
+                <Button
+                  text="Contact"
+                  standard
+                  classes="rounded-full font-medium text-white hover:shadow"
+                  url="/contact"
+                />
+              </ul>
+            </div>
+          </nav>
+        </header>
+      </Headroom>
     )
   }
 }

src/components/PageIntro.js

@@ -4,15 +4,24 @@ import SectionIntro from './SectionIntro'
 import Button from './Button'
 
 const PageIntro = ({ ...props }) => (
-  <section className="bg-saburly-light relative">
+  <section className="saburly-intro bg-saburly-light relative">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
+      <title>bg-saburly-white</title>
+      <path
+        d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
+        transform="translate(0 0)"
+        style={{ fill: '#fff' }}
+      />
+    </svg>
     <div
-      className={`container mx-auto items-center flex lg:flex-row flex-col ${
+      className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
         props.reversed ? 'flex-col-reverse' : ''
       } p-4`}
     >
       <div className="text-center lg:text-left">
         {props.children}
         <SectionIntro
+          header
           intro={props.intro}
           classes={`lg:text-left lg:max-w-sm content-center ${
             props.sectionClasses
@@ -31,19 +40,11 @@ const PageIntro = ({ ...props }) => (
       {props.image && (
         <img
           src={props.image}
-          className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto z-10`}
+          className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`}
           alt="Software Development Agency"
         />
       )}
     </div>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
-      <title>bg-saburly-white</title>
-      <path
-        d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
-        transform="translate(0 0)"
-        style={{ fill: '#fff' }}
-      />
-    </svg>
   </section>
 )
 

src/components/SectionIntro.js

@@ -26,8 +26,10 @@ const IntroDefault = ({ ...props }) => (
     )}
     {props.text && (
       <p
-        className={`${props.light ? headlineDark : ''} 
-    font-light text-black-light text-lg leading-normal`}
+        className={`${props.light ? headlineDark : ''} ${
+          props.header ? 'saburly-text-intro' : 'text-black-light'
+        }  
+    font-light text-lg leading-normal`}
       >
         {props.text}
       </p>

src/components/Service.js

@@ -9,7 +9,7 @@ const Service = ({ ...props }) => (
   >
     <img
       src={props.img}
-      className={`w-full md:max-w-sm p-4 z-10 ${props.imgClasses}`}
+      className={`w-full md:max-w-sm p-4 ${props.imgClasses}`}
       alt={`${props.title} agency`}
     />
     <InfoBox

src/components/SideMenu.css

@@ -22,7 +22,6 @@
 .slideout-panel {
   position: relative;
   z-index: 1;
-  will-change: transform;
   background-color: #fff;
   min-height: 100vh;
 }

src/components/WorkStyle.js

@@ -15,7 +15,7 @@ const WorkStyle = ({ ...props }) => (
     <div className="mx-auto text-center border-grey-lighter">
       <div className="flex flex-wrap text-black">
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
-          <img src={HQCode} className="max-w-xs" alt="High Quality Code" />
+          <img src={HQCode} className="max-w-10" alt="High Quality Code" />
           <h3 className="text-xl my-2">High Quality Code</h3>
           <p className="leading-normal font-light text-lg">
             We have deep understanding of software engineering & computer
@@ -27,7 +27,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8">
           <img
             src={ContDelivery}
-            className="max-w-xs"
+            className="max-w-10"
             alt="High Quality Code"
           />
           <h3 className="text-xl my-2">Continuous delivery</h3>
@@ -43,7 +43,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
           <img
             src={ModernDevops}
-            className="max-w-xs"
+            className="max-w-10"
             alt="High Quality Code"
           />
           <h3 className="text-xl my-2">Modern DevOps</h3>
@@ -56,7 +56,7 @@ const WorkStyle = ({ ...props }) => (
           </p>
         </div>
         <div className="w-full md:w-1/2 p-8">
-          <img src={CodeReviews} className="max-w-xs" alt="High Quality Code" />
+          <img src={CodeReviews} className="max-w-10" alt="High Quality Code" />
           <h3 className="text-xl my-2">Code Reviews</h3>
           <p className="leading-normal font-light text-lg">
             “Two Heads are Better Than One”. Code reviews are integrated part of
@@ -68,7 +68,7 @@ const WorkStyle = ({ ...props }) => (
       </div>
       <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-black">
         <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
-          <img src={UXResearch} className="max-w-xs" alt="High Quality Code" />
+          <img src={UXResearch} className="max-w-10" alt="High Quality Code" />
           <h3 className="text-xl my-2">UX testing/research</h3>
           <p className="leading-normal font-light text-lg">
             We know it takes more than just an user video or a survey to
@@ -81,7 +81,7 @@ const WorkStyle = ({ ...props }) => (
         <div className="w-full md:w-1/2 p-8">
           <img
             src={UnitIntegration}
-            className="max-w-xs"
+            className="max-w-10"
             alt="High Quality Code"
           />
           <h3 className="text-xl my-2">Unit & Integration testing</h3>