mp-design-system 1.2.28 → 1.2.34

package/src/prototype/index.njk

@@ -8,6 +8,9 @@ tags: prototype
 {% from "components/signpost/macro.njk" import signpost %}
 {% from "components/button/macro.njk" import button %}
 {% from "components/card/macro.njk" import industryCard %}
+{% from "components/card/macro.njk" import productCard %}
+{% from "components/card/macro.njk" import technologyCard %}
+{% from "components/card/macro.njk" import measurementTypeCard %}
 {% from "components/campaign/macro.njk" import campaign %}
 {% from "components/card/macro.njk" import card %}
 {% from "components/option-list/macro.njk" import optionList %}
@@ -48,253 +51,334 @@ tags: prototype
         alt: ''
       }
     }) }}
+  </section>
 
-    <div class="u-wrap u-flow--l">
-      <header class="u-flow--l">
-        <h2 class="c-h c-h--step-5">Groundbreaking solutions for every industry</h2>
-        <div class="u-split u-split--bottom">
-          {{ prose({
-            content: ' <p>Find out more about how our scientific instruments help users better understand and shape everything from proteins, metals and polymers and to the soil and air around.</p>'
-          }) }}
-          {{ twi({ link: '', classes: 'u-link', label: 'View all industries', icon: 'arrow-right' }) }}
-        </div>
-      </header>
-
-      <div class="o-grid o-grid--layout o-grid--4/8">
-        <aside class="u-flow--m u-pad-m u-bg-blue-step-2">
-          <h3 class="c-h c-h--upper u-grey">Explore our products…</h3>
-          <ul class="u-flow--m">
-            <li class="u-flow--xs">
-              {{ optionList({
-                title: 'By range',
-                viewAllLink: '/prototype/products/#product-ranges',
-                links: [
-                  { link: '/prototype/range', label: 'Mastersizer' },
-                  { link: '/prototype/range', label: 'Zetasizer' },
-                  { link: '/prototype/range', label: 'Aeris' },
-                  { link: '/prototype/range', label: 'Epsilon' }
-                ]
-              }) }}
-            </li>
-            <li class="u-flow--xs">
-              {{ optionList({
-                title: 'By category',
-                viewAllLink: '/prototype/products/#product-categories',
-                links: [
-                  { link: '', label: 'Particle size analyzers' },
-                  { link: '', label: 'X-ray diffractometers' },
-                  { link: '', label: 'X-ray fluorescence spectrometers' }
-                ]
-              }) }}
-            <li class="u-flow--xs">
-              {{ optionList({
-                title: 'By technology',
-                viewAllLink: '',
-                links: [
-                  { link: '', label: 'Light scattering' },
-                  { link: '', label: 'X-ray analysis' },
-                  { link: '', label: 'Nanoparticle tracking analysis' }
-                ]
-              }) }}
-            </li>
-            <li class="u-flow--xs">
-              {{ optionList({
-                title: 'Contract research services',
-                viewAllLink: '',
-                links: [
-                  { link: '', label: 'Pharmaceutical services' },
-                  { link: '', label: 'Agrochemical services' }
-                ]
-              }) }}
-            </li>
-          </ul>
-        </aside>
+  <section class="mp c-slat c-slat--padded c-slat--dots u-bg-blue-step-3">
+    <div class="u-wrap u-flow--s-l">
+      <div class="u-wrap--content o-prose u-flow--prose u-flow--l">
+        <h2 class="c-h c-h--step-3">Groundbreaking solutions for every industry</h2>
+        {{ prose({
+          content: ' <p>Find out more about how our scientific instruments help users better understand and shape everything from proteins, metals and polymers to the soil and air around us.</p>'
+        }) }}
+      </div>
+      <div class="o-grid o-grid--of-four o-grid--swipeable">
+        {{ industryCard({
+          title: 'Mining and minerals',
+          link: '#',
+          description: 'Explore the world of Iron, Base metals, Bauxite, Clay, Coal, Industrial Minerals and Precious Metals in 3D.',
+          image: {
+            src: '/static/img/sector-1.jpg',
+            alt: ''
+          },
+          footer: {
+            button: {
+              label: 'View industry'
+            }
+          }
+        }) }}
+        {{ industryCard({
+          title: 'Pharmaceuticals',
+          link: '#',
+          description: 'We understand the role our technologies play in providing the physicochemical insight to speed product development.',
+          image: {
+            src: '/static/img/sector-2.jpg',
+            alt: ''
+          },
+          footer: {
+            button: {
+              label: 'View industry'
+            }
+          }
+        }) }}
+        {{ industryCard({
+          title: 'Metal analysis',
+          link: '#',
+          description: 'We help you to meet demand, become more sustainable, and to make processes easier, cleaner and safer.',
+          image: {
+            src: '/static/img/sector-3.jpg',
+            alt: ''
+          },
+          footer: {
+            button: {
+              label: 'View industry'
+            }
+          }
+        }) }}
+        {{ industryCard({
+          title: 'Battery and energy',
+          link: '#',
+          description: 'Battery and renewable energy storage: empower your research and production with the best analytical solutions.',
+          image: {
+            src: '/static/img/sector-4.jpg',
+            alt: ''
+          },
+          footer: {
+            button: {
+              label: 'View industry'
+            }
+          }
+        }) }}
+      </div>
+      <div class="u-split u-margin-top-l">
+        <h3 class="c-h c-h--step-1">Explore our full range of industry applications</h3>
+        {{ button({
+          link: '#',
+          label: 'View all industries',
+          classes: 'c-button--inline'
+        }) }}
+      </div>
+    </div>
+  </section>
 
