From e49b0dafe6b53719c0802478d03319f21736b18f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 27 May 2022 10:50:25 +0300
Subject: [PATCH] fix: fixing some QA issues

- change rows shown on products page & change the api
- restyle sort by
- rebuild navigation menus
- fix issues with donation stats & donate card
- update products header link & date of hackathon
---
 .../Inputs/Autocomplete/Autocomplete.tsx      |  12 +-
 src/Components/Navbar/NavDesktop.tsx          |  89 +++++-----
 src/Components/Navbar/NavMobile.tsx           | 156 ++++++++++--------
 .../components/DonateCard/DonateCard.tsx      |   2 +-
 .../DonationStats/DonationStats.tsx           |   6 +-
 .../Components/SortByFilter/SortByFilter.tsx  |   2 +-
 .../Components/TopicsFilter/TopicsFilter.tsx  |   8 +-
 .../PopularTopicsFilter.tsx                   |   6 +-
 .../Posts/pages/FeedPage/SortBy/SortBy.tsx    |   2 +-
 .../ProjectCardMini/ProjectCardMini.tsx       |   2 +-
 .../pages/ExplorePage/Header/Header.tsx       |   4 +-
 .../ProjectsRow/ProjectsRow.stories.tsx       |   3 +-
 .../ExplorePage/ProjectsRow/ProjectsRow.tsx   |   6 +-
 .../ProjectsSection/ProjectsSection.tsx       |  16 +-
 .../ProjectsSection/exploreProjects.graphql   |  32 ++--
 src/graphql/index.tsx                         |  32 ++--
 src/mocks/handlers.ts                         |   3 +-
 src/mocks/resolvers.ts                        |   3 +-
 18 files changed, 219 insertions(+), 165 deletions(-)

diff --git a/src/Components/Inputs/Autocomplete/Autocomplete.tsx b/src/Components/Inputs/Autocomplete/Autocomplete.tsx
index efa83b6..d5d8fe4 100644
--- a/src/Components/Inputs/Autocomplete/Autocomplete.tsx
+++ b/src/Components/Inputs/Autocomplete/Autocomplete.tsx
@@ -35,11 +35,20 @@ type Props<T extends object | string> = {
 
 
 const colourStyles: StylesConfig = {
+    control: (styles, state) => ({
+        ...styles,
+        padding: '9px 16px',
+        borderRadius: 12,
+    }),
+    indicatorSeparator: (styles, state) => ({
+        ...styles,
+        display: "none"
+    }),
     input: (styles, state) => ({
         ...styles,
         " input": {
             boxShadow: 'none !important'
-        }
+        },
     }),
 };
 
