feat: update jumbo banner content on KIN homepage

Author: dmijatovic

frontend/components/home/kin/GradientBorderButton.tsx

@@ -5,7 +5,7 @@
 
 export default function GradientBorderButton({text, url, target = '_self', minWidth = '9rem'}: { text: string, url: string, target?: string, minWidth?: string }) {
   return <a href={url} className="cursor-pointer" target={target}>
-    <button style={{minWidth}} className="group m-2 p-[0.125rem] rounded transition duration-500 bg-gradient-to-tl to-base-400 via-base-500 from-primary bg-size-200 bg-pos-0 hover:bg-pos-100">
+    <button style={{minWidth}} className="group p-[0.125rem] rounded transition duration-500 bg-gradient-to-tl to-base-400 via-base-500 from-primary bg-size-200 bg-pos-0 hover:bg-pos-100">
       <span className="flex w-full bg-base-800  p-4 rounded justify-center pointer-events-non group-hover:bg-base-700 transition duration-300  text-base-400 group-hover:text-base-100">
         {text}
       </span></button>

frontend/components/home/kin/JumboBanner.tsx

@@ -3,6 +3,10 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import GradientBorderButton from './GradientBorderButton'
+import {config} from './config'
+const {button} = config
+
 export default function JumboBanner() {
   return (
     <div className="max-w-screen-xl mx-auto p-4  grid lg:grid-cols-[3fr,2fr] gap-8 md:gap-20 lg:my-20 md:px-10">
@@ -11,37 +15,22 @@ export default function JumboBanner() {
         data-aos="fade" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000"
       >
         <h1 className="text-3xl xl:text-4xl font-rsd-titles font-bold">
-          Accelerating Transitions Together
+          VEDA for climate research
         </h1>
         <p className="mt-8 text-lg">
-          The Netherlands has what it takes to make the major transitions needed for a sustainable future. Civil society players are working hard to change the system. Companies and organisations are taking action, governments are adapting policies and much has been invested in scientific knowledge. However, to prevent the worst climate change, this has to happen faster! This is only possible if knowledge from practice and science cooperate more intensively.
+          VEDA offers an overview of climate related research in the Netherlands. Explore projects and contribute by adding your reseach programme.
+        </p>
+        <p className="mt-8">
+          <GradientBorderButton
+            text={button.discover.label}
+            url={button.discover.url}
+            target={button.discover.target}
+            // minWidth='14rem'
+          />
         </p>
-        {/* <p>
-          The KIN brings all parties together. Together, we want to make a substantial contribution to accelerating the transitions needed to be a sustainable, climate-neutral society by 2050 as soon as possible.
-        </p> */}
       </div>
-
-      <iframe
-        src="https://www.youtube.com/embed/UxVfwZjGCHI?si=pHraOMBOYR5xt104"
-        title="YouTube video player"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerPolicy="strict-origin-when-cross-origin"
-        allowFullScreen
-        className='rounded-lg w-[28rem] h-[20rem] m-auto xl:w-[32rem] xl:h-[20rem]'
-      >
-      </iframe>
-      {/* Video: it will only load once the page is rendered, and only when the user clicks on play. And it will strea the video after. */}
-      {/* <video width="100%"
-        height="auto"
-        className='rounded-lg'
-        controls preload="metadata"
-        // poster="/video/rsd-video-cover.webp"
-        data-aos="fade" data-aos-delay="100"
-        data-aos-duration="600"
-        data-aos-easing="ease-in-out">
-        <source src="https://www.youtube.com/watch?v=UxVfwZjGCHI" type="video/mp4" />
-        <source src="https://www.youtube.com/watch?v=UxVfwZjGCHI" type="video/webm" />
-          Your browser does not support HTML5 video.
-      </video> */}
+      {/* use image instead of video */}
+      <img src="/images/veda-banner.svg" alt="Veda by KIN" />
     </div>
   )
 }

frontend/components/home/kin/config.ts

@@ -8,8 +8,8 @@
 export const config = {
   button: {
     discover: {
-      label: 'Discover Software',
-      url: '/software?order=mention_cnt',
+      label: 'Explore VEDA',
+      url: '/projects?order=impact_cnt',
       target:'_self'
     },
     signUp: {

frontend/components/home/kin/index.tsx

@@ -22,7 +22,7 @@ import OurProgramsSection from './OurProgramsSection'
 import ContributeSection from './ContributeSection'
 import TopNewsSection from './TopNewsSection'
 
-export default function RsdHome({news}:{news:TopNewsProps[]}) {
+export default function RsdHome({news}:Readonly<{news:TopNewsProps[]}>) {
   // Initialize AOS library
   useEffect(() => {
     AOS.init({offset: 16})
@@ -38,7 +38,7 @@ export default function RsdHome({news}:{news:TopNewsProps[]}) {
 
       <div className="bg-base-800">
         {/* Arc separator  */}
-        <Arc className="w-full text-base-100 dark:text-base-900 -translate-y-1"></Arc>
+        <Arc className="w-full text-base-100 dark:text-base-900 -translate-y-1"/>
         {/* Top 3 news items, ONLY if there are some */}
         <TopNewsSection news={news} />
         {/* Our Programs Section */}