mp-design-system 1.2.27 → 1.2.30

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,319 @@ 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 u-margin-top-l">
+    <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-margin-top-l">
+        {{ 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">Range</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-2" role="tab">Technology</a></li>
+              <li><a class="c-tabs__control" href="#tab-product-3" role="tab">Measurement type</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: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Metals',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-2.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Mining and minerals',
-                  link: '',
-                  image: {
-                    src: '/static/img/sector-3.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: 'Oils and petrochemicals',
-                  link: '',
+                {{ productCard({
+                  title: 'Mastersizer range',
+                  description: 'From assessing product uniformity and solubility, through to optimising packing density.',
                   image: {
-                    src: '/static/img/sector-4.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: 'Polymers, plastics, fibers and elastomers',
-                  link: '',
+                {{ productCard({
+                  title: 'NanoSight range',
+                  description: 'The NanoSight range utilizes NTA to characterize nanoparticles from 10nm - 1000nm* in solution.',
                   image: {
-                    src: '/static/img/sector-5.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: 'Academia',
-                  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-1.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'
+                      }
+                    ]
                   }
                 }) }}
               </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>
-            <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: '',
-                  image: {
-                    src: '/static/img/sector-2.jpg',
-                    alt: ''
-                  }
-                }) }}
-                {{ industryCard({
-                  title: 'Specialty chemicals',
-                  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-3.jpg',
+                    src: '/static/img/sector-5.jpg',
                     alt: ''
+                  },
+                  footer: {
+                    button: {
+                      label: 'View measurement type'
+                    }
                   }
                 }) }}
               </div>
             </div>
-          </div>
         </div>
-        
+        <div class="u-bg-blue-step-3 u-pad-s-m u-split u-margin-top-l">
+        	<h3>Explore our full range of technologies</h3>
+          {{ button({
+            link: '#',
+            label: 'View all measurement types'
+          }) }}
+    	  </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.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="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</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="white" 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="white" 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="white"/>
+</svg>

package/src/static/svg/icon-recorded-webinars.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="M57.3667 93.3653H23C17.4771 93.3653 13 88.8882 13 83.3653V31.8654C13 26.3425 17.4772 21.8654 23 21.8654H113C118.523 21.8654 123 26.3425 123 31.8654V83.3653C123 88.8882 118.523 93.3653 113 93.3653H78.6333M57.3667 93.3653H78.6333M57.3667 93.3653V103.135C57.3667 108.658 52.8895 113.135 47.3667 113.135H46.3667M78.6333 93.3653V103.135C78.6333 108.658 83.1105 113.135 88.6333 113.135H89.6333" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M55.7759 45.2015V70.1403C55.7759 72.4714 58.3183 73.9118 60.3179 72.7136L80.6246 60.5458C82.5443 59.3955 82.5742 56.6242 80.6798 55.4329L60.373 42.662C58.3752 41.4056 55.7759 42.8414 55.7759 45.2015Z" fill="white" stroke="white" stroke-width="4"/>
+</svg>

package/src/static/svg/icon-user-trainings.svg

@@ -0,0 +1,5 @@
+<svg width="136" height="135" viewBox="0 0 136 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0029 36.6926V39.4762C21.0029 45.2704 24.8279 50.0353 29.4234 50.0353C34.019 50.0353 37.844 45.2704 37.844 39.4762V36.6926C37.844 34.5645 35.5902 29.5521 29.4234 29.5521C23.2567 29.5521 21.0029 33.9921 21.0029 36.6926Z" stroke="white" stroke-width="5" stroke-linejoin="round"/>
+<path d="M17.3803 89.2418L15.6821 103.658C15.3572 106.441 12.5901 108.616 9.9273 108.137C6.66157 107.551 5.2466 104.675 5.537 102.048L9.01124 72.9348C9.85435 66.3845 11.9733 63.438 14.7185 62.0392C17.7112 60.5142 23.1538 59.6442 26.1869 59.1496C28.1619 58.8275 30.1711 58.8347 32.1518 59.1196C35.9515 59.6661 41.4506 60.8331 44.6134 62.755C44.8465 62.8967 45.0565 63.0709 45.2504 63.2628L57.7999 75.6753C58.7481 76.5538 60.1363 76.7648 61.3027 76.2079L72.5893 70.8188C75.1964 69.574 78.3224 70.5363 79.7782 73.0318C81.4173 75.8417 80.3008 79.4524 77.3616 80.8466L59.6635 89.2418C58.5131 89.7875 57.1475 89.588 56.2012 88.7361L44.5587 78.255V100.852C44.5587 104.166 41.8724 106.852 38.5587 106.852H22.6478" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49.2756 53.9583V34.7963C49.2756 30.378 52.8574 26.7963 57.2756 26.7963H122.5C126.918 26.7963 130.5 30.378 130.5 34.7963V75.5442C130.5 79.9624 126.918 83.5442 122.5 83.5442H88.4409" stroke="#333333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>