feat(demo): change demo about new content

Author: Piotr

docs/App-clear.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { MDBBtn, MDBCol, MDBContainer, MDBRow } from 'mdbreact';
+import './index.css';
+import logo from './logo.png';
+
+class App extends Component {
+  render() {
+    return (
+      <MDBContainer>
+        <MDBRow center style={{ height: '100vh' }}>
+          <MDBCol middle={true} md='6' className='text-center'>
+            <img src={logo} alt='logo' style={{ width: '10rem' }} />
+            <h1 className='text-white'>Welcome to Your MDB React App</h1>
+            <p className='mb-2 text-white'>The application is configured and ready to import our components.</p>
+            <MDBBtn href='https://mdbootstrap.com/docs/react/' target='blank' color='light-blue'>
+              <strong>Check out our docs!</strong>
+            </MDBBtn>
+          </MDBCol>
+          <MDBCol middle={true} md='6' className='text-center'>
+            <div className='d-flex mt-5'>
+              <div className='text-center'>
+                <h2 className='h1 text-poppy-red'>BLACK NOVEMBER SURPRISE!</h2>
+                <i className='fas fa-shopping-basket text-white fa-10x'></i>
+                <p className='mt-2 text-white'>
+                  Check what we have prepared and start using the richest UI Kit today.
+                  <br />
+                  Hurry up & don't loose your chance.
+                </p>
+                <p>
+                  <a
+                    rel='noopener noreferrer'
+                    target='_blank'
+                    type='button'
+                    className='btn btn-danger btn-rounded btn-lg text-white bg-poppy-red'
+                    href='https://mdbootstrap.com/sale/'
+                  >
+                    <i className='fas fa-cart-arrow-down'></i> CLAIM OFFER
+                  </a>
+                </p>
+              </div>
+            </div>
+          </MDBCol>
+        </MDBRow>
+      </MDBContainer>
+    );
+  }
+}
+
+export default App;

docs/index.css

@@ -42,6 +42,20 @@
   color: #283593;
 }
 
-.nav-link:focus{
+.nav-link:focus {
   outline: none;
 }
+
+/* styling for App-clear.js */
+body {
+  background-color: #2e2e2e !important;
+}
+.text-poppy-red {
+  color: #ef5350 !important;
+}
+.btn-poppy-red {
+  background-color: #ef5350 !important;
+}
+.bg-poppy-red {
+  background-color: #ef5350 !important;
+}

docs/index.js

@@ -5,9 +5,11 @@ import 'bootstrap-css-only/css/bootstrap.min.css';
 import '../dist/css/mdb.css';
 import './index.css';
 import App from './App';
+import AppClear from './App-clear';
 
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// if you want to see demo app, change <AppClear/> to <App />
+ReactDOM.render(<AppClear />, document.getElementById('root'));
 
 registerServiceWorker();