Add shadows under preview and change image in md

README.md

@@ -14,7 +14,7 @@ Website editor built with React with predefined blocks and a drag and drop.
 * Easily to write blocks with handlebars syntax
 
 <p align="center">
- <img src="https://i.imgur.com/VH9MmCd.png" alt="Visual Editor"/>
+ <img src="https://i.imgur.com/GSHqyTV.png" alt="Visual Editor"/>
 </p>
 
 ## Installation

src/components/BlockPreview.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 class BlockPreview extends Component {
   render() {
     return (
-      <div className='card card-body p-2 shadow block-entry mb-2'>
+      <div className='card card-body p-2 shadow-lg block-entry mb-2'>
         <img
           src={this.props.image}
           alt={this.props.name}

src/containers/Preview.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function Preview(props) {
   return <div className='page-content-wrapper overflow-hidden d-flex justify-content-center'>
-    <div className={`preview-window preview-mode-${props.previewMode}`}>
+    <div className={`preview-window shadow-lg preview-mode-${props.previewMode}`}>
       <div className='preview-toolbar d-flex align-items-center justify-content-between'>
         <div className='d-flex align-items-center'>
           <span className="material-icons preview-toolbar-dot">stop_circle</span>

src/views/blocks/header1.js

@@ -1,8 +1,8 @@
 const hbs = `
-<div class="container text-center">
-  <strong>{{title}}</strong>
-  <h1 class="display-4 my-3">{{tagline}}</h1>
-  <a class="btn btn-link my-2" href="#">{{link}}</a>
+<div class="container text-center pt-5 pb-5">
+  <h5>{{title}}</h5>
+  <h1 class="display-4">{{tagline}}</h1>
+  <a class="btn btn-link" href="#">{{link}}</a>
 </div>
 `;