feat(homepage): add banner for Spokestack Maker

spokestack · May 25, 2021 · 096e3bc · 096e3bc
1 parent 938238d
commit 096e3bc
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 61 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -2,26 +2,18 @@ import * as theme from '../styles/theme'
 
 import React from 'react'
 import { css } from '@emotion/react'
-import { Link } from 'gatsby'
 
 interface Props {
   children: React.ReactNode
-  to: string
+  href: string
 }
 
-export default function Banner({ children, to }: Props) {
+export default function Banner({ children, href }: Props) {
   return (
-    <Link css={styles.banner} to={to}>
-      <img
-        css={[styles.bannerImage, styles.bannerImageLeft]}
-        src="/banner.svg"
-      />
+    <a css={styles.banner} href={href}>
+      <img css={styles.bannerImage} src="/banner.svg" />
       {children}
-      <img
-        css={[styles.bannerImage, styles.bannerImageRight]}
-        src="/banner.svg"
-      />
-    </Link>
+    </a>
   )
 }
 
@@ -30,28 +22,28 @@ const styles = {
     position: fixed;
     top: 0;
     width: 100%;
-    height: 40px;
+    height: 80px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    text-align: center;
     text-decoration: none;
-    background-color: ${theme.header};
-    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
-    font-size: 13px;
-    padding-bottom: 1px;
+    background-color: ${theme.primaryDark};
+    font-size: 14px;
+    font-weight: 400;
+    padding: 20px;
+    overflow: hidden;
     z-index: 99999;
 
     &,
     &:visited,
     &:hover,
     &:active {
-      color: ${theme.textDarkBg};
+      color: white;
     }
 
     &:hover {
-      background-color: ${theme.headerColor.darken(0.1).hex()};
+      background-color: ${theme.primary};
     }
     &:active {
       box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7);
@@ -63,26 +55,14 @@ const styles = {
 
     ${theme.MIN_DEFAULT_MEDIA_QUERY} {
       position: absolute;
-      font-size: 16px;
+      height: 40px;
     }
   `,
   bannerImage: css`
-    width: 437px;
-    height: 40px;
-    position: absolute;
-    margin: 0;
+    width: 62px;
+    height: 62px;
+    flex-shrink: 0;
     line-height: 0;
-    display: none;
-
-    ${theme.MIN_LARGE_DISPLAY_MEDIA_QUERY} {
-      display: block;
-    }
-  `,
-  bannerImageLeft: css`
-    left: 0;
-  `,
-  bannerImageRight: css`
-    right: 0;
-    transform: rotateY(180deg);
+    margin-right: 20px;
   `
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,5 +1,6 @@
+import * as theme from '../styles/theme'
+
 import { Global, SerializedStyles, css } from '@emotion/react'
-import { MIN_DEFAULT_MEDIA_QUERY, ieBreakpoint } from '../styles/theme'
 import React, { Fragment } from 'react'
 
 import Footer from './Footer'
@@ -23,10 +24,19 @@ export default function Layout({
   navStyle
 }: Props) {
   const style = [styles.container]
+  const navStyles = []
+  const navContentStyles = []
   if (banner) {
     style.push(css`
       top: 40px;
     `)
+    const navPushStyle = css`
+      ${theme.DEFAULT_MEDIA_QUERY} {
+        top: 80px;
+      }
+    `
+    navStyles.push(navPushStyle)
+    navContentStyles.push(navPushStyle)
   }
 
   return (
@@ -35,7 +45,10 @@ export default function Layout({
       <div css={style.concat(extraCss!)}>
         <Global styles={globalStyles} />
         <Sprite />
-        <Nav extraCss={navStyle} />
+        <Nav
+          extraCss={navStyles.concat(navStyle!)}
+          contentCss={navContentStyles}
+        />
         <main css={[styles.content].concat(contentStyle!)}>{children}</main>
         <Footer />
       </div>
@@ -59,13 +72,13 @@ const styles = {
     min-height: 300px;
     position: relative;
 
-    ${ieBreakpoint} {
+    ${theme.ieBreakpoint} {
       display: flex;
       flex-direction: column;
       align-items: center;
     }
 
-    ${MIN_DEFAULT_MEDIA_QUERY} {
+    ${theme.MIN_DEFAULT_MEDIA_QUERY} {
       min-height: calc(100vh - 60px);
     }
   `

diff --git a/src/components/navigation/Nav.tsx b/src/components/navigation/Nav.tsx
@@ -12,10 +12,11 @@ import NavDropdownLink from './NavDropdownLink'
 import NavLink from './NavLink'
 
 interface Props {
+  contentCss?: SerializedStyles | SerializedStyles[]
   extraCss?: SerializedStyles | SerializedStyles[]
 }
 
-export default function Nav({ extraCss }: Props) {
+export default function Nav({ contentCss, extraCss }: Props) {
   const [mobileOpen, setMobileOpen] = useState(false)
   const contentStyles = [styles.navContent]
   if (mobileOpen) {
@@ -63,7 +64,7 @@ export default function Nav({ extraCss }: Props) {
           <Logo />
         </a>
       </header>
-      <div className="nav-content" css={contentStyles}>
+      <div className="nav-content" css={contentStyles.concat(contentCss!)}>
         <ul css={styles.links}>
           <li css={styles.listItem} aria-label="Features Navigation">
             <NavDropdown title="Features">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import { PageRendererProps, graphql } from 'gatsby'
 
+import Banner from '../components/Banner'
 import Create from '../components/Create'
 import Flexible from '../components/homepage/Flexible'
 import Header from '../components/homepage/Header'
@@ -21,7 +22,17 @@ export default function Index({ data }: Props) {
   const siteTitle = data!.site!.siteMetadata!.title!
 
   return (
-    <Layout extraCss={styles.container} navStyle={styles.nav}>
+    <Layout
+      banner={
+        <Banner href="/account/create">
+          <p>
+            Spokestack Maker - Self-Service Tools for Personal Voice Model
+            Creation
+          </p>
+        </Banner>
+      }
+      extraCss={styles.container}
+      navStyle={styles.nav}>
       <SEO title={siteTitle} />
       <Header />
       <Tray />

diff --git a/static/banner.svg b/static/banner.svg