add fixs

app/projects/page.tsx

@@ -30,7 +30,7 @@ export default function ProjectsPage() {
   return (
     <section>
       <div className="bg-anakiwa-200">
-        <div className="container py-8 mx-auto md:py-12 lg:px-24 lg:py-16">
+        <div className="container py-8 mx-auto md:py-12 lg:py-16">
           <div className="flex flex-col justify-between gap-10">
             <div>
               <h1 className="text-3xl font-bold md:text-5xl">

components/project/project-filters-bar.tsx

@@ -88,7 +88,7 @@ const FilterButtons = ({
   )
 
   return (
-    <div className="relative grid grid-cols-3 col-span-1 gap-4 md:gap-6 md:col-span-2 after:content-none md:after:content-[''] after:absolute after:h-11 after:w-[1px] after:bg-anakiwa-500 after:-right-[25px]">
+    <div className="relative grid grid-cols-3 col-span-1 gap-2 md:gap-4 md:gap-6 md:col-span-2 after:content-none md:after:content-[''] after:absolute after:h-11 after:w-[1px] after:bg-anakiwa-500 after:-right-[25px]">
       {Object.entries(ThemesButtonMapping).map(([key, { label, icon }]) => {
         const isActive = activeFilters?.themes?.includes(key)
         const variant = isActive ? "blue" : "white"
@@ -180,7 +180,7 @@ export default function ProjectFiltersBar() {
                 size="sm"
                 onClick={() => setShowModal(false)}
               >
-                Show project
+                Show projects
               </Button>
             </div>
           </div>
@@ -271,7 +271,7 @@ export default function ProjectFiltersBar() {
         </span>
         <div className="grid items-center justify-between grid-cols-1 gap-3 md:gap-12 md:grid-cols-5">
           <FilterButtons />
-          <div className="grid grid-cols-[1fr_auto] col-span-1 gap-3 md:col-span-3">
+          <div className="grid grid-cols-[1fr_auto] col-span-1 gap-2 md:gap-3 md:col-span-3">
             <Input
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setSearchQuery(e?.target?.value)

components/project/project-list.tsx

@@ -3,6 +3,7 @@
 import React from "react"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
+import NoResultIcon from "@/public/icons/no-result.svg"
 import { useProjectFiltersState } from "@/state/useProjectFiltersState"
 
 import { ProjectLinkWebsite } from "@/lib/types"
@@ -18,10 +19,30 @@ const TagsIconMapping: Record<string, any> = {
   research: <Icons.readme height={12} width={12} />,
 }
 
+const NoResults = () => {
+  return (
+    <div className="flex flex-col gap-2 pb-40 text-center">
+      <div className="mx-auto">
+        <Image className="w-9 h-9" src={NoResultIcon} alt="no result icon" />
+      </div>
+      <span className="text-xl text-2xl font-bold font-display text-tuatara-950">
+        No results found.
+      </span>
+      <span className="text-lg font-normal text-tuatara-950">
+        No projects matching these filters. Try changing your search.
+      </span>
+    </div>
+  )
+}
+
 export default function ProjectList() {
   const { projects } = useProjectFiltersState((state) => state)
   const router = useRouter()
 
+  const noItems = projects?.length === 0
+
+  if (noItems) return <NoResults />
+
   return (
     <div className="flex flex-wrap justify-center gap-6 pb-6">
       {projects.map((project) => {

components/project/project-result-bar.tsx

@@ -30,7 +30,7 @@ export const ProjectResultBar = () => {
       <span className={labelClass}>
         {`Showing ${projects?.length} projects with:`}{" "}
       </span>
-      <div className="inline-flex flex-wrap gap-4">
+      <div className="inline-flex flex-wrap gap-1 md:gap-4">
         {Object.entries(activeFilters).map(([key, filters], index) => {
           return (
             <>

public/icons/no-result.svg

@@ -0,0 +1,11 @@
+<svg width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5224_47325)">
+<path d="M26.7955 24.2331L33.0416 30.4777L30.978 32.5412L24.7335 26.2952C22.4099 28.1578 19.5199 29.1709 16.542 29.1666C9.29699 29.1666 3.41699 23.2866 3.41699 16.0416C3.41699 8.79663 9.29699 2.91663 16.542 2.91663C23.787 2.91663 29.667 8.79663 29.667 16.0416C29.6712 19.0195 28.6581 21.9096 26.7955 24.2331ZM23.8701 23.151C25.7209 21.2477 26.7545 18.6964 26.7503 16.0416C26.7503 10.4008 22.1814 5.83329 16.542 5.83329C10.9012 5.83329 6.33366 10.4008 6.33366 16.0416C6.33366 21.681 10.9012 26.25 16.542 26.25C19.1968 26.2541 21.7481 25.2205 23.6514 23.3698L23.8701 23.151Z" fill="#50C3E0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.139 20.4168L16.5419 17.0139L16.5418 17.0138L13.1389 20.4167L13.139 20.4168ZM20.9168 12.6388L17.5139 16.0417L17.514 16.0418L20.9169 12.6389L20.9168 12.6388ZM20.9168 19.4446L19.9448 20.4167L19.9449 20.4168L20.9169 19.4447L20.9168 19.4446ZM21.9481 19.4447L18.5452 16.0418L21.9481 12.6389L19.9449 10.6356L16.5419 14.0386L13.139 10.6356L11.1357 12.6389L14.5387 16.0418L11.1357 19.4447L13.139 21.448L16.5419 18.0451L19.9449 21.448L21.9481 19.4447Z" fill="#50C3E0"/>
+</g>
+<defs>
+<clipPath id="clip0_5224_47325">
+<rect width="35" height="35" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>