Basis home-hero

components/HomeHero.tsx

@@ -0,0 +1,16 @@
+export function HomeHero() {
+  return (
+    <div
+      style={{
+        top: '-20vh',
+        // transform: `translateX(17.5vw) translateY(-5vh)`,
+      }}
+      className="fixed bottom-0 left-0 right-0 z-30 overflow-hidden"
+    >
+      <img
+        className="object-cover object-right-bottom w-full h-full"
+        src="/hero.png"
+      />
+    </div>
+  );
+}

components/HomeHeroBubble.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
+import { ScreenContext } from '../contexts/screen';
+
+export function HomeHeroBubble() {
+  const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
+
+  return (
+    <div
+      style={{
+        transform:
+          isMobile || isTablet
+            ? 'translateY(-40vh)'
+            : isHuge
+            ? 'translateY(-40vh)'
+            : 'translateY(-50vh)',
+      }}
+      className="absolute bottom-0 z-40 px-10 duration-300"
+    >
+      <div
+        className={classNames(
+          'px-4 py-2  leading-tight  text-base border rounded-lg bg-opacity-90 border-secondary bg-alt front-prompt text-primary',
+          //   isMobile ? 'text-base' : 'text-xl',
+        )}
+      >
+        <p className="mb-1 text-xs text-secondary">OXEN</p>
+        Welcome to Oxen.
+        <br />
+        We know you have questions;
+        <br /> here are the answers.
+      </div>
+    </div>
+  );
+}

components/layout/index.tsx

@@ -17,10 +17,11 @@ export default function Layout({ children }: Props) {
     (state: IState) => state.navigation,
   );
 
-  const marginLeft =
+  const marginLeft = `${
     pageType === PageType.NORMAL && isTablet
       ? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX
-      : 0;
+      : 0
+  }px`;
 
   const mobileMenuOpen =
     (pageType === PageType.BLOG || pageType === PageType.POST) &&
@@ -40,12 +41,13 @@ export default function Layout({ children }: Props) {
         className="flex w-full h-full"
       >
         <SideMenu />
+
         <div
           style={{
-            marginLeft: `${marginLeft}px`,
+            marginLeft,
             filter: `brightness(${mobileMenuOpen ? 0.85 : 1})`,
           }}
-          className="relative w-full h-full overflow-y-auto duration-300 bg-alt"
+          className="relative z-50 w-full h-full overflow-y-auto duration-300"
         >
           {children}
         </div>

components/navigation/DesktopHeader.tsx

@@ -17,6 +17,7 @@ export function DesktopHeader() {
       ref={navBarRef}
       style={{
         height: `${UI.HEADER_HEIGHT_PX}px`,
+        zIndex: UI.Z_INDEX_HEADER,
       }}
       className={classNames(
         'w-full overflow-hidden bg-alt flex items-center border-b border-primary',

pages/[page].tsx

@@ -62,7 +62,7 @@ function Page({ page }: { page: ISplitPage }) {
         <title>{generateTitle(page?.label)}</title>
       </Head>
 
-      <div>
+      <div className="bg-alt">
         <div className="aspect-w-16 aspect-h-10">
           <div className="flex items-center justify-center bg-gradient-to-br from-blush to-hyper">
             <img
@@ -74,7 +74,7 @@ function Page({ page }: { page: ISplitPage }) {
         </div>
 
         <Contained>
-          <h1 className="w-10/12 mt-6 mb-4 text-5xl font-bold leading-none text-primary font-prompt">
+          <h1 className="w-10/12 mt-6 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
             {page?.title}
           </h1>
 

pages/blog/[slug].tsx

@@ -60,7 +60,9 @@ function Post({ post }: { post: IPost }) {
         <title>{generateTitle(post?.title)}</title>
       </Head>
 
-      <Article {...post} />
+      <div className="bg-alt">
+        <Article {...post} />
+      </div>
     </>
   );
 }

pages/blog/index.tsx

@@ -53,7 +53,7 @@ const Blog = ({ posts, tagPosts, tag }: Props) => {
         <title>{generateTitle('Blog')}</title>
       </Head>
 
-      <div className="flex flex-col w-full mt-6 mb-6 space-y-10">
+      <div className="flex flex-col w-full mt-6 mb-6 space-y-10 bg-alt">
         <Contained>
           {!tag && posts.length && <ArticleCardFeature {...featuredPost} />}
 

pages/index.tsx

@@ -1,5 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
+import { HomeHero } from '../components/HomeHero';
+import { HomeHeroBubble } from '../components/HomeHeroBubble';
 import { METADATA } from '../constants';
 
 const Index = () => {
@@ -14,9 +16,9 @@ const Index = () => {
         />
       </Head>
 
-      <div className="absolute inset-0">
-        <img className="object-cover w-full h-full" src="/hero.jpg" />
-      </div>
+      {/* Only visible when no pages are open */}
+      <HomeHero />
+      <HomeHeroBubble />
     </div>
   );
 };