chore: Update welcome page (#5555)

Author: kyle-ssg

frontend/web/components/onboarding/GettingStartedResource.tsx

@@ -1,13 +1,7 @@
 import React, { FC } from 'react'
+import { Resource } from './data/onboarding.data'
 
-type ResourceLinkType = {
-  image: string
-  url: string
-  title: string
-  description: string
-}
-
-const GettingStartedResource: FC<ResourceLinkType> = ({
+const GettingStartedResource: FC<Resource> = ({
   description,
   image,
   title,
@@ -23,18 +17,18 @@ const GettingStartedResource: FC<ResourceLinkType> = ({
                 aspectRatio: '155 / 200',
                 height: 150,
                 objectFit: 'cover',
-                objectPosition: 'center',
+                objectPosition: 'top',
               }}
               className=' rounded'
-              src={image}
+              {...image}
             />
           </div>
           <div className='h-100 d-flex flex-column justify-content-center p-3'>
             <h6 className={`d-flex align-items-center gap-1`}>{title}</h6>
 
-            <h6 className='fw-normal d-flex text-muted flex-1'>
+            <span className='fw-normal fs-small  text-muted '>
               {description}
-            </h6>
+            </span>
           </div>
         </div>
       </div>

frontend/web/components/onboarding/data/onboarding.data.tsx

@@ -1,6 +1,8 @@
+import { ImgHTMLAttributes } from 'react'
+
 export type Resource = {
   description: string
-  image: string
+  image: Partial<ImgHTMLAttributes<any>>
   title: string
   url: string
 }
@@ -13,17 +15,34 @@ type LinkItem = {
 export const resources: Resource[] = [
   {
     'description':
-      'A hands-on guide covering best practices, use cases and more.',
-    'image': '/static/images/welcome/featured1.png',
-    'title': 'eBook | Unlock Modern Software Development with Feature Flags',
-    url: 'https://www.flagsmith.com/ebook/flip-the-switch-on-modern-software-development-with-feature-flags?utm_source=app',
+      'Move faster while improving safety, fight vendor lock-in, and how global organisations like eBay use feature flags at scale.',
+    'image': {
+      src: 'https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/682f63f56c99f14170876b92_Cover.png',
+      srcSet:
+        'https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/682f63f56c99f14170876b92_Cover-p-500.png 500w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/682f63f56c99f14170876b92_Cover-p-800.png 800w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/682f63f56c99f14170876b92_Cover-p-1080.png 1080w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/682f63f56c99f14170876b92_Cover.png 1224w',
+    },
+    'title': 'eBook | Scaling Feature Flags',
+    url: 'https://www.flagsmith.com/ebook/scaling-feature-flags-a-roadmap?utm_source=app',
   },
   {
     'description': 'Set yourself up for success with these best practices.',
-    'image': '/static/images/welcome/featured2.png',
+    'image': {
+      src: 'https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header.png',
+      srcSet:
+        'https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header-p-500.png 500w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header-p-800.png 800w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header-p-1080.png 1080w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header-p-1600.png 1600w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header-p-2000.png 2000w, https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/67fff41c071081c1a18d7102_Feature%20Flags%20Best%20Practices%20Article%20Header.png 2400w',
+    },
     'title': 'Blog Post | Feature Flag best practices',
     url: 'https://www.flagsmith.com/blog/feature-flags-best-practices?utm_source=app',
   },
+  {
+    'description':
+      'A hands-on guide covering best practices, use cases and more.',
+    'image': {
+      src: 'https://cdn.prod.website-files.com/645258eae17c724fb2ca4915/673b280d0c8c9a9b1d58ee63_modern-software-development.webp',
+    },
+    'title': 'eBook | Unlock Modern Software Development with Feature Flags',
+    url: 'https://www.flagsmith.com/ebook/flip-the-switch-on-modern-software-development-with-feature-flags?utm_source=app',
+  },
 ]
 
 export const links: LinkItem[] = [

frontend/web/components/pages/GettingStartedPage.tsx

@@ -142,7 +142,7 @@ const GettingStartedPage: FC = () => {
         </PageTitle>
         <div className='row row-gap-4'>
           <div className='col-xxl-9 col-xl-8'>
-            <div className='card bg-card py-3 shadow rounded'>
+            <div className='card h-100 bg-card py-3 shadow rounded'>
               <h5 className='mb-3 px-3'>Getting Started</h5>
               <hr className='mt-0 py-0' />
               <div className='row px-3 row-gap-4'>
@@ -168,7 +168,10 @@ const GettingStartedPage: FC = () => {
               <hr className='mt-0 py-0' />
               <h5 className='mb-3 px-3'>Resources</h5>
               <hr className='mt-0 py-0' />
-              <div className='d-flex flex-column gap-4'>
+              <div
+                style={{ maxHeight: 450 }}
+                className='overflow-y-auto custom-scroll d-flex flex-column gap-4'
+              >
                 {resources.map((v) => (
                   <GettingStartedResource key={v.url} {...v} />
                 ))}

frontend/web/static/images/welcome/featured1.png

@@ -113,6 +113,7 @@ $side-width: 750px;
       overflow-y: hidden;
     }
     &.overflow-y-auto {
+      overflow-y: hidden;
       .modal-body {
         overflow-y: auto;
       }

frontend/web/static/images/welcome/featured2.png

@@ -223,6 +223,8 @@
     filter: blur(5px);
 }
 
+.overflow-y-auto{ overflow-y: auto}
+
 .user-select-none {
     user-select: none;
 }