improve header mobile

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edgeking810/create-react-app",
+  "name": "proximitydemo",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

src/components/HeaderM.js

@@ -12,23 +12,23 @@ export default function HeaderD({
   const [showSidebar, setShowSidebar] = useState(false);
 
   const headerLinkClasses =
-    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
+    'text-gray-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';
 
   const sidebar = (
-    <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
-      <a className={headerLinkClasses} href="/">
+    <div className="z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed">
+      <a className={headerLinkClasses} href="/about">
         About
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/work">
         Work
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/latest">
         Latest
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/people-and-careers">
         People & Careers
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/contact">
         Contact
       </a>
     </div>
@@ -60,12 +60,12 @@ export default function HeaderD({
   );
 
   return (
-    <div className="h-screen w-full">
-      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
+    <div className="h-80 w-full">
+      <div className="absolute h-12 w-full flex items-center justify-between mt-4 px-4">
         <img
           src={proximity_logo}
           alt="Proximity Logo"
-          className="h-full object-scale-down"
+          className="h-full object-scale-down z-20"
         />
 
         <div className="w-2/5 h-full flex items-center justify-end">
@@ -85,7 +85,7 @@ export default function HeaderD({
             Contact
           </a> */}
 
-          <div className="border h-10 px-2 flex justify-between items-center">
+          <div className="border h-10 px-2 flex justify-between items-center z-20">
             <button
               className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                 currentLanguage === 'en' ? 'font-bold' : ''
@@ -107,34 +107,36 @@ export default function HeaderD({
           <button
             className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
               showSidebar ? 'close' : 'menu'
-            }-fill bg-${
-              showSidebar ? 'red' : 'blue'
-            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
+            }-fill text-gray-${
+              showSidebar ? '900' : '100'
+            } opacity-75 text-3xl font-bold rounded-sm z-40`}
             onClick={() => setShowSidebar((current) => !current)}
           />
         </div>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex items-center justify-center">
-        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
+      <div className="absolute z-10 w-full h-80 flex items-center justify-center">
+        <p className="w-5/6 font-avenirblack text-center text-3xl font-bold text-gray-200">
           We make people
           <br />
           more valuable to brands
         </p>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
+      <div className="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
         <a
           href="#part-one"
           className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
-        />
+        >
+          {' '}
+        </a>
       </div>
 
       {showCookies && cookies}
       {showSidebar && sidebar}
 
       <video
-        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
+        className="h-80 w-full bg-gray-900 z-0 object-cover absolute"
         autoPlay
         loop
         muted

src/components/PartOne.js

@@ -5,7 +5,7 @@ import part1banner from '../assets/images/part-1-banner.png';
 export default function PartOne() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4 sm:my-0 my-8"
       id="part-one"
     >
       <div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">

src/components/PartTwo.js

@@ -5,7 +5,7 @@ import pencil from '../assets/images/pencil.png';
 export default function PartTwo() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
       id="part-two"
     >
       <img

tailwind.config.js

@@ -439,6 +439,10 @@ module.exports = {
       25: '0.25',
       50: '0.5',
       75: '0.75',
+      80: '0.80',
+      85: '0.85',
+      90: '0.90',
+      95: '0.95',
       100: '1',
     },
     order: {