mp-design-system 1.2.27 → 1.2.30

package/src/prototype/events-hub.njk

@@ -0,0 +1,463 @@
+---
+title: Events hub
+tags: prototype
+tagTitle: Webinars
+---
+
+{% from "components/button/macro.njk" import button %}
+{% from "components/card/macro.njk" import card %}
+{% from "components/hero/macro.njk" import hero %}
+{% from "components/product-signpost/macro.njk" import productSignpost %}
+{% from "components/signpost/macro.njk" import signpost %}
+{% from "components/twi/macro.njk" import twi %}
+
+{% set siteNav %}{% include "navigation/corporate.njk" %}{% endset %}
+
+{% extends "page.njk" %}
+
+{% block content %}
+
+{{ hero({
+    cover: true,
+    title: 'Webinars and events'
+}) }}
+
+<div class="u-flow--3xl u-pad-bottom-xl">
+
+{# Big nav cards #}
+<div class="u-wrap u-margin-top-negative-2xl">
+    <div class="o-grid o-grid--of-four o-grid--of-four-early">
+        {{ signpost({
+            direction: 'vertical',
+            color: 'blue',
+            size: 'l',
+            link: '',
+            icon: 'icon-live-webinars',
+            title: 'Live webinars',
+            classes: 'u-step-1 u-white'
+        }) }}
+        {{ signpost({
+            direction: 'vertical',
+            color: 'blue',
+            size: 'l',
+            link: '',
+            icon: 'icon-recorded-webinars',
+            title: 'Recorded webinars',
+            classes: 'u-step-1 u-white'
+        }) }}
+        {{ signpost({
+            direction: 'vertical',
+            color: 'blue',
+            size: 'l',
+            link: '',
+            icon: 'icon-user-training',
+            title: 'User training',
+            classes: 'u-step-1 u-white'
+        }) }}
+        {{ signpost({
+            direction: 'vertical',
+            color: 'blue',
+            size: 'l',
+            link: '',
+            icon: 'icon-globe-alt',
+            title: 'In-person events',
+            classes: 'u-step-1 u-white'
+        }) }}
+    </div>
+</div>
+
+{# This week #}
+<div class="c-slat--white">
+    <div id="this-week" class="u-wrap u-flow">
+        <p class="c-h c-h--upper">Featured</p>
+        <h2 class="c-h c-h--step-5">This week</h2>
+
+        {{ card({
+            theme: {
+                layout: 'multi c-card--layout-multi-40-60',
+                name: 'featured',
+                switch: false
+            },
+            image: {
+                src: 'https://p3.aprimocdn.net/malvernpanalytical/346cf3ca-b1a0-4725-8ba4-adea00c33589/shutterstock_1099481945_Original%20file.jpg?quality=60&width=810',
+                alt: 'Alt'
+            },
+            header: {
+                title: 'Does your nasal spray have the right droplet size?',
+                meta: ['English'],
+                date: {
+                    date: '2021-02-09' | createDate,
+                    time: '11:00 – 1200',
+                    timezone: 'EST'
+                }
+            },
+            body: {
+                keySpecs: [
+                    {
+                        title: 'Products',
+                        term: 'Spraytec'
+                    },
+                    {
+                        title: 'Technologies',
+                        term: 'Light scattering, Laser diffraction'
+                    }
+                ]
+            },
+            footer: {
+                buttons: [
+                    {
+                        label: 'Book your place',
+                        link: '/prototype/oma/',
+                        colour: 'green'
+                    }
+                ]
+            },
+            tag: 'Live webinar'
+        }) }}
+        
+    </div>
+</div>
+
+{# Upcoming #}
+<div class="c-slat--white">
+    <div id="upcoming" class="u-wrap u-flow">
+        <div class="u-split">
+            <h2 class="c-h c-h--step-5">Coming soon</h2>
+            {{ twi({ classes: 'u-link', label: "See all upcoming webinars", icon: 'arrow-right', align: 'left', link: "#" }) }}
+        </div>
+        <div class="o-grid o-grid--of-four o-grid--of-four-early o-grid--swipeable">
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/104e96b0-c522-48c7-aeec-adea00b3cee7/Zetium_zoom_in_Original.JPG?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'Zetium ED X-ray fluorescence SuperQ application course',
+                    date: {
+                        date: '25th Oct',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Live webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/d0a4b426-50a7-4c5f-86a0-ada200fe3349/637297929593313364LB_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'Ask us Anything: The API Edition - API Characterization & Developability',
+                    date: {
+                        date: '2nd Nov',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Live webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/3b4401e3-e9e3-4429-85cd-adcf008e42a9/shutterstock_2013310244_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'Discover how on-line particle sizing optimises mining analytics',
+                    date: {
+                        date: '4th Nov',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Live webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/24281053-07f1-4074-8f23-ad9d0185f936/636216641945690089YL_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'Ask an Expert! Separations in liquid chromatography',
+                    date: {
+                        date: '10th Nov',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Live webinar'
+            }) }}
+        </div>
+    </div>
+</div>
+
+{# Recorded #}
+<div class="c-slat--white">
+    <div id="recorded" class="u-wrap u-flow">
+        <div class="u-split">
+            <h2 class="c-h c-h--step-5">Recorded webinars</h2>
+            {{ twi({ classes: 'u-link', label: "See all recorded webinars", icon: 'arrow-right', align: 'left', link: "#" }) }}
+        </div>
+        <div class="o-grid o-grid--of-four o-grid--of-four-early o-grid--swipeable">
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/76ab3eb0-dbda-4301-aa2b-ad9f010dd5ab/636955156184886735KA_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'SAXS vs DLS: How to measure particle size and shape of nanometrics',
+                    date: {
+                        date: '18th Oct',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Recorded webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/3c3dd6c5-2c7c-4e0f-894f-ada2010d1dbe/637308815422766397VE_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'TEM and AFM imaging of defects and dislocations in crystalline materials',
+                    date: {
+                        date: '16th Oct',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Recorded webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/1f8965d6-95ab-4c1a-9010-b00c006677f3/shutterstock_2239656403_Heat_map_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'Using neutron diffraction and scattering to investigate the hidden world of magnetic and thermal properties',
+                    date: {
+                        date: '4th Oct',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Recorded webinar'
+            }) }}
+            {{ card({
+                theme: {
+                    layout: 'single',
+                    size: 'small',
+                    name: 'alt'
+                },
+                image: {
+                    src: 'https://p3.aprimocdn.net/malvernpanalytical/e06204cc-b48c-4e24-83a7-ad9e00d2d740/636220037796718046EN_Original%20file.jpg?quality=60&width=430&crop=2:1',
+                    alt: 'Alt'
+                },
+                header: {
+                    title: 'UV-vis and IR spectroscopy: how to determine the optical and photoelectric properties of materials',
+                    date: {
+                        date: '10th Sep',
+                        formatted: true
+                    }
+                },
+                link: '#',
+                tag: 'Recorded webinar'
+            }) }}
+        </div>
+    </div>
+</div>
+
+{# Explore #}
+<div class="c-slat--white">
+    <div id="explore" class="u-wrap u-flow">
+        <h2 class="c-h c-h--step-3">Explore topics from over 1,000 expert sessions</h2>
+        <div class="o-grid o-grid--of-four">
+            {{ productSignpost ({
+                title: 'Laser diffraction',
+                description: '<p class="u-link">Technology</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'X-ray fluorescence (XRF)',
+                description: '<p class="u-link">Technology</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Particle size',
+                description: '<p class="u-link">Measurement type</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Pharmaceuticals',
+                description: '<p class="u-link">Industry</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Building materials',
+                description: '<p class="u-link">Industry</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Liquid chromatography',
+                description: '<p class="u-link">Technology</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Crystal structure determination',
+                description: '<p class="u-link">Measurement type</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+            {{ productSignpost ({
+                title: 'Zeta potential',
+                description: '<p class="u-link">Measurement type</p>',
+                link: '/prototype',
+                classes: 'c-product-signpost--bordered u-pad-m'
+            }) }}
+        </div>
+    </div>
+</div>
+
+{# Series #}
+<div class="c-slat u-bg-blue-step-3 c-slat--padded c-slat--concentric">
+    <div id="featured" class="u-wrap u-flow">
+        <div class="o-grid o-grid--layout o-grid--8/4-switch">
+            <div class="u-flow">
+                <p class="c-h c-h--upper">Featured</p>
+                <h2 class="c-h c-h--step-5">XRF Elemental Analysis Masterclass</h2>
+                <p>Learn everything there is to know about elemental analysis using X-ray fluorescence (XRF) in this series of webinars.</p>
+                {{ twi({ classes: 'u-link', label: "View the complete series", icon: 'arrow-right', align: 'left', link: "#" }) }}
+            </div>
+            <div class="o-grid o-grid--of-three">
+                {{ card({
+                    theme: {
+                        border: false,
+                        layout: 'single',
+                        name: 'event-series',
+                        inlineSpecs: false,
+                        corner: false
+                    },
+                    image: {
+                        src: 'https://p3.aprimocdn.net/malvernpanalytical/97c76c3b-e491-43e2-875b-adea00bec47d/shutterstock_733895350_Square.jpg?quality=60',
+                        alt: 'Product image alt'
+                    },
+                    header: {      
+                        title: 'Part 1 - The theory of X-Ray Fluorescence (XRF)',
+                        date: {
+                            date: 'Oct 2019',
+                            formatted: true
+                        }
+                    },
+                    footer: {
+                        cta: {
+                            link: '#',
+                            label: 'Watch now',
+                            icon: 'play'
+                        }
+                    },
+                    link: '#'
+                }) }}
+                {{ card({
+                    theme: {
+                        border: false,
+                        layout: 'single',
+                        name: 'event-series',
+                        inlineSpecs: false,
+                        corner: false
+                    },
+                    image: {
+                        src: 'https://p3.aprimocdn.net/malvernpanalytical/3a8462a5-a4f8-48ea-a18a-adea00bebbc8/shutterstock_733895305_Square.jpg?quality=60',
+                        alt: 'Product image alt'
+                    },
+                    header: {      
+                        title: 'Part 2 - Wavelength & energy dispersive XRF explained',
+                        date: {
+                            date: 'Oct 2019',
+                            formatted: true
+                        }
+                    },
+                    footer: {
+                        cta: {
+                            link: '#',
+                            label: 'Watch now',
+                            icon: 'play'
+                        }
+                    },
+                    link: '#'
+                }) }}
+                {{ card({
+                    theme: {
+                        border: false,
+                        layout: 'single',
+                        name: 'event-series',
+                        inlineSpecs: false,
+                        corner: false
+                    },
+                    image: {
+                        src: 'https://p3.aprimocdn.net/malvernpanalytical/78a2e0d5-123f-48df-a54f-adea00bec1ad/shutterstock_733895335_Square.jpg?quality=60',
+                        alt: 'Product image alt'
+                    },
+                    header: {      
+                        title: 'Part 3 - The basics of sample preparation for XRF',
+                        date: {
+                            date: 'Nov 2019',
+                            formatted: true
+                        }
+                    },
+                    footer: {
+                        cta: {
+                            link: '#',
+                            label: 'Watch now',
+                            icon: 'play'
+                        }
+                    },
+                    link: '#'
+                }) }}
+            </div>
+        </div>
+    </div>
+</div>
+
+</div>
+{% endblock %}