De-duplicate heading styles

package.json

@@ -41,6 +41,7 @@
     "react-swipeable": "^4.3.0",
     "react-transition-group": "^2.5.0",
     "resolve": "1.6.0",
+    "styled-components": "^4.1.2",
     "whatwg-fetch": "2.0.4"
   },
   "devDependencies": {

src/Application.js

@@ -0,0 +1,88 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import isMobile from 'ismobilejs';
+import {CSSTransition, TransitionGroup} from 'react-transition-group';
+import {Redirect, Route, Switch} from 'react-router-dom';
+import Header from './imports/components/Header';
+import ScrollToTop from './imports/components/ScrollToTop';
+import Intro from './pages/Intro';
+import Home from './pages/Journey/Home';
+import MobileHome from './mobilePages/Journey/Home';
+import MobileServices from './mobilePages/Journey/Services';
+import Services from './pages/Journey/Services';
+import MobileImpact from './mobilePages/Journey/Impact';
+import Impact from './pages/Journey/Impact';
+import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
+import CaseStudies from './pages/Journey/CaseStudies';
+import MobileTeam from './mobilePages/Journey/Team';
+import Team from './pages/Journey/Team';
+import MobileConsultation from './mobilePages/Journey/Consultation';
+import Consultation from './pages/Journey/Consultation';
+import BetterYet from './pages/Projects/BetterYet';
+import CommuniHelp from './pages/Projects/CommuniHelp';
+import Booqed from './pages/Projects/Booqed';
+import LPMA from './pages/Projects/LPMA';
+import Hub from './pages/Projects/Hub';
+import {trackPage} from './imports/analytics';
+
+export default class Application extends React.Component {
+  componentDidUpdate(prevProps) {
+    const {location: {prevPathname}} = prevProps;
+    const {location} = this.props;
+    const {pathname} = location;
+    if (prevPathname !== pathname) {
+      trackPage(pathname);
+    }
+  }
+
+  render() {
+    const {location} = this.props;
+    return (
+      <Fragment>
+        {(location.pathname !== '/'
+          && location.pathname !== '/betteryet'
+          && location.pathname !== '/lpma'
+          && location.pathname !== '/hub'
+          && location.pathname !== '/communihelp'
+          && location.pathname !== '/booqed'
+          && ((isMobile.phone && location.pathname !== '/home')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/services')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/our-work')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/team')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/consult')
+            || (!isMobile.phone))
+          && ((isMobile.phone && location.pathname !== '/impact')
+            || (!isMobile.phone))) && <Header />}
+        <ScrollToTop>
+          <TransitionGroup>
+            <CSSTransition key={location.key} classNames="fade" timeout={450}>
+              <Switch location={location}>
+                <Route exact path="/" component={Intro} />
+                <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
+                <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
+                <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
+                <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
+                <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
+                <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
+                <Route exact path="/betteryet" component={BetterYet} />
+                <Route exact path="/lpma" component={LPMA} />
+                <Route exact path="/hub" component={Hub} />
+                <Route exact path="/communihelp" component={CommuniHelp} />
+                <Route exact path="/booqed" component={Booqed} />
+                <Route path="*" render={() => <Redirect to="/" />} />
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        </ScrollToTop>
+      </Fragment>
+    );
+  }
+}
+
+Application.propTypes = {
+  location: PropTypes.object.isRequired,
+};

src/app.js

@@ -1,41 +1,17 @@
 import React, {Component, Fragment} from 'react';
-import {
-  BrowserRouter, Route, Switch, Redirect,
-} from 'react-router-dom';
-import {TransitionGroup, CSSTransition} from 'react-transition-group';
-import ScrollToTop from 'components/ScrollToTop';
+import {BrowserRouter, Route} from 'react-router-dom';
 import DeviceOrientation, {Orientation} from 'components/Orientation';
 import LoaderLine from 'components/Loader/LoaderLine';
-import Header from 'components/Header';
 import isMobile from 'ismobilejs';
 import 'normalize.css';
 import 'styles/main.styl';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
