Home hero positioing

components/HomeHero.tsx

@@ -1,14 +1,21 @@
 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"
+      style={
+        {
+          // transform: `translateX(17.5vw) translateY(-5vh)`,
+        }
+      }
+      className="relative w-full h-full"
     >
       <img
-        className="object-cover object-right-bottom w-full h-full"
+        style={{
+          transform: ``,
+          // Make image expand into sidebar direction
+          direction: 'rtl',
+          minWidth: '100%',
+        }}
+        className="absolute bottom-0 left-0 object-cover h-full transform"
         src="/hero.svg"
       />
     </div>

components/layout/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useContext } from 'react';
+import { useRouter } from 'next/router';
+import React, { ReactNode, useContext, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { UI } from '../../constants';
 import { ScreenContext } from '../../contexts/screen';
@@ -17,6 +18,8 @@ export default function Layout({ children }: Props) {
     (state: IState) => state.navigation,
   );
 
+  const router = useRouter();
+
   const marginLeft = `${
     pageType === PageType.NORMAL && isTablet
       ? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX
@@ -27,6 +30,20 @@ export default function Layout({ children }: Props) {
     (pageType === PageType.BLOG || pageType === PageType.POST) &&
     headerMobileMenuExpanded;
 
+  const ref = useRef<HTMLDivElement>(null);
+  const handleLocationChange = () => {
+    // Reset scroll position
+    ref.current.scrollTo(0, 0);
+  };
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', handleLocationChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleLocationChange);
+    };
+  }, []);
+
   return (
     <div
       style={{ height: '100vh', width: '100%' }}
@@ -43,6 +60,7 @@ export default function Layout({ children }: Props) {
         <SideMenu />
 
         <div
+          ref={ref}
           style={{
             marginLeft,
             filter: `brightness(${mobileMenuOpen ? 0.85 : 1})`,

pages/[page].tsx

@@ -71,6 +71,9 @@ function Page({
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(setPageType(PageType.NORMAL));
+
+    // Reset scroll position
+    window.scrollY = 0;
   }, []);
 
   return (
@@ -99,7 +102,7 @@ function Page({
             </div>
 
             <Contained>
-              <h1 className="w-10/12 mt-6 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
+              <h1 className="w-10/12 mt-12 mb-4 text-4xl font-bold leading-none text-primary font-prompt">
                 {page?.title}
               </h1>
 

pages/blog/index.tsx

@@ -83,7 +83,7 @@ const Blog = (props: Props) => {
         <title>{generateTitle('Blog')}</title>
       </Head>
 
-      <div className="flex flex-col w-full mt-12 mb-6 space-y-10 bg-alt">
+      <div className="flex flex-col w-full mt-12 mb-6 space-y-6 bg-alt">
         <Contained>
           {!tag && posts.length && <ArticleCardFeature {...featuredPost} />}
 
@@ -129,7 +129,7 @@ const Blog = (props: Props) => {
         <Contained>
           <div className="flex justify-center mb-4">
             {showPagination && (
-              <div className="mt-8 mobile:mt-12">
+              <div className="mt-4 mobile:mt-6">
                 <ReactPaginate
                   previousLabel={'<'}
                   nextLabel={'>'}

pages/index.tsx

@@ -25,7 +25,7 @@ const Index = () => {
       </Head>
 
       {/* Only visible when no pages are open */}
-      <div style={{ width: '100vw' }}>
+      <div className="w-full h-full">
         <HomeHero />
         <HomeHeroBubble />
       </div>