Adding page transitions, image tilting option and design tweaks

src/components/PageIntro.js

@@ -1,51 +1,72 @@
-import React from 'react'
+import React, { Component } from 'react'
 
 import SectionIntro from './SectionIntro'
 import Button from './Button'
 
-const PageIntro = ({ ...props }) => (
-  <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={`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
-          }`}
-          headline={props.headline}
-          text={props.text}
-        />
-        {props.button && (
-          <Button
-            text={props.buttonText}
-            url={props.url}
-            classes={props.buttonClasses}
+class PageIntro extends Component {
+  componentDidMount() {
+    let tiltjs = require('vanilla-tilt')
+    if (this.props.tiltImage) {
+      tiltjs.init(document.querySelector('.tiltImage'), {
+        max: 20,
+        speed: 400,
+        easing: 'cubic-bezier(.03,.98,.52,.99)',
+        glare: true,
+        'max-glare': 0.8,
+        'glare-prerender': false,
+      })
+    }
+  }
+  render() {
+    return (
+      <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' }}
           />
-        )}
-      </div>
-      {props.image && (
-        <img
-          src={props.image}
-          className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`}
-          alt="Software Development Agency"
-        />
-      )}
-    </div>
-  </section>
-)
+        </svg>
+        <div
+          className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
+            this.props.reversed ? 'flex-col-reverse' : ''
+          } p-4`}
+        >
+          <div className="text-center lg:text-left">
+            {this.props.children}
+            <SectionIntro
+              header
+              intro={this.props.intro}
+              classes={`lg:text-left lg:max-w-sm content-center ${
+                this.props.sectionClasses
+              }`}
+              headline={this.props.headline}
+              text={this.props.text}
+            />
+            {this.props.button && (
+              <Button
+                text={this.props.buttonText}
+                url={this.props.url}
+                classes={this.props.buttonClasses}
+              />
+            )}
+          </div>
+          {this.props.image && (
+            <div>
+              <img
+                src={this.props.image}
+                className={`${
+                  this.props.imgClasses
+                } tiltImage md:max-h-sm md:max-w-md mx-auto`}
+                alt="Software Development Agency"
+              />
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
+}
 
 export default PageIntro