Restructured and beginning to work with loadable pages.
This commit is contained in:
201
public/pages/contact/ContactPage.jsx
Normal file
201
public/pages/contact/ContactPage.jsx
Normal file
@ -0,0 +1,201 @@
|
||||
// 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 { bindActionCreators } from 'redux';
|
||||
|
||||
import Forms from '@common/Forms';
|
||||
|
||||
//Actions
|
||||
import { openModal } from '@public/actions/ModalActions';
|
||||
|
||||
//Components
|
||||
import Page, { PageBoundary } from '@components/page/Page';
|
||||
import Language from '@public/language/Language';
|
||||
import Section, {
|
||||
BodySection,
|
||||
ClearSection,
|
||||
SplitSection,
|
||||
Split
|
||||
} from '@components/section/Section';
|
||||
|
||||
//Objects
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
import ContentBox from '@objects/content/ContentBox';
|
||||
import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
|
||||
import Input, {
|
||||
Form,
|
||||
FormManager,
|
||||
InputGroup,
|
||||
TextArea,
|
||||
Label,
|
||||
ButtonGroup
|
||||
} from '@objects/input/Input';
|
||||
import Modal from '@objects/modal/Modal';
|
||||
|
||||
class ContactPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
//Form Manager (For the form and elements)
|
||||
this.manager = new FormManager();
|
||||
|
||||
this.state = {
|
||||
sent: false
|
||||
};
|
||||
}
|
||||
|
||||
onSuccess(data) {
|
||||
if(data !== true) return this.onError(data);
|
||||
this.setState({
|
||||
sent: true
|
||||
});
|
||||
}
|
||||
|
||||
onError(e, a, b) {
|
||||
this.props.openModal(
|
||||
<Modal close title={Language.get("pages.contact.error")}>
|
||||
{ e }
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
//Form
|
||||
let inners;
|
||||
if(this.state.sent) {
|
||||
//Sent Display
|
||||
inners = (
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box className="u-text-center">
|
||||
<Heading1>{ Language.get("pages.contact.success.heading") }</Heading1>
|
||||
<Paragraph>{ Language.get("pages.contact.success.paragraph") }</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
} else {
|
||||
//Form
|
||||
inners = (
|
||||
<ElementScrollFader from="right">
|
||||
<BodySection>
|
||||
<Form
|
||||
post="/api/contact/send"
|
||||
contentType="application/json"
|
||||
ajax
|
||||
loader
|
||||
onSuccess={ this.onSuccess.bind(this) }
|
||||
onError={ this.onError.bind(this) }
|
||||
manager={ this.manager }
|
||||
>
|
||||
<InputGroup test="First Group">
|
||||
<Label htmlFor="name">
|
||||
{ Language.get("pages.contact.name.label") }
|
||||
</Label>
|
||||
<Input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder={ Language.get("pages.contact.name.placeholder") }
|
||||
required={ Forms.contact.name.required }
|
||||
maxLength={ Forms.contact.name.maxLength }
|
||||
manager={ this.manager }
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup >
|
||||
<Label htmlFor="email">
|
||||
{ Language.get("pages.contact.email.label") }
|
||||
</Label>
|
||||
<Input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder={ Language.get("pages.contact.email.placeholder") }
|
||||
required={ Forms.contact.email.required }
|
||||
maxLength={ Forms.contact.email.maxLength }
|
||||
manager={ this.manager }
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<Label> htmlFor="message">
|
||||
{ Language.get("pages.contact.message.label") }
|
||||
</Label>
|
||||
<TextArea
|
||||
name="message"
|
||||
placeholder={ Language.get("pages.contact.message.placeholder") }
|
||||
rows="8"
|
||||
className="p-contact-page__message"
|
||||
required={ Forms.contact.message.required }
|
||||
maxLength={ Forms.contact.message.maxLength }
|
||||
manager={ this.manager }
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<ButtonGroup>
|
||||
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
|
||||
<Input type="reset" value={ Language.get("pages.contact.reset") } />
|
||||
</ButtonGroup>
|
||||
</Form>
|
||||
</BodySection>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
|
||||
<ClearSection />
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="left">
|
||||
<ContentBox box className="u-text-center">
|
||||
<Title>{ Language.get("pages.contact.heading") }</Title>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.contact.paragraph") }
|
||||
</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
{ inners }
|
||||
</PageBoundary>
|
||||
<ClearSection />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = function(state) {
|
||||
return {
|
||||
code: state.language.code
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return bindActionCreators({
|
||||
openModal: openModal
|
||||
},dispatch);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ContactPage);
|
||||
65
public/pages/home/HomePage.jsx
Normal file
65
public/pages/home/HomePage.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
// 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 '@components/page/Page';
|
||||
import Language from '@public/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 HomePage = (props) => {
|
||||
//Return
|
||||
return (
|
||||
<Page style="home-page" className="p-home-page" title={0}>
|
||||
|
||||
{ /* 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)(HomePage);
|
||||
53
public/pages/home/sections/BannerSection.jsx
Normal file
53
public/pages/home/sections/BannerSection.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
import { PageBoundary } from '@components/page/Page';
|
||||
import { ImageSection } from '@components/section/Section';
|
||||
import FloatingContentBox from '@objects/content/FloatingContentBox';
|
||||
import { Title, Subtitle } from '@objects/typography/Typography';
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<ImageSection
|
||||
className="p-home-page__banner"
|
||||
src={ require('@assets/images/banners/about/glasses.svg') }
|
||||
alt="domsPlace"
|
||||
width="2400"
|
||||
height="1200"
|
||||
loadable
|
||||
>
|
||||
<PageBoundary full>
|
||||
<FloatingContentBox position="middle center" size="large" className="u-text-center">
|
||||
<ElementScrollFader from="bottom">
|
||||
<Title>{ Language.get("pages.home.banner.title") }</Title>
|
||||
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
|
||||
</ElementScrollFader>
|
||||
</FloatingContentBox>
|
||||
</PageBoundary>
|
||||
</ImageSection>
|
||||
);
|
||||
}
|
||||
186
public/pages/home/sections/ExistingWorkSection.jsx
Normal file
186
public/pages/home/sections/ExistingWorkSection.jsx
Normal file
@ -0,0 +1,186 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
import { PageBoundary } from '@components/page/Page';
|
||||
import { ImageSection, SplitSection, Split, ClearSection } from '@components/section/Section';
|
||||
import ContentBox from '@objects/content/ContentBox';
|
||||
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from '@objects/typography/Typography';
|
||||
import { Button } from '@objects/input/Input';
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
import Image from '@objects/image/Image';
|
||||
|
||||
import Window95, {
|
||||
TitleBar, Close, Minimize,
|
||||
MenuBar, MenuOption,
|
||||
ContextMenu, ContextMenuOption,
|
||||
Frame,
|
||||
AddressBar
|
||||
} from '@objects/window/Window95';
|
||||
|
||||
const ExistingWorkFrame = (props) => {
|
||||
let fakeURL = props.href;
|
||||
if(!fakeURL.startsWith("http") && typeof window !== typeof undefined) {
|
||||
fakeURL = window.location.protocol + fakeURL;
|
||||
}
|
||||
|
||||
let fakeWindow = (
|
||||
<ElementScrollFader from={props.fromLeft}>
|
||||
<Window95>
|
||||
<TitleBar buttons={[
|
||||
<Minimize key="Minimize" disabled />,
|
||||
<Close key="close" disabled />
|
||||
]}>
|
||||
{ props.title }
|
||||
</TitleBar>
|
||||
|
||||
<MenuBar>
|
||||
<MenuOption title="File" disabled />
|
||||
<MenuOption title="Visit Page" href={ props.href } target="_blank" />
|
||||
</MenuBar>
|
||||
|
||||
<AddressBar href={fakeURL} />
|
||||
<Frame>
|
||||
<a href={ props.href} target="_blank" className="p-home-page__work-link">
|
||||
<Image
|
||||
src={props.src}
|
||||
alt={props.title}
|
||||
loadable
|
||||
className="p-home-page__work-link-image"
|
||||
maxWidth="600"
|
||||
/>
|
||||
</a>
|
||||
</Frame>
|
||||
</Window95>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let box = (
|
||||
<ElementScrollFader from={ props.fromRight }>
|
||||
<ContentBox box>
|
||||
<Heading2>{ props.title }</Heading2>
|
||||
{ props.description }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let left, right;
|
||||
if(props.swap) {
|
||||
left = box;
|
||||
right = fakeWindow;
|
||||
} else {
|
||||
left = fakeWindow;
|
||||
right = box;
|
||||
}
|
||||
|
||||
return (
|
||||
<SplitSection align="center">
|
||||
<Split padded>
|
||||
{ left }
|
||||
</Split>
|
||||
|
||||
<Split padded>
|
||||
{ right }
|
||||
</Split>
|
||||
</SplitSection>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<ImageSection
|
||||
className="p-home-page__promo p-home-page__promo-work"
|
||||
src={ require('@assets/images/patterns/arcade.svg') }
|
||||
loadable
|
||||
background
|
||||
>
|
||||
{/* Title */}
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="left">
|
||||
<ContentBox box>
|
||||
<Heading1 className="u-text-center">
|
||||
{ Language.get("pages.home.work.heading") }
|
||||
</Heading1>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.home.work.paragraph") }
|
||||
</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
|
||||
<ClearSection />{/* Space a bit */}
|
||||
</PageBoundary>
|
||||
|
||||
<PageBoundary>
|
||||
{/* KOPA */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.kopalife.com/products/kube-customise"
|
||||
fromLeft="top"
|
||||
fromRight="bottom"
|
||||
src={ require('@assets/images/work-showcase/kopalife.png') }
|
||||
title={ Language.get("pages.home.work.kopa.heading") }
|
||||
description={ Language.get("pages.home.work.kopa.description") }
|
||||
/>
|
||||
|
||||
{/* SMAI */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.smai.com.au/"
|
||||
fromLeft="right"
|
||||
fromRight="right"
|
||||
swap
|
||||
src={ require('@assets/images/work-showcase/smai.svg') }
|
||||
title={ Language.get("pages.home.work.smai.heading") }
|
||||
description={ Language.get("pages.home.work.smai.description") }
|
||||
/>
|
||||
|
||||
{/* Oz Hair and Beauty */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.ozhairandbeauty.com/"
|
||||
fromLeft="left"
|
||||
fromRight="left"
|
||||
|
||||
src={ require('@assets/images/work-showcase/ozhair.png') }
|
||||
title={ Language.get("pages.home.work.ozhair.heading") }
|
||||
description={ Language.get("pages.home.work.ozhair.description") }
|
||||
/>
|
||||
</PageBoundary>
|
||||
|
||||
<PageBoundary small>
|
||||
<ClearSection />{/* Space a bit */}
|
||||
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box className="u-text-center">
|
||||
<Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
|
||||
<Button size="large" to="/contact">
|
||||
{ Language.get("pages.home.work.footer-button") }
|
||||
</Button>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
|
||||
<ClearSection />{/* Space a bit */}
|
||||
</PageBoundary>
|
||||
</ImageSection>
|
||||
);
|
||||
}
|
||||
211
public/pages/home/sections/PlatformsSection.jsx
Normal file
211
public/pages/home/sections/PlatformsSection.jsx
Normal file
@ -0,0 +1,211 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
import { PageBoundary } from '@components/page/Page';
|
||||
import { ImageSection, SplitSection, Split } from '@components/section/Section';
|
||||
import FloatingContentBox from '@objects/content/FloatingContentBox';
|
||||
import ContentBox from '@objects/content/ContentBox';
|
||||
import Image from '@objects/image/Image';
|
||||
import Video from '@objects/video/Video';
|
||||
import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
|
||||
const Platform = (props) => {
|
||||
let children;
|
||||
let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
|
||||
|
||||
if(props.to) {
|
||||
children = (
|
||||
<a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
|
||||
{image}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
children = image;
|
||||
}
|
||||
|
||||
//Wrap in a div and a fader. Div is to help with random transitions on resizing.
|
||||
return (
|
||||
<div className="p-home-page__brands-brand">
|
||||
<ElementScrollFader from={props.from}>
|
||||
{children}
|
||||
</ElementScrollFader>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<ImageSection
|
||||
className="p-home-page__promo p-home-page__promo-platforms"
|
||||
src={ require('@assets/images/patterns/game-show.svg') }
|
||||
loadable
|
||||
background
|
||||
>
|
||||
<PageBoundary>
|
||||
<ElementScrollFader from="left">
|
||||
<Title className="u-text-center p-home-page__brands-title">
|
||||
{ Language.get("pages.home.platforms.heading") }
|
||||
</Title>
|
||||
</ElementScrollFader>
|
||||
|
||||
<div className="p-home-page__brands">
|
||||
{/* Shopify */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
|
||||
from="left"
|
||||
to="//www.shopify.com"
|
||||
title={ Language.get("pages.home.platforms.shopify") }
|
||||
/>
|
||||
{/* React */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/react/react-logo.svg')}
|
||||
from="top"
|
||||
to="//reactjs.org"
|
||||
title={ Language.get("pages.home.platforms.react") }
|
||||
/>
|
||||
|
||||
{/* MonoGame */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/monogame/monogame-logo.svg')}
|
||||
from="bottom"
|
||||
to="http://www.monogame.net"
|
||||
title={ Language.get("pages.home.platforms.monogame") }
|
||||
/>
|
||||
|
||||
{/* PGSQL */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
|
||||
from="right"
|
||||
to="//www.postgresql.org"
|
||||
title={ Language.get("pages.home.platforms.pgsql") }
|
||||
/>
|
||||
|
||||
{/* NodeJS */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
|
||||
from="top"
|
||||
to="//nodejs.org"
|
||||
title={ Language.get("pages.home.platforms.nodejs") }
|
||||
/>
|
||||
|
||||
{/* C# */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/csharp/csharp-logo.svg')}
|
||||
from="top"
|
||||
to="//docs.microsoft.com/en-us/dotnet/csharp/"
|
||||
title={ Language.get("pages.home.platforms.csharp") }
|
||||
/>
|
||||
|
||||
{/* PHP */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/php/php-logo.svg')}
|
||||
from="top"
|
||||
to="//php.net"
|
||||
title={ Language.get("pages.home.platforms.php") }
|
||||
/>
|
||||
|
||||
{/* Java */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/java/java-logo.svg')}
|
||||
from="top"
|
||||
to="//java.com"
|
||||
title={ Language.get("pages.home.platforms.java") }
|
||||
/>
|
||||
|
||||
{/* neto */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/neto/neto-logo.svg')}
|
||||
from="bottom"
|
||||
to="//www.neto.com.au"
|
||||
title={ Language.get("pages.home.platforms.neto") }
|
||||
/>
|
||||
|
||||
{/* MySQL */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/mysql/mysql-logo.svg')}
|
||||
from="bottom"
|
||||
to="//www.mysql.com"
|
||||
title={ Language.get("pages.home.platforms.mysql") }
|
||||
/>
|
||||
|
||||
{/* Heroku */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/heroku/heroku-logo.svg')}
|
||||
from="bottom"
|
||||
to="//heroku.com"
|
||||
title={ Language.get("pages.home.platforms.heroku") }
|
||||
/>
|
||||
|
||||
{/* OpenGL */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/opengl/opengl-logo.svg')}
|
||||
from="bottom"
|
||||
to="//www.opengl.org"
|
||||
title={ Language.get("pages.home.platforms.opengl") }
|
||||
/>
|
||||
|
||||
{/* Discord */}
|
||||
<Platform
|
||||
src={ require('@assets/images/branding/discord/discord-logo.svg') }
|
||||
from="right"
|
||||
to="//discordapp.com"
|
||||
title={ Language.get("pages.home.platforms.discord") }
|
||||
/>
|
||||
|
||||
{/* Twitch */}
|
||||
<Platform
|
||||
src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
|
||||
from="right"
|
||||
to="//twitch.tv"
|
||||
title={ Language.get("pages.home.platforms.twitch") }
|
||||
/>
|
||||
|
||||
{/* Twitter */}
|
||||
<Platform
|
||||
src={require('@assets/images/branding/twitter/twitter-logo.svg')}
|
||||
from="left"
|
||||
to="//twitter.com"
|
||||
title={ Language.get("pages.home.platforms.twitter") }
|
||||
/>
|
||||
|
||||
{/* Google Cloud */}
|
||||
<Platform
|
||||
src={ require('@assets/images/branding/google-cloud/google-cloud-logo.svg') }
|
||||
from="left"
|
||||
to="//console.cloud.google.com"
|
||||
title={ Language.get("pages.home.platforms.googlecloud") }
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ElementScrollFader from="bottom">
|
||||
<Subtitle className="u-text-center p-home-page__brands-title">
|
||||
{ Language.get("pages.home.platforms.footer") }
|
||||
</Subtitle>
|
||||
</ElementScrollFader>
|
||||
</PageBoundary>
|
||||
</ImageSection>
|
||||
);
|
||||
}
|
||||
53
public/pages/home/sections/ProgrammingSection.jsx
Normal file
53
public/pages/home/sections/ProgrammingSection.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
import { PageBoundary } from '@components/page/Page';
|
||||
import { ImageSection } from '@components/section/Section';
|
||||
import ContentBox from '@objects/content/ContentBox';
|
||||
import { Title, Paragraph, Heading1 } from '@objects/typography/Typography';
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<ImageSection
|
||||
className="p-home-page__promo p-home-page__promo-programming"
|
||||
src={ require('@assets/images/patterns/rhythm-heaven.svg') }
|
||||
loadable
|
||||
background
|
||||
>
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box>
|
||||
<Heading1 className="u-text-center">
|
||||
{ Language.get("pages.home.programming.heading") }
|
||||
</Heading1>
|
||||
{ Language.get("pages.home.programming.paragraph") }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
</PageBoundary>
|
||||
</ImageSection>
|
||||
);
|
||||
}
|
||||
68
public/pages/home/sections/PromoVideoSection.jsx
Normal file
68
public/pages/home/sections/PromoVideoSection.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
import Page, { PageBoundary } from '@components/page/Page';
|
||||
import Section, { SplitSection, Split } from '@components/section/Section';
|
||||
import FloatingContentBox from '@objects/content/FloatingContentBox';
|
||||
import ContentBox from '@objects/content/ContentBox';
|
||||
import Video from '@objects/video/Video';
|
||||
import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
|
||||
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Section className="p-home-page__promo p-home-page__promo-video">
|
||||
<PageBoundary>
|
||||
<SplitSection align="center">
|
||||
|
||||
<Split className="u-text-center" padded>
|
||||
<ElementScrollFader>
|
||||
<Video
|
||||
image={ require('@assets/videos/bunny/big_buck_bunny.jpg') }
|
||||
mp4={ require('@assets/videos/bunny/big_buck_bunny.mp4') }
|
||||
controls
|
||||
/>
|
||||
</ElementScrollFader>
|
||||
</Split>
|
||||
|
||||
<Split className="u-text-center" padded>
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box>
|
||||
<Title>
|
||||
{ Language.get("pages.home.video.heading") }
|
||||
</Title>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.home.video.paragraph") }
|
||||
</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
</Split>
|
||||
|
||||
</SplitSection>
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
55
public/pages/legal/privacy/PrivacyPolicyPage.jsx
Normal file
55
public/pages/legal/privacy/PrivacyPolicyPage.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
// 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 Language from '@public/language/Language';
|
||||
|
||||
import Page, { PageBoundary } from '@components/page/Page';
|
||||
import { BodySection, ClearSection } from '@components/section/Section';
|
||||
|
||||
import { Title } from '@objects/typography/Typography';
|
||||
|
||||
const PrivacyPolicyPage = (props) => {
|
||||
return (
|
||||
<Page style="privacy-policy" className="p-privacy-policy" title={ Language.get("pages.privacy.title") }>
|
||||
<PageBoundary small>
|
||||
<ClearSection />
|
||||
<BodySection>
|
||||
<Title>{ Language.get("pages.privacy.heading") }</Title>
|
||||
{ Language.get("pages.privacy.policy") }
|
||||
</BodySection>
|
||||
<ClearSection />
|
||||
</PageBoundary>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const mapStateToProps = function(state) {
|
||||
return {
|
||||
code: state.language.code
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(PrivacyPolicyPage);
|
||||
Reference in New Issue
Block a user