mp-design-system 1.2.63 → 1.2.65

package/src/prototype/products.njk

@@ -1,163 +0,0 @@
----
-title: Products
-tags: prototype
----
-
-{% from "components/product-signpost/macro.njk" import productSignpost %}
-{% from "components/internal-nav/macro.njk" import internalNav %}
-{% from "components/option-list/macro.njk" import optionList %}
-{% from "components/hero/macro.njk" import hero %}
-
-{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-{{ hero({
-  title: title,
-  subtitle: 'Laboratory equipment and process solutions',
-  cover: true,
-  gradient: true
-}) }}
-
-<div class="c-slat--white">
-
-  {{ internalNav({
-    classes: 'u-wrap',
-    links: [
-      { link: '#product-categories', label: 'Product categories' },
-      { link: '#product-ranges', label: 'Product ranges' },
-      { link: '#technologies', label: 'Technologies' },
-      { link: '#measurement-types', label: 'Measurement types' },
-      { link: '#industry-standards', label: 'Industry standards' },
-      { link: '#our-product-brands', label: 'Our product brands' }
-    ]
-  }) }}
-
-  <div class="mp u-wrap u-pad-bottom-l-xl">
-    <section class="u-flow--l">
-      <h2 class="c-h c-h--step-3" id="product-categories">Product categories</h2>
-      <div class="o-grid o-grid--layout o-grid--8/4-switch">
-        <aside class="u-flow--m">
-          {{ productSignpost({
-            title: 'Particle size analyzers',
-            description: '<p>The world’s leading particle size analyzers</p>',
-            image: {
-              src: '/static/img/products-4.jpg',
-              alt: 'Product image alt'
-            },
-            link: ''
-          }) }}
-          {{ productSignpost({
-            title: 'X-ray diffractometers (XRD)',
-            description: '<p>Benchtop & floorstanding XRD solutions</p>',
-            image: {
-              src: '/static/img/products-5.jpg',
-              alt: 'Product image alt'
-            },
-            link: ''
-          }) }}
-          {{ productSignpost({
-            title: 'X-ray fluorescence spectrometers (XRF)',
-            description: '<p>Expert XRF spectrometers for elemental composition analysis</p>',
-            image: {
-              src: '/static/img/products-6.jpg',
-              alt: 'Product image alt'
-            },
-            link: ''
-          }) }}
-        </aside>
-
-        {{ optionList({
-          columns: true,
-          links: [
-            { link: '', label: 'Automation solutions' },
-            { link: '', label: 'Calibration standards' },
-            { link: '', label: 'CNA cross-belt analyzers' },
-            { link: '', label: 'Consumables' },
-            { link: '', label: 'Handheld spectrometers' },
-            { link: '', label: 'Image analyzers' },
-            { link: '', label: 'Liquid chromatography' },
-            { link: '', label: 'Microcalorimeters' },
-            { link: '', label: 'Near-infrared spectrometers (NIR)' },
-            { link: '', label: 'Particle size analyzers' },
-            { link: '', label: 'Sample preparation for XRF and ICP' },
-            { link: '', label: 'Software for XRF and XRD applications' },
-            { link: '', label: 'Spectroradiometers' },
-            { link: '', label: 'X-ray components' },
-            { link: '', label: 'X-ray diffractometers (XRD)' },
-            { link: '', label: 'X-ray fluorescence spectrometers (XRF)' },
-            { link: '', label: 'X-ray metrology' },
-            { link: '', label: 'X-ray scattering platform' },
-            { link: '', label: 'X-ray tubes' }
-          ]
-        })}}
-      </div>
-    <section>
-
-    <hr class="u-hr" />
-
-    <section class="u-flow--l">
-      <h2 class="c-h c-h--step-3" id="product-ranges">Product ranges</h2>
-      <div class="o-grid o-grid--layout o-grid--8/4-switch">
-        <aside class="u-flow--m">
-          {{ productSignpost({
-            title: 'Mastersizer',
-            description: '<p>Delivering the data you need for outcomes you can trust</p>',
-            image: {
-              src: '/static/img/products-1.jpg',
-              alt: 'Product image alt'
-            },
-            link: '/prototype/range'
-          }) }}
-          {{ productSignpost({
-            title: 'Zetasizer',
-            description: '<p>The world’s most widely-used systems for nanoparticle, colloid and biomolecular particle sizing and particle charge measurements</p>',
-            image: {
-              src: '/static/img/products-2.jpg',
-              alt: 'Product image alt'
-            },
-            link: '/prototype/range'
-          }) }}
-          {{ productSignpost({
-            title: 'OMNISEC',
-            description: '<p>The world’s most advanced multi-detector GPC/SEC system</p>',
-            image: {
-              src: '/static/img/products-3.jpg',
-              alt: 'Product image alt'
-            },
-            link: '/prototype/range'
-          }) }}
-        </aside>
-
-        {{ optionList({
-          columns: true,
-          links: [
-            { link: '/prototype/range', label: 'Aeris' },
-            { link: '/prototype/range', label: 'ASD' },
-            { link: '/prototype/range', label: 'Axios FAST' },
-            { link: '/prototype/range', label: 'Claisse' },
-            { link: '/prototype/range', label: 'CNA' },
-            { link: '/prototype/range', label: 'Empyrean' },
-            { link: '/prototype/range', label: 'Epsilon' },
-            { link: '/prototype/range', label: 'Insitec' },
-            { link: '/prototype/range', label: 'Mastersizer' },
-            { link: '/prototype/range', label: 'MicroCal ITC' },
-            { link: '/prototype/range', label: 'MicroCal DSC' },
-            { link: '/prototype/range', label: 'Morphologi' },
-            { link: '/prototype/range', label: 'NanoSight' },
-            { link: '/prototype/range', label: 'OMNISEC' },
-            { link: '/prototype/range', label: 'Parsum' },
-            { link: '/prototype/range', label: 'Spraytec' },
-            { link: '/prototype/range', label: 'X’Pert³' },
-            { link: '/prototype/range', label: 'Zetasizer' },
-            { link: '/prototype/range', label: 'Zetium' },
-            { link: '/prototype/range', label: '2830ZT' }
-          ]
-        })}}
-      </div>
-    <section>
-  </div>
-</div>
-
-{% endblock %}

package/src/prototype/range.njk

@@ -1,263 +0,0 @@
----
-title: Mastersizer range
-tags: prototype
-tagTitle: Range
----
-
-{% from "components/internal-nav/macro.njk" import internalNav %}
-{% from "components/twi/macro.njk" import twi %}
-{% 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 productCard %}
-{% from "components/comparison-table/macro.njk" import comparisonTable %}
-{% from "components/hero/macro.njk" import hero %}
-
-{% from "components/product-card/macro.njk" import productCardNew %}
-{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-
-{{ hero({
-  cover: true,
-  title: 'The Mastersizer',
-  subtitle: 'The world’s most popular particle size analyzers',
-  image: {
-    src: '/static/img/range.jpg',
-    alt: 'Mastersizer 3000'
-  },
-  breadcrumb: {
-    link: '/prototype/products/',
-    label: 'All products'
-  },
-  cta: {
-    label: 'Download brochure',
-    link: 'https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf',
-    attrs: 'download',
-    icon: 'file'
-  }
-}) }}
-
-{{ internalNav({
-  classes: 'c-internal-nav--sticky',
-  title: 'Mastersizer range',
-  links: [
-    { link: '#overview', label: 'Overview' },
-    { link: '#products', label: 'Products' },
-    { link: '#product-comparison-table', label: 'Compare' }
-  ],
-  button: {
-    link: '#',
-    label: 'Request a quote'
-  }
-}) }}
-
-<div id="overview" class="mp u-wrap u-pad-top-m-l u-pad-bottom-l-xl" style="scroll-margin-top:70px">
-    <div class="o-grid o-grid--of-two-late u-pad-bottom-s">
-      <div>
-        <div class="mp o-prose u-flow--prose">
-          <p class="u-lede">The Mastersizer range sets the standard for laser diffraction particle analysis. They’re essential instruments in scientific research and quality control the world over, helping to create everything from better medicines to tastier foods to more sustainable soils.</p>
-          <p>Mastersizers are valued for being fast, accurate and incredibly versatile. They handle a wide range of wet and dry dispersions, incorporate industry-leading software that’s intuitive to use, and their compact, ergonomic design means they’re easy to use anywhere.</p>
-        </div>
-        <div class="u-margin-top-m">
-          {{ button({ link: '/prototype/request-a-quote', label: 'Request a quote', inline: true }) }}
-          {{ button({ link: '/prototype/request-a-quote', label: 'Contact sales', inline: true, colour: 'outline-green' }) }}
-        </div>
-      </div>
-
-      <figure class="c-embed">
-        <div class="c-embed__wrapper">
-          <iframe title="FOCUS ON THE AIR YOU BREATHE - Elemental analysis of air filters according to US EPA Method io-3.3" width="640" height="360" src="https://www.youtube.com/embed/Q4H7EdHFghs?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
-        </div>
-      </figure>
-    </div>
-
-    <div class="o-grid o-grid--of-three u-pad-top-m-l">
-      {{ usp({
-        title: 'Superior speed. Peerless precision.',
-        classes: 'c-usp c-usp--bordered',
-        content: '<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>'
-      }) }}
-      {{ usp({
-        title: 'Flexible reporting: Data your way.',
-        classes: 'c-usp c-usp--bordered',
-        content: '<p>Display your data exactly as you want it, customizable directly to your needs</p>'
-      }) }}
-      {{ usp({
-        title: 'Intuitive software. Built-in expertise.',
-        classes: 'c-usp c-usp--bordered',
-        content: '<p>Mastersizer 3000 eases your analytical workload, enabling you to develop and run a variety of methods efficiently</p>'
-      }) }}
-    </div>
-  </div>
-</div>
-
-<div id="products" class="u-pad-y-xl" style="scroll-margin-top:70px">
-  <div class="o-grid o-grid--of-three u-wrap">
-    {{ productCardNew({
-      type: 'product',
-      theme: 'bordered',
-      header: {
-        title: 'Mastersizer 3000',
-        subtitle: 'Delivering the data you need for outcomes you can trust'
-      },
-      image: {
-        src: '/static/img/range-product-1.jpg',
-        alt: ''
-      },
-      list: [
-        {
-          icon: 'tick',
-          label: 'Particle size range from 0.01 to 3500µm'
-        },
-        {
-          icon: 'tick',
-          label: 'Advanced method development'
-        },
-        {
-          icon: 'tick',
-          label: 'Automated dispersion'
-        },
-        {
-          icon: 'tick',
-          label: '21 CFR Part 11 support'
-        }
-      ],
-      footer: {
-        buttons: [
-          {
-            link: '#',
-            label: 'View product'
-          },
-          {
-            link: '/prototype/request-a-quote',
-            label: 'Request a quote',
-            colour: 'outline-green'
-          }
-        ]
-      }
-    }) }}
-    {{ productCardNew({
-      type: 'product',
-      theme: 'bordered',
-      header: {
-        title: 'Mastersizer 3000E',
-        subtitle: 'Entry level particle size analyzer'
-      },
-      image: {
-        src: '/static/img/range-product-1.jpg',
-        alt: ''
-      },
-      list: [
-        {
-          icon: 'tick',
-          label: 'Particle size range from 0.1 to 1000µm'
-        },
-        {
-          icon: 'tick',
-          label: 'Manual dispersion units only'
-        },
-        {
-          icon: 'tick',
-          label: 'Basic software'
-        },
-        {
-          icon: 'tick',
-          label: 'Anytime upgrade option'
-        }
-      ],
-      footer: {
-        buttons: [
-          {
-            link: '#',
-            label: 'View product'
-          },
-          {
-            link: '/prototype/request-a-quote',
-            label: 'Request a quote',
-            colour: 'outline-green'
-          }
-        ]
-      }
-    }) }}
-    <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">
-        <p>See the Mastersizer 3000 in action, speak with our product specialists and get answers to your questions.</p>
-      </div>
-      <a href="#" class="mp c-button c-button--outline-green c-button--inline">Request a demo</a>
-    </div>
-  </div>
-</div>
-
-{{ comparisonTable({
-  sections: [
-    {
-      rows: ['Particle size range']
-    },
-    {
-      title: 'Technology',
-      rows: ['Laser Diffraction']
-    },
-    {
-      title: 'Dispersion type',
-      rows: ['Wet', 'Dry']
-    }
-  ],
-  products: [
-    {
-      title: 'Mastersizer 3000',
-      link: '/prototype/product/',
-      image: {
-        src: '/static/img/range-product-1.jpg',
-        alt: 'Mastersizer 3000'
-      },
-      description: 'Delivering the data you need for outcomes you can trust',
-      buttons: [
-        {
-          link: '#',
-          label: 'More details'
-        },
-        {
-          link: '/prototype/request-a-quote',
-          label: 'Request a quote'
-        }
-      ],
-      sections: [
-        ['0.01µm - 3500µm'],
-        [true],
-        [true, true]
-      ]
-    },
-    {
-      title: 'Mastersizer 3000E',
-      link: '/prototype/product/',
-      image: {
-        src: '/static/img/range-product-2.jpg',
-        alt: 'Mastersizer 3000E'
-      },
-      description: 'Entry level particle size analyzer',
-      buttons: [
-        {
-          link: '#',
-          label: 'More details'
-        },
-        {
-          link: '/prototype/request-a-quote',
-          label: 'Request a quote'
-        }
-      ],
-      sections: [
-        ['0.1µm - 1000µm'],
-        [true],
-        [true, false]
-      ]
-    }
-  ]
-}) }}
-
-{% include "includes/resources.njk" %}
-
-{% endblock %}

package/src/prototype/request-a-quote.njk

@@ -1,147 +0,0 @@
----
-title: Request a quote
-tags: prototype
----
-
-{% from "components/alert/macro.njk" import alert %}
-{% from "components/button/macro.njk" import button %}
-{% from "components/input/macro.njk" import input, select, textarea, checkbox %}
-
-{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
-
-{% extends "page.njk" %}
-
-{% block content %}
-<div class="c-slat--white">
-  <div class="mp u-wrap u-pad-y-l-2xl">
-    <div class="u-wrap--content u-flow--s-l">
-      <h1 class="c-h c-h--page-title">Request a quote</h1>
-      <div class="o-prose o-prose--with-lede u-flow--prose">
-        <p>Please complete the form below, giving details about your enquiry and our sales team will aim to be in touch within 1 business day.</p>
-      </div>
-
-      {{ alert({
-        content: '<p>During the COVID-19 situation, our sales team are still available to answer all your sales enquiries</p>'
-      }) }}
-
-      <div class="mp c-tabs--anchor u-pad-top-s">
-        <nav class="c-tabs__controls">
-          <ul class="c-tabs__controls-list">
-            <li><a class="c-tabs__control" href="#tab-quote">Contact sales</a></li>
-            <li><a class="c-tabs__control c-tabs__control--active" href="#tab-quote">Request a quote</a></li>
-            <li><a class="c-tabs__control" href="#tab-quote">Request a demo</a></li>
-            <li><a class="c-tabs__control" href="#tab-quote">Service & support</a></li>
-          </ul>
-        </nav>
-        
-        <div class="c-tabs__content">
-          <div class="c-tab c-tab--active" id="tab-quote">
-            <form method="GET" action="/prototype/thanks" novalidate>
-              <fieldset class="c-fieldset">
-                <legend>About you</legend>
-                <div class="u-flow--m u-wrap--fields">
-                  {{ input({
-                    id: 'quote-fname',
-                    name: 'fname',
-                    label: 'First name',
-                    required: true
-                  }) }}
-
-                  {{ input({
-                    id: 'quote-lname',
-                    name: 'lname',
-                    label: 'Last name',
-                    required: true
-                  }) }}
-
-                  {{ input({
-                    id: 'quote-email',
-                    name: 'email',
-                    label: 'Email address',
-                    type: 'email',
-                    required: true
-                  }) }}
-
-                  {{ input({
-                    id: 'quote-tel',
-                    name: 'tel',
-                    label: 'Telephone number',
-                    type: 'tel',
-                    required: true
-                  }) }}
-                </div>
-              </fieldset>
-
-              <fieldset class="c-fieldset">
-                <legend>About your company / institution</legend>
-                <div class="u-flow--m u-wrap--fields">
-                  {{ input({
-                    id: 'quote-company',
-                    name: 'company',
-                    label: 'Company / Institution name',
-                    required: true
-                  }) }}
-
-                  {{ input({
-                    id: 'quote-city',
-                    name: 'city',
-                    label: 'City',
-                    required: true
-                  }) }}
-
-                  {{ select({
-                    id: 'quote-country',
-                    name: 'country',
-                    label: 'Country',
-                    placeholder: 'Please select',
-                    required: true
-                  }) }}
-                </div>
-              </fieldset>
-
-              <fieldset class="c-fieldset">
-                <legend>What are you interested in?</legend>
-                <div class="u-flow--m u-wrap--fields">
-                  {{ select({
-                    id: 'quote-product',
-                    name: 'product',
-                    label: 'Product',
-                    placeholder: 'Mastersizer 3000',
-                    required: true
-                  }) }}
-
-                  {{ textarea({
-                    id: 'quote-enquiry',
-                    name: 'enquiry',
-                    label: 'Please tell us about your enquiry',
-                    required: true
-                  }) }}
-                </div>
-              </fieldset>
-
-              <fieldset class="c-fieldset u-flow--m">
-                {{ checkbox({
-                  id: 'quote-email-signup',
-                  name: 'email-signup',
-                  label: 'I wish to receive emails tailored to my personal preferences (you can unsubscribe at any time)',
-                  required: true
-                }) }}
-
-                <p class="u-step--1">For more information please read our <a href="/privacy" class="u-link">Privacy Policy</a>.</p>
-
-                {{ button({
-                  type: 'submit',
-                  label: 'Send your enquiry'
-                }) }}
-
-                <p class="u-step--1">Our sales team will aim to be in touch within 1 business day.</p>
-              </fieldset>
-            </form>
-          </div>
-        </div>
-      
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}