feat: add lab card to want to learn more section (cilium#555)

* feat: add lab card to want to learn more section

* chore: trigger build

* feat: add lab card to community section

src/components/pages/use-cases/join-us-cards/card/card.jsx

@@ -4,45 +4,47 @@ import React from 'react';
 
 import Heading from 'components/shared/heading';
 import Link from 'components/shared/link';
+import labIcon from 'images/lab.svg';
 
-import DocumentationIcon from './images/documentation.inline.svg';
-import HelpIcon from './images/help.inline.svg';
-import SlackIcon from './images/slack-with-back.inline.svg';
+import documentationIcon from './images/documentation.svg';
+import helpIcon from './images/help.svg';
+import slackIcon from './images/slack-with-back.svg';
 
 const iconList = {
-  documentation: DocumentationIcon,
-  help: HelpIcon,
-  slack: SlackIcon,
+  documentation: documentationIcon,
+  help: helpIcon,
+  slack: slackIcon,
+  lab: labIcon,
 };
 
-const Card = ({ icon, title, description, buttonText, buttonLink, buttonTarget, className }) => {
-  const Icon = iconList[icon];
-
-  return (
-    <article
-      className={classNames(
-        'flex flex-col rounded-xl bg-white px-6 py-8 shadow-primary',
-        className
-      )}
+const Card = ({ icon, title, description, buttonText, buttonLink, buttonTarget, className }) => (
+  <article
+    className={classNames('flex h-full flex-col rounded-xl bg-white p-8 shadow-primary', className)}
+  >
+    <img
+      className="h-10 w-10 lg:h-16 lg:w-16"
+      src={iconList[icon]}
+      alt=""
+      width="40"
+      height="40"
+      loading="lazy"
+    />
+    <Heading className="mt-6 leading-tight" tag="h4" size="2xs">
+      {title}
+    </Heading>
+    <p className="mt-4 w-full pb-12" dangerouslySetInnerHTML={{ __html: description }} />
+    <Link
+      to={buttonLink}
+      target={buttonTarget}
+      type="text"
+      theme="primary"
+      rel="noopener noreferrer"
+      className="mt-auto border-t border-gray-3 pt-6"
     >
-      <Icon className="h-10 w-10  lg:h-16 lg:w-16" />
-      <Heading className="mt-5 leading-tight" tag="h4" size="xs">
-        {title}
-      </Heading>
-      <p className="mt-2.5 w-full pb-6" dangerouslySetInnerHTML={{ __html: description }} />
-      <Link
-        to={buttonLink}
-        target={buttonTarget}
-        type="text"
-        theme="primary"
-        rel="noopener noreferrer"
-        className="mt-auto border-t border-gray-3 pt-6"
-      >
-        {buttonText}
-      </Link>
-    </article>
-  );
-};
+      {buttonText}
+    </Link>
+  </article>
+);
 
 Card.propTypes = {
   icon: PropTypes.oneOf(['slack', 'documentation', 'help']).isRequired,

src/components/pages/use-cases/join-us-cards/join-us-cards.jsx

@@ -34,12 +34,22 @@ const items = [
     buttonText: 'Get Help',
     buttonLink: '/get-help/',
   },
+  {
+    icon: 'lab',
+    title: 'Try a Lab',
+    description:
+      'Deep dive into Cilium and its features with labs provided by companies within the Cilium ecosystem',
+    buttonText: 'Try a Lab',
+    buttonLink: 'https://cilium.io/labs/categories/getting-started/',
+    buttonTarget: '_blank',
+  },
 ];
 
 const JoinUsCard = ({ className }) => (
   <section className="bg-gray-4">
     <Container
       className={classNames('flex flex-col items-center pb-16 md:pb-20 lg:pb-28', className)}
+      size="lg"
     >
       <Heading
         className="mb-8 max-w-full text-center leading-tight md:mb-10 lg:mb-14 lg:max-w-[70%] lg:leading-tight xl:leading-tight"
@@ -48,11 +58,13 @@ const JoinUsCard = ({ className }) => (
       >
         Want to Learn More?
       </Heading>
-      <div className="flex flex-col flex-wrap gap-8 md:grid md:grid-cols-2 md:gap-8 lg:grid lg:grid-cols-3">
+      <ul className="grid gap-8 grid-cols-1 max-w-[1420px] mx-auto md:grid-cols-2 md:gap-8 2xl:grid-cols-4">
         {items.map((item, index) => (
-          <Card {...item} key={item.title + index} />
+          <li key={item.title + index}>
+            <Card {...item} />
+          </li>
         ))}
-      </div>
+      </ul>
     </Container>
   </section>
 );

src/components/shared/community/community.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import Container from 'components/shared/container';
 import Heading from 'components/shared/heading';
 import Link from 'components/shared/link';
+import labIcon from 'images/lab.svg';
 import githubIcon from 'images/social/github.svg';
 import linkedinIcon from 'images/social/linkedin.svg';
 import slackIcon from 'images/social/slack.svg';
@@ -16,21 +17,21 @@ const items = [
   {
     icon: slackIcon,
     title: 'Join our Slack channel',
-    titleWidth: 'xl:w-[122px]',
+    titleWidth: 'xl:w-32',
     url: 'https://slack.cilium.io',
     target: '_blank',
   },
   {
     icon: githubIcon,
     title: 'Contribute on GitHub',
-    titleWidth: 'xl:w-28',
+    titleWidth: 'xl:w-24',
     url: 'https://github.com/cilium/cilium',
     target: '_blank',
   },
   {
     icon: xIcon,
     title: 'Follow us on X',
-    titleWidth: 'xl:w-24',
+    titleWidth: 'xl:w-20',
     url: 'https://x.com/ciliumproject',
     target: '_blank',
   },
@@ -43,10 +44,16 @@ const items = [
   {
     icon: linkedinIcon,
     title: 'Follow us on LinkedIn',
-    titleWidth: 'xl:w-[106px]',
+    titleWidth: 'xl:w-24',
     url: 'https://www.linkedin.com/company/cilium/',
     target: '_blank',
   },
+  {
+    icon: labIcon,
+    title: 'Explore Cilium Labs',
+    titleWidth: 'xl:w-32',
+    url: '/labs/categories/getting-started/',
+  },
 ];
 
 const themeClassNames = {
@@ -72,38 +79,39 @@ const Community = ({ className, theme, isTitleCentered }) => (
       <Heading className={classNames(isTitleCentered && 'text-center')} tag="h2">
         {title}
       </Heading>
-      <div className="mt-7 grid grid-cols-1 gap-4 sm:grid-cols-2 md:mt-10 md:gap-5 lg:mt-12 lg:grid-cols-3 lg:mb-1.5 xl:grid-cols-5">
+      <ul className="mt-7 grid grid-cols-1 gap-4 sm:grid-cols-2 md:mt-10 md:gap-5 lg:mt-14 lg:grid-cols-3 lg:mb-1.5 xl:grid-cols-6 xl:gap-8">
         {items.map(({ icon, title, url, target, titleWidth }, index) => (
-          <Link
-            to={url}
-            target={target}
-            className={classNames(
-              'flex items-center rounded-lg p-6 md:flex-col md:pb-8 md:pt-7 lg:pt-9 lg:pb-11 xl:px-7',
-              themeClassNames[theme].card
-            )}
-            key={index}
-            type="text"
-            theme="black"
-          >
-            <img
-              className="shrink-0 h-9 w-9 md:h-11 md:w-11"
-              src={icon}
-              alt=""
-              width="36"
-              height="36"
-              loading="lazy"
-            />
-            <span
+          <li key={index}>
+            <Link
+              to={url}
+              target={target}
               className={classNames(
-                'ml-4 text-center font-semibold leading-snug truncate md:m-0 md:mt-[18px] md:text-lg md:leading-snug lg:whitespace-normal xl:leading-tight',
-                titleWidth
+                'flex items-center rounded-lg p-6 md:flex-col md:pb-8 md:pt-7 lg:pt-9 lg:pb-11 xl:p-7',
+                themeClassNames[theme].card
               )}
+              type="text"
+              theme="black"
             >
-              {title}
-            </span>
-          </Link>
+              <img
+                className="shrink-0 h-9 w-9 md:h-11 md:w-11"
+                src={icon}
+                alt=""
+                width="36"
+                height="36"
+                loading="lazy"
+              />
+              <span
+                className={classNames(
+                  'ml-4 text-center font-bold leading-snug truncate md:m-0 md:mt-[18px] md:text-lg md:leading-snug lg:whitespace-normal xl:mt-3.5 xl:text-base xl:leading-tight',
+                  titleWidth
+                )}
+              >
+                {title}
+              </span>
+            </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </Container>
   </section>
 );