toolbox individual page breadcrumbs and header bit

components/Breadcrumbs.js

@@ -10,29 +10,30 @@ export default function Breadcrumbs({
   pageNo = null,
 }) {
   return (
-    <div className="w-auto bg-white p-2.5 rounded-xl" style={{width:'fit-content'}}>
+    // <div className="w-auto shadow-sm outline outline-gray-200/70 outline-1 bg-white p-2.5 rounded-xl" style={{width:'fit-content'}}>
+    <div className="w-auto" style={{width:'fit-content'}}>
       {links.map((item, index) => {
         return (
           <div className="inline" key={index}>
             {" "}
-            <div className="inline  border-gray-900 border-opacity-10 rounded-full p-1.5 px-3 bg-white bg-opacity-50">
+            <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal">
               <Link href={`${item.slug}`} key={`breadcrumb_${title}_${index}`}>
                 {!item.svg ? (
-                  <span className="hover:underline">{item.name}</span>
+                  <span className="hover:text-white">{item.name}</span>
                 ) : (
                   <>{item.svg}</>
                 )}
               </Link>
             </div>
             <div className="inline mx-1">
-              <ChevronRightIcon className="inline" />
+              <ChevronRightIcon className="inline text-gray-50/90" />
             </div>
           </div>
         );
       })}
       {currentSlug == "toolbox" ? (
         <>
-        <div className="inline  border-gray-900 border-opacity-10 rounded-full p-1.5 px-3 bg-white bg-opacity-50">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-gray-50/90 font-normal">
           <Link
             href={`${urlRoot}`}
             // className={`capitalize ${pageNo?'':'text-bold'}`}>
@@ -42,28 +43,28 @@ export default function Breadcrumbs({
           </Link>
         </div>
         <div className="inline mx-1">
-              <ChevronRightIcon className="inline" />
+              <ChevronRightIcon className="inline text-gray-50/90" />
             </div>
-        <div className="inline  border-gray-900 border-opacity-10 rounded-full p-1.5 px-3 bg-white bg-opacity-50">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60">
           <Link
             href={`${urlRoot}/page/1`}
             // className={`capitalize ${pageNo?'':'text-bold'}`}>
-            className={`capitalize font-semibold text-blue-600`}
+            className={`capitalize font-semibold text-white`}
           >All</Link>
         </div>
         </>
       ) : currentSlug ? (
-        <div className="inline  border-gray-900 border-opacity-10 rounded-full p-1.5 px-3 bg-white bg-opacity-50">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60 font-normal">
           <Link
             href={`${urlRoot}/${currentSlug}/page/1`}
             // className={`capitalize ${pageNo?'':'text-bold'}`}>
-            className={`capitalize font-semibold text-blue-600`}
+            className={`capitalize font-semibold text-white`}
           >{currentSlug}</Link>
         </div>
       ) : (
-        <div className="inline p-1.5 px-3 border border-gray-900 border-opacity-10 rounded-full bg-white bg-opacity-50">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60 font-normal">
           <Link href={`${urlRoot}/page/1`}>
-            <span className="capitalize font-semibold text-blue-600 text-bold">
+            <span className="capitalize font-semibold text-white text-bold">
               {title}
             </span>
           </Link>

components/footer.js

@@ -10,8 +10,8 @@ const SignupHorizontal = dynamic(
 export default function Footer() {
   const intl = useIntl();
   return (
-    <footer className="bg-accent-1 border-accent-2">
-      <Container>
+    <footer>
+      <Container maxWidth="max-w-[1320px] z-30 relative">
         <div className="w-full max-w-screen-xl relative mx-auto py-16 px-6">
           <div className="flex flex-wrap">
             <div className="w-full md:w-6/12">

components/newsletter/SignupHomepage.js

@@ -106,7 +106,7 @@ function HookForm(props) {
               required: true,
               pattern: /^\S+@\S+$/i,
             })}
-            className="w-full max-w-sm p-4 rounded-2xl mb-4 border-blue-600"
+            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"
@@ -139,7 +139,7 @@ function HookForm(props) {
           />
         </div>
         {/* <div className="flex flex-col ml-2"> */}
-        <Button className="rounded-full px-6 py-4 leading-none bg-blue-700" variant={"confirmBig"}>
+        <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> */}

components/toolbox/ToolboxIndexPage.jsx

@@ -53,66 +53,61 @@ const ToolboxIndexPage = ({
       {/* <div className="mt-2">
       <ToolsTagsNavRow active={'All'}/>
     </div> */}
-      {/* <Container maxWidth="max-w-[1320px] mt-3 mb-6">
+
+     {(pagination?.page == 1 && title=='All tools') ?<ToolBoxHeroWithSignup user={user} />:
+     <Container maxWidth="relative mb-6 px-0" padding={false}>
         <div
-          // style={{
-          //   backgroundColor: stc(`${title}`),
-          //   backgroundImage: `url(${"/static/images/proto-bg.svg"})`,
-          // }}
-          className="relative overflow-hidden p-6 border-gray-200 bg-blue-100/80 bg-blur-lg rounded-2xl"
+          style={{
+            // backgroundColor: stc(`${title}`),
+            // backgroundImage: `url(${"/static/images/espi1400.png"})`,
+          }}
+          className="relative bg-[#2f62c7]/90 -mt-[96px] pt-[96px] pb-20 overflow-hidden p-6 shadow-sm rounded-b-[3.4rem]"
         >
-          <div className="w-full backdrop-blur-sm backdrop-opacity-20 w-full h-full">
+          <div className="relative max-w-[1320px] mx-auto w-full h-full px-3 z-10">
             <Breadcrumbs
               urlRoot={urlRoot}
               title={title}
               currentSlug={currentSlug}
               links={breadcrumbs.links}
               pageNo={pagination?.page}
             />
-            <div className="inline-flex my-4">
-              <h2 className="text-5xl my-auto font-bold text-gray-800 capitalize">
+            <div className="inline-flex my-8">
+              <h2 className="text-4xl my-auto text-center font-bold text-white capitalize">
                 {title}
               </h2>
             </div>
           </div>
+          {/* <div className="bg-black/10 opacity-50 w-full h-full backdrop-opacity-20 left-0 top-0 absolute"/> */}
+
         </div>
-      </Container> */}
-     {pagination?.page == 1 && <ToolBoxHeroWithSignup user={user} />}
+          {/* <img src='/static/images/espi1400.png' className="absolute w-full h-full object-cover top-0 left-0"/> */}
+        {/* <img src='/static/images/toolbox-grid.svg' className="absolute w-full h-full object-cover top-0 left-0"/> */}
+        <img src='/static/images/toolbox/white-grid.svg' className="absolute w-full h-full object-cover top-0 left-0"/>
+      </Container>
+     }
+{/* {title} */}
+
+
       <Container maxWidth="max-w-[1320px] flex grid grid-cols-12">
         <Sidebar
           paginationRoot={paginationRoot}
           urlRoot={urlRoot}
           filterCategories={filterCategories}
           slug={currentSlug}
         />
-        <div className="w-full px-0 md:pr-0 md:pl-6 -mt-6 mx-auto pb-20 gap-2 col-span-12 md:col-span-10 pb-10">
+        <div className={`w-full px-0 ${title!=='All tools'?'-mt-20':''} md:pr-0 md:pl-8 mx-auto pb-20 gap-2 col-span-12 md:col-span-10 pb-10`}>
           {router.isFallback ? (
             <PostTitle>Loading…</PostTitle>
           ) : (
             <>
               {allPosts.length > 0 && (
                 <>
-                  {pagination?.page == 1 ? (
-                    <>
-                      {/* <TwoColumnCards posts={allPosts.slice(0,2)}/> */}
-                      {/* <ToolsLayout posts={allPosts} columns={'lg:grid-cols-2'} type="toolbox" /> */}
-                      <div className="py-6">
-                        <ToolImageCard
-                          posts={allPosts}
-                          columns={"lg:grid-cols-3"}
-                          type="toolbox"
-                        />
-                      </div>
-                    </>
-                  ) : (
-                    <div className="py-6">
-                      <ToolImageCard
-                        posts={allPosts}
-                        columns={"lg:grid-cols-3"}
-                        type="toolbox"
-                      />
-                    </div>
-                  )}
+
+                <ToolImageCard
+                  posts={allPosts}
+                  columns={"lg:grid-cols-3"}
+                  type="toolbox"
+                />
 
                   <NewPagination
                     total={pagination?.total}

components/v4/card/ToolCardSimple.js

@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const ToolCardSimple = ({ posts, type, columns }) => {
   return (
-    <div className={`grid grid-cols-1 ${columns?columns:'lg:grid-cols-3'} gap-5 p-1 w-full flex-wrap`}>
+    <div className={`grid grid-cols-1 ${columns?columns:'lg:grid-cols-3'} gap-3 w-full flex-wrap`}>
       {posts.map((post, i) => {
         let title, slug, coverImage, tags;
 

components/v4/layout/LargePostGridB.js

@@ -1,4 +1,6 @@
 import BigCard from "../card/BigCard/BigCardC";
+import { ArrowRight } from "phosphor-react";
+import Link from 'next/link'
 
 // import SmallCard from "../card/SmallCard/SmallCardE";
 import SmallPostsGroup from "./SmallPostGroupB";
@@ -14,7 +16,21 @@ const LargePostGrid = ({ largePost, smallPosts, showHeading,title }) => {
     let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
   return (
     <>
-    {showHeading!==false?<RSSTitle title={title}/>:''}
+    <div className="flex justify-between">
+      {showHeading!==false?<RSSTitle title={title}/>:''}
+       <div className="flex relative p-2 mb-1">
+            <div className="text-md inline text-gray-800 font-normal font-inter">
+            <Link href={`/topics/`}>See all</Link>
+            </div>
+            <div className="my-auto">
+              <Link href={`/topics/`}>
+                <div className="bg-blue-100 outline outline-1 outline-blue-300/50 ml-2.5 flex justify-center my-auto h-6 w-6 rounded-full">
+                    <ArrowRight weight="bold" size={14} className="text-blue-900 my-auto"/>
+                </div>
+              </Link>
+            </div>
+          </div>
+    </div>
     <div className="flex flex-col lg:flex-row justify-between max-w-[1320px]">
       <div className="w-full lg:w-1/2">
         <BigCard

components/v4/layout/LargePostGridC.js

@@ -4,9 +4,11 @@ import ToolCollection from "@/components/v4/layout/ToolCollection";
 // import SmallCard from "../card/SmallCard/SmallCardE";
 import SmallPostsGroupC from "./SmallPostGroupC";
 // import RSSTitle from "../text/RSSTitle";
-import { CaretRight, Tag } from "phosphor-react";
+import { ArrowRight, Tag } from "phosphor-react";
+
+// import { CaretRight, Tag } from "phosphor-react";
 import Link from "next/link";
-import Button from "@/components/Primitives/Button";
+// import Button from "@/components/Primitives/Button";
 const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, heading }) => {
   let url = largePost?.attributes?.featuredImage?.data?.attributes?.url;
   const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
@@ -18,9 +20,9 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
     let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
   return (
     <>
-    <div className="bg-white border border-gray-300/70 p-6 md:p-0 rounded-xl max-w-[1320px] shadow-sm">
+    <div className="bg-white border border-gray-300/40 p-6 md:p-0 rounded-3xl max-w-[1320px] shadow-md">
     <div className="flex flex-col lg:flex-row justify-between">
-        <div className="w-full lg:w-8/12 md:p-8">
+        <div className="w-full lg:w-8/12 md:p-6">
            {showHeading!==false?<div className="flex w-full justify-between mb-6">
             <div className="flex">
               <Tag className="my-auto mr-3" size={32}/>
@@ -29,12 +31,24 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
               </h2>
             </div>
             <div className="my-auto">
-            <Link href={`/posts/${slug}/page/1`}>
+              <div className="flex relative">
+              <div className="text-md inline text-gray-800 font-normal font-inter">
+              <Link href={`/posts/${slug}/page/1`}>See all</Link>
+              </div>
+              <div className="my-auto">
+                <Link href={`/posts/${slug}/page/1`}>
+                  <div className="bg-blue-100 outline outline-1 outline-blue-300/50 ml-2.5 flex justify-center my-auto h-6 w-6 rounded-full">
+                      <ArrowRight weight="bold" size={14} className="text-blue-900 my-auto"/>
+                  </div>
+                </Link>
+              </div>
+            </div>
+            {/* <Link href={`/posts/${slug}/page/1`}>
             <div className="font-inter mt-1 text-sm my-auto text-black opacity-60 cursor-pointer text-sm flex">
               <div className="my-auto">See all</div>
             <CaretRight className="my-auto" size={14} />
             </div>
-          </Link>
+          </Link> */}
             </div>
           </div>:''}
         {/* <div className="hidden md:block flex relative p-2 mb-1">
@@ -56,7 +70,7 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
             tags={largePost?.attributes?.tags?.data}
             />
         <SmallPostsGroupC tools={tools} smallPosts={smallPosts?.slice(0,2)}/>
-        <div className="flex mt-10">
+        {/* <div className="flex mt-10"> */}
             {/* <div className="font-inter cursor-pointer flex">
               <div className="text-blue-600 text-md font-base">
                 See more {heading}
@@ -69,9 +83,9 @@ const LargePostGridC = ({ largePost, smallPosts, tools,showHeading, slug, headin
                 See more {heading}
               </Button>
             </Link> */}
-          </div>  
+          {/* </div>   */}
         </div>
-      <div className="w-full lg:w-4/12 md:p-8 md:pt-0 lg:pt-10 lg:bg-gray-50 md:border-l border-gray-100 lg:rounded-r-xl">
+      <div className="w-full lg:w-4/12 md:p-6 lg:bg-gray-50 md:border-l border-gray-100 lg:rounded-r-3xl">
       {tools?.length>3 ?
         <>
         <ToolCollection tagline={false} slug={slug} topic={heading} tools={tools} />

components/v4/layout/SingleFancyCard.js

@@ -12,7 +12,7 @@ const SingleFancyCard = ({title, description}) =>{
 
              <a target="_blank" className="col-span-12"
              href={`${post.slug}`}>
-             <div className={`flex h-[220px] ${post.class} relative rounded-2xl w-full flex-col justify-center overflow-hidden p-5 py-0 md:py-8 md:p-8 text-white`}>
+             <div className={`flex h-[220px] ${post.class} relative rounded-3xl w-full flex-col justify-center overflow-hidden p-5 py-0 md:py-8 md:p-8 text-white`}>
                <img src={post.image} className="w-1/2 h-auto absolute right-0 -mr-20" style={{transform:'scaleX(-1)'}}/>
                {/* <img className="w-full h-[220px] object-cover rounded-xl" src={coverImage}/> */}
                {/* <h4 className="text-xs text-gray-500 uppercase font-medium mt-3">{section.tagline}</h4> */}

components/v4/layout/ToolCollection.js

@@ -7,7 +7,7 @@ import { ArrowRight } from "phosphor-react";
 
 const ToolCollection = ({ tools, topic, tagline,slug }) => {
   return (
-    <div className="border-t border-black border-opacity-5 md:border-t-0 sm:pt-8 mt-8 md:pt-0 lg:mt-0 w-full mb-12">
+    <div className="border-t border-black border-opacity-5 md:border-t-0 sm:pt-8 mt-8 md:pt-0 lg:mt-0 w-full">
 
     {/* heading - removed for now */}
       {/* <div className="flex relative p-2 mb-1">

components/v4/layout/ToolIconCardRow.js

@@ -1,25 +1,38 @@
 import ToolIconCard from "@/components/v4/card/ToolIconCard";
-import Container from "@/components/container";
+// import Container from "@/components/container";
 import Link from "next/link";
-import {CaretRight} from 'phosphor-react'
+// import {CaretRight} from 'phosphor-react'
+import { ArrowRight } from "phosphor-react";
 
 const ToolIconCardRow = ({ tools, title, textColor }) => {
   return (
     <>
     {/* <Container maxWidth="max-w-[1320px] w-full"> */}
-      <div className="flex justify-between">
-        <h3 className="font-semibold text-lg mb-6 px-1">
+      <div className="flex justify-between mb-8 mt-4">
+        <h3 className="font-medium text-lg px-1">
          {title?title:
          <>
          New <span className="hidden sm:inline text-gray-400">hand picked</span>
          </>}
         </h3>
-          <Link href='/toolbox'>
+        <div className="flex relative">
+            <div className="text-md inline my-auto text-gray-800 font-normal font-inter">
+            <Link href={`/toolbox/`}>See all</Link>
+            </div>
+            <div className="my-auto">
+              <Link href={`/toolbox/`}>
+                <div className="bg-blue-100 outline outline-1 outline-blue-300/50 ml-2.5 flex justify-center my-auto h-6 w-6 rounded-full">
+                    <ArrowRight weight="bold" size={14} className="text-blue-900 my-auto"/>
+                </div>
+              </Link>
+            </div>
+          </div>
+          {/* <Link href='/toolbox'>
             <div className="flex">
               <div className={`text-sm my-auto text-black opacity-60`}>See all</div>
               <CaretRight className="opacity-60 my-auto" size={16} />
             </div>
-          </Link>
+          </Link> */}
 
       </div>
       <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-8 gap-y-8`}>