@@ -78,6 +87,7 @@ export default function AutoComplete<T extends object>({
                 onChange={v => onChange?.(v as any)}
                 onBlur={onBlur}
 
+
                 styles={colourStyles}
                 theme={(theme) => ({
                     ...theme,
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index fa29a95..809d0d5 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -22,7 +22,7 @@ import {
     SubMenu
 } from '@szhsin/react-menu';
 import '@szhsin/react-menu/dist/index.css';
-import { FiChevronDown, FiSend } from "react-icons/fi";
+import { FiAward, FiChevronDown, FiFeather, FiMic, FiSend } from "react-icons/fi";
 import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
 import { IoMdTrophy } from "react-icons/io";
 import { BiCoinStack } from "react-icons/bi";
@@ -57,55 +57,48 @@ export default function NavDesktop() {
             </h2>
         </a>
         <ul className="flex gap-32 xl:gap-64">
-            <li>
-                <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
-                    <MenuItem
-                        href="/products"
-                        onClick={(e) => {
-                            e.syntheticEvent.preventDefault();
-                            navigate("/products");
-                        }}
-                        className='!px-24 !py-16 font-medium'
-                    >
-                        <MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
-                    </MenuItem>
-                    <MenuItem
-                        href="/products/hottest"
-                        onClick={(e) => {
-                            e.syntheticEvent.preventDefault();
-                            navigate("/products/hottest");
-                        }}
-                        className='!px-24 !py-16 font-medium'
-                    >
-                        <MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
-                    </MenuItem>
-                    <SubMenu
-                        overflow="auto"
-                        itemProps={{ className: '!p-0' }}
-                        label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
-                    >
-                        <CategoriesList />
-                    </SubMenu>
-                    <MenuItem
-                        href="https://airtable.com/shr2VkxarNsIFilDz"
-                        target="_blank" rel="noopener noreferrer"
-                        className='!px-24 !py-16 font-medium'
-                    >
-                        <FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} />  Submit LApp
-                    </MenuItem>
-                </Menu>
+            <li className="relative">
+                <Link to={'/products'} className='text-body4 font-bold hover:text-primary-600'>
+                    Products
+                </Link>
             </li>
             <li>
-                <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
+                <Menu offsetY={28} menuClassName='!rounded-12 !p-8 !border-gray-200' menuStyle={{ border: '1px solid' }} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
                     <MenuItem
                         href="/blog"
                         onClick={(e) => {
                             e.syntheticEvent.preventDefault();
                             navigate("/blog");
                         }}
-                        className='!px-24 !py-16 font-medium'
+                        className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
                     >
-                        <MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
+                        <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                            <FiFeather className={`text-body1 inline-block text-primary-600 `} />
+                        </div>
+                        <div>
+                            <p className="text-body4 text-black font-medium">
+                                Stories
+                            </p>
+                            <p className="text-body5 text-gray-600 mt-4">
+                                Tales from the maker community
+                            </p>
+                        </div>
+                    </MenuItem>
+                    <MenuItem
+
+                        className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-60'
+                    >
+                        <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                            <FiMic className={`text-body1 inline-block text-primary-600 `} />
+                        </div>
+                        <div>
+                            <p className="text-body4 text-black font-medium">
+                                Discussions
+                            </p>
+                            <p className="text-body5 text-gray-600 mt-4">
+                                Coming soon
+                            </p>
+                        </div>
                     </MenuItem>
                     <MenuItem
                         href="/hackathons"
@@ -113,9 +106,19 @@ export default function NavDesktop() {
                             e.syntheticEvent.preventDefault();
                             navigate("/hackathons");
                         }}
-                        className='!px-24 !py-16 font-medium'
+                        className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
                     >
-                        <IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
+                        <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                            <FiAward className={`text-body1 inline-block text-primary-600 `} />
+                        </div>
+                        <div>
+                            <p className="text-body4 text-black font-medium">
+                                Hackathons
+                            </p>
+                            <p className="text-body5 text-gray-600 mt-4">
+                                Take part in hackathons & tournaments
+                            </p>
+                        </div>
                     </MenuItem>
                 </Menu>
             </li>
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index 06a1202..6226baf 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -8,17 +8,12 @@ import Search from "./Search/Search";
 import IconButton from "../IconButton/IconButton";
 import { useAppDispatch, useAppSelector } from "src/utils/hooks";
 import { toggleSearch } from "src/redux/features/ui.slice";
-import { FiChevronDown, FiMenu, FiSend } from "react-icons/fi";
-import { navLinks } from "./Navbar";
+import { FiAward, FiChevronDown, FiFeather, FiMenu, FiMic, } from "react-icons/fi";
 import { Link, useNavigate } from "react-router-dom";
-import { IoExtensionPuzzle } from "react-icons/io5";
-import CategoriesList from "./CategoriesList/CategoriesList";
 import { useToggle } from "@react-hookz/web";
 import styles from './styles.module.css'
-import { Menu, MenuButton, MenuItem, SubMenu } from "@szhsin/react-menu";
+import { Menu, MenuButton, MenuItem, } from "@szhsin/react-menu";
 import '@szhsin/react-menu/dist/index.css';
-import { IoMdTrophy } from "react-icons/io";
-import { MdComment, MdOutlineExplore, MdOutlineLocalFireDepartment } from "react-icons/md";
 
 interface Props {
 }
@@ -54,7 +49,7 @@ const categoriesListVariants = {
   }
 }
 
-const categoriesArrowVariants = {
+const listArrowVariants = {
   open: { rotate: 180 },
   closed: { rotate: 0 }
 }
@@ -62,14 +57,13 @@ const categoriesArrowVariants = {
 
 export default function NavMobile({ }: Props) {
   const dispatch = useAppDispatch();
-  const navigate = useNavigate()
   const { searchOpen } = useAppSelector((state) => ({
     isWalletConnected: state.wallet.isConnected,
     searchOpen: state.ui.isSearchOpen
   }));
 
   const [drawerOpen, toggleDrawerOpen] = useToggle(false);
-  const [categoriesOpen, toggleCategories] = useToggle(false)
+  const [communityOpen, toggleCommunityOpen] = useToggle(false)
 
 
 
@@ -160,68 +154,85 @@ export default function NavMobile({ }: Props) {
             {/* {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 active:bg-gray-200">
               <Link to={link.url} onClick={() => toggleDrawerOpen(false)}><link.icon className={`text-body2  inline-block mr-12 text-primary-600`} /> <span className="align-middle">{link.text}</span> </Link></li>
             )} */}
-            <li>
-              <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>LApps <FiChevronDown className="ml-8" /></MenuButton>}>
-                <MenuItem
-                  href="/products"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/products");
-                  }}
-                  className='!px-24 !py-16 font-medium'
-                >
-                  <MdOutlineExplore className={`text-body1 inline-block mr-12 text-primary-600 `} /> Explore
-                </MenuItem>
-                <MenuItem
-                  href="/products/hottest"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/products/hottest");
-                  }}
-                  className='!px-24 !py-16 font-medium'
-                >
-                  <MdOutlineLocalFireDepartment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hottest
-                </MenuItem>
-                <SubMenu
-                  itemProps={{ className: '!p-0' }}
-                  direction='bottom'
-                  overflow="auto"
-                  label={<div className='!px-24 !py-16 font-medium'><IoExtensionPuzzle className={`text-body1 inline-block mr-12 text-primary-600 `} /> Categories</div>}
-                >
-                  <CategoriesList />
-                </SubMenu>
-                <MenuItem
-                  href="https://airtable.com/shr2VkxarNsIFilDz"
-                  target="_blank" rel="noopener noreferrer"
-                  className='!px-24 !py-16 font-medium'
-                >
-                  <FiSend className={`text-body1 inline-block mr-12 text-primary-600 `} />  Submit LApp
-                </MenuItem>
-              </Menu>
+            <li className="relative">
+              <Link
+                to={'/products'}
+                onClick={() => toggleDrawerOpen(false)}
+                className='text-body4 font-bold hover:text-primary-600'>
+                Products
+              </Link>
             </li>
             <li>
-              <Menu offsetY={24} menuClassName='!rounded-12' menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
-                <MenuItem
-                  href="/blog"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/blog");
-                  }}
-                  className='!px-24 !py-16 font-medium'
-                >
-                  <MdComment className={`text-body1 inline-block mr-12 text-primary-600 `} /> Stories
-                </MenuItem>
-                <MenuItem
-                  href="/hackathons"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/hackathons");
-                  }}
-                  className='!px-24 !py-16 font-medium'
-                >
-                  <IoMdTrophy className={`text-body1 inline-block mr-12 text-primary-600 `} /> Hackathons
-                </MenuItem>
-              </Menu>
+              <button
+                className='text-body4 font-bold hover:text-primary-600 w-full flex justify-between'
+                onClick={() => toggleCommunityOpen()}
+              >Community
+                <motion.span
+                  variants={listArrowVariants}
+                  initial={'closed'}
+                  animate={communityOpen ? 'open' : 'closed'}
+                  className="ml-auto">
+                  <BsChevronDown className=" text-gray-400" />
+                </motion.span>
+              </button>
+              {<motion.div
+                variants={categoriesListVariants}
+                initial={'closed'}
+                animate={communityOpen ? 'open' : 'closed'}
+              >
+                <div className='flex flex-col gap-24 pt-16'    >
+                  <Link
+                    to="/blog"
+                    onClick={() => toggleDrawerOpen(false)}
+                    className='font-medium flex gap-16 !rounded-12 '
+                  >
+                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <FiFeather className={`text-body1 inline-block text-primary-600 `} />
+                    </div>
+                    <div>
+                      <p className="text-body4 text-black font-medium">
+                        Stories
+                      </p>
+                      <p className="text-body5 font-normal text-gray-600 mt-4">
+                        Tales from the maker community
+                      </p>
+                    </div>
+                  </Link>
+                  <p
+
+                    className='font-medium flex gap-16 !rounded-12 opacity-60'
+                  >
+                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <FiMic className={`text-body1 inline-block text-primary-600 `} />
+                    </div>
+                    <div>
+                      <p className="text-body4 text-black font-medium">
+                        Discussions
+                      </p>
+                      <p className="text-body5 font-normal text-gray-600 mt-4">
+                        Coming soon
+                      </p>
+                    </div>
+                  </p>
+                  <Link
+                    to="/hackathons"
+                    onClick={() => toggleDrawerOpen(false)}
+                    className='font-medium flex gap-16 !rounded-12'
+                  >
+                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <FiAward className={`text-body1 inline-block text-primary-600 `} />
+                    </div>
+                    <div>
+                      <p className="text-body4 text-black font-medium">
+                        Hackathons
+                      </p>
+                      <p className="text-body5 font-normal text-gray-600 mt-4">
+                        Take part in hackathons & tournaments
+                      </p>
+                    </div>
+                  </Link>
+                </div>
+              </motion.div>}
             </li>
             <li className="relative">
               <a
