Merge pull request #139 from Vizzuality/SKY30-202-kh-2-dynamic-title

[SKY30-202] makes knowledge hub title dynamic according to selection

frontend/src/pages/knowledge-hub/index.tsx

@@ -1,20 +1,28 @@
 import { useRef } from 'react';
 
+import { useAtomValue } from 'jotai';
+
 import Cta from '@/components/static-pages/cta';
 import Intro from '@/components/static-pages/intro';
 import Section from '@/components/static-pages/section';
 import { PAGES } from '@/constants/pages';
 import CardFilters from '@/containers/knowledge-hub/card-filters';
 import CardList from '@/containers/knowledge-hub/card-list';
+import { cardFiltersAtom } from '@/containers/knowledge-hub/store';
 import Layout, { Content } from '@/layouts/static-page';
 
 const KnowledgeHubPage = () => {
   const sectionRef = useRef<HTMLDivElement>(null);
+  const filters = useAtomValue(cardFiltersAtom);
 
   const handleIntroScrollClick = () => {
     sectionRef?.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
+  const title = filters.resourceType
+    ? `${filters.resourceType.toLocaleLowerCase()} resources`
+    : 'all 30x30 resources';
+
   return (
     <Layout
       title="Knowledge Hub"
@@ -45,7 +53,7 @@ const KnowledgeHubPage = () => {
           <div className="space-y-7">
             <h2 className="text-[52px] font-black leading-none">
               I am looking for...
-              <br /> Data Tools.
+              <br /> {title}.
             </h2>
             <div>
               <CardFilters />