YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved About Page to homepage. Site is ready?

Browse Source
This commit is contained in:
Dominic Masters
2018-07-09 21:24:15 +10:00
parent 3275a4ebd3
commit 2d651160bd
18 changed files with 209 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/page/PageBoundary.jsx
View File

@ -27,6 +27,7 @@ export default function(props) {
let clazzes = "c-page__boundary";
if(props.full) clazzes += " is-full";
if(props.small) clazzes += " is-small";
if(props.className) clazzes += " " + props.className;
return (
<div className={ clazzes }>

2
public/page/Routes.jsx
View File

@ -32,7 +32,6 @@ import Footer from './../footer/Footer';
//Pages
import Homepage from './home/Homepage';
import AboutPage from './about/AboutPage';
import ContactPage from './contact/ContactPage';
import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage';
@ -73,7 +72,6 @@ class Routes extends React.Component {
>
<Switch location={ location }>
<RouteWrapper exact path="/" page={ Homepage } />
<RouteWrapper exact path="/about" page={ AboutPage } />
<RouteWrapper exact path="/contact" page={ ContactPage } />
<RouteWrapper exact path="/legal/privacy" page={ PrivacyPolicyPage } />

64
public/page/about/AboutPage.jsx
View File

@ -1,64 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import Language from './../../language/Language'
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
import ProgrammingSection from './sections/ProgrammingSection';
import PlatformsSection from './sections/PlatformsSection';
import ExistingWorkSection from './sections/ExistingWorkSection';
const AboutPage = (props) => {
//Return
return (
<Page style="about-page" className="p-about-page" title={ Language.get("pages.about.title") }>
{ /* Banner */ }
<BannerSection />
{ /* Promo Video */ }
<PromoVideoSection />
{/* Programming */}
<ProgrammingSection />
{/* Platforms */}
<PlatformsSection />
{/* Existing Work */}
<ExistingWorkSection />
</Page>
);
}
const mapStateToProps = (state) => {
return {
code: state.language.code
};
}
export default connect(mapStateToProps)(AboutPage);

72
public/page/home/Homepage.jsx
View File

@ -23,59 +23,43 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Page, { PageBoundary } from './../Page';
import Section, { ImageSection } from './../../section/Section';
import FloatingContentBox from './../../content/FloatingContentBox';
import Image from './../../image/Image';
import { Title, Subtitle } from './../../typography/Typography';
import { Button } from './../../input/Input';
import Page from './../Page';
import Language from './../../language/Language'
import { openModal } from './../../actions/ModalActions';
import Modal from './../../modal/Modal';
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
import ProgrammingSection from './sections/ProgrammingSection';
import PlatformsSection from './sections/PlatformsSection';
import ExistingWorkSection from './sections/ExistingWorkSection';
class Homepage extends React.Component {
constructor(props) {
super(props)
}
const HomePage = (props) => {
//Return
return (
<Page style="home-page" className="p-home-page" title={0}>
testModal() {
console.log("oof");
this.props.openModal(
<Modal close>
Hello Modal
</Modal>
);
}
{ /* Banner */ }
<BannerSection />
render() {
let lines = [];
for(let i = 0; i < 20; i++) {
lines.push(<br key={i} />);
}
{ /* Promo Video
<PromoVideoSection />
*/ }
return (
<Page style="home-page" title={0} className="p-home-page">
Welcome home
{ lines }
<Button onClick={this.testModal.bind(this)}>
Test Modal
</Button>
</Page>
);
}
{/* Programming */}
<ProgrammingSection />
{/* Platforms */}
<PlatformsSection />
{/* Existing Work */}
<ExistingWorkSection />
</Page>
);
}
const mapStateToProps = (state) => {
return {
modal: state.modal
code: state.language.code
};
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
openModal: openModal
},dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Homepage);
export default connect(mapStateToProps)(HomePage);

4
public/page/about/sections/BannerSection.jsx → public/page/home/sections/BannerSection.jsx
View File

@ -39,8 +39,8 @@ export default (props) => {
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<ElementScrollFader from="bottom">
<Title>{ Language.get("pages.about.banner.title") }</Title>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.about.banner.subtitle") }</Subtitle>
<Title>{ Language.get("pages.home.banner.title") }</Title>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
</ElementScrollFader>
</FloatingContentBox>
</PageBoundary>

26
public/page/about/sections/ExistingWorkSection.jsx → public/page/home/sections/ExistingWorkSection.jsx
View File

@ -62,11 +62,11 @@ const ExistingWorkFrame = (props) => {
<AddressBar href={fakeURL} />
<Frame>
<a href={ props.href} target="_blank" className="p-about-page__work-link">
<a href={ props.href} target="_blank" className="p-home-page__work-link">
<Image
src={props.src}
alt={props.title}
className="p-about-page__work-link-image"
className="p-home-page__work-link-image"
/>
</a>
</Frame>
@ -109,16 +109,16 @@ const ExistingWorkFrame = (props) => {
export default (props) => {
return (
<Section className="p-about-page__promo p-about-page__promo-work">
<Section className="p-home-page__promo p-home-page__promo-work">
{/* Title */}
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box>
<Heading1 className="u-text-center">
{ Language.get("pages.about.work.heading") }
{ Language.get("pages.home.work.heading") }
</Heading1>
<Paragraph>
{ Language.get("pages.about.work.paragraph") }
{ Language.get("pages.home.work.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>
@ -133,8 +133,8 @@ export default (props) => {
fromLeft="top"
fromRight="bottom"
src={ require('./../../../images/work-showcase/kopalife.png') }
title={ Language.get("pages.about.work.kopa.heading") }
description={ Language.get("pages.about.work.kopa.description") }
title={ Language.get("pages.home.work.kopa.heading") }
description={ Language.get("pages.home.work.kopa.description") }
/>
{/* SMAI */}
@ -144,8 +144,8 @@ export default (props) => {
fromRight="right"
swap
src={ require('./../../../images/work-showcase/smai.svg') }
title={ Language.get("pages.about.work.smai.heading") }
description={ Language.get("pages.about.work.smai.description") }
title={ Language.get("pages.home.work.smai.heading") }
description={ Language.get("pages.home.work.smai.description") }
/>
{/* Oz Hair and Beauty */}
@ -155,8 +155,8 @@ export default (props) => {
fromRight="left"
src={ require('./../../../images/work-showcase/ozhair.png') }
title={ Language.get("pages.about.work.ozhair.heading") }
description={ Language.get("pages.about.work.ozhair.description") }
title={ Language.get("pages.home.work.ozhair.heading") }
description={ Language.get("pages.home.work.ozhair.description") }
/>
</PageBoundary>
@ -165,9 +165,9 @@ export default (props) => {
<ElementScrollFader from="bottom">
<ContentBox box className="u-text-center">
<Subtitle>{ Language.get("pages.about.work.footer") }</Subtitle>
<Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
<Button size="large" to="/contact">
{ Language.get("pages.about.work.footer-button") }
{ Language.get("pages.home.work.footer-button") }
</Button>
</ContentBox>
</ElementScrollFader>

18
public/page/about/sections/PlatformsSection.jsx → public/page/home/sections/PlatformsSection.jsx
View File

@ -34,11 +34,11 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
const Platform = (props) => {
let children;
let image = <Image src={props.src} className="p-about-page__brands-image" />;
let image = <Image src={props.src} className="p-home-page__brands-image" />;
if(props.to) {
children = (
<a href={props.to} target="_blank" className="p-about-page__brands-link">
<a href={props.to} target="_blank" className="p-home-page__brands-link">
{image}
</a>
);
@ -47,7 +47,7 @@ const Platform = (props) => {
}
return (
<ElementScrollFader from={props.from} className="p-about-page__brands-brand">
<ElementScrollFader from={props.from} className="p-home-page__brands-brand">
{children}
</ElementScrollFader>
);
@ -55,15 +55,15 @@ const Platform = (props) => {
export default (props) => {
return (
<Section className="p-about-page__promo p-about-page__promo-platforms">
<Section className="p-home-page__promo p-home-page__promo-platforms">
<PageBoundary>
<ElementScrollFader from="left">
<Title className="u-text-center p-about-page__brands-title">
{ Language.get("pages.about.platforms.heading") }
<Title className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.heading") }
</Title>
</ElementScrollFader>
<div className="p-about-page__brands">
<div className="p-home-page__brands">
{/* Shopify */}
<Platform
src={require('./../../../images/branding/shopify/shopify_glyph.svg')}
@ -179,8 +179,8 @@ export default (props) => {
</div>
<ElementScrollFader from="bottom">
<Subtitle className="u-text-center p-about-page__brands-title">
{ Language.get("pages.about.platforms.footer") }
<Subtitle className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.footer") }
</Subtitle>
</ElementScrollFader>
</PageBoundary>

6
public/page/about/sections/ProgrammingSection.jsx → public/page/home/sections/ProgrammingSection.jsx
View File

@ -32,14 +32,14 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
export default (props) => {
return (
<Section className="p-about-page__promo p-about-page__promo-programming">
<Section className="p-home-page__promo p-home-page__promo-programming">
<PageBoundary small>
<ElementScrollFader from="bottom">
<ContentBox box>
<Heading1 className="u-text-center">
{ Language.get("pages.about.programming.heading") }
{ Language.get("pages.home.programming.heading") }
</Heading1>
{ Language.get("pages.about.programming.paragraph") }
{ Language.get("pages.home.programming.paragraph") }
</ContentBox>
</ElementScrollFader>
</PageBoundary>

6
public/page/about/sections/PromoVideoSection.jsx → public/page/home/sections/PromoVideoSection.jsx
View File

@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
export default (props) => {
return (
<Section className="p-about-page__promo p-about-page__promo-video">
<Section className="p-home-page__promo p-home-page__promo-video">
<PageBoundary>
<SplitSection align="center">
@ -52,10 +52,10 @@ export default (props) => {
<ElementScrollFader from="bottom">
<ContentBox box>
<Title>
{ Language.get("pages.about.video.heading") }
{ Language.get("pages.home.video.heading") }
</Title>
<Paragraph>
{ Language.get("pages.about.video.paragraph") }
{ Language.get("pages.home.video.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>