From ea1634d2937163fe9cb30e6a6776b7ed77853d67 Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Wed, 28 Feb 2024 10:35:12 +0100
Subject: [PATCH] newsletter form page and submit tool form steps

---
 components/EditorNav.js                       |  6 +-
 components/MiniEditor/MiniEditor.js           |  6 +-
 components/navbar-menu-mobile.js              |  5 ++
 components/newsletter/IssueList.js            |  6 +-
 components/newsletter/SignupHomepage.js       | 67 +++++++++---------
 components/people/ProfilePageLayout.js        |  8 +--
 components/sign-in/LoginForm.jsx              |  4 +-
 components/sign-in/LoginSide.jsx              |  6 +-
 .../toolbox/forms/DescriptionExcerptForm.js   | 13 ++--
 components/toolbox/forms/MediaForm.js         |  8 +--
 components/toolbox/forms/TitleLinkForm.js     | 21 +++---
 components/toolbox/forms/TitleLinkFormEdit.js | 20 +++---
 components/user/AccountNavigation.js          |  8 +--
 components/v4/section/NewsletterPageHero.js   | 42 +++++++++++
 components/v4/section/NewsletterSection.js    |  2 +-
 locales/en-US.js                              |  2 +-
 pages/newsletter/index.js                     | 44 ++++++++----
 pages/newsletter/page/[pageNo].js             | 56 +++++++++------
 pages/toolbox/post/[id]/edit.js               |  6 +-
 pages/toolbox/post/[id]/index.js              | 68 ++++++++++++------
 pages/toolbox/post/index.js                   | 70 +++++++++----------
 21 files changed, 293 insertions(+), 175 deletions(-)
 create mode 100644 components/v4/section/NewsletterPageHero.js