-import Intro from './pages/Intro';
-import Home from './pages/Journey/Home';
-import MobileHome from './mobilePages/Journey/Home';
-import Services from './pages/Journey/Services';
-import MobileServices from './mobilePages/Journey/Services';
-import Impact from './pages/Journey/Impact';
-import MobileImpact from './mobilePages/Journey/Impact';
-import CaseStudies from './pages/Journey/CaseStudies';
-import MobileCaseStudies from './mobilePages/Journey/CaseStudies';
-import Team from './pages/Journey/Team';
-import MobileTeam from './mobilePages/Journey/Team';
-import Consultation from './pages/Journey/Consultation';
-import MobileConsultation from './mobilePages/Journey/Consultation';
-
-import BetterYet from './pages/Projects/BetterYet';
-import LPMA from './pages/Projects/LPMA';
-import Hub from './pages/Projects/Hub';
-import CommuniHelp from './pages/Projects/CommuniHelp';
-import Booqed from './pages/Projects/Booqed';
-
 import Landscape from './pages/Landscape';
 
 import './index.styl';
+import Application from './Application';
 
 AOS.init({
   disable: false,
@@ -91,55 +67,13 @@ class App extends Component {
 
   renderRoutes() {
     const {ready} = this.state;
-
-    if (!ready) return null;
+    if (!ready) {
+      return false;
+    }
 
     return (
       <BrowserRouter>
-        <Route render={({location}) => (
-          <Fragment>
-            {(location.pathname !== '/'
-              && location.pathname !== '/betteryet'
-              && location.pathname !== '/lpma'
-              && location.pathname !== '/hub'
-              && location.pathname !== '/communihelp'
-              && location.pathname !== '/booqed'
-              && ((isMobile.phone && location.pathname !== '/home')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/services')
-              || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/our-work')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/team')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/consult')
-                || (!isMobile.phone))
-              && ((isMobile.phone && location.pathname !== '/impact')
-              || (!isMobile.phone))) && <Header />}
-            <ScrollToTop>
-              <TransitionGroup>
-                <CSSTransition key={location.key} classNames="fade" timeout={450}>
-                  <Switch location={location}>
-                    <Route exact path="/" component={Intro} />
-                    <Route exact path="/home" component={isMobile.phone ? MobileHome : Home} />
-                    <Route exact path="/services" component={isMobile.phone ? MobileServices : Services} />
-                    <Route exact path="/impact" component={isMobile.phone ? MobileImpact : Impact} />
-                    <Route exact path="/our-work" component={isMobile.phone ? MobileCaseStudies : CaseStudies} />
-                    <Route exact path="/team" component={isMobile.phone ? MobileTeam : Team} />
-                    <Route exact path="/consult" component={isMobile.phone ? MobileConsultation : Consultation} />
-                    <Route exact path="/betteryet" component={BetterYet} />
-                    <Route exact path="/lpma" component={LPMA} />
-                    <Route exact path="/hub" component={Hub} />
-                    <Route exact path="/communihelp" component={CommuniHelp} />
-                    <Route exact path="/booqed" component={Booqed} />
-                    <Route path="*" render={() => <Redirect to="/" />} />
-                  </Switch>
-                </CSSTransition>
-              </TransitionGroup>
-            </ScrollToTop>
-          </Fragment>
-        )}
-        />
+        <Route component={Application} />
       </BrowserRouter>
     );
   }

src/imports/analytics/index.js

@@ -58,3 +58,7 @@ export const trackEvent = (eventName, props = {}) => {
     ...props
   });
 };
+
+export const trackPage = (pageName, props = {}) => {
+  window.analytics.page(pageName, props);
+};

src/imports/components/Header/index.js

@@ -3,6 +3,7 @@ import {NavLink} from 'react-router-dom';
 import PropTypes from 'prop-types';
 import uniqueid from 'lodash.uniqueid';
 import classnames from 'classnames';
+import FreeConsultationButton from 'components/interactions/FreeConsultationButton';
 
 import {
   Logo,
@@ -12,7 +13,6 @@ import {
   AngelListIcon,
   BloggerIcon
 } from 'icons';
-import Button from 'components/interactions/Button';
 import {MenuIcon, CloseMenuIcon} from './icons';
 
 import './index.styl';
@@ -124,9 +124,9 @@ class Header extends Component {
         </NavLink>
         {this.renderLinks()}
         {isMenuStatus ? this.renderOpenedMenu() : this.renderClosedMenu()}
-        <NavLink className="header-link" to="/consult">
-          <Button className="header-button">FREE CONSULTATION</Button>
-        </NavLink>
+        <div className="header-link">
+          <FreeConsultationButton />
+        </div>
       </div>
     );
   }

src/imports/components/Header/index.styl

