From fae02bb01136a0ff877a7512d654c179ac883f50 Mon Sep 17 00:00:00 2001
From: Graeme Fulton <graeme@prototypr.io>
Date: Thu, 15 Feb 2024 12:18:05 +0100
Subject: [PATCH] people archive page

---
 components/people/ProfileCard.js              | 200 +++++++++++++-----
 components/people/ProfilePageLayout.js        |   4 +-
 .../toolbox/ToolboxHeroWithEmailSignup.js     |   8 +-
 components/toolbox/toolboxHero.js             |   8 +-
 components/v4/layout/TwoColumnCardsB.js       |   4 +-
 components/v4/section/HeroArticleSection.js   |   4 +-
 components/v4/section/PostsSectionHero.js     |  21 +-
 lib/queries/newPeopleQuery.js                 |   4 +
 pages/index.js                                |  12 +-
 pages/people/index.js                         |  14 +-
 pages/people/page/[pageNo].js                 |  27 +--
 pages/posts/index.js                          |   6 +-
 12 files changed, 217 insertions(+), 95 deletions(-)

diff --git a/components/people/ProfileCard.js b/components/people/ProfileCard.js
index 291908e7..24eb1847 100644
--- a/components/people/ProfileCard.js
+++ b/components/people/ProfileCard.js
@@ -1,7 +1,9 @@
 import Image from "next/image";
 import Link from "next/link";
 import gumletLoader from "../new-index/gumletLoader";
