landing page

.vscode/settings.json

@@ -3,5 +3,6 @@
   "editor.formatOnSave": true,
   "prettier.eslintIntegration": true,
   "prettier.singleQuote": true,
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "editor.tabSize": 2
 }

src/App.js

@@ -7,7 +7,7 @@ import Authentication from './components/authentication/authenication';
 import Masthead from './components/masthead/masthead';
 
 class App extends React.Component {
-  state = { locale: 'de' };
+  state = { locale: 'en' };
 
   render() {
     return (

src/components/installedAppsMasterDetail/InstalledAppsMasterDetail.js

@@ -0,0 +1,39 @@
+// import React from 'react';
+// import { Grid, Row, Col } from 'patternfly-react';
+// import PropTypes from 'prop-types';
+// function createMasterList(items) {
+//   const masterList = items.map(item => <li>{item}</li>);
+//   return <ul>{masterList}</ul>;
+// }
+
+// const InstalledAppsView extends React.Component {
+//   state = {
+//     master: undefined,
+//     detail: undefined
+//   };
+
+//   constructor(props) {
+//     super(props);
+
+//   }
+//   render() {
+//     const masterList = createMasterList(master);
+//     return (
+//       <div className="container">
+//         <Grid>
+//           <Row>
+//             <Col xs={12} md={6}>
+//               {masterList}
+//             </Col>
+//             <Col xs={12} md={6}>
+//               {}
+//             </Col>
+//           </Row>
+//         </Grid>
+//       </div>
+//     );
+//   };
+
+// }
+
+// export default InstalledAppsView;

src/components/tutorialCard/tutorialCard.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Card, CardBody, CardFooter, CardTitle } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+const TutorialCard = props => {
+  return (
+    <Card matchHeight>
+      <CardTitle>
+        <div className="app-tutorial-card-rectangle" />
+        <div> {props.title} </div>
+      </CardTitle>
+      <CardBody> {props.children} </CardBody>
+      <CardFooter className="app-tutorial-card-pf-footer">
+        <a className="app-tutorial-card-get-started-btn" href="#">
+          Get Started
+        </a>
+        <a className="app-tutorial-card-learn-more-link" href={props.learnMoreLink}>
+          Learn More
+        </a>
+      </CardFooter>
+    </Card>
+  );
+};
+
+TutorialCard.propTypes = {
+  /** Content rendered inside the tutorial card  */
+  children: PropTypes.node.isRequired,
+  /** Title of the tutorial */
+  title: PropTypes.string.isRequired,
+  /** Link to page that explains the the tutorial in more detail */
+  learnMoreLink: PropTypes.string.isRequired
+};
+
+export default TutorialCard;

src/components/tutorialDashboard/tutorialDashboard.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CardGrid, Col, Row } from 'patternfly-react';
+import TutorialCard from '../tutorialCard/tutorialCard';
+
+const TutorialDashboard = () => (
+  <div className="cards-pf">
+    <CardGrid matchHeight>
+      <Row style={{ marginBottom: '20px', marginTop: '20px' }}>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 0" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 0</p>
+          </TutorialCard>
+        </Col>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 1" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 1</p>
+          </TutorialCard>
+        </Col>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 2" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 2</p>
+          </TutorialCard>
+        </Col>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 3" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 3</p>
+          </TutorialCard>
+        </Col>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 4" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 4</p>
+          </TutorialCard>
+        </Col>
+        <Col xs={6} sm={4} md={4}>
+          <TutorialCard title="Steel Thread 5" learnMoreLink="#">
+            <p>This will be the description for Steel Thread 5</p>
+          </TutorialCard>
+        </Col>
+      </Row>
+    </CardGrid>
+  </div>
+);
+
+export default TutorialDashboard;

src/pages/landing/landingPage.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TutorialDashboard from '../../components/tutorialDashboard/tutorialDashboard';
+import LandingPageMastHead from './landingPageMastHead';
+
+const LandingPage = () => (
+  <div>
+    <LandingPageMastHead />
+    <section className="app-landing-page-tutorial-dashboard-section">
+      <div className="container">
+        <h2 className="app-landing-page-white-text">Solve problems with tutorials</h2>
+        <TutorialDashboard className="app-landing-page-dashboard" />
+      </div>
+    </section>
+  </div>
+);
+
+export default LandingPage;

src/pages/landing/landingPageMastHead.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Grid, Row, Col } from 'patternfly-react';
+
+const LandingPageMastHead = () => (
+  <header className="app-landing-page-integr8ly-masthead">
+    <div className="container">
+      <h1>Welcome to your Red Hat evaluation experience.</h1>
+      <h4>will be covering...</h4>
+      <Grid>
+        <Row>
+          <Col xs={12} md={3}>
+            <div className="app-landing-page-circle-placeholder" />
+            <h4 className="app-landing-page-mast-head-text-center">Your products together in one place.</h4>
+          </Col>
+          <Col xs={12} md={3}>
+            <div className="app-landing-page-circle-placeholder" />
+            <h4 className="app-landing-page-mast-head-text-center">Explore tutorials for easy set-up.</h4>
+          </Col>
+          <Col xs={12} md={3}>
+            <div className="app-landing-page-circle-placeholder" />
+            <h4 className="app-landing-page-mast-head-text-center">Support in the places you need them.</h4>
+          </Col>
+          <Col xs={12} md={3}>
+            <div className="app-landing-page-circle-placeholder" />
+            <h4 className="app-landing-page-mast-head-text-center">Detailed information.</h4>
+          </Col>
+        </Row>
+      </Grid>
+    </div>
+  </header>
+);
+
+export default LandingPageMastHead;