@@ -18,7 +18,7 @@
     .header-nav-item
       text-decoration none
       color rgba(0, 0, 0, 0.6)
-      font-size 1.1vw
+      font-size 14px
       margin 0 1.2vw
       letter-spacing 0.88pt
       cursor pointer
@@ -50,14 +50,6 @@
 
   .header-link
     margin-left 5vw
-    color white
-    text-decoration none
-
-    .header-button
-      padding 2vh 2.4vw
-      font-size 1.13vw
-      letter-spacing 1.8pt
-      line-height 23pt
 
   .menu-icon, .close-menu-icon
     display none

src/imports/components/Sections/CaseStudy/index.js

@@ -5,15 +5,32 @@ import uniqueid from 'lodash.uniqueid';
 
 import IphoneMobileMock from 'icons/IphoneMobileMock';
 import AnimatedButton from 'components/interactions/AnimatedButton';
+import {Separator} from 'components/layout';
 import {RightArrowIcon} from 'icons';
 
 import './index.styl';
 import './mobile/index.styl';
 
 class CaseStudy extends Component {
+  renderButtons() {
+    const {href} = this.props;
+
+    return (
+      <div className="animated-button-container">
+        <AnimatedButton
+          title="See More"
+          className="animated-button"
+          href={href}
+        >
+          <RightArrowIcon color="white" />
+        </AnimatedButton>
+      </div>
+    );
+  }
+
   render() {
     const {
-      hasMobileThumbnails, title, subtitle, text, href, images, mobileImages, mockColor,
+      hasMobileThumbnails, title, subtitle, text, images, mobileImages, mockColor,
     } = this.props;
 
     return (
@@ -48,21 +65,12 @@ class CaseStudy extends Component {
             <p className="case-study-title">{title}</p>
             <p className="case-study-subtitle">{subtitle}</p>
 
-            <div className="case-study-separator" />
+            <Separator />
 
             {text.split('\\n').map(par => <p className="case-study-text" key={uniqueid('cs-text-')}>{par}</p>)}
           </div>
 
-          {/* TODO this code is a duplication suspect. Resolve */}
-          <div className="animated-button-container">
-            <AnimatedButton
-              title="See More"
-              className="animated-button"
-              href={href}
-            >
-              <RightArrowIcon color="white" />
-            </AnimatedButton>
-          </div>
+          {this.renderButtons()}
           {hasMobileThumbnails ? (
             <div className="screens-container">
               {images.map((source, idx) => (

src/imports/components/Sections/CaseStudy/index.styl

@@ -2,7 +2,7 @@
   display flex
   flex-direction column
   align-items center
-  margin-top 10vh
+  margin-top 5vh
   overflow hidden
 
   .screens-container-mobile
@@ -16,29 +16,24 @@
     flex-direction column
     align-items center
     padding-top 3.4%
-    padding-bottom 14vh !important
+    padding-bottom 10vh
     position relative
 
     .case-study-description
       width 80vw
 
       .case-study-title
-        font-size 1.8vw
+        font-size 26px
         font-weight 600
         margin-bottom 0
 
       .case-study-subtitle
         margin 1vh 0
         color #5C64AA
-        font-size 1.22vw
-
-      .case-study-separator
-        margin-top 3%
-        border 0.6pt solid #5C64AA
-        width 5.5vh
+        font-size 16px
 
       .case-study-text
-        font-size 1.3vw
+        font-size 16px
         width 40vw
         letter-spacing 0.3pt
 

src/imports/components/TeamMemberCard/index.js

@@ -8,24 +8,24 @@ class TeamMemberCard extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     position: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    src: PropTypes.string.isRequired,
+    answers: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
   };
 
   render() {
     const {
-      name, position, text, src,
+      name, position, answers, image,
     } = this.props;
 
     return (
       <div className="team-member">
-        <img className="member-photo" src={src} alt="insighty member" />
+        <img className="member-photo" src={image} alt="insighty member" />
         <div className="member-content">
           <h3 className="member-name">{name}</h3>
           <p className="member-position">{position}</p>
           <div className="member-separator" />
           <div className="member-text">
-            {text.split('\\n').map(par => <p className="member-para" key={uniqueid('member-para-')}>{par}</p>)}
+            {answers.map(answer => <p className="member-para" key={uniqueid('member-para-')}>{answer}</p>)}
           </div>
         </div>
       </div>