feat: add digest page

src/components/shared/link/link.jsx

@@ -122,6 +122,12 @@ const Link = ({
       >
         {children}
         {isUnderline && underline}
+        {withArrow && (
+          <span className="relative mt-0.5 w-1.5 overflow-hidden transition-[width] duration-200 group-hover:w-3">
+            <ArrowIcon className="ml-auto w-1.5" />
+            <span className="absolute right-px top-1/2 h-px w-full -translate-y-1/2 bg-primary-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+          </span>
+        )}
       </GatsbyLink>
     );
   }

src/components/shared/reusable-sections/section-with-big-icons/section-with-big-icons.jsx

@@ -1,11 +1,17 @@
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import Heading from 'components/shared/heading';
 import Link from 'components/shared/link';
 
-const SectionWithBigIcons = ({ title, items }) => (
-  <section className="section-with-big-icons safe-paddings mt-40 lg:mt-[120px] md:mt-[100px] sm:mt-20">
+const SectionWithBigIcons = ({ className, title, items, isCentered }) => (
+  <section
+    className={clsx(
+      'section-with-big-icons safe-paddings mt-40 lg:mt-[120px] md:mt-[100px] sm:mt-20',
+      className
+    )}
+  >
     <div className="container-md px-8 sm:w-full sm:px-5">
       <Heading
         className="text-center font-medium leading-denser tracking-snug lg:text-5xl md:text-[32px] sm:text-3xl"
@@ -15,9 +21,9 @@ const SectionWithBigIcons = ({ title, items }) => (
       >
         {title}
       </Heading>
-      <ul className="mt-14 grid grid-cols-3 grid-rows-2 gap-x-16 gap-y-12 lg:mt-12 lg:max-w-none lg:gap-x-[52px] lg:px-9 md:mt-10 md:gap-x-7 md:gap-y-8 md:px-0 sm:mt-8 sm:grid-cols-2 sm:gap-7 sm-xs:grid-cols-1">
-        {items.map(({ icon, title, description, linkUrl }, index) => (
-          <li key={index} className="flex flex-col">
+      <ul className="grid-rows-auto mt-14 grid grid-cols-3 gap-x-16 gap-y-12 lg:mt-12 lg:max-w-none lg:gap-x-9 lg:px-9 md:mt-10 md:gap-x-7 md:gap-y-8 md:px-0 sm:mt-8 sm:grid-cols-2 sm:gap-7 sm-xs:grid-cols-1">
+        {items.map(({ icon, title, description, linkUrl, linkText }, index) => (
+          <li key={index} className={clsx('flex flex-col', isCentered && 'items-center')}>
             <img
               className="h-10 w-fit sm:h-8"
               src={icon}
@@ -40,7 +46,11 @@ const SectionWithBigIcons = ({ title, items }) => (
               rel="noopener noreferrer"
               withArrow
             >
-              <span className="sr-only">{title} - </span>Learn more
+              {linkText || (
+                <>
+                  <span className="sr-only">{title} - </span>Learn more
+                </>
+              )}
             </Link>
           </li>
         ))}
@@ -50,15 +60,23 @@ const SectionWithBigIcons = ({ title, items }) => (
 );
 
 SectionWithBigIcons.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       icon: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       description: PropTypes.string.isRequired,
       linkUrl: PropTypes.string.isRequired,
+      linkText: PropTypes.string,
     })
   ).isRequired,
+  isCentered: PropTypes.bool,
+};
+
+SectionWithBigIcons.defaultProps = {
+  className: '',
+  isCentered: false,
 };
 
 export default SectionWithBigIcons;

src/components/shared/reusable-sections/text-with-picture/text-with-picture.jsx

@@ -5,8 +5,21 @@ import React from 'react';
 import Button from 'components/shared/button';
 import Heading from 'components/shared/heading';
 
-const TextWithPicture = ({ title, description, image, button, theme }) => (
-  <section className="text-with-picture safe-paddings mt-40 lg:mt-36 md:mt-[104px] sm:mt-14">
+const TextWithPicture = ({
+  className,
+  title,
+  description,
+  image,
+  imageClassName,
+  button,
+  theme,
+}) => (
+  <section
+    className={clsx(
+      'text-with-picture safe-paddings mt-40 lg:mt-36 md:mt-[104px] sm:mt-14',
+      className
+    )}
+  >
     <div className="container-lg px-8 md:px-7 sm:px-4">
       <div
         className={clsx(
@@ -15,7 +28,7 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
         )}
       >
         <div
-          className={clsx('sm:order-first sm:mb-6 sm:pl-0 sm:text-center', {
+          className={clsx('relative z-10 sm:order-first sm:mb-6 sm:pl-0 sm:pr-0 sm:text-center', {
             'mb-12 max-w-[704px] text-center lg:mb-10 md:mb-8 md:max-w-lg sm:mb-6':
               theme === 'imageFullWidth',
             'order-last pl-24 lg:pl-16 md:pl-8': theme === 'imageLeft',
@@ -50,7 +63,7 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
             </Button>
           )}
         </div>
-        <div className="overflow-hidden rounded-lg">{image}</div>
+        <div className={clsx('overflow-hidden rounded-lg', imageClassName)}>{image}</div>
         {button && theme === 'imageFullWidth' && (
           <Button
             className="mt-9 md:mt-8 sm:mt-6"
@@ -61,6 +74,7 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
             target={button.target}
           >
             {button.label}
+            {button.hiddenLabel && <span className="sr-only"> {button.hiddenLabel}</span>}
           </Button>
         )}
       </div>
@@ -69,21 +83,26 @@ const TextWithPicture = ({ title, description, image, button, theme }) => (
 );
 
 TextWithPicture.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   image: PropTypes.node.isRequired,
+  imageClassName: PropTypes.string,
   button: PropTypes.shape({
     label: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
     rel: PropTypes.string,
     target: PropTypes.string,
+    hiddenLabel: PropTypes.string,
   }),
   theme: PropTypes.oneOf(['imageLeft', 'imageRight', 'imageFullWidth']),
 };
 
 TextWithPicture.defaultProps = {
+  className: '',
   button: null,
   theme: 'imageLeft',
+  imageClassName: '',
 };
 
 export default TextWithPicture;