-
+import { DribbbleLogo, TwitterLogo, GithubLogo, MapPin } from "phosphor-react";
+import { accountLocations } from "@/lib/constants";
+import { useState } from "react";
 export default function ProfileCard({
   title,
   slug,
@@ -10,67 +12,161 @@ export default function ProfileCard({
   bio = "",
   location = "",
   avatar = "",
+  twitter, dribbble, kofi, github
 }) {
   let skillArr = [];
   if (skills && skills !== "") {
     skillArr = skills.split(",");
   }
   const img = avatar ? avatar : legacyAvatar;
+
+  const [locationNiceName, setLocationNiceName] = useState(()=>{
+    if(location){
+      for(var x =0;x<accountLocations?.length;x++){
+          if(accountLocations[x]?.Code==location){
+            return(accountLocations[x]?.Name)
+          }
+      }
+  }
+  })
+
+
   return (
-<Link href={`/people/${slug}`}>
-    <div className="flex shadow-sm group flex-col flex-grow h-full border-black/5 border-1 hover:shadow-lg transition-shadow duration-500 bg-white relative rounded-3xl">
-      <div className="p-3 flex flex-col">
-            {img && (
-      <div className="basis-[68px] mr-5 w-full flex justify-center">
-              <div
-                className="rounded-full flex basis-[68px] my-auto transform group-hover:scale-110 transition duration-700 ease-out"
-                style={{ height: "68px", width: "68px" }}
-              >
-                
-                  <Image
-                    loader={gumletLoader}
-                    width="68"
-                    height="68"
-                    alt={`Avatar for ${title}`}
-                    className="border-black border-opacity-[0.05] mx-auto border border-1 h-[68px] w-[68px] object-cover cursor-pointer flex-shrink-0 shine rounded-full bg-white"
-                    src={img}
-                  />
-              </div>
+    <div
+  className="cursor-pointer relative w-full rounded-2xl"
+  // style={{ height: 300 }}
+>
+  <div className="flex relative flex-col flex-grow h-full rounded-t-2xl shadow-sm hover:shadow-lg pb-8 bg-white relative rounded-2xl fade-undefined">
+    <Link
+      className="absolute block w-full h-full z-10"
+      href={`/people/${slug}`}
+    />
+    <div
+      className="rounded-t-2xl flex w-full bg-gray-200/90"
+      style={{
+        // background: "linear-gradient(#82e788, #91f697)",
+        display: "flex",
+        height: 95,
+        opacity: 1
+      }}
+    />
+    <div>
+      <div
+        className="rounded-full bg-white absolute -mt-[30px] left-[12px]"
+        // style={{ position: "absolute", marginTop: "-12px", left: 12 }}
+      >
+        {img? <Image
+            loader={gumletLoader}
+            width="68"
+            height="68"
+            alt={`Avatar for ${title}`}
+            className="w-[68px] h-[68px] object-cover rounded-full flex-shrink-0 shine border-2 border-white bg-white shadow-md gm-loaded gm-observing gm-observing-cb"
+            src={img}
+          />:<div className="w-[68px] h-[68px] rounded-full bg-gray-100"/>}
+      </div>
+    </div>
+    <div className="relative px-5 pt-10 flex justify-between">
+      <div className="overflow-hidden mt-1">
+        <div>
+          <h1
+            className="text-lg mb-2 font-medium overflow-hidden heading mt-0 h-6 mt-0 text-black/90"
+          >
+            {title}
+          </h1>
+        </div>
+       {locationNiceName? <div className="text-sm flex leading-normal my-2 text-black/80 font-normal capitalize">
+                        <MapPin className="mr-1 my-auto" color="rgba(0,0,0,0.8)" width={16} height={16}/>
+                    <div className="inline-block my-auto">{locationNiceName}</div>
+                  </div>:null}
+        <div className="text-sm text-gray-700 h-10 mt-2">
+          <div>
+            {bio}
           </div>
-            )}
-        <div className="flex flex-col my-auto">
-            <div className="relative flex justify-between">
-            <div className="overflow-hidden">
-                <div>
-                <Link href={`/people/${slug}`}>
-                    <h1 style={{wordWrap:'break-word', wordBreak: 'break-word'}} className="text-lg font-bold cursor-pointer overflow-hidden mt-0 h-6 mt-0 text-gray-900">
-                    {title}
-                    </h1>
-                </Link>
-                </div>
-                {/* <div className="text-xs uppercase text-gray-700 mt-1">
-                {location}
-                </div> */}
-                <div className="text-base text-gray-700 mt-2 clamp-2">
-                <div dangerouslySetInnerHTML={{ __html: bio }} style={{wordWrap:'break-word', wordBreak: 'break-word'}} />
-                </div>
-            </div>
-            </div>
-            {/* {skillArr?.length?<div className="text-base text-gray-600 mt-3 h-7 overflow-hidden">
-            {skillArr.length
-                ? skillArr.map((skill) => {
-                    return (
-                    <div className="bg-gray-200 mr-2 text-gray-600 text-xs mb-1 px-2 py-1 rounded inline-block">
-                        # {skill}
-                    </div>
-                    );
-                })
-                : null}
-            </div>:''} */}
-        
         </div>
       </div>
+     <div className="flex absolute top-0 right-0 mr-2.5 mt-3 z-20">
+     {twitter?<a
+          className="link block mx-1"
+          href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
+          target="_blank"
+        >
+         <TwitterLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
+        </a>:null}
+     {dribbble?<a
+          className="link block mx-1"
+          href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
+          target="_blank"
+        >
+         <DribbbleLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
+        </a>:null}
+     {github?<a
+          className="link block mx-1"
+          href="https://web.archive.org/web/20210127134122/https://twitter.com/ebruspace"
+          target="_blank"
+        >
+         <GithubLogo color="rgba(0,0,0,0.8)" width={20} height={20}/>
+        </a>:null}
+      </div>
     </div>
-    </Link>
+    {/* <div
+      className="text-base text-gray-600 mt-2 mx-5 absolute bottom-0 mb-5 overflow-hidden"
+      style={{ height: 27 }}
+    >
+      {skillArr?.map((skill)=>{
+        return (<div className="bg-gray-200 mr-2 text-gray-600 text-xs px-2 py-1 rounded inline-block">
+        {skill}
+      </div>)
+      })}
+    </div> */}
+  </div>
+</div>
+
+
   );
 }
+
+    
+//  <Link href={`/people/${slug}`}>
+//     <div className="flex shadow-sm group flex-col flex-grow h-full border-black/5 border-1 hover:shadow-lg transition-shadow duration-500 bg-white relative rounded-2xl">
+//       <div className="p-3 flex flex-col">
+//             {img && (
+//       <div className="basis-[68px] mr-5 w-full flex justify-center">
+//               <div
+//                 className="rounded-full flex basis-[68px] my-auto transform group-hover:scale-110 transition duration-700 ease-out"
+//                 style={{ height: "68px", width: "68px" }}
+//               >
+                
+//                   <Image
+//                     loader={gumletLoader}
+//                     width="68"
+//                     height="68"
+//                     alt={`Avatar for ${title}`}
+//                     className="border-black border-opacity-[0.05] mx-auto border border-1 h-[68px] w-[68px] object-cover cursor-pointer flex-shrink-0 shine rounded-full bg-white"
+//                     src={img}
+//                   />
+//               </div>
+//           </div>
+//             )}
+//         <div className="flex flex-col my-auto">
+//             <div className="relative flex justify-between">
+//             <div className="overflow-hidden">
+//                 <div>
+//                 <Link href={`/people/${slug}`}>
+//                     <h1 style={{wordWrap:'break-word', wordBreak: 'break-word'}} className="text-lg font-bold cursor-pointer overflow-hidden mt-0 h-6 mt-0 text-gray-900">
+//                     {title}
+//                     </h1>
+//                 </Link>
+//                 </div>
+//                 {/* <div className="text-xs uppercase text-gray-700 mt-1">
+//                 {location}
+//                 </div> */}
+//                 <div className="text-base text-gray-700 mt-2 clamp-2">
+//                 <div dangerouslySetInnerHTML={{ __html: bio }} style={{wordWrap:'break-word', wordBreak: 'break-word'}} />
+//                 </div>
+//             </div>
+//             </div>
+        
+//         </div>
+//       </div>
+//     </div>
+//     </Link> 
diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
index f3fe7d01..63ab1e2e 100644
--- a/components/people/ProfilePageLayout.js
+++ b/components/people/ProfilePageLayout.js
@@ -100,10 +100,10 @@ const ProfilePageLayout = ({
             <img src='/static/images/toolbox/squares.svg' className=" opacity absolute w-full h-full object-cover top-0 left-0"/>
 
                 {/* <div className="magicpattern absolute top-0 left-0 w-full"/> */}
-                <div className="relative max-w-[1320px] mx-auto flex justify-center">
+                <div className="relative px-6 md:px-0 max-w-[1320px] mx-auto flex flex-col md:flex-row justify-center">
 
                 <div
-                    className="w-[168px] bg-white h-[168px] -mt-2 rounded-full border border-1 overflow- relative border-black/10 shadow-sm mr-12"
+                    className="w-[168px] bg-white h-[168px] -mt-2 rounded-full border border-1 overflow- relative border-black/10 shadow-sm mb-3 md:mb-0 md:mr-12"
                 >
   {(kofi || (unapproved && user?.profile?.kofi)) && (
                         <div className="absolute z-10 bottom-0 mb-3 left-0">
diff --git a/components/toolbox/ToolboxHeroWithEmailSignup.js b/components/toolbox/ToolboxHeroWithEmailSignup.js
index 33fadc3b..c3013159 100644
--- a/components/toolbox/ToolboxHeroWithEmailSignup.js
+++ b/components/toolbox/ToolboxHeroWithEmailSignup.js
@@ -139,8 +139,8 @@ const ToolBoxHeroWithSignup = ({user}) => {
       <div className="w-full max-w-full relative py-5 flex flex-col gap-2  overflow-hidden">
         <div className=" flex flex-col items-center max-w-7xl mx-auto grid gap-5 top-0 w-full ">
           <MotionSlider
-            initialDuration={60}
-            slides={ProductListData.map((data, i) => {
+                  initialDuration={180}
+                  slides={ProductListData.map((data, i) => {
               return (
                 <MotionSliderToolCard
                   title={data.title}
@@ -152,8 +152,8 @@ const ToolBoxHeroWithSignup = ({user}) => {
             })}
           />
           <MotionSlider
-            initialDuration={45}
-            slides={ProductListData2.map((data, i) => {
+                  initialDuration={150}
+                  slides={ProductListData2.map((data, i) => {
               return (
                 <MotionSliderToolCard
                   slug={data.slug}
diff --git a/components/toolbox/toolboxHero.js b/components/toolbox/toolboxHero.js
index d17ca147..3fa748ad 100644
--- a/components/toolbox/toolboxHero.js
+++ b/components/toolbox/toolboxHero.js
@@ -124,8 +124,8 @@ const ToolBoxHero = () => {
       <div className="w-full max-w-full relative py-5 flex flex-col gap-2  overflow-hidden">
         <div className=" flex flex-col items-center max-w-7xl mx-auto grid gap-5 top-0 w-full ">
           <MotionSlider
-            initialDuration={60}
-            slides={ProductListData.map((data, i) => {
+                  initialDuration={180}
+                  slides={ProductListData.map((data, i) => {
               return (
                 <MotionSliderToolCard
                   title={data.title}
@@ -137,8 +137,8 @@ const ToolBoxHero = () => {
             })}
           />
           <MotionSlider
-            initialDuration={45}
-            slides={ProductListData2.map((data, i) => {
+                  initialDuration={150}
+                  slides={ProductListData2.map((data, i) => {
               return (
                 <MotionSliderToolCard
                   slug={data.slug}
diff --git a/components/v4/layout/TwoColumnCardsB.js b/components/v4/layout/TwoColumnCardsB.js
index ea7f068e..ae9a32fc 100644
--- a/components/v4/layout/TwoColumnCardsB.js
+++ b/components/v4/layout/TwoColumnCardsB.js
@@ -3,13 +3,13 @@ import Link from "next/link";
 const dummyData = [{
 image:'/static/images/jobs.svg',
 slug:'/network',
-class:'bg-gray-100',
+class:'bg-gray-50',
 title:'Post an article',
 description:'Share your story with us and get featured in the newsletter.'
 },
 {image:'/static/images/botty.svg',
 slug:'/toolbox',
-class:'bg-gray-100',
+class:'bg-gray-50',
 title:'Get your tool featured',
 description:'List your tool in the Prototypr Toolbox and claim your page.'}
 ]
diff --git a/components/v4/section/HeroArticleSection.js b/components/v4/section/HeroArticleSection.js
index 5b48d60e..ac1ca9e0 100644
--- a/components/v4/section/HeroArticleSection.js
+++ b/components/v4/section/HeroArticleSection.js
@@ -2,13 +2,13 @@
 import Container from "@/components/container";
 import HeroPostGrid from "../layout/HeroPostGrid";
 // import {RssSimple} from 'phosphor-react'
-const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title }) => {
+const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title, showHeading,showHeadingRow }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
       {/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6"> */}
       <div className="w-full h-full grid grid-cols-12 flex justify-center">
         <div className={`w-full max-w-full flex flex-col col-span-12 `}>
-          <HeroPostGrid cols={cols} showBigPost={showBigPost} title={title} largePost={heroCardPost} smallPosts={viewablePosts} />
+          <HeroPostGrid title={title} showHeading={showHeading} showHeadingRow={showHeadingRow} cols={cols} showBigPost={showBigPost} largePost={heroCardPost} smallPosts={viewablePosts} />
         </div>
         {/* <SidebarDiscover
           paddingTop="hidden ml-4 pl-6 lg:block pt-12"
diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
index 4a965bec..933da1f1 100644
--- a/components/v4/section/PostsSectionHero.js
+++ b/components/v4/section/PostsSectionHero.js
@@ -6,20 +6,31 @@ import RSSTitle from "../text/RSSTitle";
 import SectionDivider from "./SectionDivider";
 import TagsNavRow from "./TagsNavRow";
 import HeroPostGrid from "../layout/HeroPostGrid";
+import HeroArticleSection from "./HeroArticleSection";
 // import {CaretRight} from 'phosphor-react'
 // import ToolIconCard from "../card/ToolIconCard";
 // import Link from 'next/link'
 // import {RssSimple} from 'phosphor-react'
-const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewablePosts, showTags,title, showRecent,showTitle }) => {
+const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice, viewablePosts, showTags,title, showRecent,showTitle }) => {
   return (
     <Container maxWidth="max-w-[1320px]">
       {showRecent && 
       <>
         {/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 mt-6 lg:p-6"> */}
         <div className="w-full h-full grid grid-cols-12 flex justify-center">
-            <div className={`w-full max-w-full flex flex-col col-span-12 `}>
+            <div className={`w-full max-w-full flex flex-col col-span-12 mt-3 `}>
             {/* <PostsGridHero title={title} largePost={heroCardPost} showHeading={showHeroTitle!==false} smallPosts={viewablePosts} /> */}
-            <PostsGroup3Cards posts={[heroCardPost,...viewablePosts?.slice(0,2)]} />
+            {/* <PostsGroup3Cards posts={[heroCardPost,...viewablePosts?.slice(0,2)]} /> */}
+            <HeroArticleSection
+              cols={3}
+              title={false}
+              showHeading={false}
+              showHeadingRow={false}
+              // cols={3}
+              heroCardPost={heroCardPost}
+              viewablePosts={viewablePosts?.slice(0,3)}
+              // showBigPost={false}
+              showBigPost={2}/>
             {/* <HeroPostGrid cols={3} showBigPost={2} showHeadingRow={false} largePost={heroCardPost} smallPosts={viewablePosts} /> */}
             </div>
         </div>
@@ -32,7 +43,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewableP
        <TagsNavRow/>
      </div>
       }
-      <div className="w-full h-full grid grid-cols-12 flex justify-center">
+      <div className="w-full h-full grid grid-cols-12 flex justify-center px-3">
         <div className={`${!showRecent?'-mt-4':''} w-full max-w-full flex flex-col gap-2 col-span-12 `}>
          <div className="flex justify-between">
             {showTitle!==false &&
@@ -41,7 +52,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle, viewableP
               </div>
             }
             </div>
-            <PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(2,viewablePosts?.length)}/>
+            <PostsGroup3Cards posts={!showRecent?viewablePosts:viewablePosts?.slice(groupSlice?groupSlice:2,viewablePosts?.length)}/>
         </div>
         {/* <SidebarDiscover
           paddingTop="hidden ml-4 pl-6 lg:block pt-12"
diff --git a/lib/queries/newPeopleQuery.js b/lib/queries/newPeopleQuery.js
index 9741048d..2a57777e 100644
--- a/lib/queries/newPeopleQuery.js
+++ b/lib/queries/newPeopleQuery.js
@@ -24,6 +24,10 @@ query newPeopleQuery ($pageSize: Int, $page: Int){
             }
             }
         }
+        twitter
+        dribbble
+        github
+        kofi
         skills
         legacyAvatar
         }
diff --git a/pages/index.js b/pages/index.js
index 9afd3962..209e7c0e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -116,9 +116,9 @@ export default function Index({
           </>
           :<div className="pt-[100px]"/>}
            <Container maxWidth="max-w-[1320px] z-30 relative">
-           <div className="text-2xl text-black/90 font-semibold text-left -mt-8 mb-5 px-1 w-fit rounded-full">{`Today's Toolbox`}</div>
+           <div className="text-2xl text-black/90 font-semibold text-left mt-6 md:-mt-8 mb-5 px-1 w-fit rounded-full">{`Today's Toolbox`}</div>
           {/* <h2 className="text-3xl font-bold mb-[42px] text-center text-black/90">Tools to shape <span className="text-underline inline-block md:inline">every idea</span></h2> */}
-            <ToolBackgroundCardRow tools={toolsList.slice(0,4)} />
+            <ToolBackgroundCardRow tools={toolsList.slice(5,9)} />
           </Container>
           <div className='relative z-50 pt-3'>
             <TagsNavRow/>
@@ -138,6 +138,7 @@ export default function Index({
               jobsSidebar={jobsSidebar}
               // showBigPost={false}
               showBigPost={2}
+              showTitle={false}
             />
             {/* <DiscoverSection
               user={user}
@@ -146,7 +147,7 @@ export default function Index({
               jobsSidebar={jobsSidebar}
             /> */}
         </div>
-          <div className="mt-10 mb-8">
+          <div className="mt-14 mb-8">
           <NewsletterSection/>
         </div>
 
@@ -158,7 +159,6 @@ export default function Index({
               <ToolLargeCardRow tools={toolsList.slice(0,4)} />
               <SectionDivider py="py-6" transparentLine={true}  />
               <ToolIconCardRow withBackground={true} tools={toolsList.slice(5,15)} />       
-
               
             
           {/* <div className="flex mt-10">
@@ -201,7 +201,7 @@ export default function Index({
               Browse by <span className="text-underline">category</span>
               </h3>
               <div className="flex relative p-2">
-            <div className="hidden sm:inline text-md text-blue-800 font-normal font-inter">
+            <div className="hidden sm:inline text-md text-black/80 font-normal font-inter">
             <Link href={`/topics/`}>See all</Link>
             </div>
             <div className="my-auto">
@@ -292,7 +292,7 @@ export default function Index({
                   <Container  maxWidth="max-w-[1320px]">
                   <TwoColumnCards/> 
                   </Container>
-                  <SectionDivider py="py-12" transparentLine={false}/>
+                  <SectionDivider py="py-4" transparentLine={true}/>
                   </div>:''
               }
               </div>
diff --git a/pages/people/index.js b/pages/people/index.js
index e275e3ac..e0573b11 100644
--- a/pages/people/index.js
+++ b/pages/people/index.js
@@ -41,15 +41,21 @@ export default function PeoplePage({
           <PostTitle>Loading…</PostTitle>
         ) :
         <>        
+        <h1 className="font-inter font-semibold text-2xl">Contributors</h1>
         {allPosts.length > 0 && (
-          <div className="mt-6 grid grid-rows-1 lg:grid-cols-3 grid-cols-1  gap-6">
+          <div className="mt-6 grid grid-rows-1 sm:grid-cols-2 lg:grid-cols-4 grid-cols-1  gap-6">
             <div className="col-span-4">
-            <div className={`grid md:grid-cols-3 grid-cols-1 gap-6 pb-16`}>
+            <div className={`grid md:grid-cols-4 grid-cols-1 gap-6 pb-16`}>
             {allPosts.map((post, i) =>
-            <ProfileCard
+            {
+              return(<ProfileCard
                   key={`peoplecard_${
                     post.attributes.slug ? post.attributes.slug : i
                   }`}
+                  twitter={post.attributes?.twitter}
+                  github={post.attributes?.github}
+                  dribbble={post.attributes?.dribbble}
+                  kofi={post.attributes?.kofi}
                   location={post.attributes?.location}
                   bio={post.attributes?.bio}
                   title={post.attributes.username}
@@ -57,7 +63,7 @@ export default function PeoplePage({
                   legacyAvatar={post.attributes.legacyAvatar}
                   avatar={post.attributes.avatar?.data?.attributes?.url}
                   skills={post.attributes.skills}
-                />)}
+                />)})}
             </div>
               <NewPagination
                 total={pagination?.total}
diff --git a/pages/people/page/[pageNo].js b/pages/people/page/[pageNo].js
index 0aef2709..84a6c80d 100644
--- a/pages/people/page/[pageNo].js
+++ b/pages/people/page/[pageNo].js
@@ -42,16 +42,22 @@ export default function PeoplePage({
           <PostTitle>Loading…</PostTitle>
         ) :
         <>        
-        {allPosts.length > 0 && (
-          <div className="mt-6 grid grid-rows-1 lg:grid-cols-4 grid-cols-1  gap-10">
-            <div className="col-span-3">
-            <div className={`grid md:grid-cols-2 grid-cols-1 md:gap-y-10 gap-y-10 lg:gap-y-10 gap-x-10 md:gap-x-10 pb-16`}>
+                <h1 className="font-inter font-semibold text-xl">Page {pagination?.page}</h1>
 
+        {allPosts.length > 0 && (
+           <div className="mt-6 grid grid-rows-1 sm:grid-cols-2 lg:grid-cols-4 grid-cols-1  gap-6">
+           <div className="col-span-4">
+           <div className={`grid md:grid-cols-4 grid-cols-1 gap-6 pb-16`}>
             {allPosts.map((post, i) =>
-            <ProfileCard
+            {
+              return(<ProfileCard
                   key={`peoplecard_${
                     post.attributes.slug ? post.attributes.slug : i
                   }`}
+                  twitter={post.attributes?.twitter}
+                  github={post.attributes?.github}
+                  dribbble={post.attributes?.dribbble}
+                  kofi={post.attributes?.kofi}
                   location={post.attributes?.location}
                   bio={post.attributes?.bio}
                   title={post.attributes.username}
@@ -59,7 +65,7 @@ export default function PeoplePage({
                   legacyAvatar={post.attributes.legacyAvatar}
                   avatar={post.attributes.avatar?.data?.attributes?.url}
                   skills={post.attributes.skills}
-                />)}
+                />)})}
                 </div>
               <NewPagination
                 total={pagination?.total}
@@ -70,13 +76,8 @@ export default function PeoplePage({
                 }}
               />
             </div>
-            <div className="grid-cols-1 hidden lg:block">
+            {/* <div className="grid-cols-1 hidden lg:block">
               <div className="w-full min-h-screen  flex flex-col">
-              {/* <PeopleBreadcrumbs 
-                    urlRoot={'/people'}
-                    title={BREADCRUMBS.pageTitle}
-                    links={BREADCRUMBS.links}
-                    /> */}
               <PeopleFilters
                urlRoot={'/people'}
                items={ALL_PEOPLE_GROUPS} 
@@ -84,7 +85,7 @@ export default function PeoplePage({
                slug={'/people'}/>
 
               </div>
-            </div>
+            </div> */}
           </div>
         )}
         </>}
diff --git a/pages/posts/index.js b/pages/posts/index.js
index f3e30f56..6278f79d 100644
--- a/pages/posts/index.js
+++ b/pages/posts/index.js
@@ -13,7 +13,7 @@ import { getPostsByPageForPostsPage } from "@/lib/api";
 import TagsNavRow from "@/components/v4/section/TagsNavRow";
 import PostsSectionHero from "@/components/v4/section/PostsSectionHero";
 // import Head from "next/head";
-const PAGE_SIZE = 9;
+const PAGE_SIZE = 10;
 export default function PostsPage({ allPosts = [], preview, pagination = {} }) {
   let heroPost;
   let morePosts = [];
@@ -62,7 +62,9 @@ export default function PostsPage({ allPosts = [], preview, pagination = {} }) {
             ? morePosts.length > 0 &&
             <PostsSectionHero
             showRecent={true}
+            groupSlice={3}
             user={user}
+            showTitle={false}
             heroCardPost={heroPost}
             viewablePosts={morePosts}
           />
@@ -70,6 +72,8 @@ export default function PostsPage({ allPosts = [], preview, pagination = {} }) {
             : allPosts.length > 0 &&   
             <PostsSectionHero
             showRecent={true}
+            groupSlice={3}
+            showTitle={false}
             user={user}
             heroCardPost={heroPost}
             viewablePosts={morePosts}