8 files changed, 254 insertions, 0 deletions
diff --git a/src/components/project/ProjectEndAll.js b/src/components/project/ProjectEndAll.js
new file mode 100644
index 0000000..56680ac
--- /dev/null
+++ b/src/components/project/ProjectEndAll.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectEndAll extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    <div className="col-lg-5"></div>
+
+                    { /* graphic3 */ }
+                    <div className={"col-lg-6 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}>
+                    </div>
+
+                    <div className="col-lg-1"></div>
+                </div>
+                <br />
+
+                <div className="row">
+                    <div className="col-lg-5"></div>
+                    <div className="col-lg-5">
+                        <h4 className="wow fadeInUp" data-wow-delay="1.6s">{this.props.projectData.title}</h4>
+                    </div>
+                    <div className="col-lg-5"></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectEndAll.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/ProjectOne.js b/src/components/project/ProjectOne.js
new file mode 100644
index 0000000..8c3b92f
--- /dev/null
+++ b/src/components/project/ProjectOne.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectOne extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    <div className="col-lg-8"></div>
+                    
+                    { /* graphic1 */ }
+                    <div className={"col-lg-4 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectOne.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/ProjectThree.js b/src/components/project/ProjectThree.js
new file mode 100644
index 0000000..079c47d
--- /dev/null
+++ b/src/components/project/ProjectThree.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectThree extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    <div className="col-lg-7"></div>
+
+                    { /* graphic3 */ }
+                    <div className={"col-lg-4 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+
+                    <div className="col-lg-1"></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectThree.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/ProjectTwo.js b/src/components/project/ProjectTwo.js
new file mode 100644
index 0000000..8e6ab8a
--- /dev/null
+++ b/src/components/project/ProjectTwo.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectTwo extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <div className="whitespace"></div>
+
+                <h3 className="mobile-txt2 wow fadeInUp" data-wow-delay="1.2s">{this.props.projectData.title}</h3>
+                <div className="row">
+                    { /* graphic2 */ }
+                    <div className={"col-lg-6 project " + this.props.projectClass + " wow fadeInUp"} data-wow-delay="1.4s"
+                        onClick={() => window.location.href = this.props.projectData.redirect}
+                        style={{
+                            background: "url(" + this.props.projectData.image + ") no-repeat 50% 50%",
+                            backgroundSize: "cover"
+                        }}
+                    ></div>
+
+                    <div className="col-lg-6"></div>
+                </div>
+            </React.Fragment>
+        )
+    }
+}
+
+ProjectTwo.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/project-page/Project.js b/src/components/project/project-page/Project.js
new file mode 100644
index 0000000..2afbc8d
--- /dev/null
+++ b/src/components/project/project-page/Project.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectHero from './ProjectHero';
+import ProjectImage from './ProjectImage';
+
+import DynamicTitle from '../../navigation/DynamicTitle';
+
+export default class Project extends Component {
+    render() {
+        return(
+            <React.Fragment>
+                <DynamicTitle title={this.props.projectData.title + " | Fuwn"} />
+                
+                <div className="whitespace"></div>
+                <ProjectHero projectData={this.props.projectData} />
+                <ProjectImage projectData={this.props.projectData} projectClass={this.props.projectClass} />
+            </React.Fragment>
+        )
+    }
+}
+
+Project.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectHero.js b/src/components/project/project-page/ProjectHero.js
new file mode 100644
index 0000000..3d5f7ce
--- /dev/null
+++ b/src/components/project/project-page/ProjectHero.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectHero extends Component {
+    render() {
+        return(
+            <div className="container">
+                <div className="hero-content">
+                    <br />
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <br />
+                            
+                            <h1 className="wow fadeInUp" data-wow-delay="1s">"{this.props.projectData.title}"</h1>
+                            <br />
+                            <br />
+                            
+                            <div className="row">
+                                <div className="col-lg-4">
+                                    <p className="wow fadeInUp" data-wow-delay="1.2s">service:</p>
+                                    <h6 className="wow fadeInUp" data-wow-delay="1.3s">{this.props.projectData.service}</h6>
+                                </div>
+
+                                <div className="col-lg-4">
+                                    <p className="wow fadeInUp" data-wow-delay="1.6s">completed:</p>
+                                    <h6 className="wow fadeInUp" data-wow-delay="1.7s">{this.props.projectData.completed}</h6>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+ProjectHero.propTypes = {
+    projectData: PropTypes.object
+}
+\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectImage.js b/src/components/project/project-page/ProjectImage.js
new file mode 100644
index 0000000..f46ef4a
--- /dev/null
+++ b/src/components/project/project-page/ProjectImage.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectImage extends Component {
+    render() {
+        return(
+            <div className="project-img">
+                <div className="container">
+                    <br />
+                    <div className="row">
+                        <div className="col-md-12">
+                            <div className={this.props.projectClass + " wow fadeInUp"} data-wow-delay="0.8s" style={{
+                                background: "url(" + this.props.projectData.image + ") no-repeat 50% 70%",
+                                backgroundSize: "cover", height: "630px"
+                            }}></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+ProjectImage.propTypes = {
+    projectData: PropTypes.object,
+    projectClass: PropTypes.string
+}
+\ No newline at end of file
diff --git a/src/components/project/project-page/ProjectNavigation.js b/src/components/project/project-page/ProjectNavigation.js
new file mode 100644
index 0000000..014af21
--- /dev/null
+++ b/src/components/project/project-page/ProjectNavigation.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class ProjectNavigation extends Component {
+    render() {
+        return(
+            <div className="project-nav">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-6 prev">
+                            <a href="" id="no-h">
+                                <ion-icon name="arrow-back"></ion-icon>previous
+                            </a>
+                        </div>
+                        <div className="col-lg-6 next">
+                            <a href="" id="no-h">
+                                <ion-icon name="arrow-back"></ion-icon>next
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+\ No newline at end of file