archive pages and top gradient

Prototypr · Feb 9, 2024 · adf04c7 · adf04c7
1 parent 1404bf4
commit adf04c7
Show file tree

Hide file tree

Showing 11 changed files with 667 additions and 38 deletions.
diff --git a/components/Breadcrumbs.js b/components/Breadcrumbs.js
@@ -15,7 +15,7 @@ export default function Breadcrumbs({
       {links.map((item, index) => {
         return (
           <>
-           <div key={index} 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">
+           <div key={index} className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-black/90 font-normal">
               <Link href={`${item.slug}`} key={`breadcrumb_${title}_${index}`}>
                 {!item.svg ? (
                   <span className="hover:text-white">{item.name}</span>
@@ -25,14 +25,14 @@ export default function Breadcrumbs({
               </Link>
             </div>
             <div className="inline mx-1 flex flex-col justify-center">
-              <ChevronRightIcon className="inline text-gray-50/90" />
+              <ChevronRightIcon className="inline text-black/90" />
             </div>
           </>
         );
       })}
       {currentSlug == "toolbox" ? (
         <>
-        <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">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/30 text-black/90 font-normal">
           <Link
             href={`${urlRoot}`}
             // className={`capitalize ${pageNo?'':'text-bold'}`}>
@@ -42,28 +42,28 @@ export default function Breadcrumbs({
           </Link>
         </div>
         <div className="inline mx-1 flex flex-col justify-center">
-              <ChevronRightIcon className="inline text-gray-50/90" />
+              <ChevronRightIcon className="inline text-black/90" />
             </div>
         <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-white`}
+            className={`capitalize font-semibold text-black/90`}
           >All</Link>
         </div>
         </>
       ) : currentSlug ? (
-        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60 font-normal">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/40 font-normal">
           <Link
             href={`${urlRoot}/${currentSlug}/page/1`}
             // className={`capitalize ${pageNo?'':'text-bold'}`}>
-            className={`capitalize font-semibold text-white`}
+            className={`capitalize font-medium text-blue-700/90`}
           >{currentSlug}</Link>
         </div>
       ) : (
-        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-400/60 font-normal">
+        <div className="inline  border border-1 border-blue-300/20 rounded-full p-1.5 px-3 bg-blue-200/20 font-normal">
           <Link href={`${urlRoot}/page/1`}>
-            <span className="capitalize font-semibold text-white text-bold">
+            <span className="capitalize font-medium text-blue-700/90">
               {title}
             </span>
           </Link>

diff --git a/components/toolbox/ToolboxIndexPage.jsx b/components/toolbox/ToolboxIndexPage.jsx
@@ -61,9 +61,9 @@ const ToolboxIndexPage = ({
             // backgroundColor: stc(`${title}`),
             // backgroundImage: `url(${"/static/images/espi1400.png"})`,
           }}
-          className="relative bg-[#2f62c7]/90 -mt-[96px] pt-[86px] md:pt-[96px] pb-20 overflow-hidden px-1 xs:px-3 sm:px-6 shadow-sm rounded-b-[3.4rem]"
+          className="relative bg-white shadow-sm rounded-b-[3.4rem] -mt-[96px] pt-[86px] md:pt-[96px] pb-20 overflow-hidden px-1 xs:px-3 sm:px-6"
         >
-          <div className="relative max-w-[1320px] mx-auto w-full h-full px-3 z-10">
+          <div className="relative max-w-[1200px] mx-auto w-full h-full px-3 z-10">
             <Breadcrumbs
               urlRoot={urlRoot}
               title={title}
@@ -72,7 +72,7 @@ const ToolboxIndexPage = ({
               pageNo={pagination?.page}
             />
             <div className="inline-flex my-8">
-              <h2 className="max-w-[50rem] text-white text-4xl md:text-5xl font-semibold tracking-tight lg:leading-tight md:leading-tight capitalize drop-shadow-sm ">
+              <h2 className="max-w-[50rem] text-black/90 text-4xl md:text-5xl font-semibold tracking-tight lg:leading-tight md:leading-tight capitalize drop-shadow-sm ">
                 {title}
               </h2>
             </div>
@@ -82,13 +82,15 @@ const ToolboxIndexPage = ({
         </div>
           {/* <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"/>
+        {/* <img src='/static/images/toolbox/white-grid.svg' className="absolute w-full h-full object-cover top-0 left-0"/> */}
+        {/* <div className="absolute top-0 left-0 h-full w-full bg-gradient-to-b from-blue-300/10 to-blue-100/10 "/> */}
+        <img src='/static/images/toolbox/squares.svg' className="rounded-b-[3.4rem] opacity absolute w-full h-full object-cover top-0 left-0"/>
       </Container>
      }
 {/* {title} */}
 
 
-      <Container padding={false} maxWidth="max-w-[1320px] px-6 mx-auto xl:px-3 grid grid-cols-12">
+      <Container padding={false} maxWidth="max-w-[1200px] px-6 mx-auto xl:px-3 grid grid-cols-12">
 
       <Sidebar
           title={title}

diff --git a/components/v4/card/SmallCard/SmallCardStacked.js b/components/v4/card/SmallCard/SmallCardStacked.js
@@ -7,7 +7,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor, link }) => {
   return (
-    <div className="flex md:flex-col md:justify-start hover:bg-white px-4 md:px-5 md:-mr-5 my-3.5 md:my-0 md:mb-6 md:mt-0 lg:mb-0 lg:my-0 transition transition-all duration-300 rounded-2xl font-inter w-full max-w-[490px]">
+    <div className="flex shadow-md mx-auto md:flex-col md:justify-start bg-white p-2 md:my-0 md:mt-0 lg:mb-0 lg:my-0 transition transition-all duration-300 rounded-2xl font-inter w-full max-w-[490px]">
       {image ? (
         <div className=" hidden md:inline-block w-full my-auto md:my-0 shrink-0 h-[54px] w-[54px] md:w-full md:h-[164px] relative rounded-lg md:rounded-2xl overflow-hidden border border-gray-100">
          <Link href={link}>
@@ -23,8 +23,8 @@ const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor
       ) : (
         ""
       )}
-      <div className="shrink md:mt-4 flex flex-col-reverse md:flex-col justify-center">
-        {showAuthor!==false?<div className="mt-2 md:mb-1.5 ml-2 md:ml-0">
+      <div className="shrink md:mt-2 mb-1 p-2 md:px-3 flex flex-col-reverse md:flex-col justify-center">
+        {showAuthor!==false?<div className="mt-2 md:mb-1.5 md:ml-0">
           <Avatar src={avatar} author={author} date={date} size="sm" />
         </div>:
         <div className="hidden md:flex text-xs mb-2">
@@ -45,7 +45,7 @@ const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor
         </div>}
         <div>
           <Link href={link}>
-            <h2 className="ml-2 md:ml-0 text-sm md:text-lg font-semibold leading-snug line-clamp-3">
+            <h2 className="md:ml-0 text-sm md:text-lg font-semibold leading-snug line-clamp-3">
               {title}
             </h2>
           </Link>

diff --git a/components/v4/layout/PostGroupRow.js b/components/v4/layout/PostGroupRow.js
@@ -21,22 +21,21 @@ const PostGroupRow = ({ largePost, smallPosts, description,title,topicObject })
     return (
     <>
 
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-[1320px]">
+    <div className="grid grid-cols-1 gap-3 md:gap-8 md:grid-cols-2 lg:grid-cols-4 max-w-[1320px]">
 
-     <div className="flex flex-col justify-center mb-6 md:mb-0 px-6 md:px-6">
-        <div>
-            <h2 className="text-lg md:text-2xl mb-1 text-[#0F1F40] font-semibold font-inter max-w-md leading-[32px]">
+     {/* <div className="flex flex-col justify-center mb-6 md:mb-0">
+        <div className="bg-blue-200/20 border border-blue-200/70 h-full rounded-2xl p-6">
+            <h2 className="text-lg md:text-3xl mb-1 font-semibold font-inter max-w-md leading-[32px] text-blue-900">
              {intl.formatMessage({ id: title })}
             </h2>
-            <p>
+            <p className="text-blue-900">
               {topicObject?.tagline}
-            {/* {intl.formatMessage({ id: description })} */}
             </p>
             <Link href={`/posts/${topicObject?.slug}/page/1`}>
               <Button className="rounded-full mt-6" variant={"ghostSmallBlue"}>Browse</Button>
             </Link>
         </div>
-     </div>
+     </div> */}
       {/* <div className="w-full lg:w-1/2">
         <BigCard
           link={`/post/${largePost?.attributes?.slug}`}

diff --git a/components/v4/layout/TopicsGridHome.js b/components/v4/layout/TopicsGridHome.js
@@ -1,8 +1,8 @@
-import BigCard from "../card/BigCard/BigCardD";
-import ToolCollection from "@/components/v4/layout/ToolCollection";
+// import BigCard from "../card/BigCard/BigCardD";
+// import ToolCollection from "@/components/v4/layout/ToolCollection";
 
 // import SmallCard from "../card/SmallCard/SmallCardE";
-import SmallPostsGroupC from "./SmallPostGroupC";
+// import SmallPostsGroupC from "./SmallPostGroupC";
 // import RSSTitle from "../text/RSSTitle";
 import { ArrowRight, Tag } from "phosphor-react";
 
@@ -55,9 +55,9 @@ const TopicsGridHome = ({ largePost, smallPosts, tools,showHeading, slug, headin
           />
 
 
-          <div className="w-full mt-8 flex">
+          {tools?.length && <div className="w-full mt-8 flex">
             <ToolIconCardRow title={`${heading} tools`} showHeader={true} withBackground={true} tools={tools} />       
-          </div>
+          </div>}
 
         </div>
 

diff --git a/components/v4/section/TopicIndexSection.js b/components/v4/section/TopicIndexSection.js
@@ -1,15 +1,58 @@
 // import SidebarDiscover from "@/components/v4/layout/SidebarDiscover";
 import Container from "@/components/container";
-import LargePostGridC from "@/components/v4/layout/LargePostGridB";
+// import LargePostGridC from "@/components/v4/layout/LargePostGridB";
+// import TopicsGridHome from "../layout/TopicsGridHome";
+import PostsGroup3Cards from "../layout/PostsGroup3Cards";
+import { ArrowRight, Tag } from "phosphor-react";
+import Link from "next/link";
+import { useIntl } from "react-intl";
+
 import PostGroupRow from "../layout/PostGroupRow";
 // import {RssSimple} from 'phosphor-react'
-const TopicIndexSection = ({user, heroCardPost, viewablePosts, jobsSidebar,title , topicObject}) => {
+const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar,title , topicObject}) => {
+
+  const intl = useIntl();
   return (
     <Container maxWidth="max-w-[1320px]">
-      <div className="w-full shadow-sm h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl py-2 md:p-6">
+      <div className={`w-full h-full grid grid-cols-12 flex justify-center rounded-3xl`}>
         <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 py-3 `}>
           {/* <LargePostGridC title={title} largePost={heroCardPost} smallPosts={viewablePosts} /> */}
-          <PostGroupRow topicObject={topicObject} title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
+          {/* <TopicsGridHome
+            slug={topicObject?.slug}
+            heading={title}
+            showHeading={true}
+            largePost={viewablePosts[0]}
+            smallPosts={viewablePosts.splice(1)}
+            // tools={toolsList}
+          /> */}
+          <div className="flex w-full justify-between mb-3 md:mb-6">
+            <div className="flex">
+              <Tag className="inline-block my-auto mr-3" size={32}/>
+              <h2 className="text-2xl md:text-3xl capitalize font-semibold text-black/80">
+              {intl.formatMessage({ id: title })}
+              </h2>
+            </div>
+            <div className="my-auto">
+              <div className="flex relative">
+              <div className="text-md inline text-gray-800 font-normal font-inter">
+              <Link href={`/posts/${topicObject.slug}/page/1`}>See all</Link>
+              </div>
+              <div className="my-auto">
+                <Link href={`/posts/${topicObject.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>
+            </div>
+          </div>
+
+           {/* <PostsGroup3Cards
+          posts={viewablePosts} 
+          cols={4}
+          /> */}
+          <PostGroupRow smallPosts={viewablePosts} />
         </div>
         {/* <SidebarDiscover
           paddingTop="hidden ml-4 pl-6 lg:block pt-12"

diff --git a/pages/index.js b/pages/index.js
@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 // import { useState } from "react";
-import DiscoverSection from "@/components/v4/section/DiscoverSectionB";
+// import DiscoverSection from "@/components/v4/section/DiscoverSectionB";
 import SectionDivider from "@/components/v4/section/SectionDivider";
 import ToolIconCardRow from "@/components/v4/layout/ToolIconCardRow";
 // import Container from "@/components/container";

diff --git a/pages/posts/[tag]/page/[pageNo].js b/pages/posts/[tag]/page/[pageNo].js
@@ -104,7 +104,7 @@ export default function PostsPage({
                   {/* <div className="p w-8 h-8 my-auto mr-3 rounded-full border-gray-300 bg-white"> */}
                     {/* <Tag className="mt-5 text-gray-800 mx-auto mr-3 my-auto opacity-80" size={38}/> */}
                   {/* </div> */}
-                  <h2 className="mt-2 mb-2 text-blue-900 text-5xl font-semibold tracking-tight xl:text-[48px] lg:leading-tight md:leading-tight capitalize drop-shadow-sm ">{tagName}</h2>
+                  <h2 className="mt-2 mb-2 text-black/90 text-5xl font-semibold tracking-tight xl:text-[48px] lg:leading-tight md:leading-tight capitalize drop-shadow-sm ">{tagName}</h2>
                 </div>
               </div>
                <img src='/static/images/toolbox/toolbox-bg-2.svg' className=" pointer-events-none absolute w-full h-full object-cover opacity-60 top-0 left-0 "/>

diff --git a/pages/topics.js b/pages/topics.js
@@ -116,11 +116,12 @@ export default function Index({
             return (
               <div key={`section_${index}`}>
                 <TopicIndexSection
+                  index={index}
                   title={topic.name}
                   topicObject={topic}
                   user={user}
-                  heroCardPost={topicRes[topic.slug]?.posts[0]}
-                  viewablePosts={topicRes[topic.slug]?.posts?.slice(0, 3)}
+                  // heroCardPost={topicRes[topic.slug]?.posts[0]}
+                  viewablePosts={topicRes[topic.slug]?.posts?.slice(0, 4)}
                 />
                 <SectionDivider py="py-4" transparentLine={true} />
               </div>

diff --git a/public/static/images/toolbox/squares.png b/public/static/images/toolbox/squares.png