Working on the website.

Author: Michael Aufreiter

components/Body.js

@@ -0,0 +1,9 @@
+export default function Body(props) {
+  return (
+    <div className="sc-body">
+      <div className="se-body-container">
+        {props.children}
+      </div>
+    </div>
+  )
+}

components/Footer.js

@@ -0,0 +1,9 @@
+export default function Footer() {
+    return (
+      <div className="sc-footer">
+        <div className="se-footer-container">
+          Footer comes here.
+        </div>
+      </div>
+    )
+}

components/Header.js

@@ -3,15 +3,17 @@ import Link from 'next/link'
 function SubstanceLogo() {
   return (
     <div className="sc-substance-logo">
-      LE SUBSTANCE LOGO
+      <Link href="/">
+        <a><img src="/static/images/substance-logo.svg" height="30"></img></a>
+      </Link>
     </div>
   )
 }
 
 function SubstanceMenu() {
   return (
     <div className="sc-menu">
-      <Link href="/">
+      <Link href="/products">
         <a className="sc-menu-link">Products</a>
       </Link>
       <Link href="/about">
@@ -30,7 +32,7 @@ function SubstanceMenu() {
 export default function Header() {
   return (
     <div className="sc-header">
-      <div className="sc-header-content">
+      <div className="se-header-container">
         <SubstanceLogo></SubstanceLogo>
         <SubstanceMenu></SubstanceMenu>
       </div>

components/MyLayout.js

@@ -1,5 +1,5 @@
 import Header from './Header'
-import '../styles/variables.css'
+import Footer from './Footer'
 import '../styles/styles.css'
 import 'inter-ui/inter.css'
 import 'reset-css/reset.css'
@@ -9,6 +9,7 @@ export default function Layout(props) {
     <div className="sc-layout">
       <Header></Header>
       {props.children}
+      <Footer></Footer>
     </div>
   )
 } 

components/Teaser.js

@@ -2,20 +2,14 @@
 export default function Teaser(props) {
   return (
     <div className="sc-teaser">
-      <div className="se-teaser-headline">
-        
+      <div className="se-teaser-container">
+        <div className="se-teaser-headline">
+          {props.headline}
+        </div>
+        <div className="se-teaser-content">
+          {props.children}
+        </div>
       </div>
-      <div className="se-teaser-content">
-        {props.children}
-      </div>
-      <style jsx>{`
-      .sc-teaser {
-        color: #fff;
-      }
-      .se-teaser-headline {
-        
-      }
-    `}</style>
     </div>
   )
 }