Fix/mobile view

src/layout/BurgerMenu/BurgerMenu.tsx

@@ -16,7 +16,7 @@ const BurgerMenu = ({ isOpen, children }: BurgerMenuProps) => {
       initial="closed"
       variants={variants}
       id="burger_menu"
-      className="flex fixed top-20 left-0 z-10 flex-col justify-center items-center pb-2 w-screen bg-zinc-100 shadow-md lg:hidden"
+      className="flex fixed top-[70px] left-0 z-10 flex-col justify-center items-center py-2 w-screen bg-zinc-100 shadow-md lg:hidden"
     >
       {children}
     </motion.div>

src/layout/GithubCorner/GithubCorner.tsx

@@ -3,7 +3,7 @@ export default function GithubCorner() {
     <a
       href="https://github.com/Ryczko/Employee-pulse"
       target="_blank"
-      className="github-corner"
+      className="hidden small-sm:block github-corner"
       aria-label="View source on GitHub"
       rel="noreferrer"
     >

src/layout/Logo/Logo.tsx

@@ -11,7 +11,7 @@ function Logo({ classNames = '' }: LogoProps) {
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a
         className={clsx(
-          'block ml-14 font-serif text-2xl text-zinc-600 translate-y-[-2px] md:ml-11',
+          'block font-serif text-2xl text-zinc-600 translate-y-[-2px] md:ml-11 small-sm:ml-14',
           classNames
         )}
       >

src/layout/Navigation/Navigation.tsx

@@ -16,7 +16,6 @@ import { useApplicationContext } from 'src/features/application/context';
 import AvatarIcon from '../../../public/images/avatar.svg';
 import GithubCorner from '../GithubCorner/GithubCorner';
 
-
 function Navigation() {
   const { user, loading, displayName } = useApplicationContext();
 
@@ -35,7 +34,11 @@ function Navigation() {
     <nav className="flex fixed z-10 items-center  w-full h-[70px] bg-zinc-100 border-b border-neutral-200">
       <GithubCorner />
 
-      <div className="flex grow justify-between items-center px-4 md:px-8">
+      <div
+        className={`flex grow ${
+          user ? 'justify-between' : 'justify-center small-sm:justify-between'
+        } items-center px-4 md:px-8`}
+      >
         <Logo />
         {!loading && user ? (
           <div className="flex md:space-x-4">
@@ -112,7 +115,10 @@ function Navigation() {
           </div>
         ) : (
           <Link href={'/login'} passHref>
-            <ButtonLink variant={ButtonVariant.OUTLINE_PRIMARY}>
+            <ButtonLink
+              className="hidden px-4 sm:px-6 small-sm:block"
+              variant={ButtonVariant.OUTLINE_PRIMARY}
+            >
               Sign In
             </ButtonLink>
           </Link>

src/layout/PageLayout.tsx

@@ -16,7 +16,7 @@ function PageLayout({ children }: PageLayoutProps) {
     <>
       <AnimatePresence>{loading && <GlobalLoader />}</AnimatePresence>
       <Navigation />
-      <div className="overflow-hidden px-6 pt-32 m-auto min-h-screen sm:px-4">
+      <div className="overflow-hidden px-6 pt-24 m-auto mb-8 min-h-full sm:px-4 md:pt-32">
         <Background />
         <AnimatePresence exitBeforeEnter initial={false}>
           {children}

src/pages/index.tsx

@@ -18,7 +18,7 @@ function IndexPage() {
       <div className="flex overflow-hidden flex-col">
         <section className="relative">
           <div className="px-4 mx-auto max-w-6xl sm:px-6">
-            <div className="pt-32 pb-12 md:pt-40 md:pb-20">
+            <div className="pt-28 pb-12 md:pt-40 md:pb-20 md:32">
               <div className="pb-12 text-center md:pb-16">
                 <h1 className="mb-4 text-4xl font-extrabold tracking-tighter md:text-6xl leading-tighter">
                   How are you&nbsp;

src/shared/components/Header/Header.tsx

@@ -4,7 +4,7 @@ interface HeaderProps {
 
 export default function Header({ children }: HeaderProps) {
   return (
-    <h1 className="pb-8 mx-auto max-w-4xl text-3xl font-bold text-center md:text-4xl">
+    <h1 className="pb-8 mx-auto max-w-4xl text-2xl font-bold text-center md:text-4xl">
       {children}
     </h1>
   );

tailwind.config.js

@@ -9,6 +9,9 @@ module.exports = {
         display: ['Montserrat', 'system-ui', 'sans-serif'],
         body: ['Montserrat', 'system-ui', 'sans-serif'],
       },
+      screens: {
+        'small-sm': '370px',
+      },
     },
   },
   plugins: [],