+  <section class="mp c-slat c-slat--padded">
+    <div class="u-wrap">
+      <div class="u-wrap--content o-prose u-flow--prose u-flow--l">
+        <h2 class="c-h c-h--step-3">Browse our range of award winning technologies</h2>
+      </div>
+      <div class="u-wrap">
         <div class="mp c-tabs c-tabs--anchor">
-          <nav class="c-tabs__controls u-scroll-shadows--h">
+          <nav class="c-tabs__controls">
             <ul class="c-tabs__controls-list">
-              <li><a class="c-tabs__control " href="#tab-industry-1">Primary materials</a></li>
-              <li><a class="c-tabs__control" href="#tab-industry-2">Pharmaceuticals and food</a></li>
-              <li><a class="c-tabs__control c-tabs__control--active" href="#tab-industry-3">Advanced materials</a></li>
+              <li><a class="c-tabs__control c-tabs__control--active" href="#tab-product-1" role="tab">Product ranges</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-2" role="tab">Technologies</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-3" role="tab">Measurement types</a></li>
             </ul>
           </nav>
-          
           <div class="c-tabs__content">
-            <div id="tab-industry-1" class="c-tab c-tab--active">
+            <div id="tab-product-1" class="c-tab c-tab--active">
               <div class="o-grid o-grid--of-four o-grid--swipeable">
