some updates on the layout

.gitignore

@@ -1,11 +1,17 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+#static 
+/build/static/css
+/build/static/js
+
+
 # dependencies
 /node_modules
 
 # testing
 /coverage
 
+package-lock.json
 
 # misc
 .DS_Store

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/components/ExampleImages.jsx

@@ -9,7 +9,20 @@ const ExampleImages = () => {
   return (
     <div>
       <div id="example-images">
-        <img src={step1} alt="example images" />
+
+        <div id="left-col">
+          <img src={step1} alt="example images" />
+        </div>
+        <div>
+        <div className="download">
+          <h3 class="download_txt">{"Download Executable"}</h3>
+          <a className="btn" className="btn btn-lg btn-block" href="https://s3-us-west-2.amazonaws.com/www.bundlebee.io/pgm.zip" download=""><span  ></span>MacOS</a>
+          <p class="fine-print">64-bit macOS 10.10 and later</p>
+          <a className="windows" href=""><span  ></span>Windows10</a>
+          <p class="fine-print">Coming Soon</p>
+        </div>
+          <div className="cards left">{"Current web applications can grow immensely in a very short period of time.  Having the proper bundle tool is immensely useful for not just the developers but for the final product that is pushed to production.  Bundle Bee provides the ability for React developers to test, not just their current bundle configuration, but also compare it to other potential solutions to see which option is the most performant in terms of speed and bundle size.  This not only saves the developers time in setting up their bundle tools, but more importantly enables them to ship the fastest code for their users."}</div>
+        </div>
       </div>
     </div>
   )

src/components/Footer.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import '../styles/footer.css';
+import bundlebeelogo from './logo.png'
 
 const Footer = () => {
   return (
     <div className="footer">
       <nav>
-        <h4 className="footer-title">{'BUNDLE BEE'}</h4>
+      <img src={bundlebeelogo} alt="Bundle Bee Logo" />
         <div className="navWide">
           <a href="#about">ABOUT US</a>
           <a href="#contact">CONTACT</a>

src/components/Header.jsx

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import logo from './logo.svg';
+import bundlebeelogo from './logo.png'
 import GitHub from './git.svg';
 import NPM from './npm.svg';
 import '../styles/header.css';
@@ -9,13 +10,18 @@ const Header = () => {
     return (
         <div className="header">
             <nav>
-                <img src={logo} className="App-logo" alt="logo" />
-                <h4 className="App-title">{'BUNDLE BEE'}</h4>
+                <div className="navWide">
+                    <img src={logo} className="App-logo" alt="logo" width="160"/>
+                    <div>
+                        <img src={bundlebeelogo} alt="Bundle Bee Logo" />
+                        <div><p className="subTitle">   Simplify Your Build Process</p></div>
+                    </div>
+                </div>
                 <div className="navWide">
                     <a href="#home">HOME</a>
                     <a href="#demo">DEMO</a>
-                    <a href="https://github.com/bundlebee/bundle-bee/wiki">DOCS</a>
-                    <a href="https://github.com/bundlebee/bundle-bee"><img src={GitHub} alt="GitHub Logo" /></a>
+                    <a href="https://github.com/bundlebee/bundle-bee/wiki" target="_blank">DOCS</a>
+                    <a href="https://github.com/bundlebee/bundle-bee" target="_blank"><img src={GitHub} alt="GitHub Logo" /></a>
                 </div>
             </nav>
         </div>

src/components/MainArticle.jsx

@@ -9,17 +9,16 @@ const MainArticle = () => {
   return (
     <div className="main">
       <div className="intro">
-        <h2>{"SIMPLIFY YOUR BUILD PROCESS"}</h2>
-        <h3>{"Test your React project against Webpack, Parcel and Rollup"}</h3>
+  {/* <h3>{"Test your React project against Webpack, Parcel and Rollup"}</h3> */}
         <div className="cards">
-          <div className="left">{"Current web applications can grow immensely in a very short period of time.  Having the proper bundle tool is immensely useful for not just the developers but for the final product that is pushed to production.  Bundle Bee provides the ability for React developers to test, not just their current bundle configuration, but also compare it to other potential solutions to see which option is the most performant in terms of speed and bundle size.  This not only saves the developers time in setting up their bundle tools, but more importantly enables them to ship the fastest code for their users."}</div>
-          <div className="right">{`Utilize Bundle Bee to visually represent the build speeds and sizes.  Compare against the top 3 bundle tools on the market:`} < br /> {`Webpack, Parcel & Rollup`}
-            <div className="bundle-logos">
+          {/* <div className="left">{"Current web applications can grow immensely in a very short period of time.  Having the proper bundle tool is immensely useful for not just the developers but for the final product that is pushed to production.  Bundle Bee provides the ability for React developers to test, not just their current bundle configuration, but also compare it to other potential solutions to see which option is the most performant in terms of speed and bundle size.  This not only saves the developers time in setting up their bundle tools, but more importantly enables them to ship the fastest code for their users."}</div> */}
+        {/* <div className="right">{`Utilize Bundle Bee to visually represent the build speeds and sizes.  Compare against the top 3 bundle tools on the market:`} < br /> {`Webpack, Parcel & Rollup`} */}
+            {/* <div className="bundle-logos">
               <img src={webpack} alt="Webpack"></img>
               <img src={parcel} alt="Parcel" />
               <img src={rollup} alt="Rollup" />
             </div>
-          </div>
+          </div> */}
         </div>
       </div>
     </div>

src/components/Workflow.jsx

@@ -100,13 +100,7 @@ export default class Workflow extends Component {
             </ul>
           </div>
         </section>
-        <div className="download">
-          <h3>{"Download Executable"}</h3>
-          <a className="btn btn-lg btn-block" href="https://s3-us-west-2.amazonaws.com/www.bundlebee.io/pgm.zip" download=""><span  ></span>MacOS</a>
-          <p class="fine-print">64-bit macOS 10.10 and later</p>
-          <a className="windows" href=""><span  ></span>Windows10</a>
-          <p class="fine-print">Coming Soon</p>
-        </div>
+
 
       </div>
     )

src/styles/header.css

@@ -28,7 +28,7 @@ nav {
   background-color: #ccc;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
 }
 
 nav a:visited {
@@ -40,20 +40,31 @@ nav .navWide {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  margin-left: 5rem;
+  margin: 0 2rem;
   font-size: 1.5rem;
   font-family: 'Oswald', sans-serif;
 }
 
 nav .navWide a {
   text-decoration: none;
-  padding: 0 1rem;
+  padding:  .7rem;
   color: #000;
+
+
 }
 
 nav .navWide a:hover {
   color: #422;
   padding: .7rem;
   border-radius: 4px;
   background-color: rgb(255, 255, 255);
+}
+
+.subTitle {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+nav > div > div > img {
+  width: 380px;
 }

src/styles/main.css

@@ -23,14 +23,24 @@
 
 .cards .left {
   margin: 1rem;
-  width: 70%;
+  width: 90%;
   padding: 2rem;
   background-color: white;
   color: black;
   border-radius: 5px;
   border: 1px solid #808080;
 }
 
+.left {
+  margin: 1rem;
+  margin: 0 auto;
+  width: 75%;
+  padding: 2rem;
+  background-color: white;
+  color: black;
+  border-radius: 5px;
+  border: 1px solid #808080;
+}
 .cards .right {
   margin: 1rem;
   width: 80%;
@@ -48,12 +58,60 @@
 #example-images {
   background-color: rgba(55, 45, 66, 2);
   display: flex;
-  justify-content: space-around;
-  align-items: baseline;
-  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  /* flex-wrap: wrap; */
 }
 
 #example-images img {
-  max-width: 50%;
-  padding: 1rem;
+  max-width: 95%;
+  margin: 2rem;
+  /* padding: 1rem; */
+
+}
+#left-col{
+  min-width: 60%;
+}
+
+
+.btn {
+  position: relative;
+  display: block;
+
+  padding: 0;
+  overflow: hidden;
+
+  border-width: 0;
+  outline: none;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+
+  background-color: #2ecc71;
+  color: #ecf0f1;
+
+  transition: background-color .3s;
+}
+
+.btn:hover, .btn:focus {
+  background-color: #27ae60;
+}
+
+#content1 ul {
+  width: 80%;
+}
+
+.fine-print {
+  font-size: .85rem;
+  padding-right: 1rem;
+  margin: 0 0 1rem 0;
+}
+
+.download > h3 {
+  color: white;
+  font-size: 2em;
+}
+
+.download > p {
+  color: white;
+
 }

src/styles/workflow.css

@@ -64,9 +64,8 @@ pre {
 .download {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
   width: 100%;
-  margin-top: -8rem;
 }
 
 .download a {
@@ -83,13 +82,3 @@ pre {
   line-height: 36px;
   font-weight: 100;
 }
-
-#content1 ul {
-  width: 80%;
-}
-
-.fine-print {
-  font-size: .85rem;
-  padding-right: 1rem;
-  margin: 0 0 1rem 0;
-}