diff --git a/package.json b/package.json index 8f1cf19..b8e4c62 100644 --- a/package.json +++ b/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": { diff --git a/src/Application.js b/src/Application.js new file mode 100644 index 0000000..f4bbd3b --- /dev/null +++ b/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 ( + + {(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))) &&
} + + + + + + + + + + + + + + + + + } /> + + + + + + ); + } +} + +Application.propTypes = { + location: PropTypes.object.isRequired, +}; diff --git a/src/app.js b/src/app.js index ebdc5e6..a1c7ec4 100644 --- a/src/app.js +++ b/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 ( - ( - - {(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))) &&
} - - - - - - - - - - - - - - - - - } /> - - - - - - )} - /> + ); } diff --git a/src/imports/analytics/index.js b/src/imports/analytics/index.js index 32ad76f..e7ccd56 100644 --- a/src/imports/analytics/index.js +++ b/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); +}; diff --git a/src/imports/components/Header/index.js b/src/imports/components/Header/index.js index 303752f..5bebc38 100644 --- a/src/imports/components/Header/index.js +++ b/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 { {this.renderLinks()} {isMenuStatus ? this.renderOpenedMenu() : this.renderClosedMenu()} - - - +
+ +
); } diff --git a/src/imports/components/Header/index.styl b/src/imports/components/Header/index.styl index c729693..ce02a1c 100644 --- a/src/imports/components/Header/index.styl +++ b/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 diff --git a/src/imports/components/Sections/CaseStudy/index.js b/src/imports/components/Sections/CaseStudy/index.js index 1cb537b..8a0f9c4 100644 --- a/src/imports/components/Sections/CaseStudy/index.js +++ b/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 ( +
+ + + +
+ ); + } + 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 {

{title}

{subtitle}

-
+ {text.split('\\n').map(par =>

{par}

)}
- {/* TODO this code is a duplication suspect. Resolve */} -
- - - -
+ {this.renderButtons()} {hasMobileThumbnails ? (
{images.map((source, idx) => ( diff --git a/src/imports/components/Sections/CaseStudy/index.styl b/src/imports/components/Sections/CaseStudy/index.styl index efb33e2..99b2212 100644 --- a/src/imports/components/Sections/CaseStudy/index.styl +++ b/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 diff --git a/src/imports/components/TeamMemberCard/index.js b/src/imports/components/TeamMemberCard/index.js index 0b2c91e..df62a9b 100644 --- a/src/imports/components/TeamMemberCard/index.js +++ b/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 (
- insighty member + insighty member

{name}

{position}

- {text.split('\\n').map(par =>

{par}

)} + {answers.map(answer =>

{answer}

)}
diff --git a/src/imports/components/interactions/Button/index.js b/src/imports/components/interactions/Button/index.js index 77d861c..1d8434d 100644 --- a/src/imports/components/interactions/Button/index.js +++ b/src/imports/components/interactions/Button/index.js @@ -1,14 +1,13 @@ import React, {Component} from 'react'; -import classnames from 'classnames'; import './index.styl'; import './mobile/index.styl'; class Button extends Component { render() { - const {children, className, ...rest} = this.props; + const {children, ...rest} = this.props; return ( - + ); } } diff --git a/src/imports/components/interactions/Button/index.styl b/src/imports/components/interactions/Button/index.styl index 7fd1a8f..bc1fdea 100644 --- a/src/imports/components/interactions/Button/index.styl +++ b/src/imports/components/interactions/Button/index.styl @@ -3,16 +3,16 @@ background-color #FF5551 border none border-radius 45px - padding 2vw 5vw + padding 20px 30px color white outline none font-weight bold - font-size 11px + font-size 14px font-family "PT Sans", sans-serif - transition all 0.3s ease 0s + transition all 0.2s ease 0s text-transform uppercase letter-spacing 2.5px &:hover - transform translateY(-3px) - box-shadow 0 15px 20px rgb(255, 216, 215) + transform translateY(-2px) + box-shadow 0 10px 15px rgb(255, 216, 215) diff --git a/src/imports/components/interactions/FreeConsultationButton.js b/src/imports/components/interactions/FreeConsultationButton.js new file mode 100644 index 0000000..2b3dd9a --- /dev/null +++ b/src/imports/components/interactions/FreeConsultationButton.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {Link} from 'react-router-dom'; +import Button from './Button'; + +const FreeConsultationButton = () => ( + + + +); + +export default FreeConsultationButton; diff --git a/src/imports/components/interactions/FullPageScroll.js b/src/imports/components/interactions/FullPageScroll.js new file mode 100644 index 0000000..6b3594c --- /dev/null +++ b/src/imports/components/interactions/FullPageScroll.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ReactFullpage from '@fullpage/react-fullpage'; + +export default class FullPageScroll extends React.Component { + render() { + const {children} = this.props; + return ( + ( + + {children} + + )} + /> + ); + } +} + +FullPageScroll.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/src/imports/components/interactions/TextLink/index.js b/src/imports/components/interactions/TextLink/index.js new file mode 100644 index 0000000..508a348 --- /dev/null +++ b/src/imports/components/interactions/TextLink/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './index.styl'; +import {Link} from 'react-router-dom'; + +export default class TextLink extends React.Component { + render() { + const {text, onClick, to} = this.props; + + if (to) { + return ( + + {text} + + ); + } + + return ( + + {text} + + ); + } +} + +TextLink.defaultProps = { + to: null, + onClick: null, +}; + +TextLink.propTypes = { + text: PropTypes.string.isRequired, + onClick: PropTypes.func, + to: PropTypes.string, +}; diff --git a/src/imports/components/interactions/TextLink/index.styl b/src/imports/components/interactions/TextLink/index.styl new file mode 100644 index 0000000..2b897f8 --- /dev/null +++ b/src/imports/components/interactions/TextLink/index.styl @@ -0,0 +1,6 @@ +.text-link + color #5C64AA + border-bottom 1px solid #5C64AA + cursor pointer + line-height 20px + text-decoration none diff --git a/src/imports/components/interactions/index.js b/src/imports/components/interactions/index.js new file mode 100644 index 0000000..f03540f --- /dev/null +++ b/src/imports/components/interactions/index.js @@ -0,0 +1 @@ +export {default as TextLink} from './TextLink'; diff --git a/src/imports/components/layout/HorizontalPadding/index.js b/src/imports/components/layout/HorizontalPadding/index.js new file mode 100644 index 0000000..54d5bef --- /dev/null +++ b/src/imports/components/layout/HorizontalPadding/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './index.styl'; + +export default class HorizontalPadding extends React.Component { + render() { + const {children} = this.props; + return ( +
+ {children} +
+ ); + } +} + +HorizontalPadding.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/src/imports/components/layout/HorizontalPadding/index.styl b/src/imports/components/layout/HorizontalPadding/index.styl new file mode 100644 index 0000000..3ee4bfd --- /dev/null +++ b/src/imports/components/layout/HorizontalPadding/index.styl @@ -0,0 +1,2 @@ +.horizontal-padding + padding 0 10vw diff --git a/src/imports/components/layout/index.js b/src/imports/components/layout/index.js new file mode 100644 index 0000000..a62c073 --- /dev/null +++ b/src/imports/components/layout/index.js @@ -0,0 +1,9 @@ +export {default as HorizontalPadding} from './HorizontalPadding'; + +import styled from 'styled-components'; + +export const Separator = styled.div` + margin-top: 3%; + border-top: 1px solid #5C64AA; + width: 5.5vh; +`; diff --git a/src/imports/components/typography/Heading/index.js b/src/imports/components/typography/Heading/index.js index 10148df..df84af1 100644 --- a/src/imports/components/typography/Heading/index.js +++ b/src/imports/components/typography/Heading/index.js @@ -19,7 +19,7 @@ class Heading extends PureComponent { const {className, children} = this.props; return ( -

{children}

+

{children}

); } } diff --git a/src/imports/components/typography/Heading/index.styl b/src/imports/components/typography/Heading/index.styl index 29cb656..49d3a0a 100644 --- a/src/imports/components/typography/Heading/index.styl +++ b/src/imports/components/typography/Heading/index.styl @@ -1,4 +1,10 @@ .heading font-weight bold - font-size 3.44vw margin 0 0 32px 0 + font-size 32px + ++iphone() + .heading + font-size 6.9vw + font-weight bold + margin 0 0 22px 0 diff --git a/src/imports/components/typography/Paragraph/index.js b/src/imports/components/typography/Paragraph/index.js index 2bb9ee4..fe05062 100644 --- a/src/imports/components/typography/Paragraph/index.js +++ b/src/imports/components/typography/Paragraph/index.js @@ -16,14 +16,14 @@ class Paragraph extends PureComponent { render() { const {children, animated} = this.props; return ( -
{children} -
+

); } } diff --git a/src/imports/components/typography/Paragraph/index.styl b/src/imports/components/typography/Paragraph/index.styl index fdbe25a..9c4e416 100644 --- a/src/imports/components/typography/Paragraph/index.styl +++ b/src/imports/components/typography/Paragraph/index.styl @@ -1,3 +1,7 @@ .paragraph - font-family Roboto, sans-serif - line-height 32px + font-size 16px + font-weight 400 + color rgba(0,0,0,.84) + line-height 1.8 + margin-top 20px + letter-spacing normal diff --git a/src/imports/components/typography/SmallHeading/index.js b/src/imports/components/typography/SmallHeading/index.js new file mode 100644 index 0000000..ff1e8fe --- /dev/null +++ b/src/imports/components/typography/SmallHeading/index.js @@ -0,0 +1,27 @@ +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; + +import './index.styl'; + +class SmallHeading extends PureComponent { + static propTypes = { + children: PropTypes.node, + className: PropTypes.string, + }; + + static defaultProps = { + children: null, + className: '', + }; + + render() { + const {className, children} = this.props; + + return ( +

{children}

+ ); + } +} + +export default SmallHeading; diff --git a/src/imports/components/typography/SmallHeading/index.styl b/src/imports/components/typography/SmallHeading/index.styl new file mode 100644 index 0000000..eeb1f61 --- /dev/null +++ b/src/imports/components/typography/SmallHeading/index.styl @@ -0,0 +1,9 @@ +.small-heading + font-weight 600 + font-size 24px + ++iphone() + .small-heading + font-size 5.2vw + font-weight 600 + margin 0 0 22px 0 diff --git a/src/imports/components/typography/index.js b/src/imports/components/typography/index.js index 85a1574..302e76d 100644 --- a/src/imports/components/typography/index.js +++ b/src/imports/components/typography/index.js @@ -1,2 +1,3 @@ export {default as Paragraph} from './Paragraph'; export {default as Heading} from './Heading'; +export {default as SmallHeading} from './SmallHeading'; diff --git a/src/imports/utils/sendContactMessageToSlack.js b/src/imports/utils/sendContactMessageToSlack.js new file mode 100644 index 0000000..41096e7 --- /dev/null +++ b/src/imports/utils/sendContactMessageToSlack.js @@ -0,0 +1,21 @@ +import request from 'utils/request'; + +const WEBHOOK_URL = 'https://hooks.slack.com/services/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'; +const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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'; + +const sendContactMessageToSlack = ({name, email, message}) => { + const formData = JSON.stringify({ + attachments: [ + { + color: '#000000', + pretext: 'New Contact Us form request', + author_name: `From: ${name}`, + text: `*Email:* ${email}\n*Message:* _${message}_`, + } + ] + }); + + return request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData); +}; + +export default sendContactMessageToSlack; diff --git a/src/mobilePages/Journey/CaseStudies/index.js b/src/mobilePages/Journey/CaseStudies/index.js index 65fcafd..ac1cbb4 100644 --- a/src/mobilePages/Journey/CaseStudies/index.js +++ b/src/mobilePages/Journey/CaseStudies/index.js @@ -1,8 +1,8 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; +import FullPageScroll from 'components/interactions/FullPageScroll'; import CaseStudy from './Sections/CaseStudy'; @@ -16,52 +16,44 @@ class MobileCaseStudies extends Component {

Our Work

- ( - -
- -
-
- -
-
- -
-
- -
-
- -
- - )} - /> + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
); } diff --git a/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js b/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js index 12ab3e0..13fa626 100644 --- a/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js +++ b/src/mobilePages/Journey/Consultation/Sections/ConsultForm/index.js @@ -1,13 +1,10 @@ import React, {Component} from 'react'; -import request from 'utils/request'; import {NotificationContainer, NotificationManager} from 'react-notifications'; import 'react-notifications/lib/notifications.css'; import './index.styl'; - -const WEBHOOK_URL = 'https://hooks.slack.com/services/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'; -const DEV_WEBHOOK_URL = 'https://hooks.slack.com/services/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'; +import sendContactMessageToSlack from 'utils/sendContactMessageToSlack'; class Intro extends Component { constructor(props) { @@ -24,22 +21,9 @@ class Intro extends Component { handleSubmit(e) { e.preventDefault(); - const { - name, email, message - } = this.state; - - const formData = JSON.stringify({ - attachments: [ - { - color: '#000000', - pretext: 'New Contact Us form request', - author_name: `From: ${name}`, - text: `*Email:* ${email}\n*Message:* _${message}_`, - } - ] - }); + const {name, email, message} = this.state; - request.post(process.env.NODE_ENV === 'development' ? DEV_WEBHOOK_URL : WEBHOOK_URL, formData) + sendContactMessageToSlack({name, email, message}) .then(() => { this.setState({ name: '', diff --git a/src/mobilePages/Journey/Consultation/Sections/Intro/index.js b/src/mobilePages/Journey/Consultation/Sections/Intro/index.js index bcd415b..edad23c 100644 --- a/src/mobilePages/Journey/Consultation/Sections/Intro/index.js +++ b/src/mobilePages/Journey/Consultation/Sections/Intro/index.js @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import {Heading} from 'components/typography'; import ManWithLaptop from './icons'; import './index.styl'; @@ -6,9 +7,9 @@ class Intro extends Component { render() { return (
-

+ Fancy A Free 30-Minute Product Development Session? -

+

Here’s the plan:
diff --git a/src/mobilePages/Journey/Consultation/Sections/Intro/index.styl b/src/mobilePages/Journey/Consultation/Sections/Intro/index.styl index f38273a..16ec932 100644 --- a/src/mobilePages/Journey/Consultation/Sections/Intro/index.styl +++ b/src/mobilePages/Journey/Consultation/Sections/Intro/index.styl @@ -6,11 +6,6 @@ padding 0 8% 0 10% overflow hidden - .intro-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-description font-size 4vw color #4A4A4A diff --git a/src/mobilePages/Journey/Consultation/index.js b/src/mobilePages/Journey/Consultation/index.js index cba3634..853a962 100644 --- a/src/mobilePages/Journey/Consultation/index.js +++ b/src/mobilePages/Journey/Consultation/index.js @@ -1,9 +1,9 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; - +import FullPageScroll from 'components/interactions/FullPageScroll'; +// TODO rename all the `Sections` directories to `components` import Intro from './Sections/Intro'; import ConsultForm from './Sections/ConsultForm'; @@ -13,26 +13,18 @@ class MobileConsultation extends Component { render() { return (

- ( - -
- - -
-
- -
-
- -
- - )} - /> + +
+ + +
+
+ +
+
+ +
+
); } diff --git a/src/mobilePages/Journey/Home/Sections/Intro/index.js b/src/mobilePages/Journey/Home/Sections/Intro/index.js index 275202e..ff49725 100644 --- a/src/mobilePages/Journey/Home/Sections/Intro/index.js +++ b/src/mobilePages/Journey/Home/Sections/Intro/index.js @@ -1,14 +1,13 @@ import React, {Component} from 'react'; import VRGirlInSpace from 'icons/backgrounds/HomeBG'; +import {Heading} from 'components/typography'; import './index.styl'; class Intro extends Component { render() { return (
-

- Create The Outlier Software That Changes The World. -

+ Create The Outlier Software That Changes The World.

You are embarking on a journey of seeing a new Tech Startup through. We help you overcome the digital chaos to address a market need before someone else seizes the opportunity. diff --git a/src/mobilePages/Journey/Home/Sections/Intro/index.styl b/src/mobilePages/Journey/Home/Sections/Intro/index.styl index da3c8f9..6c4ddc0 100644 --- a/src/mobilePages/Journey/Home/Sections/Intro/index.styl +++ b/src/mobilePages/Journey/Home/Sections/Intro/index.styl @@ -5,11 +5,6 @@ padding 0 8% 0 10% overflow hidden - .intro-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-description-first, .intro-description-second font-size 4vw color #4A4A4A @@ -33,9 +28,6 @@ +iphone5() - .intro-heading - margin 0 0 12px 0 - font-size 6.5vw .intro-description-first, .intro-description-second margin 0 0 12px 0 font-size 3.6vw diff --git a/src/mobilePages/Journey/Home/Sections/Services/index.js b/src/mobilePages/Journey/Home/Sections/Services/index.js index 4c74a1e..212ea48 100644 --- a/src/mobilePages/Journey/Home/Sections/Services/index.js +++ b/src/mobilePages/Journey/Home/Sections/Services/index.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; +import {Heading} from 'components/typography'; import { AmazonPay, Braintree, PayPal, Plaid, Square, Stripe } from 'icons/FinTechLogos'; @@ -12,9 +13,7 @@ class Services extends Component { render() { return (

-

- Core Expertise -

+ Core Expertise
diff --git a/src/mobilePages/Journey/Home/Sections/Services/index.styl b/src/mobilePages/Journey/Home/Sections/Services/index.styl index 8332531..68c0f55 100644 --- a/src/mobilePages/Journey/Home/Sections/Services/index.styl +++ b/src/mobilePages/Journey/Home/Sections/Services/index.styl @@ -5,11 +5,6 @@ padding 0 8% 32px 10% overflow hidden - .services-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .services-cards height 100% width 100% diff --git a/src/mobilePages/Journey/Home/index.js b/src/mobilePages/Journey/Home/index.js index 980d00f..a3f5655 100644 --- a/src/mobilePages/Journey/Home/index.js +++ b/src/mobilePages/Journey/Home/index.js @@ -1,8 +1,9 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; +import {Heading} from 'components/typography'; +import FullPageScroll from 'components/interactions/FullPageScroll'; import Intro from './Sections/Intro'; import Services from './Sections/Services'; @@ -15,72 +16,64 @@ class MobileHome extends Component { return (
- ( - -
- -
-
-

- Our Work -

-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- -
- - )} - /> + +
+ +
+
+ + Our Work + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
); } diff --git a/src/mobilePages/Journey/Home/index.styl b/src/mobilePages/Journey/Home/index.styl index 98c44c5..0223b93 100644 --- a/src/mobilePages/Journey/Home/index.styl +++ b/src/mobilePages/Journey/Home/index.styl @@ -11,9 +11,6 @@ position relative top 80px padding 0 8% 0 10% - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 .fp-slidesNav bottom 10px diff --git a/src/mobilePages/Journey/Impact/Sections/Intro/index.js b/src/mobilePages/Journey/Impact/Sections/Intro/index.js index f8b1427..3a2ded4 100644 --- a/src/mobilePages/Journey/Impact/Sections/Intro/index.js +++ b/src/mobilePages/Journey/Impact/Sections/Intro/index.js @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import {Heading} from 'components/typography'; import Impact from 'icons/backgrounds/ImpactBG'; import './index.styl'; @@ -6,9 +7,7 @@ class Intro extends Component { render() { return (
-

- Profits Paired With Purpose -

+ Profits Paired With Purpose

For any commercial project that you do with us, we build a mobile app for an entrepreneur with a socially impactful cause. Pro bono. diff --git a/src/mobilePages/Journey/Impact/Sections/Intro/index.styl b/src/mobilePages/Journey/Impact/Sections/Intro/index.styl index 7cc6f61..cfd4f40 100644 --- a/src/mobilePages/Journey/Impact/Sections/Intro/index.styl +++ b/src/mobilePages/Journey/Impact/Sections/Intro/index.styl @@ -6,11 +6,6 @@ padding 0 8% 0 10% overflow hidden - .intro-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-description-first, .intro-description-second font-size 4vw color #4A4A4A diff --git a/src/mobilePages/Journey/Impact/index.js b/src/mobilePages/Journey/Impact/index.js index 5b6977d..73dfdf7 100644 --- a/src/mobilePages/Journey/Impact/index.js +++ b/src/mobilePages/Journey/Impact/index.js @@ -1,8 +1,8 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; +import FullPageScroll from 'components/interactions/FullPageScroll'; import Intro from './Sections/Intro'; @@ -13,22 +13,14 @@ class MobileImpact extends Component { return (

- ( - -
- -
-
- -
- - )} - /> + +
+ +
+
+ +
+
); } diff --git a/src/mobilePages/Journey/Impact/index.styl b/src/mobilePages/Journey/Impact/index.styl index 6942bb0..98eddb0 100644 --- a/src/mobilePages/Journey/Impact/index.styl +++ b/src/mobilePages/Journey/Impact/index.styl @@ -11,9 +11,6 @@ position relative top 80px padding 0 8% 0 10% - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 .fp-slidesNav bottom 10px diff --git a/src/mobilePages/Journey/Services/Sections/Intro/index.js b/src/mobilePages/Journey/Services/Sections/Intro/index.js index 4fbdb7f..f0a4113 100644 --- a/src/mobilePages/Journey/Services/Sections/Intro/index.js +++ b/src/mobilePages/Journey/Services/Sections/Intro/index.js @@ -1,14 +1,13 @@ import React, {Component} from 'react'; import ServicesChart from 'icons/backgrounds/ServicesBG'; import './index.styl'; +import {Heading} from 'components/typography'; class Intro extends Component { render() { return (
-

- Services You Deserve -

+ Services You Deserve

You hate software projects that drag on. We do too. If you’re like most people, you see software development in general as lingering and expensive. diff --git a/src/mobilePages/Journey/Services/Sections/Intro/index.styl b/src/mobilePages/Journey/Services/Sections/Intro/index.styl index 62ae502..a80387c 100644 --- a/src/mobilePages/Journey/Services/Sections/Intro/index.styl +++ b/src/mobilePages/Journey/Services/Sections/Intro/index.styl @@ -6,11 +6,6 @@ padding 0 8% 0 10% overflow hidden - .intro-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-description-first, .intro-description-second font-size 4vw color #4A4A4A diff --git a/src/mobilePages/Journey/Services/Sections/IntroSecond/index.js b/src/mobilePages/Journey/Services/Sections/IntroSecond/index.js index 6e7270b..4e9a963 100644 --- a/src/mobilePages/Journey/Services/Sections/IntroSecond/index.js +++ b/src/mobilePages/Journey/Services/Sections/IntroSecond/index.js @@ -1,14 +1,15 @@ import React, {Component} from 'react'; import ServicesManMobile from 'icons/backgrounds/ServicesMobileBG'; import './index.styl'; +import {Heading} from 'components/typography'; class IntroSecond extends Component { render() { return (

-

+ See The Buzzwords -

+

We adjust to demanding schedules, provide accurate granular estimates and meet the most stringent deadlines. That’s why we rigorously apply the 80/20 rule. diff --git a/src/mobilePages/Journey/Services/Sections/IntroSecond/index.styl b/src/mobilePages/Journey/Services/Sections/IntroSecond/index.styl index 35dd761..5b6c45b 100644 --- a/src/mobilePages/Journey/Services/Sections/IntroSecond/index.styl +++ b/src/mobilePages/Journey/Services/Sections/IntroSecond/index.styl @@ -6,11 +6,6 @@ padding 0 8% 0 10% overflow hidden - .intro-second-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-second-description-first, .intro-second-description-second font-size 4vw color #4A4A4A diff --git a/src/mobilePages/Journey/Services/index.js b/src/mobilePages/Journey/Services/index.js index 4460391..f0a4b65 100644 --- a/src/mobilePages/Journey/Services/index.js +++ b/src/mobilePages/Journey/Services/index.js @@ -1,11 +1,11 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; +import {Heading} from 'components/typography'; +import FullPageScroll from 'components/interactions/FullPageScroll'; -import {FeatherPen, Compass, BrowserWindows} from 'icons'; - +import {BrowserWindows, Compass, FeatherPen} from 'icons'; import Intro from './Sections/Intro'; import IntroSecond from './Sections/IntroSecond'; @@ -18,64 +18,56 @@ class MobileServices extends Component { return (

- ( - -
- -
-
- -
-
-

- Dream, Design, Develop -

-

- We are always looking to hear from people that want to change the world with software. - We call them heroes. If you’re one of them, please get in touch. -

-
- + +
+
+ +
+
+ + Dream, Design, Develop + +

+ We are always looking to hear from people that want to change the world with software. + We call them heroes. If you’re one of them, please get in touch. +

+
+ } - /> -
-
- + } - /> -
-
- + } - /> -
-
-
- -
- - )} - /> + icon={} + /> +
+
+
+ +
+
); } diff --git a/src/mobilePages/Journey/Services/index.styl b/src/mobilePages/Journey/Services/index.styl index 052ebf5..7fff833 100644 --- a/src/mobilePages/Journey/Services/index.styl +++ b/src/mobilePages/Journey/Services/index.styl @@ -11,9 +11,6 @@ position relative top 80px padding 0 8% 0 10% - font-size 6.9vw - font-weight bold - margin 0 0 12px 0 .service-cards-description position relative diff --git a/src/mobilePages/Journey/Team/Sections/Intro/index.js b/src/mobilePages/Journey/Team/Sections/Intro/index.js index dd57e97..cf1af66 100644 --- a/src/mobilePages/Journey/Team/Sections/Intro/index.js +++ b/src/mobilePages/Journey/Team/Sections/Intro/index.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import TeamChat from 'icons/backgrounds/TeamBG'; +import {Heading} from 'components/typography'; import './index.styl'; @@ -7,9 +8,9 @@ class Intro extends Component { render() { return (
-

+ Meet the Team -

+

These are the people behind Insighty. Here is everyone practicing envisioning the future.

diff --git a/src/mobilePages/Journey/Team/Sections/Intro/index.styl b/src/mobilePages/Journey/Team/Sections/Intro/index.styl index 485967d..6cbe85e 100644 --- a/src/mobilePages/Journey/Team/Sections/Intro/index.styl +++ b/src/mobilePages/Journey/Team/Sections/Intro/index.styl @@ -6,11 +6,6 @@ padding 0 8% 0 10% overflow hidden - .intro-heading - font-size 6.9vw - font-weight bold - margin 0 0 22px 0 - .intro-description-first font-size 4vw color #4A4A4A diff --git a/src/mobilePages/Journey/Team/index.js b/src/mobilePages/Journey/Team/index.js index 14b1046..5863a89 100644 --- a/src/mobilePages/Journey/Team/index.js +++ b/src/mobilePages/Journey/Team/index.js @@ -1,8 +1,8 @@ import React, {Component} from 'react'; -import ReactFullpage from '@fullpage/react-fullpage'; import MobileHeader from 'components/MobileHeader'; import MobileFooter from 'components/MobileFooter'; +import FullPageScroll from 'components/interactions/FullPageScroll'; import Intro from './Sections/Intro'; import TeamMember from './Sections/TeamMember'; @@ -65,34 +65,26 @@ class MobileTeam extends Component { return (
- ( - -
- -
- {teamMembers.map((member => ( -
- -
- )))} -
- -
- - )} - /> + +
+ +
+ {teamMembers.map((member => ( +
+ +
+ )))} +
+ +
+
); } diff --git a/src/pages/Intro/index.js b/src/pages/Intro/index.js index 4b225b4..6a88280 100644 --- a/src/pages/Intro/index.js +++ b/src/pages/Intro/index.js @@ -4,6 +4,7 @@ import {Link} from 'react-router-dom'; import {Logo} from 'icons'; import IntroBG from 'icons/backgrounds/IntroBG'; import Button from 'components/interactions/Button'; +import {Heading} from 'components/typography'; import './index.styl'; import './mobile/index.styl'; @@ -28,7 +29,7 @@ class IntroPage extends Component {

WE ARE INSIGHTY

-

Got A Big Idea?

+ Got A Big Idea?

Build your Tech Business with our help.
diff --git a/src/pages/Journey/CaseStudies/Case.png b/src/pages/Journey/CaseStudies/Case.png deleted file mode 100644 index 1e1e902..0000000 Binary files a/src/pages/Journey/CaseStudies/Case.png and /dev/null differ diff --git a/src/pages/Journey/CaseStudies/index.js b/src/pages/Journey/CaseStudies/index.js index 7f17c05..39c9b15 100644 --- a/src/pages/Journey/CaseStudies/index.js +++ b/src/pages/Journey/CaseStudies/index.js @@ -3,6 +3,7 @@ import React, {Component} from 'react'; import Page from 'components/Page'; import CaseStudy from 'components/Sections/CaseStudy'; import Heading from 'components/typography/Heading'; +import {HorizontalPadding} from 'components/layout'; import './index.styl'; import './mobile/index.styl'; @@ -11,7 +12,9 @@ class CaseStudies extends Component { render() { return ( - Our Work + + Our Work +

trackEvent('Consult form touched')); + } + this.setState({[e.target.name]: e.target.value}); + } + + onSubmit(e) { + e.preventDefault(); + + const {onSubmit} = this.props; + this.setState({submitting: true}); + + onSubmit(this.state) + .then(() => this.setState(EMPTY_VALUES)) + .then(() => trackEvent('Consult form submitted')) + .finally(() => this.setState({submitting: false})); + } + + render() { + const { + name, email, message, submitting + } = this.state; + return ( +
this.onSubmit(e)}> + this.onFormInputChange(e)} + /> + this.onFormInputChange(e)} + /> +