-                {{ industryCard({
-                  title: 'Building materials',
-                  link: '',
+                {{ productCard({
+                  title: 'Zetasizer Advance range',
+                  description: 'Zetasizer Advance is the successor to the highly successful and market-leading Zetasizer Nano.',
                   image: {
-                    src: '/static/img/sector-1.jpg',
-                    alt: ''
+                    src: '/static/img/products-1.jpg',
+                    alt: 'Zetasizer Advance range'
+                  },
+                  footer: {
+                    buttons: [
+                      {
+                        link: '#',
+                        label: 'View range',
+                        classes: 'c-button--small'
+                      },
+                      {
+                        link: '#',
+                        label: 'Request a quote',
+                        classes: 'c-button--small'
+                      }
+                    ]
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Metals',
-                  link: '',
+                {{ productCard({
+                  title: 'Mastersizer range',
+                  description: 'From assessing product uniformity and solubility, through to optimising packing density.',
                   image: {
-                    src: '/static/img/sector-2.jpg',
-                    alt: ''
+                    src: '/static/img/products-2.jpg',
+                    alt: 'Zetasizer Advance range'
+                  },
+                  footer: {
+                    buttons: [
+                      {
+                        link: '#',
+                        label: 'View range',
+                        classes: 'c-button--small'
+                      },
+                      {
+                        link: '#',
+                        label: 'Request a quote',
+                        classes: 'c-button--small'
+                      }
+                    ]
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Mining and minerals',
-                  link: '',
+                {{ productCard({
+                  title: 'NanoSight range',
+                  description: 'The NanoSight range utilizes NTA to characterize nanoparticles from 10nm - 1000nm* in solution.',
                   image: {
-                    src: '/static/img/sector-3.jpg',
-                    alt: ''
+                    src: '/static/img/products-3.jpg',
+                    alt: 'Zetasizer Advance range'
+                  },
+                  footer: {
+                    buttons: [
+                      {
+                        link: '#',
+                        label: 'View range',
+                        classes: 'c-button--small'
+                      },
+                      {
+                        link: '#',
+                        label: 'Request a quote',
+                        classes: 'c-button--small'
+                      }
+                    ]
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Oils and petrochemicals',
-                  link: '',
+                {{ productCard({
+                  title: 'Epsilon range',
+                  description: 'The Epsilon 1 is powered by the latest advances in excitation and detection technology.',
                   image: {
-                    src: '/static/img/sector-4.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Polymers, plastics, fibers and elastomers',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-5.jpg',
-                    alt: ''
+                    src: '/static/img/products-4.jpg',
+                    alt: 'Zetasizer Advance range'
+                  },
+                  footer: {
+                    buttons: [
+                      {
+                        link: '#',
+                        label: 'View range',
+                        classes: 'c-button--small'
+                      },
+                      {
+                        link: '#',
+                        label: 'Request a quote',
+                        classes: 'c-button--small'
+                      }
+                    ]
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Academia',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-1.jpg',
-                    alt: ''
-                  }
+              </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full product range</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all ranges'
                 }) }}
               </div>
             </div>
-            <div id="tab-industry-2" class="c-tab">
+            <div id="tab-product-2" class="c-tab">
               <div class="o-grid o-grid--of-four o-grid--swipeable">
-                {{ industryCard({
-                  title: 'Biologics',
-                  link: '',
+                {{ technologyCard({
+                  title: 'X-ray Diffraction (XRD)',
+                  link: '#',
+                  description: 'XRD is the only laboratory technique that non-destructively and accurately obtains information such as chemical composition.',
                   image: {
-                    src: '/static/img/sector-3.jpg',
+                    src: '/static/img/sector-5.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View technology'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Food and drink analysis',
-                  link: '',
+                {{ technologyCard({
+                  title: 'Dynamic Light Scattering (DLS)',
+                  link: '#',
+                  description: 'Dynamic Light Scattering for size characterization of proteins, nanoparticles, polymers and colloidal dispersions.',
                   image: {
                     src: '/static/img/sector-4.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View technology'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Pharmaceutical solutions',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-5.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Contract research services',
-                  link: '',
+                {{ technologyCard({
+                  title: 'X-ray fluorescence (XRF)',
+                  link: '#',
+                  description: 'X-ray fluorescence is an analytical technique that can be used to determine the chemical composition of a wide variety of sample types.',
                   image: {
-                    src: '/static/img/sector-1.jpg',
+                    src: '/static/img/sector-3.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View technology'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Academia',
-                  link: '',
+                {{ technologyCard({
+                  title: 'Nanoparticle Tracking Analysis',
+                  link: '#',
+                  description: 'Utilizes the properties of both light scattering and Brownian motion in order to obtain the nanoparticle size distribution of samples in liquid suspension.',
                   image: {
                     src: '/static/img/sector-2.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View technology'
+                    }
                   }
                 }) }}
               </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full range of technologies</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all technologies'
+                }) }}
+              </div>
             </div>
-            <div id="tab-industry-3" class="c-tab">
+            <div id="tab-product-3" class="c-tab">
               <div class="o-grid o-grid--of-four o-grid--swipeable">
-                {{ industryCard({
-                  title: 'Advanced manufacturing',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-5.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Aerospace and automotive',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-1.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Battery and energy',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-2.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Electronics and semiconductors',
-                  link: '',
+                {{ measurementTypeCard({
+                  title: 'Particle size',
+                  link: '#',
+                  description: 'Measurement of particle size distributions is routinely carried out across a wide range of industries.',
                   image: {
                     src: '/static/img/sector-3.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View measurement type'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Environmental monitoring and analysis',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-4.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Forensic analysis',
-                  link: '',
+                {{ measurementTypeCard({
+                  title: 'Zeta potential',
+                  link: '#',
+                  description: 'Zeta potential measurements to improve formulation stability and shelf life and reduce formulation time and cost.',
                   image: {
-                    src: '/static/img/sector-5.jpg',
+                    src: '/static/img/sector-2.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View measurement type'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Nanomaterials',
-                  link: '',
+                {{ measurementTypeCard({
+                  title: 'Binding affinity',
+                  link: '#',
+                  description: 'Understanding binding affinity is key to appreciation of the intermolecular interactions driving biological processes.',
                   image: {
                     src: '/static/img/sector-1.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View measurement type'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Polymers, plastics, fibers and elastomers',
-                  link: '',
+                {{ measurementTypeCard({
+                  title: 'Moisture content',
+                  link: '#',
+                  description: 'The determination of moisture is often a critical component in manufacturing processes and quality assurance.',
                   image: {
-                    src: '/static/img/sector-2.jpg',
+                    src: '/static/img/sector-5.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View measurement type'
+                    }
                   }
                 }) }}
-                {{ industryCard({
-                  title: 'Specialty chemicals',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-3.jpg',
-                    alt: ''
-                  }
+              </div>
+              <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+                <h3 class="c-h c-h--step-1">Explore our full range of measurements</h3>
+                {{ button({
+                  link: '#',
+                  label: 'View all measurement types'
                 }) }}
               </div>
             </div>
-          </div>
         </div>
-        
       </div>
     </div>
   </section>

package/src/prototype/range.njk

@@ -9,7 +9,7 @@ tagTitle: Range
 {% from "components/usp/macro.njk" import usp %}
 {% from "components/breadcrumb/macro.njk" import breadcrumb %}
 {% from "components/button/macro.njk" import button %}
-{% from "components/card/macro.njk" import productComparisonCard %}
+{% from "components/card/macro.njk" import productCard %}
 {% from "components/comparison-table/macro.njk" import comparisonTable %}
 {% from "components/hero/macro.njk" import hero %}
 
@@ -95,7 +95,7 @@ tagTitle: Range
 
 <div id="products" class="u-pad-y-xl" style="scroll-margin-top:70px">
   <div class="o-grid o-grid--of-three u-wrap">
-    {{ productComparisonCard({
+    {{ productCard({
       title: 'Mastersizer 3000',
       description: 'Delivering the data you need for outcomes you can trust',
       image: {
@@ -132,8 +132,8 @@ tagTitle: Range
           }
         ]
       }
-    })}}
-    {{ productComparisonCard({
+    }) }}
+    {{ productCard({
       title: 'Mastersizer 3000E',
       description: 'Entry level particle size analyzer',
       image: {
@@ -170,7 +170,7 @@ tagTitle: Range
           }
         ]
       }
-    })}}
+    }) }}
     <div class="u-flow u-margin-top-auto">
       <h4 class="c-h c-h--step-4">Interested in a demonstration?</h4>
       <div class="o-prose u-flow--prose">

package/src/prototype/sections.njk

@@ -75,14 +75,16 @@ Typical materials involved in advanced thin film devices are semiconductors, met
             <p class="c-h c-h--upper">Explore electronics and semiconductors</p>
             <div class="o-grid o-grid--of-three-early">
                 {{ industryCard({
+                    classes: 'c-industry-card--heading',
                     title: 'CMP slurry',
-                    link: '',
+                    link: '#',
                     image: {
                         src: 'https://www.malvernpanalytical.com/resource/img/placeholder.png?quality=60',
                         alt: ''
                     }
                 }) }}
                 {{ industryCard({
+                    classes: 'c-industry-card--heading',
                     title: 'Compound semiconductors',
                     link: '',
                     image: {
@@ -91,6 +93,7 @@ Typical materials involved in advanced thin film devices are semiconductors, met
                     }
                 }) }}
                 {{ industryCard({
+                    classes: 'c-industry-card--heading',
                     title: 'Electronic displays',
                     link: '',
                     image: {
@@ -99,6 +102,7 @@ Typical materials involved in advanced thin film devices are semiconductors, met
                     }
                 }) }}
                 {{ industryCard({
+                    classes: 'c-industry-card--heading',
                     title: 'Silicon semiconductors',
                     link: '',
                     image: {
@@ -107,6 +111,7 @@ Typical materials involved in advanced thin film devices are semiconductors, met
                     }
                 }) }}
                 {{ industryCard({
+                    classes: 'c-industry-card--heading',
                     title: 'Solder materials',
                     link: '',
                     image: {

package/src/static/svg/icon-globe-alt--white.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M105.184 91.433C87.3087 109.308 58.3278 109.308 40.453 91.433C22.5782 73.5582 22.5782 44.5774 40.453 26.7025M65.5912 112.066H80.0453M72.8182 112.066V104.839" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M72.8177 95.2043C92.7747 95.2043 108.953 79.026 108.953 59.069C108.953 39.112 92.7747 22.9337 72.8177 22.9337M72.8177 95.2043C52.8607 95.2043 36.6824 79.026 36.6824 59.069C36.6824 39.112 52.8607 22.9337 72.8177 22.9337M72.8177 95.2043C84.7919 95.2043 94.4989 79.026 94.4989 59.069C94.4989 39.112 84.7919 22.9337 72.8177 22.9337M72.8177 95.2043C60.8435 95.2043 51.1365 79.026 51.1365 59.069C51.1365 39.112 60.8435 22.9337 72.8177 22.9337M72.8177 95.2043V22.9337M43.9094 78.3412L101.726 78.3412M43.9094 39.7969L101.726 39.7969" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/static/svg/icon-globe-alt.svg

@@ -0,0 +1,4 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M105.184 91.433C87.3087 109.308 58.3278 109.308 40.453 91.433C22.5782 73.5582 22.5782 44.5774 40.453 26.7025M65.5912 112.066H80.0453M72.8182 112.066V104.839" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M72.8177 95.2043C92.7747 95.2043 108.953 79.026 108.953 59.069C108.953 39.112 92.7747 22.9337 72.8177 22.9337M72.8177 95.2043C52.8607 95.2043 36.6824 79.026 36.6824 59.069C36.6824 39.112 52.8607 22.9337 72.8177 22.9337M72.8177 95.2043C84.7919 95.2043 94.4989 79.026 94.4989 59.069C94.4989 39.112 84.7919 22.9337 72.8177 22.9337M72.8177 95.2043C60.8435 95.2043 51.1365 79.026 51.1365 59.069C51.1365 39.112 60.8435 22.9337 72.8177 22.9337M72.8177 95.2043V22.9337M43.9094 78.3412L101.726 78.3412M43.9094 39.7969L101.726 39.7969" stroke="#00a2c2" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/static/svg/icon-live-webinars--white.svg

@@ -0,0 +1,6 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.4115 48.6266V51.6598C51.4115 57.9736 55.5794 63.1657 60.5871 63.1657C65.5947 63.1657 69.7626 57.9736 69.7626 51.6598V48.6266C69.7626 46.3077 67.3068 40.8458 60.5871 40.8458C53.8674 40.8458 51.4115 45.6839 51.4115 48.6266Z" stroke="#ffffff" fill="#ffffff" stroke-width="5" stroke-linejoin="round"/>
+<path d="M48.3775 73.5705C51.0626 72.0467 54.7914 71.0796 57.661 70.5797C59.5984 70.2422 61.5762 70.2422 63.5136 70.5797C66.3869 71.0803 70.1216 72.0492 72.8075 73.5763C73.4043 73.9157 73.8556 74.4516 74.1151 75.0873C74.8557 76.9018 76.3168 81.0938 76.3168 85.9265V93.9354H44.8578V85.9265C44.8578 81.1517 46.318 76.933 47.0589 75.0999C47.319 74.4563 47.7738 73.9131 48.3775 73.5705Z" stroke="#ffffff" fill="#ffffff" stroke-width="5"/>
+<path d="M114.493 39.0267C114.493 33.5039 110.016 29.0267 104.493 29.0267H24.6372C19.1143 29.0267 14.6372 33.5039 14.6372 39.0267V83.9332C14.6372 89.4561 19.1143 93.9332 24.6372 93.9332H73.4237C76.042 93.9332 78.5559 94.9601 80.4253 96.7933L91.7137 107.863C93.6119 109.725 96.8142 108.38 96.8142 105.721V98.9332C96.8142 96.1718 99.0528 93.9332 101.814 93.9332H104.493C110.016 93.9332 114.493 89.456 114.493 83.9332V39.0267Z" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.416 56.0295C113.775 56.0295 121.363 48.442 121.363 39.0823C121.363 29.7226 113.775 22.1351 104.416 22.1351C95.0559 22.1351 87.4684 29.7226 87.4684 39.0823C87.4684 48.442 95.0559 56.0295 104.416 56.0295ZM99.1436 44.8025V33.4526C99.1436 31.8792 100.876 30.9219 102.208 31.7596L111.45 37.5717C112.713 38.366 112.693 40.2135 111.413 40.9803L102.172 46.518C100.838 47.3168 99.1436 46.3565 99.1436 44.8025Z" fill="#ffffff"/>
+</svg>

package/src/static/svg/icon-live-webinars.svg

@@ -0,0 +1,6 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.4115 48.6266V51.6598C51.4115 57.9736 55.5794 63.1657 60.5871 63.1657C65.5947 63.1657 69.7626 57.9736 69.7626 51.6598V48.6266C69.7626 46.3077 67.3068 40.8458 60.5871 40.8458C53.8674 40.8458 51.4115 45.6839 51.4115 48.6266Z" stroke="#00a2c2" fill="#00a2c2" stroke-width="5" stroke-linejoin="round"/>
+<path d="M48.3775 73.5705C51.0626 72.0467 54.7914 71.0796 57.661 70.5797C59.5984 70.2422 61.5762 70.2422 63.5136 70.5797C66.3869 71.0803 70.1216 72.0492 72.8075 73.5763C73.4043 73.9157 73.8556 74.4516 74.1151 75.0873C74.8557 76.9018 76.3168 81.0938 76.3168 85.9265V93.9354H44.8578V85.9265C44.8578 81.1517 46.318 76.933 47.0589 75.0999C47.319 74.4563 47.7738 73.9131 48.3775 73.5705Z" stroke="#00a2c2" fill="#00a2c2" stroke-width="5"/>
+<path d="M114.493 39.0267C114.493 33.5039 110.016 29.0267 104.493 29.0267H24.6372C19.1143 29.0267 14.6372 33.5039 14.6372 39.0267V83.9332C14.6372 89.4561 19.1143 93.9332 24.6372 93.9332H73.4237C76.042 93.9332 78.5559 94.9601 80.4253 96.7933L91.7137 107.863C93.6119 109.725 96.8142 108.38 96.8142 105.721V98.9332C96.8142 96.1718 99.0528 93.9332 101.814 93.9332H104.493C110.016 93.9332 114.493 89.456 114.493 83.9332V39.0267Z" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.416 56.0295C113.775 56.0295 121.363 48.442 121.363 39.0823C121.363 29.7226 113.775 22.1351 104.416 22.1351C95.0559 22.1351 87.4684 29.7226 87.4684 39.0823C87.4684 48.442 95.0559 56.0295 104.416 56.0295ZM99.1436 44.8025V33.4526C99.1436 31.8792 100.876 30.9219 102.208 31.7596L111.45 37.5717C112.713 38.366 112.693 40.2135 111.413 40.9803L102.172 46.518C100.838 47.3168 99.1436 46.3565 99.1436 44.8025Z" fill="#00a2c2"/>
+</svg>