diff --git a/components/EditorNav.js b/components/EditorNav.js
index 87316afe..16d046c2 100644
--- a/components/EditorNav.js
+++ b/components/EditorNav.js
@@ -77,10 +77,10 @@ export default function EditorNav({ editorInstance,showWriteButton,activeNav, ed
     <div
       id="main-nav"
       as="nav"
-      className={`bg-white fixed w-full top-0 border-b border-1 border-gray-100 backdrop-blur`}
+      className={`bg-white z-50 fixed w-full top-0 border-b border-1 shadow-sm border-gray-100`}
       style={{
-        background: `rgba(255, 255, 255, ${0.9})`,
-        zIndex:99
+        // background: `rgba(255, 255, 255, ${0.9})`,
+        // zIndex:99
       }}
     >
       <>
diff --git a/components/MiniEditor/MiniEditor.js b/components/MiniEditor/MiniEditor.js
index 8cec5865..484f983c 100644
--- a/components/MiniEditor/MiniEditor.js
+++ b/components/MiniEditor/MiniEditor.js
@@ -9,7 +9,7 @@ import Link from '@tiptap/extension-link'
 
 import MenuBar from './MenuBar';
 
-export default ({setDescription, initialContent='', height=250, placeholder, disabled}) => {
+export default ({setDescription, initialContent='', height=250, placeholder, disabled, showToolbar}) => {
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -35,8 +35,8 @@ export default ({setDescription, initialContent='', height=250, placeholder, dis
   })
 
   return (
-    <div className="border blog-content border-gray-300 pt-12 rounded-lg py-4 relative -mt-2">
-      <MenuBar editor={editor} />
+    <div className={`${showToolbar!==false?'pt-12 py-4':''} border border-gray-300 rounded-lg relative -mt-2`}>
+     {showToolbar!==false? <MenuBar editor={editor} />:''}
       <div style={{minHeight:height,maxHeight:400}} className="pt-4 px-5 overflow-auto">
         <EditorContent disabled={disabled} editor={editor} />
       </div>
diff --git a/components/navbar-menu-mobile.js b/components/navbar-menu-mobile.js
index 2867798a..fb286768 100644
--- a/components/navbar-menu-mobile.js
+++ b/components/navbar-menu-mobile.js
@@ -195,7 +195,12 @@ export const NavigationMenuDemo = ({
             <div className="bg-gray-200 hover:shadow border border-1 ml-2 rounded-full my-auto w-8 h-8 cursor-pointer"></div>
           ) : (
             <NavigationMenuButton href="/newsletter">
+              <div className="flex">
+              hi
+              <div>
               {intl.formatMessage({ id: "navbar.menu.title4" })}
+              </div>
+              </div>
             </NavigationMenuButton>
           )}
           <div className="ml-3">
diff --git a/components/newsletter/IssueList.js b/components/newsletter/IssueList.js
index 14aa8811..de18ec1e 100644
--- a/components/newsletter/IssueList.js
+++ b/components/newsletter/IssueList.js
@@ -2,12 +2,12 @@ import React from "react";
 import dynamic from "next/dynamic";
 const IssueItem = dynamic(() => import("@/components/newsletter/IssueItem"));
 import { useIntl } from 'react-intl';
-export default function IssueList({ posts = [], marginTop }) {
+export default function IssueList({ posts = [], marginTop ,currentPage}) {
   const intl = useIntl();
   return (
-    <section className={`pt-2 px-3 xl:px-0 ${!marginTop?'':marginTop}`}>
+    <section className={`pt-2 px-3 xl:px-6 ${!marginTop?'':marginTop}`}>
       <h2 className="font-medium font-semibold text-xl text-title-1 mb-6">
-        {intl.formatMessage({ id: "newsletter.issue" })}
+        {currentPage?`Page ${currentPage}`:intl.formatMessage({ id: "newsletter.issue" })}
       </h2>
       <div className="grid lg:grid-cols-2 grid-cols-1 gap-10 mb-20">
         {
diff --git a/components/newsletter/SignupHomepage.js b/components/newsletter/SignupHomepage.js
index 64f66a29..29c43da2 100644
--- a/components/newsletter/SignupHomepage.js
+++ b/components/newsletter/SignupHomepage.js
@@ -94,33 +94,38 @@ function HookForm(props) {
   return (
     <div>
       <form className={`${props.className}`} onSubmit={handleSubmit(onSubmit)}>
-        <div className="sm:flex-1 sm:max-w-sm w-full">
-          <label htmlFor="Email" className="sr-only	">
-            <FormattedMessage id="intro.input.placeholder" />
-          </label>
-          <input
-            id="Email"
-            //   type="text"
-            placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
-            {...register("emailRequired", {
-              required: true,
-              pattern: /^\S+@\S+$/i,
-            })}
-            className="w-full max-w-sm p-3 py-2.5 rounded-2xl mb-4 border border-1 border-blue-600"
-          ></input>
-          {/* <input
-            id="Email"
-            style={{ fontSize: ".875rem" }}
-            type="text"
-            placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
-            name="email"
-            {...register("emailRequired", {
-              required: true,
-              pattern: /^\S+@\S+$/i,
-            })}
-            // ref={...register({ required: true, pattern: /^\S+@\S+$/i })}
-            className="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"
-          /> */}
+        <div className="flex mb-4">  
+          <div className="mr-3 max-w-sm w-full">
+            <label htmlFor="Email" className="sr-only	">
+              <FormattedMessage id="intro.input.placeholder" />
+            </label>
+            <input
+              id="Email"
+              //   type="text"
+              placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
+              {...register("emailRequired", {
+                required: true,
+                pattern: /^\S+@\S+$/i,
+              })}
+              className="w-full max-w-sm p-3 py-2.5 rounded-full border border-1 border-blue-600"
+            ></input>
+            {/* <input
+              id="Email"
+              style={{ fontSize: ".875rem" }}
+              type="text"
+              placeholder={intl.formatMessage({ id: "intro.input.placeholder" })}
+              name="email"
+              {...register("emailRequired", {
+                required: true,
+                pattern: /^\S+@\S+$/i,
+              })}
+              // ref={...register({ required: true, pattern: /^\S+@\S+$/i })}
+              className="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"
+            /> */}
+          </div>
+          <Button className="rounded-full flex-none px-5 font-medium py-3 leading-none bg-blue-600 hover:bg-blue-500" variant={"confirmBig"}>
+          Subscribe
+          </Button>
         </div>
         {/* <input type="checkbox" placeholder="Consent" name="consent" ref={register({ required: true })} /> */}
         {errors.consent && errors.consent.type === "required" && (
@@ -139,19 +144,17 @@ function HookForm(props) {
           />
         </div>
         {/* <div className="flex flex-col ml-2"> */}
-        <Button className="rounded-full px-5 font-medium py-3 leading-none bg-blue-600 hover:bg-blue-500" variant={"confirmBig"}>
-          Sign up
-        </Button>
+       
         {/* </div> */}
       </form>
       <div className=" w-10/12 font-inter">
         {errors.emailRequired && errors.emailRequired.type === "required" && (
-          <p className="text-white text-sm mt-2 text-left px-4 py-3 bg-red-400 border rounded-xl">
+          <p className="text-red-700 text-sm mt-2 text-left px-4 w-fit py-3 bg-red-100 rounded-xl">
             <FormattedMessage id="signup.input.validation" />
           </p>
         )}
         {errors.emailRequired && errors.emailRequired.type === "pattern" && (
-          <p className="text-white text-sm mt-2 text-left px-4 py-3 bg-red-400 border rounded-xl">
+          <p className="text-red-700 text-sm mt-2 text-left w-fit px-4 py-3 bg-red-100 rounded-xl">
             <FormattedMessage id="signup.input.error" />
           </p>
         )}
diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
index 5b383419..da860c26 100644
--- a/components/people/ProfilePageLayout.js
+++ b/components/people/ProfilePageLayout.js
@@ -126,12 +126,12 @@ const ProfilePageLayout = ({
                 </div>
                 <div className="flex flex-col z-20 relative justify-center">
                   <h1 className="text-2xl font-semibold leading-normal text-black/90">
-                      {`${author?.firstName ? author?.firstName:''} ${author?.lastName ? author?.lastName:''}
-                      ${(!author?.firstName && !author?.lastName) ? author?.name:''}`}
+                      {`${author?.firstName ? author?.firstName:'New'} ${author?.lastName ? author?.lastName:'User'}
+                      ${((!author?.firstName && !author?.lastName) && author?.name) ? author?.name:''}`}
                       </h1>
-                      {author.role && (
+                      {author.bio && (
                         <h3 className="text-lg mb-3 font-normal leading-normal text-black/80">
-                          {author.role}
+                          {author.bio?author.bio:'No description'}
                         </h3>
                       )} 
                       {/* TAGS (no point showing them) */}
diff --git a/components/sign-in/LoginForm.jsx b/components/sign-in/LoginForm.jsx
index 6895fb6a..8ac58ca4 100644
--- a/components/sign-in/LoginForm.jsx
+++ b/components/sign-in/LoginForm.jsx
@@ -62,7 +62,7 @@ return(
     </p>
     <p className="my-4 mb-8">
 
-    Prototypr content is open to all, but only invited members can publish. Get an invite from current members or submit an application form to <span className="text-underline">join as a contributor</span>.
+    Prototypr content is open to all, but only invited members can create posts. Get an invite from current members or submit an application form to <span className="text-underline">join as a creator</span>.
     </p>
     {/* <div className="max-w-[90%] md:max-w-[340px] flex flex-col"> */}
     {showInputForm == false ? (
@@ -78,7 +78,7 @@ return(
           <div className="flex text-white">
              <TicketIcon/>
           <div className="ml-2.5 my-auto text-base inline-block ">
-           Join with Invite Code
+           Join with an invite
           </div>
           </div>
         </Button>
diff --git a/components/sign-in/LoginSide.jsx b/components/sign-in/LoginSide.jsx
index 343df882..3c547fc5 100644
--- a/components/sign-in/LoginSide.jsx
+++ b/components/sign-in/LoginSide.jsx
@@ -1,5 +1,5 @@
 import {Sparkle} from 'phosphor-react'
-const LoginSide = ({ user, title }) => {
+const LoginSide = ({ user, title, showArrow }) => {
   return (
     <div className="flex flex-col w-full h-full relative">
      
@@ -7,9 +7,9 @@ const LoginSide = ({ user, title }) => {
        {/* <img src='/static/images/toolbox/squares.svg' className="opacity-20 absolute w-full h-full object-cover top-0 left-0"/> */}
       <div className="z-10 relative max-w-[420px] -mt-4 mx-auto flex flex-col h-full justify-center">
         <div className="relative">
-        <svg className="absolute left-0 -scale-x-100 -ml-[18vw] bottom-0 -mb-[240px]"width="360" height="323" viewBox="0 0 360 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {showArrow!==false?<svg className="absolute left-0 -scale-x-100 -ml-[18vw] bottom-0 -mb-[240px]"width="360" height="323" viewBox="0 0 360 323" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M341.516 142.568C342.382 141.155 344.229 140.711 345.641 141.576C347.054 142.442 347.499 144.288 346.633 145.701L341.516 142.568ZM155.689 135L155.559 132.003L155.56 132.003L155.689 135ZM194.721 237.947L192.649 235.778L192.649 235.778L194.721 237.947ZM27.6653 119.144C27.5385 117.492 28.7748 116.05 30.4268 115.923C32.0788 115.796 33.5209 117.033 33.6477 118.685L27.6653 119.144ZM352.818 167.075C353.097 168.708 352 170.259 350.367 170.538C348.734 170.818 347.184 169.721 346.904 168.088L352.818 167.075ZM345.502 142.138L345.376 139.141C346.884 139.078 348.204 140.144 348.458 141.632L345.502 142.138ZM319.376 145.693C317.723 145.591 316.465 144.167 316.568 142.513C316.67 140.86 318.094 139.602 319.748 139.705L319.376 145.693ZM344.075 144.135C346.633 145.701 346.633 145.703 346.632 145.704C346.631 145.705 346.63 145.707 346.628 145.709C346.626 145.713 346.622 145.719 346.618 145.727C346.609 145.741 346.596 145.762 346.579 145.789C346.546 145.843 346.497 145.922 346.433 146.024C346.305 146.228 346.116 146.527 345.868 146.914C345.372 147.688 344.639 148.813 343.681 150.235C341.764 153.079 338.945 157.11 335.318 161.891C328.069 171.446 317.567 184.027 304.568 196.095C278.707 220.107 242.254 242.724 201.587 234.031L202.841 228.164C240.527 236.22 275.005 215.356 300.486 191.698C313.158 179.933 323.43 167.633 330.538 158.265C334.089 153.584 336.843 149.645 338.705 146.882C339.636 145.5 340.344 144.414 340.817 143.676C341.053 143.308 341.23 143.027 341.348 142.84C341.406 142.746 341.45 142.676 341.478 142.631C341.492 142.608 341.502 142.591 341.509 142.581C341.512 142.575 341.514 142.572 341.515 142.57C341.516 142.569 341.516 142.568 341.517 142.568C341.517 142.568 341.516 142.568 344.075 144.135ZM201.587 234.031C161.406 225.442 140.343 201.031 133.935 178.13C130.75 166.748 131.165 155.626 134.847 147.094C138.569 138.47 145.709 132.431 155.559 132.003L155.819 137.998C148.675 138.308 143.34 142.556 140.356 149.471C137.332 156.478 136.812 166.148 139.713 176.513C145.475 197.103 164.669 220.004 202.841 228.164L201.587 234.031ZM155.56 132.003C164.977 131.597 175.008 135.675 183.937 142.307C192.906 148.97 201.033 158.401 206.67 169.197C217.963 190.825 219.443 218.488 196.793 240.117L192.649 235.778C212.832 216.504 211.787 191.96 201.352 171.974C196.125 161.964 188.587 153.236 180.359 147.124C172.09 140.982 163.392 137.671 155.818 137.998L155.56 132.003ZM196.793 240.117C185.254 251.138 169.106 254.764 151.7 252.797C134.298 250.831 115.357 243.264 97.6766 231.503C62.3528 208.004 31.3613 167.269 27.6653 119.144L33.6477 118.685C37.1683 164.525 66.8 203.756 101 226.507C118.081 237.87 136.127 244.999 152.374 246.835C168.617 248.671 182.779 245.205 192.649 235.778L196.793 240.117ZM346.904 168.088L342.545 142.645L348.458 141.632L352.818 167.075L346.904 168.088ZM345.502 142.138C345.627 145.136 345.627 145.136 345.627 145.136C345.627 145.136 345.626 145.136 345.626 145.136C345.625 145.136 345.624 145.136 345.623 145.136C345.62 145.136 345.617 145.136 345.611 145.136C345.601 145.137 345.586 145.137 345.566 145.138C345.526 145.14 345.467 145.142 345.389 145.146C345.234 145.152 345.006 145.161 344.715 145.173C344.133 145.196 343.295 145.229 342.275 145.268C340.234 145.345 337.459 145.445 334.524 145.535C328.738 145.713 322.083 145.861 319.376 145.693L319.748 139.705C322.108 139.851 328.423 139.719 334.34 139.538C337.256 139.448 340.016 139.349 342.048 139.272C343.063 139.234 343.896 139.201 344.475 139.178C344.764 139.166 344.99 139.157 345.143 139.151C345.219 139.148 345.278 139.145 345.317 139.143C345.337 139.143 345.352 139.142 345.361 139.142C345.366 139.141 345.37 139.141 345.372 139.141C345.374 139.141 345.375 139.141 345.375 139.141C345.375 139.141 345.376 139.141 345.376 139.141C345.376 139.141 345.376 139.141 345.502 142.138Z" fill="#3EA7F3"/>
-</svg>
+</svg>:null}
           {/* <a href="/"> */}
               <Sparkle size={44}/>
             {/* <div className="w-16 h-16 p-4 bg-white rounded-2xl">
diff --git a/components/toolbox/forms/DescriptionExcerptForm.js b/components/toolbox/forms/DescriptionExcerptForm.js
index 5802f11c..49e4e862 100644
--- a/components/toolbox/forms/DescriptionExcerptForm.js
+++ b/components/toolbox/forms/DescriptionExcerptForm.js
@@ -117,11 +117,11 @@ const [disabled, setDisabled] = useState(false);
     return(
         <div className="max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6 ">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Add your description</h1>
+            <h1 className="text-2xl font-semibold mx-auto mb-2">Add your description</h1>
             <p className="text-gray-600">Write a longer description, and a short excerpt.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-6"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -141,7 +141,7 @@ const [disabled, setDisabled] = useState(false);
                 </label>
                 <div className="bg-white rounded-xl">
                     <MiniEditor
-                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: 🤑 Stripe payments, 📊 Google Sheets, ✍️ Blogging (beta), and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
+                    placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: Stripe payments, Google Sheets, blogging, and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
                     title=""
                     initialContent={content?content:''}
                     disabled={isSubmitting}
@@ -153,11 +153,12 @@ const [disabled, setDisabled] = useState(false);
                 {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
 
                 <label className="text-md font-medium mt-4">
-                  Excerpt
+                  Tagline
                 </label>
                 <div className="bg-white rounded-xl">
                     <MiniEditor
-                    height={100}
+                    height={84}
+                    showToolbar={false}
                     initialContent={excerpt?excerpt:''} 
                     title=""
                     disabled={isSubmitting}
@@ -176,7 +177,7 @@ const [disabled, setDisabled] = useState(false);
                 variant={"confirmMedium"}
                 type="submit"
                 disabled={isSubmitting}
-                className="disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
                 <div className="mx-auto w-[100px] flex justify-center">
diff --git a/components/toolbox/forms/MediaForm.js b/components/toolbox/forms/MediaForm.js
index 24d0f623..8927649b 100644
--- a/components/toolbox/forms/MediaForm.js
+++ b/components/toolbox/forms/MediaForm.js
@@ -208,11 +208,11 @@ const [disabled, setDisabled] = useState(false);
     return(
         <div className="max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Add media</h1>
+            <h1 className="text-2xl font-semibold mx-auto mb-2">Add media</h1>
             <p className="text-gray-600">Upload your logo and multiple gallery images.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-6"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -270,14 +270,14 @@ const [disabled, setDisabled] = useState(false);
                 variant={"confirmMedium"}
                 type="submit"
                 disabled={isSubmitting}
-                className="p-4 bg-blue-700 text-white font-semibold rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
                 <div className="mx-auto w-5">
                 <Spinner size="sm" className="text-black" />
                 </div>
                 :
-                `Save and Continue`}
+                `Save and Submit`}
                 </Button>
                 <div
                 onClick={onPrevious}
diff --git a/components/toolbox/forms/TitleLinkForm.js b/components/toolbox/forms/TitleLinkForm.js
index ceabcc5c..7016534e 100644
--- a/components/toolbox/forms/TitleLinkForm.js
+++ b/components/toolbox/forms/TitleLinkForm.js
@@ -23,7 +23,7 @@ function isEmptyObject(obj) {
 
   const styles = {
     input:
-      "w-full px-3 max-w-2xl  bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
+      "w-full text-base px-3 max-w-2xl  bg-white text-black font-normal rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
     inputFlex:
       "px-3 bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
     label: "text-md font-medium uppercase text-gray-700 font-semibold",
@@ -38,7 +38,7 @@ const TitleLinkForm = ({user, edit}) =>{
     const [isSubmitting, setIsSubmitting] = useState(false)
 
   const FormSchema = Yup.object().shape({
-    title: Yup.string().required("Title is required"),
+    title: Yup.string().required("Name is required"),
     link: Yup.string().required("Link is required"),
   });
 
@@ -144,14 +144,15 @@ const [disabled, setDisabled] = useState(false);
 
 
     return(
-        <div className="flex justify-center pt-3 w-full h-full px-2 sm:px-6 lg:px-10">
-        <div className="max-w-2xl pt-24 w-full">
+        <div className="flex justify-start pt-3 w-full h-full px-2 px-8 lg:pl-16 2xl:pl-32 lg:px-10">
+        <div className="max-w-2xl pt-28 w-full">
             <div className="my-2 mb-6 ">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Post a Tool</h1>
-            <p className="text-gray-600">Start with the link and title.</p>
+            <h1 className="text-4xl font-semibold mx-auto mb-3">Post a tool</h1>
+            {/* <p className="text-gray-600">As a selected contributor, you're invited to submit tools and resources to the Prototypr Toolbox. Whether a fresh discovery or your own creation, this is the chance to bring more visibility and discoverability to your product across the web and our newsletter.</p> */}
+            <p className="text-gray-600">As a chosen contributor, you can submit tools and resources to the Prototypr Toolbox to enhance your product's visibility across the web and via our newsletter. Whether it's a new find or your own creation, seize this opportunity for greater exposure.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-12"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -166,7 +167,7 @@ const [disabled, setDisabled] = useState(false);
         >
             <FormContainer>
             <div className="flex flex-col mx-auto gap-5 max-w-2xl  w-auto">
-            <FormInput id="title" label="Title" error={formik.errors}>
+            <FormInput id="title" label="Name" error={formik.errors}>
                 <input
                 id="title"
                 disabled={isSubmitting}
@@ -195,14 +196,14 @@ const [disabled, setDisabled] = useState(false);
                 />
             </FormInput>
             </div>
-            <div className="flex flex-col mx-auto max-w-2xl mt-12 w-auto"/>
+            <div className="flex flex-col mx-auto max-w-2xl mt-8 w-auto"/>
 
                 
                 <Button
                 variant={"confirmBig"}
                 type="submit"
                 disabled={isSubmitting}
-                className="p-4 bg-blue-700 text-white font-semibold rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
                 <div className="mx-auto w-6">
diff --git a/components/toolbox/forms/TitleLinkFormEdit.js b/components/toolbox/forms/TitleLinkFormEdit.js
index 0ddf03c2..ef66ea73 100644
--- a/components/toolbox/forms/TitleLinkFormEdit.js
+++ b/components/toolbox/forms/TitleLinkFormEdit.js
@@ -108,13 +108,14 @@ const [disabled, setDisabled] = useState(false);
 
 
     return(
-        <div className="max-w-2xl pt-6 pb-20 w-full">
-            <div className="my-2 mb-6 ">
-            <h1 className="text-2xl font-bold mx-auto mb-2">Update your tool</h1>
+      <div className="flex justify-start pt-3 w-full h-full">
+      <div className="max-w-2xl pt-3 w-full">
+          <div className="my-2 mb-6 ">
+          <h1 className="text-4xl font-semibold mx-auto mb-3">Update tool</h1>
             <p className="text-gray-600">Make changes to the title and link.</p>
             </div>
             <form
-            className="p-8 shadow-sm bg-white rounded-xl"
+            className="mt-12"
             onSubmit={(e) => {
             e.preventDefault();
             if ((errors && isEmptyObject(errors)) || !errors) {
@@ -149,7 +150,7 @@ const [disabled, setDisabled] = useState(false);
                 <input
                     id="link"
                     name="link"
-                    type="text"
+                    type="url"
                     disabled={isSubmitting}
                     onChange={formik.handleChange}
                     value={formik.values.link}
@@ -165,18 +166,21 @@ const [disabled, setDisabled] = useState(false);
                 variant="confirmMedium"
                 type="submit"
                 disabled={isSubmitting}
+                className="p-4 bg-blue-700 text-white font-semibold rounded-full disabled:bg-gray-300 disabled:cursor-not-allowed"
                 // className="p-4 font-semibold disabled:bg-gray-300 disabled:cursor-not-allowed"
                 >
                 {isSubmitting?
-                <div className="mx-auto w-6">
-                <Spinner />
-                </div>
+                <>Saving...</>
+                // <div className="mx-auto w-6">
+                // <Spinner />
+                // </div>
                 :
                 `Continue`}
                 </Button>
             </FormContainer>
         </form>
         </div>
+        </div>
     )
 }
 
diff --git a/components/user/AccountNavigation.js b/components/user/AccountNavigation.js
index e1202b2b..646a2e36 100644
--- a/components/user/AccountNavigation.js
+++ b/components/user/AccountNavigation.js
@@ -8,7 +8,7 @@ const AccountNavigation = ({activeTab}) =>{
 
         <Link href="/account" className='mb-2'>
         <div className={"text-gray-700 "}>
-          <div className={`${activeTab==1?"bg-blue-100 font-semibold text-blue-900":'hover:bg-gray-100'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
+          <div className={`${activeTab==1?"bg-blue-100 font-semibold text-blue-900":'hover:bg-blue-100/80'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
             <div className="flex justify-start">
             {/* <svg className="w-4 h-4 mr-3 my-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 20V4H4v15a1 1 0 0 0 1 1h11zm3 2H5a3 3 0 0 1-3-3V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7h4v9a3 3 0 0 1-3 3zm-1-10v7a1 1 0 0 0 2 0v-7h-2zM6 6h6v6H6V6zm2 2v2h2V8H8zm-2 5h8v2H6v-2zm0 3h8v2H6v-2z" fill="currentColor"/></svg> */}
             <User size={18}  className='mr-3'/>
@@ -19,7 +19,7 @@ const AccountNavigation = ({activeTab}) =>{
         </Link>
         <Link href="/account/topics" className='mb-2'>
         <div className={"text-gray-700"}>
-        <div className={`${activeTab==2?"bg-blue-100 font-semibold text-blue-900":'hover:bg-gray-100'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
+        <div className={`${activeTab==2?"bg-blue-100 font-semibold text-blue-900":'hover:bg-blue-100/80'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
             <div className="flex justify-start">
             {/* <svg className="w-4 h-4 mr-3 my-auto"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2V4H5v16h14zM8 9h8v2H8V9zm0 4h8v2H8v-2z" fill="currentColor"/></svg> */}
             <FolderPlus size={18}  className='mr-3'/>
@@ -30,7 +30,7 @@ const AccountNavigation = ({activeTab}) =>{
         </Link>
         <Link href="/account/interests" className='mb-2'>
         <div className={"text-gray-700"}>
-        <div className={`${activeTab==3?"bg-blue-100 font-semibold text-blue-900":'hover:bg-gray-100'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
+        <div className={`${activeTab==3?"bg-blue-100 font-semibold text-blue-900":'hover:bg-blue-100/80'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
             <div className="flex justify-start">
             {/* <svg className="w-4 h-4 mr-3 my-auto"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2V4H5v16h14zM8 9h8v2H8V9zm0 4h8v2H8v-2z" fill="currentColor"/></svg> */}
             <ListChecks size={18}  className='mr-3'/>
@@ -41,7 +41,7 @@ const AccountNavigation = ({activeTab}) =>{
         </Link>
         <Link href="/account/newsletters" className='mb-2'>
         <div className={"text-gray-700"}>
-        <div className={`${activeTab==4?"bg-blue-100 font-semibold text-blue-900":'hover:bg-gray-100'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
+        <div className={`${activeTab==4?"bg-blue-100 font-semibold text-blue-900":'hover:bg-blue-100/80'} flex justify-start p-2.5 px-4 rounded-xl text-sm cursor-pointer w-full`}>
             <div className="flex justify-start">
             <Envelope size={18}  className='mr-3'/>
             {/* <svg className="w-4 h-4 mr-3 my-auto"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2V4H5v16h14zM8 9h8v2H8V9zm0 4h8v2H8v-2z" fill="currentColor"/></svg> */}
diff --git a/components/v4/section/NewsletterPageHero.js b/components/v4/section/NewsletterPageHero.js
new file mode 100644
index 00000000..6e85bc61
--- /dev/null
+++ b/components/v4/section/NewsletterPageHero.js
@@ -0,0 +1,42 @@
+import Container  from "@/components/container"
+import SignupHomepage from "@/components/newsletter/SignupHomepage"
+
+const NewsletterPageHero = ({title,padding}) =>{
+
+    return(
+        <Container padding={padding} maxWidth="max-w-[1320px]">
+            <div className="lg:px-0 lg:mt-0">
+            <div
+            className="w-full relative flex h-full w-full rounded-3xl p-6 pt-8"
+            >
+            <div className="z-20 max-w-md xl:max-w-full">
+                <h3 className="text-4xl lg:text-5xl mb-10 leading-snug font-inter text-black/90 font-semibold">{title?title:<>
+                    Weekly tools and stories to <br className="hidden xl:block"/> shape <div className="text-underline inline">every idea</div>
+                </>}</h3>
+                <SignupHomepage/>
+                <p className="font-inter mb-4 mt-10 text-lg text-gray-900 text-opacity-80 max-w-xl">Join <span className="text-black/80 bg-indigo-200/70">25,000+ creatives</span> and receive our carefully curated digest of stories, tools and links, delivered to your inbox:</p>
+                <p className="text-lg text-gray-900/80">
+                    <ul className="list-disc pl-10">
+                        <li className="mt-2.5">Top articles of the week</li>
+                        <li className="mt-2.5">The best tools, apps and resources</li>
+                        <li className="mt-2.5">Thought-provoking interviews</li>
+                        <li className="mt-2.5">Carefully curated by humans</li>
+                    </ul>
+                </p>
+            </div>
+            {/* <img src='/static/images/toolbox/squares.svg' className="rounded-3xl opacity absolute w-full h-full object-cover top-0 left-0"/> */}
+            <div>
+            <img
+                className="z-30 hidden 2md:block sm:w-[200px] drop-shadow-lg 2md:w-[304px] lg:w-[400px] top-0 absolute right-0 xl:mr-32"
+                src={
+                    "https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c8452fffe5ddee55705e7e9de63b47e7.png"
+                }
+                />
+            </div>
+            </div>
+            </div>
+        </Container>
+    )
+}
+
+export default NewsletterPageHero
\ No newline at end of file
diff --git a/components/v4/section/NewsletterSection.js b/components/v4/section/NewsletterSection.js
index 592f0fe8..a903e9ba 100644
--- a/components/v4/section/NewsletterSection.js
+++ b/components/v4/section/NewsletterSection.js
@@ -19,7 +19,7 @@ const NewsletterSection = ({title,padding}) =>{
             <img src='/static/images/toolbox/squares.svg' className="rounded-3xl opacity absolute w-full h-full object-cover top-0 left-0"/>
             <div>
             <img
-                className="hidden sm:block sm:w-[220px] 2md:w-[344px] lg:w-[350px] top-0 mt-8 md:-mt-6 absolute right-0 xl:mr-32"
+                className="hidden sm:block sm:w-[220px] 2md:w-[300px] lg:w-[300px] top-0 mt-8 md:-mt-6 absolute right-0 xl:mr-32"
                 src={
                     "https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7432cc558c73394df5d2c21a3ee18cd5.png?updated_at=2022-12-14T17:59:46.805Z"
                 }
diff --git a/locales/en-US.js b/locales/en-US.js
index f482866e..814dbb14 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -17,7 +17,7 @@ const EN = {
   "signup.input.click":
     "Click the activation link in the email we just sent you, and add hello@prototypr.io to your address list so you don't miss the newsletter.",
   "signup.button.submitting": "Submitting",
-  "intro.button.updates": "Sign up",
+  "intro.button.updates": "Subscribe",
   "intro.description": "Open source. Free to all. No paywall.",
   "intro.link": "Learn about Prototypr",
   "navbar.home": "Home",
diff --git a/pages/newsletter/index.js b/pages/newsletter/index.js
index 0270d90c..d395814e 100644
--- a/pages/newsletter/index.js
+++ b/pages/newsletter/index.js
@@ -11,6 +11,8 @@ const SourcePanel = dynamic(() => import("@/components/new-index/SourcePanel"));
 const IssueList = dynamic(() => import("@/components/newsletter/IssueList"));
 const NewPagination = dynamic(() => import("@/components/pagination"));
 import { useIntl } from "react-intl";
+import NewsletterSection from "@/components/v4/section/NewsletterSection";
+import NewsletterPageHero from "@/components/v4/section/NewsletterPageHero";
 const PAGE_SIZE = 8;
 
 export default function NewsLetter({
@@ -26,29 +28,45 @@ export default function NewsLetter({
   };
   return (
     <>
-      <Layout preview={preview}>
+      <Layout preview={preview}
+       padding={false}
+       maxWidth={"max-w-[1400px] search-wide"}
+      >
         <Head>
           <title>
             {intl.formatMessage({ id: "index.header.title" })}
             👾.
           </title>
         </Head>
-        <Container maxWidth={'max-w-[986px] pt-3'}>
+        <Container maxWidth="relative mb-6 px-0" padding={false}>
           {/* <TitleBlock /> */}
-          <div>
-            <SourcePanel
+          <div className="relative bg-white -mt-[96px] pt-[86px] md:pt-[96px] pb-8 mb-20 overflow- px-1 xs:px-3 sm:px-6">
+            {/* <NewsletterSection/> */}
+            {/* <SourcePanel
               title={intl.formatMessage({ id: "navbar.contentitem.title2" })}
               desc={intl.formatMessage({ id: "sourcepanel.desc2" })}
-            />
+            /> */}
+            <NewsletterPageHero/>
+            <div className="absolute  top-0 left-0 w-full h-full" 
+            style={{
+  backgroundColor: "#f6f6f6",
+  opacity: 0.4,
+  backgroundImage: "radial-gradient(#444cf7 0.5px, #ededf9 0.5px)",
+  backgroundSize: "10px 10px"
+}}
+/>
+          {/* <img src='/static/images/toolbox/squares.svg' className="rounded-b-[3.4rem] opacity absolute w-full h-full object-cover top-0 left-0"/> */}
           </div>
-          <IssueList marginTop="mt-12 mb-6" posts={allPosts} />
-          <div className="pb-6">
-            <NewPagination
-              total={pagination?.total}
-              pageSize={PAGE_SIZE}
-              currentPage={pagination?.page}
-              onPageNumChange={(pageNum) => onPageNumChange(pageNum)}
-            />
+          <div className="max-w-[1320px] mx-auto px-6 md:px-3">
+            <IssueList marginTop="mt-8 mb-6" posts={allPosts} />
+            <div className="pb-6">
+              <NewPagination
+                total={pagination?.total}
+                pageSize={PAGE_SIZE}
+                currentPage={pagination?.page}
+                onPageNumChange={(pageNum) => onPageNumChange(pageNum)}
+              />
+            </div>
           </div>
         </Container>
       </Layout>
diff --git a/pages/newsletter/page/[pageNo].js b/pages/newsletter/page/[pageNo].js
index a3c9849c..cb61eebb 100644
--- a/pages/newsletter/page/[pageNo].js
+++ b/pages/newsletter/page/[pageNo].js
@@ -3,14 +3,15 @@ import dynamic from "next/dynamic";
 import { useRouter } from 'next/router'
 import Container from '@/components/container'
 const IssueList = dynamic(() => import("@/components/newsletter/IssueList"));
-const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
+// const EditorPick2 = dynamic(() => import("@/components/new-index/EditorPick2"));
 const NewPagination = dynamic(() => import("@/components/pagination"));
-import Layout from '@/components/layout'
+import Layout from "@/components/new-index/layoutForIndex";
 import { FormattedMessage, useIntl } from 'react-intl';
 import PostTitle from '@/components/post-title'
 
 import Head from 'next/head'
 import { getAllPostsForToolsPage } from '@/lib/api'
+import NewsletterPageHero from "@/components/v4/section/NewsletterPageHero";
 const PAGE_SIZE = 12;
 export default function NewsletterPage({ allPosts = [], preview, pagination = {} }) {
 
@@ -32,30 +33,43 @@ export default function NewsletterPage({ allPosts = [], preview, pagination = {}
                     canonical: `https://prototypr.io/posts/page/${pagination?.page}`,
                     url: `https://prototypr.io/posts/page/${pagination?.page}`,
                 }}
+                padding={false}
+                maxWidth={"max-w-[1400px] search-wide"}
                 activeNav={"posts"} preview={preview}>
                 {/* <Head>
                     <title>Open design and tech stories for everyone to read</title>
                 </Head> */}
-                <Container>
-                    {router.isFallback ? (
-                        <PostTitle>Loading…</PostTitle>
-                    ) :
-                        <>
-                            {
-                                 allPosts.length > 0 &&
-                                 <div className="pt-8">
-                                     <IssueList marginTop={false} posts={allPosts} />
-                                 </div>
-                            }
-                        </>
-                    }
+        <Container maxWidth="relative mb-6 px-0" padding={false}>
+        <div className="relative bg-white -mt-[96px] pt-[86px] md:pt-[96px] pb-8 mb-20 overflow- px-1 xs:px-3 sm:px-6">
+                    <NewsletterPageHero/>
+                                <div className="absolute top-0 left-0 w-full h-full" style={{
+                    backgroundColor: "#f6f6f6",
+                    opacity: 0.4,
+                    backgroundImage: "radial-gradient(#444cf7 0.5px, #ededf9 0.5px)",
+                    backgroundSize: "10px 10px"
+                    }}/>
+                    </div>
+                    <div className="max-w-[1320px] mx-auto px-6 md:px-3">
+                        {router.isFallback ? (
+                            <PostTitle>Loading…</PostTitle>
+                        ) :
+                            <>
+                                {
+                                    allPosts.length > 0 &&
+                                    <div className="pt-8">
+                                        <IssueList currentPage={pagination?.page} marginTop={false} posts={allPosts} />
+                                    </div>
+                                }
+                            </>
+                        }
+                        <NewPagination
+                            total={pagination?.total}
+                            pageSize={PAGE_SIZE}
+                            currentPage={pagination?.page}
+                            onPageNumChange={(pageNum) => { onPageNumChange(pageNum) }}
+                        />
+                    </div>
 
-                    <NewPagination
-                        total={pagination?.total}
-                        pageSize={PAGE_SIZE}
-                        currentPage={pagination?.page}
-                        onPageNumChange={(pageNum) => { onPageNumChange(pageNum) }}
-                    />
 
                 </Container>
             </Layout>
diff --git a/pages/toolbox/post/[id]/edit.js b/pages/toolbox/post/[id]/edit.js
index c4f1b90a..86fb551d 100644
--- a/pages/toolbox/post/[id]/edit.js
+++ b/pages/toolbox/post/[id]/edit.js
@@ -307,8 +307,9 @@ const ToolPostForm = ({user, isOwner, postObject}) => {
                 Description
                 </label>
                 <MiniEditor
-                 placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: 🤑 Stripe payments, 📊 Google Sheets, ✍️ Blogging (beta), and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
+                 placeholder="Example: Need a new landing page? Look no further – ‘Unicorn Platform 3’ is here! One of the best landing page builders around just got better. Version 3 has loads of new features: Stripe payments, Google Sheets, Blogging (beta), and tonnes more. Everything you need for your SaaS, mobile app page, or tech startup. It’s also an Indie-made product, built by Alexander Isora and co."
                 title=""
+                showToolbar={false}
                 initialContent={postObject?.content?postObject.content:''} 
                 setDescription={(html)=>{
                     formik.setFieldValue("content",html)
@@ -316,9 +317,10 @@ const ToolPostForm = ({user, isOwner, postObject}) => {
                 {formik.errors.content && <span className="text-red-600 text-xs">{formik.errors.content}</span>}
 
                 <label className="text-md font-medium mt-4">
-                  Excerpt
+                  Tagline
                 </label>
                 <MiniEditor
+                showToolbar={false}
                 title=""
                 placeholder="Unicorn platform is a landing page builder for SaaS products. Build and launch your marketing site in no time!"
                 initialContent={postObject?.excerpt?postObject.excerpt:''} 
diff --git a/pages/toolbox/post/[id]/index.js b/pages/toolbox/post/[id]/index.js
index 7b3b1b01..373eaa4a 100644
--- a/pages/toolbox/post/[id]/index.js
+++ b/pages/toolbox/post/[id]/index.js
@@ -20,12 +20,37 @@ import MediaForm from "@/components/toolbox/forms/MediaForm";
 import Link from "next/link";
 import Button from "@/components/Primitives/Button";
 
-const Progress = () => {
-  const { activeStepIndex, steps } = useWizardContext();
+// const Progress = () => {
+//   const { activeStepIndex, steps } = useWizardContext();
+
+//   return (
+//     <div>
+//       Step {parseInt(activeStepIndex, 10)+1} of {steps.length}
+//     </div>
+//   );
+// };
+
+const MenuItems =[
+{title:'Title and URL'},
+{title:'General information'},
+{title:'Image and media'},
+// {title:'Done'},
+]
+const Menu = ({}) => {
+  const { activeStepIndex, steps, goTo } = useWizardContext();
 
   return (
-    <div>
-      Step {parseInt(activeStepIndex, 10)+1} of {steps.length}
+    <div className="flex flex-col">
+   {MenuItems.map((menuItem, index)=>{
+    const active = activeStepIndex==index
+    return(
+      <div 
+      onClick={()=>{goTo(index)}}
+      className={`p-3 w-full cursor-pointer rounded-lg min-w-[300px] mb-2 ${active?'bg-blue-100 font-semibold':''}`}>
+        {menuItem.title}
+      </div>
+    )
+   })}
     </div>
   );
 };
@@ -69,19 +94,24 @@ const ToolPostForm = ({user, isOwner, postObject}) =>{
 
 
   return(
-    <Layout showFooter={false} padding={false} seo={seo} showWriteButton={false} background="#EFF2F8">
-      <div className="h-full min-h-screen w-full grid md:grid-cols-12">
-          <div className="hidden w-full h-full md:block md:col-span-6 lg:col-span-4">
-            <div className="flex pt-24 items-center justify-center h-full w-full relative bg-[#195DE2] text-white">
-              <LoginSide title="Submit a tool or resource" user={user} />
-            </div>
-          </div>
-    <div className="col-span-12 md:col-span-6 lg:col-span-8">
+    <Layout showFooter={false} padding={false} seo={seo} showWriteButton={false} background="#fff">
+        
       {!((user && !user?.isLoggedIn) && (isOwner || user?.isAdmin)) ? 
       <WizardProvider>
-        <div className="justify-center mt-20 w-full  px-2 sm:px-6 lg:px-10">
-          <Progress/>
+        <div className="h-full min-h-screen w-full grid md:grid-cols-12">
+        <div className="hidden w-full h-full md:block md:col-span-6 lg:col-span-4">
+        <div className="flex pt-24 justify-center h-full w-full relative text-black/80">
+            <Menu/>
+            {/* <Progress/> */}
+            {/* <LoginSide showArrow={false} title="Submit a tool or resource" user={user} /> */}
+        </div>
+        </div>
+        <div className="col-span-12 md:col-span-6 lg:col-span-7">
+        <div className="justify-center mt-20 w-full">
+          {/* <Progress/> */}
         <ToolSteps postObject={postObject} user={user}/>
+          </div>
+        </div>
         </div>
       </WizardProvider>
       :!(user && !user?.isLoggedIn)?
@@ -111,8 +141,6 @@ const ToolPostForm = ({user, isOwner, postObject}) =>{
     </div>
     </div>
   }
-    </div>
-     </div>
       </Layout>
   )
 
@@ -136,22 +164,22 @@ const ToolSteps = ({user, postObject}) =>{
     <Steps>
 
     <Step key={`page/1`} id={'1'}>
-        <div className="flex items-center justify-center h-full w-full relative">
+        <div className="flex items-center justify-start h-full w-full relative">
           <TitleLinkFormEdit onNext={onNext} postObject={postObject} user={user} />
         </div>
     </Step>
     <Step key={`page/2`} id={'2'}>
-        <div className="flex items-center justify-center h-full w-full relative">
+        <div className="flex items-center justify-start h-full w-full relative">
           <DescriptionExcerptForm postObject={postObject} user={user} />
         </div>
     </Step>
     <Step key={`page/3`} id={'3'}>
-        <div className="flex items-center justify-center h-full w-full relative">
+        <div className="flex items-center justify-start h-full w-full relative">
          <MediaForm postObject={postObject} user={user}/>
         </div>
     </Step>
     <Step key={`page/4`} id={'4'}>
-        <div className="flex items-center justify-center h-full w-full relative">
+        <div className="flex items-center justify-start h-full w-full relative">
           <div className="max-w-2xl pt-6 pb-20 w-full">
               <div className="my-2 mb-6">
               {postObject.status=='draft'?
diff --git a/pages/toolbox/post/index.js b/pages/toolbox/post/index.js
index e847d59c..1adc50cc 100644
--- a/pages/toolbox/post/index.js
+++ b/pages/toolbox/post/index.js
@@ -1,22 +1,22 @@
 import Layout from "@/components/layout-dashboard";
 // import { jobTypes} from "@/lib/constants";
-import { useRouter } from "next/router";
+// import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
 
 import React, { useEffect, useState, useCallback } from "react";
-import { useFormik } from "formik";
-import * as Yup from "yup";
+// import { useFormik } from "formik";
+// import * as Yup from "yup";
 import useUser from "@/lib/iron-session/useUser";
-import toast from "react-hot-toast";
-import { FormContainer } from "@/components/Jobs/FormStepper";
-import { FormInput } from "@/components/Jobs/FormInput";
-import MiniEditor from "@/components/MiniEditor/MiniEditor";
+// import toast from "react-hot-toast";
+// import { FormContainer } from "@/components/Jobs/FormStepper";
+// import { FormInput } from "@/components/Jobs/FormInput";
+// import MiniEditor from "@/components/MiniEditor/MiniEditor";
 // import TagsInput from "@/components/Jobs/tagsInput";
-import ImageUploader from "@/components/ImageUploader/ImageUploader";
+// import ImageUploader from "@/components/ImageUploader/ImageUploader";
 // import useGetLocations from "@/components/Jobs/jobHooks/useGetLocations";
 // import useGetSkills from "@/components/Jobs/jobHooks/useGetSkills";
-import GalleryUpload from "@/components/GalleryUpload/GalleryUpload";
-import LoginSide from "@/components/sign-in/LoginSide";
+// import GalleryUpload from "@/components/GalleryUpload/GalleryUpload";
+// import LoginSide from "@/components/sign-in/LoginSide";
 import {
   useWizardContext,
   WizardProvider,
@@ -24,35 +24,35 @@ import {
   Step,
 } from 'react-sweet-wizard';
 import TitleLinkForm from "@/components/toolbox/forms/TitleLinkForm";
-import DescriptionExcerptForm from "@/components/toolbox/forms/DescriptionExcerptForm";
+// import DescriptionExcerptForm from "@/components/toolbox/forms/DescriptionExcerptForm";
 
-const Progress = () => {
-  const { activeStepIndex, steps } = useWizardContext();
+// const Progress = () => {
+//   const { activeStepIndex, steps } = useWizardContext();
 
-  return (
-    <div>
-      State {activeStepIndex + 1} of {steps.length}
-    </div>
-  );
-};
+//   return (
+//     <div>
+//       State {activeStepIndex + 1} of {steps.length}
+//     </div>
+//   );
+// };
 
-const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
+// const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
 
 const LoginForm = dynamic(() => import("@/components/sign-in/LoginForm"));
 
-let axios = require("axios");
+// let axios = require("axios");
 
-const slugify = require("slugify");
+// const slugify = require("slugify");
 
 
-const styles = {
-  input:
-    "w-full px-3 max-w-2xl  bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
-  inputFlex:
-    "px-3 bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
-  label: "text-md font-medium uppercase text-gray-700 font-semibold",
-  inputError: "text-xs font-medium uppercase text-red-400",
-};
+// const styles = {
+//   input:
+//     "w-full px-3 max-w-2xl  bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
+//   inputFlex:
+//     "px-3 bg-white text-black font-normal text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-1  focus:ring-blue-200",
+//   label: "text-md font-medium uppercase text-gray-700 font-semibold",
+//   inputError: "text-xs font-medium uppercase text-red-400",
+// };
 
 function isEmptyObject(obj) {
   return (
@@ -87,14 +87,14 @@ const PostToolPage = () =>{
 
 
   return(
-    <Layout showFooter={false} padding={false} seo={seo} showWriteButton={false} background="#EFF2F8">
+    <Layout showFooter={false} padding={false} seo={seo} showWriteButton={false} background="#fff">
       <div className="h-full min-h-screen w-full grid md:grid-cols-12">
-          <div className="hidden w-full h-full md:block md:col-span-6 lg:col-span-4">
-            <div className="flex pt-24 items-center justify-center h-full w-full relative bg-[#195DE2] text-white">
-              <LoginSide title="Submit a tool or resource" user={user} />
+          <div className="hidden w-full h-full md:block md:col-span-6 lg:col-span-5">
+            <div className="flex items-center magicpattern justify-center h-full w-full relative text-white">
+              {/* <LoginSide showArrow={false} title="Submit a tool or resource" user={user} /> */}
             </div>
           </div>
-    <div className="col-span-12 md:col-span-6 lg:col-span-8">
+    <div className="col-span-12 md:col-span-6 lg:col-span-7">
       {!(user && !user?.isLoggedIn) ? 
       <WizardProvider>
         <ToolSteps user={user}/>