import React from 'react'
import Meta from './Meta'
import Header from './Header'
import Footer from './Footer'

export default ({ children, enableHeroText }) => (
  <main className="main mt4 mb4">
    <Meta />
    <Header enableHeroText={enableHeroText} />
    <div className="page">{children}</div>

    <Footer />

    <style jsx>
      {`
        .main {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          min-width: 1080px; // temporary fix for mobile overflow issue
        }
      `}
    </style>
  </main>
)

@@ -110,24 +110,68 @@
 r'%0A%0A
-export defaul
+class Page extends React.Component %7B%0A  render() %7B%0A    cons
 t 
-(
 %7B ch
@@ -198,15 +198,39 @@
 xt %7D
-)
  =
-%3E (%0A
+ this.props%0A    return (%0A    
   %3Cm
@@ -259,16 +259,20 @@
 4 mb4%22%3E%0A
+    
     %3CMet
@@ -280,16 +280,20 @@
  /%3E%0A    
+  
+  
 %3CHeader 
@@ -323,24 +323,28 @@
 eroText%7D /%3E%0A
+    
     %3Cdiv cla
@@ -375,16 +375,20 @@
 %3C/div%3E%0A%0A
+    
     %3CFoo
@@ -399,16 +399,20 @@
 /%3E%0A%0A    
+  
+  
 %3Cstyle j
@@ -415,16 +415,20 @@
 le jsx%3E%0A
+    
       %7B%60
@@ -436,16 +436,20 @@
         
+    
 .main %7B%0A
@@ -458,16 +458,20 @@
         
+ 
+   
 display:
@@ -477,16 +477,20 @@
 : flex;%0A
+    
         
@@ -508,32 +508,36 @@
 ontent: center;%0A
+    
           flex-d
@@ -564,16 +564,20 @@
         
+    
 align-it
@@ -581,32 +581,36 @@
 -items: center;%0A
+    
           min-wi
@@ -673,18 +673,26 @@
         
+   
+ 
 %7D%0A
+    
       %60%7D
@@ -696,16 +696,20 @@
  %60%7D%0A    
+ 
+   
 %3C/style%3E
@@ -709,16 +709,20 @@
 /style%3E%0A
+    
   %3C/main
@@ -723,10 +723,41 @@
 %3C/main%3E%0A
-)
+    )%0A  %7D%0A%7D%0A%0Aexport default Page
 %0A

make page a React components