fix: updated assets, links

src/components/homepage/ResourcesSection.jsx

@@ -19,10 +19,14 @@ export default function ResourcesSection() {
               <div>
                 <img
                   src={resource.image}
-                  className="mb-3 aspect-square rounded-lg"
+                  className="mb-3 aspect-square w-full rounded-lg object-cover"
                 />
                 <h3 className="font-semibold lg:text-xl">
-                  <Link href={resource.url} className="text-inherit">
+                  <Link
+                    href={resource.url}
+                    className="text-inherit"
+                    target="_blank"
+                  >
                     {resource.title}
                   </Link>
                 </h3>

src/components/homepage/SDKsSection.jsx

@@ -82,28 +82,43 @@ export default function SDKsSection() {
             <div className="flex max-w-sm flex-1 items-center rounded-full border border-solid border-text-400 text-sm lg:text-base">
               <div
                 className={clsx(
-                  'flex-1 py-1 text-center',
+                  'flex-1 py-1 text-center cursor-pointer',
                   visibleSection === 'web' &&
                     'rounded-full border-2 border-solid'
                 )}
+                onClick={() => {
+                  document
+                    .getElementById('web')
+                    .scrollIntoView({ block: 'center' });
+                }}
               >
                 Web
               </div>
               <div
                 className={clsx(
-                  'flex-1 py-1 text-center',
+                  'flex-1 py-1 text-center cursor-pointer',
                   visibleSection === 'mobile' &&
                     'rounded-full border-2 border-solid'
                 )}
+                onClick={() => {
+                  document
+                    .getElementById('mobile')
+                    .scrollIntoView({ block: 'center' });
+                }}
               >
                 Mobile
               </div>
               <div
                 className={clsx(
-                  'flex-1 py-1 text-center',
+                  'flex-1 py-1 text-center cursor-pointer',
                   visibleSection === 'plugin' &&
                     'rounded-full border-2 border-solid'
                 )}
+                onClick={() => {
+                  document
+                    .getElementById('plugin')
+                    .scrollIntoView({ block: 'center' });
+                }}
               >
                 Plugin
               </div>
@@ -114,6 +129,7 @@ export default function SDKsSection() {
         <div
           className="sdk-section mb-16 flex flex-col rounded-3xl bg-secondary-900 lg:flex-row"
           data-section="web"
+          id="web"
         >
           <div className="flex flex-[2] flex-col justify-center p-6 text-center lg:pl-16 lg:text-left">
             <h3 className="text-3xl">Web</h3>
@@ -180,6 +196,7 @@ export default function SDKsSection() {
         <div
           className="sdk-section mb-16 flex flex-col rounded-3xl bg-secondary-900 lg:flex-row"
           data-section="mobile"
+          id="mobile"
         >
           <div className="flex flex-[2] flex-col justify-center p-6 text-center lg:pl-16 lg:text-left">
             <h3 className="text-3xl">Mobile</h3>
@@ -264,6 +281,7 @@ export default function SDKsSection() {
         <div
           className="sdk-section mb-16 flex flex-col rounded-3xl bg-secondary-900 lg:flex-row"
           data-section="plugin"
+          id="plugin"
         >
           <div className="flex flex-1 flex-col justify-center p-6 text-center lg:pl-16 lg:text-left">
             <h3 className="text-3xl">Plugin SDK</h3>
@@ -287,6 +305,7 @@ export default function SDKsSection() {
         {/* <div
           className="sdk-section mb-16 flex flex-col rounded-3xl bg-secondary-900 lg:flex-row"
           data-section="desktop"
+          id="desktop"
         >
           <div className="flex flex-[2] flex-col justify-center p-6 text-center lg:pl-16 lg:text-left">
             <div className="mb-4 text-xs font-semibold">COMING SOON</div>

src/resources.js

@@ -1,29 +1,30 @@
 const RESOURCES = [
   {
-    url: 'https://example.com',
+    url: '/guides/controlling-an-active-session',
     type: 'Guide',
     title: 'Controlling an Active Session',
     description:
       'An active session (ongoing meeting) can be controlled programatically using Active Session APIs.',
-    image: 'https://source.unsplash.com/random',
+    image: '/static/landing-page/resources/active-session.png',
     duration: '3 min',
   },
   {
-    url: 'https://example.com',
+    url: 'https://dyte.io/blog/reliability-testing/',
     type: 'Blog',
     title: 'Consistent & Reliable Media Experience',
     description:
       'Each browser has its own implementation of standards. Learn how Dyte tests the SDK to deliver a consistent & reliable media experience.',
-    image: 'https://source.unsplash.com/random',
+    image:
+      'https://dyte.io/blog/content/images/size/w1750/2022/08/Consistent-and-Reliable-Media-Experience-Powered-by-Dyte.png',
     duration: '4 min',
   },
   {
-    url: 'https://example.com',
+    url: 'https://www.youtube.com/watch?v=aRED9bsgyrQ',
     type: 'Video',
     title: 'Integrating React Core SDK into ReactJS',
     description:
       'In this episode of Dyte Bytes, join Tarush to learn about integrating Dyte Video SDK into ReactJS applications - from scratch.',
-    image: 'https://source.unsplash.com/random',
+    image: 'https://img.youtube.com/vi/aRED9bsgyrQ/hqdefault.jpg',
     duration: '6 min',
   },
 ];

src/snippets/resources.html

@@ -32,6 +32,12 @@
         FAQ
       </a>
     </li>
+    <li>
+      <a href="#" class="flex items-center gap-2 text-inherit">
+        <img src="/static/landing-page/sdk-icons/resources/apps.png" />
+        Release Notes
+      </a>
+    </li>
   </ul>
 
   <!-- <div class="hr-line"></div> -->