@@ -234,7 +245,10 @@ export default function NavMobile({ }: Props) {
               </a>
             </li>
             <li className="relative">
-              <Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
+              <Link
+                to={'/donate'}
+                onClick={() => toggleDrawerOpen(false)}
+                className='text-body4 font-bold hover:text-primary-600'>
                 Donate
               </Link>
             </li>
diff --git a/src/features/Donations/components/DonateCard/DonateCard.tsx b/src/features/Donations/components/DonateCard/DonateCard.tsx
index 6511ddb..675a13f 100644
--- a/src/features/Donations/components/DonateCard/DonateCard.tsx
+++ b/src/features/Donations/components/DonateCard/DonateCard.tsx
@@ -59,7 +59,7 @@ export default function DonateCard() {
                         autoFocus
                     />
                     <p className='px-16 shrink-0 self-center text-primary-400'>
-                        Sats
+                        sats
                     </p>
                 </div>
                 <div className="flex mt-16 justify-between">
diff --git a/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx b/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx
index 00c973b..f51b4b4 100644
--- a/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx
+++ b/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx
@@ -1,5 +1,5 @@
 import { BiCoinStack } from "react-icons/bi";
-import { FiGrid } from "react-icons/fi";
+import { FiAward, FiGrid } from "react-icons/fi";
 import { IoMedalOutline, IoRocketOutline } from "react-icons/io5";
 import { useDonationsStatsQuery } from "src/graphql";
 import { generateList, numberFormatter } from "src/utils/helperFunctions";
@@ -14,7 +14,7 @@ export default function DonationStats() {
 
 
     return (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-16">
+        <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-16">
 
             {donationsStatQuery.loading && generateList(<StatCardSkeleton />, 4)}
 
@@ -32,7 +32,7 @@ export default function DonationStats() {
                     />
                     <StatCard
                         color="#22C55E"
-                        label={<><IoMedalOutline className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
+                        label={<><FiAward className='w-full lg:w-auto scale-125 mr-8' /> <span className="align-middle">Prizes</span></>}
                         value={donationsStatQuery.data?.getDonationsStats.prizes}
                     />
                     <StatCard
diff --git a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx b/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx
index a44483b..bdf887f 100644
--- a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx
+++ b/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx
@@ -1,6 +1,6 @@
-import { useMediaQuery } from '@react-hookz/web';
 import React, { useState } from 'react'
 import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
+import { useMediaQuery } from 'src/utils/hooks';
 import { MEDIA_QUERIES } from 'src/utils/theme';
 
 const filters = [
diff --git a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx b/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
index ec1a726..840fc15 100644
--- a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
+++ b/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@react-hookz/web';
+import { useMediaQuery } from 'src/utils/hooks';
 import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton';
 import Slider from 'src/Components/Slider/Slider';
@@ -27,9 +27,9 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
     const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
     return (
-        <>
+        <div className='overflow-hidden'>
             {isMdScreen ?
-                <div className='bg-white border-2 rounded-12 p-16'>
+                <div className='bg-white border-2 rounded-12 p-16 overflow-hidden'>
                     <p className="text-body2 font-bolder text-black mb-16">Topics</p>
                     <ul className=' flex flex-col gap-16'>
                         {topicsQuery.loading ?
@@ -75,7 +75,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
                     }
                 </>
             }
-        </>
+        </div>
 
 
     )
diff --git a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
index 0508e6f..2b396c2 100644
--- a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
+++ b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@react-hookz/web';
+import { useMediaQuery } from 'src/utils/hooks';
 import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton';
 import Slider from 'src/Components/Slider/Slider';
@@ -26,7 +26,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
     const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
     return (
-        <>
+        <div className='overflow-hidden'>
             {isMdScreen ?
                 <div className='bg-white border-2 rounded-12 p-16'>
                     <p className="text-body2 font-bolder text-black mb-16">Topics</p>
@@ -74,7 +74,7 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
                     }
                 </>
             }
-        </>
+        </div>
 
 
     )
diff --git a/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx b/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
index e164a9e..df6972f 100644
--- a/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
+++ b/src/features/Posts/pages/FeedPage/SortBy/SortBy.tsx
@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@react-hookz/web';
+import { useMediaQuery } from 'src/utils/hooks';
 import React, { useState } from 'react'
 import { Nullable } from 'remirror';
 import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete';
diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index 761d27b..ac3ece8 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -11,7 +11,7 @@ export default function ProjectCardMini({ project, onClick }: Props) {
 
     return (
         <div
-            className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
+            className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
             onClick={() => onClick(project.id)}
             onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
             tabIndex={0}
diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index 7c37de7..e15c140 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -18,11 +18,11 @@ const headerLinks = [
   },
   {
     title:
-      "Want to learn to build lightning applications? Join Shock the Web hackathon on March 22 - 28",
+      "Shock the web is back !! Join us from 16 to 19 June.",
     img: Assets.Images_ExploreHeader2,
     link: {
       content: "Register Now",
-      url: "https://bolt.fun/hackathons/shock-the-web/",
+      url: "https://bolt.fun/hackathons/shock-the-web-2/",
     },
   },
 ];
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
index 6b982a9..0741838 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
@@ -20,14 +20,13 @@ Hottest.args = {
         <MdLocalFireDepartment
             className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
         /></>,
-    categoryId: 0,
     projects: MOCK_DATA.projects
 }
 
 export const Defi = Template.bind({});
 Defi.args = {
     title: 'DeFi',
-    categoryId: 8,
+    link: "category-page-url",
     projects: MOCK_DATA.projects
 }
 
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index b7bcbde..ba91953 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -13,7 +13,7 @@ import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/Pr
 
 interface Props {
     title: string | ReactNode,
-    categoryId: number,
+    link?: string;
     projects: ProjectCard[]
 }
 
@@ -37,7 +37,7 @@ function calcNumItems() {
 
 
 
-export default function ProjectsRow({ title, categoryId, projects }: Props) {
+export default function ProjectsRow({ title, link, projects }: Props) {
 
     const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
     const dispatch = useAppDispatch()
@@ -85,7 +85,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
         <div className='mb-48'>
             <h3 className="font-bolder text-body3 mb-24">
                 <span className="align-middle">{title}</span>
-                {categoryId > 0 && <Link to={`/category/${categoryId}`}>
+                {link && <Link to={link}>
                     <MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer transform scale-y-110 scale-x-125 origin-left' />
                 </Link>}
             </h3>
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx b/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
index 079c372..d1c0a31 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx
@@ -19,17 +19,21 @@ export default function ProjectsSection() {
 
     return (
         <div className='mt-32 lg:mt-48'>
-            <ProjectsRow title={shockTheWebCategory?.title}
-                categoryId={shockTheWebCategory?.id!}
-                projects={shockTheWebCategory?.project!} />
-            <ProjectsRow title={<><span className="align-middle mr-8">Newest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
-                categoryId={0}
+            <ProjectsRow title={<><span className="align-middle mr-8">Hottest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
+                link='/products/hottest'
+                projects={data.hottestProjects} />
+
+            <ProjectsRow title="Recently added"
                 projects={data.newProjects} />
+
+            <ProjectsRow title={shockTheWebCategory?.title}
+                link={`/products/category/${shockTheWebCategory?.id}`}
+                projects={shockTheWebCategory?.project!} />
             {restCategories.map(({ id, title, project, }) => {
                 if (project)
                     return <ProjectsRow
                         key={id}
-                        categoryId={id}
+                        link={`/products/category/${id}`}
                         title={title}
                         projects={project} />
                 else return null
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsSection/exploreProjects.graphql b/src/features/Projects/pages/ExplorePage/ProjectsSection/exploreProjects.graphql
index 9e33383..ee3a842 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsSection/exploreProjects.graphql
+++ b/src/features/Projects/pages/ExplorePage/ProjectsSection/exploreProjects.graphql
@@ -1,4 +1,26 @@
 query ExploreProjects {
+  hottestProjects(take: 10, skip: 0) {
+    id
+    title
+    thumbnail_image
+    votes_count
+    category {
+      title
+      id
+    }
+  }
+
+  newProjects {
+    id
+    title
+    thumbnail_image
+    votes_count
+    category {
+      title
+      id
+    }
+  }
+
   allCategories {
     id
     title
@@ -13,14 +35,4 @@ query ExploreProjects {
       }
     }
   }
-  newProjects {
-    id
-    title
-    thumbnail_image
-    votes_count
-    category {
-      title
-      id
-    }
-  }
 }
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 79067a0..0bb9984 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -426,7 +426,7 @@ export type AllCategoriesQuery = { __typename?: 'Query', allCategories: Array<{
 export type ExploreProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ExploreProjectsQuery = { __typename?: 'Query', allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> };
+export type ExploreProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, newProjects: Array<{ __typename?: 'Project', id: number, title: string, thumbnail_image: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }>, allCategories: Array<{ __typename?: 'Category', id: number, title: string, project: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> }> };
 
 export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1139,6 +1139,26 @@ export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategorie
 export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
 export const ExploreProjectsDocument = gql`
     query ExploreProjects {
+  hottestProjects(take: 10, skip: 0) {
+    id
+    title
+    thumbnail_image
+    votes_count
+    category {
+      title
+      id
+    }
+  }
+  newProjects {
+    id
+    title
+    thumbnail_image
+    votes_count
+    category {
+      title
+      id
+    }
+  }
   allCategories {
     id
     title
@@ -1153,16 +1173,6 @@ export const ExploreProjectsDocument = gql`
       }
     }
   }
-  newProjects {
-    id
-    title
-    thumbnail_image
-    votes_count
-    category {
-      title
-      id
-    }
-  }
 }
     `;
 
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index ae27548..d3388d4 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -58,7 +58,8 @@ export const handlers = [
         return res(
             ctx.data({
                 allCategories: allCategories(),
-                newProjects: newProjects()
+                newProjects: newProjects(),
+                hottestProjects: hottestProjects()
             })
         )
     }),
diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts
index cff9a2c..81d7927 100644
--- a/src/mocks/resolvers.ts
+++ b/src/mocks/resolvers.ts
@@ -3,6 +3,7 @@ import { Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql'
 import { Chance } from "chance";
 import { topics } from "./data/topics";
 import { hackathons } from "./data/hackathon";
+import { shuffle } from "src/utils/helperFunctions";
 
 const chance = new Chance()
 
@@ -28,7 +29,7 @@ export function allCategories() {
 }
 
 export function newProjects() {
-    return MOCK_DATA.projects;
+    return shuffle(MOCK_DATA.projects).slice(0, 10);
 }
 
 export function getProject(projectId: number) {