src/routes.js

@@ -1,5 +1,5 @@
-import HomePage from './pages/home/home';
 import HelpPage from './pages/help/help';
+import LandingPage from './pages/landing/landingPage';
 
 /**
  * Return the application base directory.
@@ -14,10 +14,10 @@ const baseName = '/';
 const routes = () => [
   {
     iconClass: 'pficon pficon-orders',
-    title: 'Home',
-    to: '/home',
+    title: 'Landing',
+    to: '/',
     redirect: true,
-    component: HomePage,
+    component: LandingPage,
     exact: true
   },
   {

src/styles/application/_landingPage.scss

@@ -0,0 +1,32 @@
+.app-landing-page-integr8ly-masthead {
+    background-color: #8b8d8f;
+    color: #fff;
+    height: 450px;
+}
+.app-landing-page-circle-placeholder {
+    height: 20rem;
+    width: 20rem;
+    border-radius: 50%;
+    background-color: #d1d1d1;
+    margin: 0 auto;
+}
+
+.app-landing-page-white-text {
+    color: #fff;
+}
+.app-landing-page-dashboard {
+    align-items: center;
+}
+
+.app-landing-page-tutorial-dashboard-section {
+    margin-top: -10em;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    & .cards-pf {
+        background: transparent;
+        & .card-pf {
+            background: transparent;
+        }
+    }
+}

src/styles/application/_landingPageMastHead.scss

@@ -0,0 +1,3 @@
+.app-landing-page-mast-head-text-center {
+  text-align: center;
+}

src/styles/application/_tutorialCard.scss

@@ -0,0 +1,21 @@
+.app-tutorial-card-rectangle {
+    background-color: #d8d8d8;
+    width: 100%;
+    height: 200px;
+    margin-bottom: 20px;
+}
+
+.app-tutorial-card-get-started-btn {
+    float: right;
+    margin-bottom: 10px;
+}
+
+.app-tutorial-card-learn-more-link {
+    float: left;
+    margin-bottom: 10px;
+}
+
+.app-tutorial-card-pf-footer {
+    background-color: #fff;
+    border-top: none;
+}

src/styles/index.scss

@@ -17,5 +17,8 @@ $icon-font-path: '~patternfly/dist/fonts/';
 // Application Overrides
 @import 'application/app';
 @import 'application/aboutModal';
+@import 'application/landingPage';
+@import 'application/landingPageMastHead';
 @import 'application/login';
 @import 'application/nav';
+@import 'application/tutorialCard';