design refinements

components/LayoutWrapper.tsx

@@ -1,3 +1,4 @@
+import Image from '@/components/Image'
 import headerNavLinks from '@/data/headerNavLinks'
 import Link from './Link'
 import SectionContainer from './SectionContainer'
@@ -12,15 +13,23 @@ interface Props {
 const LayoutWrapper = ({ children }: Props) => {
   return (
     <SectionContainer>
+      <Link href="/">
+        <Image
+          src="/static/images/header-banner.jpg"
+          alt="header banner"
+          width="1500px"
+          height="600px"
+        />
+      </Link>
       <div className="flex h-screen flex-col justify-between">
-        <header className="flex items-center justify-between py-6">
+        <header className="flex items-center justify-between">
           <div className="flex items-center text-base sm:w-full">
-            <div className="hidden sm:flex sm:w-full sm:justify-around">
+            <div className="sm:border-y-1 sm:border-l-1 hidden border sm:flex sm:w-full sm:justify-between sm:border-r-0 sm:border-primary-900 sm:text-center">
               {headerNavLinks.map((link) => (
                 <Link
                   key={link.title}
                   href={link.href}
-                  className="p-1 font-bold text-gray-900 hover:text-primary-400 dark:text-gray-100  dark:hover:text-primary-500 sm:p-4"
+                  className="focus:shadow-outline-blue sm:border-r-1 inline border border-transparent bg-primary-600 px-4 py-3 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500 sm:grow sm:border-y-0 sm:border-l-0 sm:border-primary-900 sm:text-center"
                 >
                   {link.title}
                 </Link>

components/MobileNav.tsx

@@ -21,7 +21,7 @@ const MobileNav = () => {
     <div className="sm:hidden">
       <button
         type="button"
-        className="ml-1 mr-1 h-8 w-8 rounded py-1"
+        className="mt-2 ml-1 mr-1 h-8 w-8 rounded py-1"
         aria-label="Toggle Menu"
         onClick={onToggleNav}
       >
@@ -47,7 +47,7 @@ const MobileNav = () => {
         </svg>
       </button>
       <div
-        className={`fixed top-24 right-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
+        className={`fixed right-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
           navShow ? 'translate-x-0' : 'translate-x-full'
         }`}
       >

jsconfig.json

@@ -6,7 +6,8 @@
       "@/data/*": ["data/*"],
       "@/layouts/*": ["layouts/*"],
       "@/lib/*": ["lib/*"],
-      "@/css/*": ["css/*"]
+      "@/css/*": ["css/*"],
+      "@/static/*": ["public/static/*"]
     }
   }
 }

pages/404.tsx

@@ -14,7 +14,7 @@ export default function FourZeroFour() {
         </p>
         <p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
         <Link href="/">
-          <button className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500">
+          <button className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-primary-700 focus:outline-none dark:hover:bg-primary-500">
             Back to homepage
           </button>
         </Link>

tailwind.config.js

@@ -32,10 +32,10 @@ module.exports = {
         sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
       },
       colors: {
-        primary: colors.blueGray,
+        primary: colors.blue,
         //@ts-ignore
         gray: colors.neutral, // TODO: Remove ts-ignore after tw types gets updated to v3
-        blueGray: {
+        blue: {
           DEFAULT: '#7AB5C4',
           50: '#F9FCFC',
           100: '#EBF4F6',

tsconfig.json

@@ -20,7 +20,8 @@
       "@/data/*": ["data/*"],
       "@/layouts/*": ["layouts/*"],
       "@/lib/*": ["lib/*"],
-      "@/css/*": ["css/*"]
+      "@/css/*": ["css/*"],
+      "@/static/*": ["public/static/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],