| Server IP : 159.69.118.108 / Your IP : 216.73.216.200 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-4gb-fsn1-1 6.8.0-90-generic #91-Ubuntu SMP PREEMPT_DYNAMIC Tue Nov 18 13:53:54 UTC 2025 aarch64 User : root ( 0) PHP Version : 8.2.32 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/lauthiamkok.net/prototype.lauthiamkok.net.sensewithdata/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.17e50649.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sensewithDATA</title>
<script type="module" crossorigin src="/assets/vuelidate.a8eab91a.js"></script>
<script type="module" crossorigin src="/assets/vendors.2bf68b2a.js"></script>
<script type="module" crossorigin src="/assets/google-recaptcha.950252d1.js"></script>
<script type="module" crossorigin src="/assets/voronoi.84ebab61.js"></script>
<script type="module" crossorigin src="/assets/voronoi.88f350ca.js"></script>
<script type="module" crossorigin src="/assets/signup.0e5d6c99.js"></script>
<script type="module" crossorigin src="/assets/use-fetch.c391a8ae.js"></script>
<script type="module" crossorigin src="/assets/form-signup.3bdacf0a.js"></script>
<script type="module" crossorigin src="/assets/float-item.3e85777c.js"></script>
<script type="module" crossorigin src="/assets/index.9c267f6d.js"></script>
<script type="module" crossorigin src="/assets/main.402a7257.js"></script>
<link rel="stylesheet" href="/assets/google-recaptcha.ba4cd265.css">
</head>
<body class="font-body">
<div id="app">
<!-- <canvas id="voronoiCanvas" width="1000" height="800"></canvas> -->
<!-- container:header -->
<div class="container mx-auto">
<div class="flex-center-xy w-full px-1.5 py-6">
<div class="w-1/2 px-2.5">
<ul class="flex justify-start">
<li>
<a href="#" class="w-100px h-100px flex-center-xy">
<img src="/static/g1397.png" class="w-90/100">
</a>
</li>
</ul>
</div>
<div class="w-1/2 px-2.5">
<ul class="flex justify-end space-x-10 <lg:space-x-6 <md:hidden">
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
<li>
<a
href="#"
class="hover:text-gray-500"
v-on:click.prevent="$store.dispatch('search/commitToggle')"
>
<i class="icon-search"></i>
</a>
</li>
</ul>
<ul class="justify-end space-x-6 hidden <md:flex">
<li>
<a
href="#"
class="text-4xl hover:text-gray-500"
v-on:click.prevent="$store.dispatch('mobile/commitToggle')"
>
<i class="icon-lines"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- container -->
<!-- container: introduction -->
<div class="container mx-auto py-6">
<!-- block -->
<div class="flex px-1.5 py-2">
<div class="w-1/3 <lg:w-1/2 <md:w-full px-2.5">
<div class="text-3xl">
<p>
"To Break the Story, You Must
Break the Status Quo" <br/>
- Rebecca Solnit
</p>
</div>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<!-- container: share -->
<div class="container mx-auto">
<!-- block -->
<div class="px-1.5">
<div class="w-1/3 <lg:w-1/2 <md:w-full px-2.5">
<h3 class="font-bold pb-2 border-b-1 border-gray-400">
Share
</h3>
<social-share
v-slot="{ url, title, encodedUrl, encodedTitle, copyUrl }"
v-bind:url="'https://lauthiamkok.net/'"
v-bind:title="'Lau Tiam Kok Website'"
>
<ul class="inline-flex space-x-4 pt-3">
<li>
<a
v-bind:href="'https://www.linkedin.com/shareArticle?' + `mini=true&url=${encodedUrl}` + `&title=${encodedTitle}`"
target="_blank"
rel="noopener"
class="badge"
>
<i class="icon-linkedin"></i>
</a>
</li>
<li class="hidden">
<a
v-bind:href="'https://api.whatsapp.com/send?' + `text=${title} ${url}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-whatsapp"></i>
</a>
</li>
<li>
<a
v-bind:href="'https://facebook.com/sharer/sharer.php?' + `u=${encodedUrl}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-facebook"></i>
</a>
</li>
<li>
<a
v-bind:href="'https://twitter.com/intent/tweet/?' + `text=${encodedTitle}` + `&url=${encodedUrl}`"
target="_blank"
rel="noopener"
class="badge">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a
v-bind:href="'mailto:?' + `subject=${encodedTitle}` + `&body=${encodedUrl}`"
target="_self"
rel="noopener"
class="badge">
<i class="icon-mail"></i>
</a>
</li>
<li>
<input v-bind:value="url" class="url hidden">
<a
v-bind:href="url"
v-on:click.prevent="copyUrl"
rel="noopener"
class="badge tooltip-context"
>
<i class="icon-link p-0.25"></i>
</a>
<div class="tooltip-container py-0.5 px-2 text-white bg-black rounded">
<div class="arrow" data-popper-arrow></div>
<span>
Link copied!
</span>
</div>
</li>
</ul>
</social-share>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<Voronoi>
<!-- container: what & who -->
<div class="container mx-auto py-10">
<!-- block -->
<div class="flex flex-wrap w-full px-4 py-2">
<div class="w-8/12 <lg:w-1/2 <md:w-full bg-gray-200 min-h-lg lg:flex-center-xy css-houdini voronoi voronoi:transitions">
<div class="px-2.5 pt-1">
<h2 class="text-5xl break-words bg-text hover:cursor-pointer hover:bg-violet-600 px-4 pb-2 leading-relaxed">
<a href="#">
what is sensewithDATA.org
</a>
</h2>
</div>
</div>
<div class="w-4/12 <lg:w-1/2 <md:w-full flex-center-xy bg-red-200 h-lg">
<div class="w-1/2">
<div class="text-lg pb-3">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
<button class="button">
Read More
</button>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-4 py-2">
<div class="w-8/12 <lg:w-1/2 <md:w-full lg:flex-center-xy bg-gray-200 min-h-lg css-houdini voronoi voronoi:transitions">
<div class="px-2.5 pt-1">
<h2 class="text-5xl break-words bg-text hover:cursor-pointer hover:bg-violet-600 px-4 pb-2 leading-relaxed">
<a href="#">
who is sensewithDATA.org
</a>
</h2>
</div>
</div>
<div class="w-4/12 <lg:w-1/2 <md:w-full flex-center-xy bg-red-200 h-lg">
<div class="text-lg">
<ul class="list-disc list-inside">
<li><a href="#" class="hover:text-gray-500">Annie Legge</a></li>
<li><a href="#" class="hover:text-gray-500">Natasha Nicholson</a></li>
<li><a href="#" class="hover:text-gray-500">Pete Quinn Davis</a></li>
<li><a href="#" class="hover:text-gray-500">Alex Hilson</a></li>
</ul>
</div>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
</Voronoi>
<Voronoi>
<!-- container: questions -->
<div class="container mx-auto pb-10">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Questions
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-4 pb-4">
<div class="w-6/12 <md:w-full pb-4 bg-gray-200 min-h-lg css-houdini voronoi voronoi:transitions"
style="--voronoi-cell-colors: #ff9f1c, #ffbf69, #ffffff, #cbf3f0, #2ec4b6; --voronoi-number-of-cells: 200;"
>
<div class="px-2.5 pt-1">
<h3 class="text-5xl break-words bg-text hover:cursor-pointer hover:bg-violet-600 px-4 pb-2 leading-relaxed">
<a href="#">
What does a bright / dark data future look like?
</a>
</h3>
</div>
</div>
<div class="w-6/12 <md:w-full pb-4 bg-red-200 min-h-lg css-houdini voronoi voronoi:transitions"
style="--voronoi-cell-colors: #5d737e, #64b6ac, #c0fdfb, #daffef, #fcfffd; --voronoi-number-of-cells: 200;"
>
<div class="px-2.5 pt-1">
<h3 class="text-5xl break-words bg-text hover:cursor-pointer hover:bg-violet-600 px-4 pb-2 leading-relaxed">
<a href="#">
How can system mapping data become a springboard for collective action?
</a>
</h3>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex justify-end px-4">
<button class="button float-rightx">
Explore More
</button>
</div>
<!-- block -->
</div>
<!-- container -->
</Voronoi>
<Voronoi>
<!-- container: voices -->
<div class="container mx-auto pb-10">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Voices
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-4 pb-4">
<div class="w-8/12 <lg:w-1/2 <md:w-full flex-center-xy bg-gray-200 min-h-lg css-houdini voronoi voronoi:transitions"
style="--voronoi-cell-colors: #50514f, #f25f5c, #ffe066, #247ba0, #70c1b3; --voronoi-number-of-cells: 200;"
>
<div class="px-2.5 pt-1">
<h3 class="text-5xl bg-text hover:cursor-pointer hover:bg-violet-600 px-4 pb-2 leading-relaxed">
<a href="#">
Annie Blanchette
</a>
</h3>
</div>
</div>
<div class="w-4/12 <lg:w-1/2 <md:w-full flex-center-xy bg-red-200 h-lg">
<div class="text-lg w-1/2">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex justify-end px-4">
<button class="button float-rightx">
Explore More
</button>
</div>
<!-- block -->
</div>
<!-- container -->
</Voronoi>
<!-- container: our projects -->
<div class="container mx-auto pb-10">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Our Projects
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-1.5">
<!-- item -->
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<a href="#">
<img src="/static/1-01.jpg" class="hover:opacity-80 transition-opacity duration-500 w-full">
</a>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#" class="hover:text-gray-200">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<a href="#">
<img src="/static/122117647_642328129764202_7538735420254885246_n-1.jpeg" class="hover:opacity-80 transition-opacity duration-500 w-full">
</a>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<a href="#">
<img src="/static/HighresScreenshot00002.jpeg" class="hover:opacity-80 transition-opacity duration-500 w-full">
</a>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<a href="#">
<img src="/static/inyourdreams.png" class="hover:opacity-80 transition-opacity duration-500 w-full">
</a>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
</div>
<!-- block -->
<!-- block -->
<div class="flex justify-end px-4">
<button class="button float-rightx">
Explore More
</button>
</div>
<!-- block -->
</div>
<!-- container -->
<!-- container: what’s new -->
<div class="container mx-auto pb-10">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
What's New
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex-center-x w-full px-1.5">
<!-- item -->
<div class="w-4/12 <lg:w-1/2 <md:w-full px-2.5">
<div class="square-container !before:pt-80/100 relative">
<a
href="#"
class="square-object bg-cover hover:opacity-80 transition-opacity duration-500"
:style="{ 'background-image': 'url(/static/Tree-projections.002.jpeg)' }"
>
</a>
<span class="absolute top-0 left-0 p-1 m-2 bg-white z-2">
5 Feb 2020
</span>
</div>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-4/12 <lg:w-1/2 <md:w-full px-2.5">
<div class="square-container !before:pt-80/100 relative">
<a
href="#"
class="square-object bg-cover hover:opacity-80 transition-opacity duration-500"
:style="{ 'background-image': 'linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(/static/Tree-projections.003.jpeg)' }"
>
</a>
<span class="absolute top-0 left-0 p-1 m-2 bg-white z-2">
5 Feb 2020
</span>
</div>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-4/12 <lg:w-1/2 <md:w-full px-2.5">
<div class="square-container !before:pt-80/100 relative">
<a
href="#"
class="square-object bg-cover hover:opacity-80 transition-opacity duration-500 transition-opacity duration-500"
:style="{ 'background-image': 'linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(/static/Whitsands-Bay-03.jpg)' }"
>
</a>
<span class="absolute top-0 left-0 p-1 m-2 bg-white z-2">
5 Feb 2020
</span>
</div>
<div class="px-6 py-6 mb-4 bg-gray-50">
<h3 class="bg-text hover:cursor-pointer hover:bg-violet-600 px-4 py-2 text-2xl font-bold leading-relaxed">
<a href="#">
Lorem ipsum dolor sit consectetuer
</a>
</h3>
<div class="text-lg pt-4">
<p>
Lorem ipsum dolor sitamet,
consectetur adipiscing elit, sed
do eiusmod tempor incididunt
utlabore et dolore magna
aliqua.
</p>
</div>
</div>
</div>
<!-- item -->
</div>
<!-- block -->
<!-- block -->
<div class="flex justify-end px-4">
<button class="button float-rightx">
Explore More
</button>
</div>
<!-- block -->
</div>
<!-- container -->
<form-signup
v-slot="{ v$, form, response, submitForm, resetResponse }"
v-bind:api-add-contact="'/wp-json/api/v1/contact-add'"
v-bind:api-send-verification="'/wp-json/api/v1/contact-verify'"
v-bind:recaptcha-element="'g-recaptcha-newsletter-footer'"
>
<!-- container: signup -->
<div class="container mx-auto py-12 mb-10 bg-gray-50">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-5/12 <xl:w-6/12 <lg:w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Newsletters
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex-center-xy w-full px-1.5">
<div class="w-8/12 <xl:w-full px-2.5">
<!-- https://v1.tailwindcss.com/components/forms -->
<form
class="w-full"
novalidate="true"
v-on:submit.prevent="submitForm"
>
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="full-name">
Full Name
</label>
<input
class="input"
type="text"
placeholder="(required)"
v-model.trim="form.name"
v-on:blur="v$.name.$touch"
v-bind:class="{ 'border-red-500': v$.name.$errors.length }"
>
<div v-for="error of v$.name.$errors" :key="error.$uid">
<div class="text-red-500">{{ error.$message }}</div>
</div>
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="email">
Email
</label>
<input
class="input"
type="email"
placeholder="(required)"
v-model.trim="form.email"
v-on:blur="v$.email.$touch"
v-bind:class="{ 'border-red-500': v$.email.$errors.length }"
>
<div v-for="error of v$.email.$errors" :key="error.$uid">
<div class="text-red-500">{{ error.$message }}</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="organisation">
Organisation
</label>
<input class="input" type="text" placeholder="(optional)" v-model.trim="form.organisation">
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="website">
Website
</label>
<input class="input" type="text" placeholder="(optional)" v-model.trim="form.website">
</div>
</div>
<!-- block -->
<div class="flex-center-x">
<div id="g-recaptcha-newsletter-footer" class="g-recaptcha"></div>
</div>
<!-- block -->
<div class="flex-center-xy py-3">
<button class="button" type="submit">
Submit
</button>
</div>
<!-- block -->
</form>
<div
class="flex-center-x"
v-show="response.status === 'ok'"
v-on:click.prevent="resetResponse"
>
<p class="border border-green-500/50 py-2 px-3 bg-green-500/20">
<i class="icon-like"></i> {{ response.message }}
</p>
</div>
<div
class="flex-center-x"
v-show="response.status === 'error'"
v-on:click.prevent="resetResponse"
>
<p class="border border-red-500/50 py-2 px-3 bg-red-500/20">
<i class="icon-alert"></i> {{ response.message }}
</p>
</div>
<div
class="flex-center-x"
v-show="response.status === '!token'"
v-on:click.prevent="resetResponse"
>
<p class="border border-red-500/50 py-2 px-3 bg-red-500/20">
<i class="icon-alert"></i> Token is required!
</p>
</div>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
</form-signup>
<!-- container: footer scroll top -->
<div class="container mx-auto flex-center-x">
<float-item
v-bind:placement="'top'"
>
<a
href="#"
class="triangle-up tooltip-context"
></a>
<div class="tooltip-container py-0.5 px-2 text-white bg-black rounded">
<div class="arrow" data-popper-arrow></div>
<span>
Scroll up
</span>
</div>
</float-item>
</div>
<!-- container -->
<!-- container: footer menu -->
<div class="w-full py-10 bg-gray-100">
<!-- block -->
<div class="flex flex-wrap w-full px-1.5">
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-10 <lg:space-x-6">
<li><a href="#" class="hover:text-gray-500">Home</a></li>
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
</ul>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap w-full px-1.5 py-10">
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-3 <md:text-center">
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-400 hover:text-light-blue-600">
<i class="icon-vimeo"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-rose-500 hover:text-rose-800">
<i class="icon-instagram"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-500 hover:text-light-blue-600">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-blue-600 hover:text-blue-900">
<i class="icon-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="w-full px-2.5 pb-2">
<ul class="flex-center-x space-x-6 <md:text-center">
<li>Email: <a href="#" class="hover:text-gray-500">hello@sensewithdata.org</a></li>
</ul>
</div>
<div class="w-full px-2.5">
<ul class="flex-center-x space-x-6 <md:text-center separator-x">
<li><a href="#" class="hover:text-gray-500">Data Policy</a></li>
<li><a href="#" class="hover:text-gray-500">Terms and Conditions</a></li>
</ul>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<!-- search form -->
<div
class="hidden fixed top-0 bottom-0 w-full bg-gray-100 z-2 z-2"
:class="{ '!block': $store.getters['search/getDisplay'] == true }"
>
<canvas
id="voronoiCanvas"
v-bind:width="$store.getters['search/getWidth']"
v-bind:height="$store.getters['search/getHeight']"
class="fixed z-3 -top-0.5 -left-0.5"
></canvas>
<div class="top-0 bottom-0 w-full fixed z-4">
<div class="container mx-auto h-full">
<div class="flex-center-xy h-full">
<form class="w-full max-w-sm">
<div class="flex items-center border-b border-gray-500 py-2 bg-white p-2">
<input
class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
type="text"
placeholder="Type anything..."
aria-label="Search term"
>
<button class="flex-shrink-0 button" type="button">
<i class="icon-search"></i>
</button>
</div>
</form>
</div>
<div class="fixed bottom-5 right-0 left-0 flex-center-x w-full <md:hidden">
<ul class="flex space-x-10 <lg:space-x-6 <md:hidden bg-black px-5 py-2">
<li><a href="#" class="text-white hover:text-gray-500">Home</a></li>
<li><a href="#" class="text-white hover:text-gray-500">Questions</a></li>
<li><a href="#" class="text-white hover:text-gray-500">Voices</a></li>
<li><a href="#" class="text-white hover:text-gray-500">Resources</a></li>
<li><a href="#" class="text-white hover:text-gray-500">Research</a></li>
<li><a href="#" class="text-white hover:text-gray-500">About</a></li>
<li><a href="#" class="text-white hover:text-gray-500">Connect</a></li>
</ul>
</div>
</div>
<nav class="fixed right-0 top-0">
<ul>
<li>
<a
href="#"
class="text-3xl p-3 block hover:text-gray-500"
v-on:click.prevent="$store.dispatch('search/commitToggle')"
>
<i class="icon-close"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- search form -->
<!-- mobile nav -->
<div
class="hidden !md:hidden fixed top-0 bottom-0 left-0 right-0 bg-gray-100 z-1"
:class="{ '!block': $store.getters['mobile/getDisplay'] == true }"
>
<div class="w-full h-full flex-center-xy">
<ul class="flex-col space-y-4 <md:text-center text-2xl">
<li><a href="#" class="hover:text-gray-500">Home</a></li>
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
<li>
<a
href="#"
class="hover:text-gray-500"
v-on:click.prevent="$store.dispatch('search/commitToggle')"
>
<i class="icon-search"></i>
</a>
</li>
</ul>
</div>
<nav class="fixed right-0 top-0">
<ul>
<li>
<a
href="#"
class="text-3xl p-3 block hover:text-gray-500"
v-on:click.prevent="$store.dispatch('mobile/commitToggle')"
>
<i class="icon-close"></i>
</a>
</li>
</ul>
</nav>
</div>
<!-- mobile nav -->
<popup-signup
v-slot="{ display, toggle }"
>
<!-- signup: popup -->
<div
class="hidden fixed top-0 bottom-0 left-0 right-0 bg-white bg-opacity-50 z-3"
:class="{ '!block': display == true }"
>
<div class="w-full h-full flex-center-xy">
<div class="w-1/2 <xl:w-8/12 <lg:w-10/12 <md:w-full py-12 bg-gray-50 relative">
<!-- block -->
<div class="flex-center-x px-1.5 pb-8">
<div class="w-8/12 <md:w-full px-2.5 text-center">
<div class="separator-center">
<h2 class="text-4xl font-bold">
Newsletters
</h2>
<div class="text-lg py-2">
<p>
Lorem ipsum dolor sitamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex-center-xy w-full px-1.5">
<div class="w-10/12 <xl:w-full px-2.5">
<form-signup
v-slot="{ v$, form, response, submitForm, resetResponse }"
v-bind:api-add-contact="'/wp-json/api/v1/contact-add'"
v-bind:api-send-verification="'/wp-json/api/v1/contact-verify'"
v-bind:recaptcha-element="'g-recaptcha-newsletter-popup'"
>
<!-- https://v1.tailwindcss.com/components/forms -->
<form
class="w-full"
v-on:submit.prevent="submitForm"
novalidate="true"
>
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="full-name">
Full Name
</label>
<input
class="input"
type="text"
placeholder="(required)"
v-model.trim="form.name"
v-on:blur="v$.name.$touch"
v-bind:class="{ 'border-red-500': v$.name.$errors.length }"
>
<div v-for="error of v$.name.$errors" :key="error.$uid">
<div class="text-red-500">{{ error.$message }}</div>
</div>
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="email">
Email
</label>
<input
class="input"
type="email"
placeholder="(required)"
v-model.trim="form.email"
v-on:blur="v$.email.$touch"
v-bind:class="{ 'border-red-500': v$.email.$errors.length }"
>
<div v-for="error of v$.email.$errors" :key="error.$uid">
<div class="text-red-500">{{ error.$message }}</div>
</div>
</div>
</div>
<!-- block -->
<!-- block -->
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="organisation">
Organisation
</label>
<input class="input" type="text" placeholder="(optional)" v-model.trim="form.organisation">
</div>
<div class="w-full md:w-1/2 px-3 pb-6">
<label class="block" for="website">
Website
</label>
<input class="input" type="text" placeholder="(optional)" v-model.trim="form.website">
</div>
</div>
<!-- block -->
<div class="flex-center-x">
<div id="g-recaptcha-newsletter-popup" class="g-recaptcha"></div>
</div>
<!-- block -->
<div class="flex-center-xy py-3">
<button class="button" type="submit">
Submit
</button>
</div>
<!-- block -->
</form>
<div
class="flex-center-x"
v-show="response.status === 'ok'"
v-on:click.prevent="resetResponse"
>
<p class="border border-green-500/50 py-2 px-3 bg-green-500/20">
<i class="icon-like"></i> {{ response.message }}
</p>
</div>
<div
class="flex-center-x"
v-show="response.status === 'error'"
v-on:click.prevent="resetResponse"
>
<p class="border border-red-500/50 py-2 px-3 bg-red-500/20">
<i class="icon-alert"></i> {{ response.message }}
</p>
</div>
<div
class="flex-center-x"
v-show="response.status === '!token'"
v-on:click.prevent="resetResponse"
>
<p class="border border-red-500/50 py-2 px-3 bg-red-500/20">
<i class="icon-alert"></i> Token is required!
</p>
</div>
</form-signup>
</div>
</div>
<!-- block -->
<nav class="absolute right-0 top-0">
<ul>
<li>
<a
href="#"
class="text-3xl p-3 block hover:text-gray-500"
v-on:click.prevent="toggle"
>
<i class="icon-close"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- signup: popup -->
</popup-signup>
<div id="wait" class="hidden fixed top-0 bottom-0 left-0 right-0">
<div class="flex-center-xy h-12/12 w-12/12 bg-black bg-opacity-50 z-4 text-white">
<p>Please wait...</p>
</div>
</div>
<!-- container: footer menu -->
<div class="w-full py-10 bg-gray-100 hidden">
<div class="flex-center w-full">
<div class="w-11/12 <md:w-full">
<!-- block -->
<div class="flex flex-wrap w-full px-1.5">
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<ul class="flex-col space-y-6 <md:text-center">
<li><a href="#" class="hover:text-gray-500">Home</a></li>
<li><a href="#" class="hover:text-gray-500">Questions</a></li>
<li><a href="#" class="hover:text-gray-500">Voices</a></li>
<li><a href="#" class="hover:text-gray-500">Resources</a></li>
<li><a href="#" class="hover:text-gray-500">Research</a></li>
<li><a href="#" class="hover:text-gray-500">About</a></li>
<li><a href="#" class="hover:text-gray-500">Connect</a></li>
</ul>
</div>
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<ul class="flex-col space-y-6 <md:text-center">
<li class="font-extrabold">Questions</li>
<li>
<a href="#" class="hover:text-gray-500">
What does a bright / dark data future look like?
</a>
</li>
<li>
<a href="#" class="hover:text-gray-500">
How can system mapping data become a springboard for collective action?
</a>
</li>
<li>
<a href="#" class="hover:text-gray-500">
What does a bright / dark data future look like?
</a>
</li>
<li>
<a href="#" class="hover:text-gray-500">
How can system mapping data become a springboard for collective action?
</a>
</li>
<li>
<a href="#" class="hover:text-gray-500">
What does a bright / dark data future look like?
</a>
</li>
<li>
<a href="#" class="hover:text-gray-500">
How can system mapping data become a springboard for collective action?
</a>
</li>
</ul>
</div>
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<ul class="flex-col space-y-6 <md:text-center">
<li class="font-extrabold">Voices</li>
<li><a href="#" class="hover:text-gray-500">Annie Blanchette</a></li>
<li><a href="#" class="hover:text-gray-500">Corinne Stuart</a></li>
<li><a href="#" class="hover:text-gray-500">Grace Quantock</a></li>
<li><a href="#" class="hover:text-gray-500">Kate Swade</a></li>
<li><a href="#" class="hover:text-gray-500">Kathy Hinde</a></li>
<li><a href="#" class="hover:text-gray-500">Matthew Baker</a></li>
<li><a href="#" class="hover:text-gray-500">Michelle Forrest-Beckett</a></li>
<li><a href="#" class="hover:text-gray-500">Sam Howey-Nunn</a></li>
</ul>
</div>
<div class="w-3/12 <lg:w-1/2 <md:w-full px-2.5">
<ul class="flex-col space-y-6 <md:text-center">
<li class="font-extrabold">Events</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmodtempor
</a>
</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Consectetur adipiscingelit, sed do eiusmodtemporincididuntut labore et dolore magna aliqua
</a>
</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmodtempor
</a>
</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Consectetur adipiscingelit, sed do eiusmodtemporincididuntut labore et dolore magna aliqua
</a>
</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmodtempor
</a>
</li>
<li class="truncate">
<a href="#" class="hover:text-gray-500">
Consectetur adipiscingelit, sed do eiusmodtemporincididuntut labore et dolore magna aliqua
</a>
</li>
</ul>
</div>
</div>
<!-- block -->
</div>
</div>
</div>
<!-- container -->
<!-- container: footer end -->
<div class="container mx-auto py-10 hidden">
<!-- block -->
<div class="flex flex-wrap w-full px-1.5">
<div class="w-full px-2.5 pb-3">
<ul class="flex-center space-x-3 <md:text-center">
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-400 hover:text-light-blue-600">
<i class="icon-vimeo"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-rose-500 hover:text-rose-800">
<i class="icon-instagram"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-light-blue-500 hover:text-light-blue-600">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a
href="#"
target="_blank"
rel="noopener"
class="text-lg text-blue-600 hover:text-blue-900">
<i class="icon-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="w-full px-2.5 pb-2">
<ul class="flex-center space-x-6 <md:text-center">
<li>Email: <a href="#" class="hover:text-gray-500">hello@sensewithdata.org</a></li>
</ul>
</div>
<div class="w-full px-2.5">
<ul class="flex-center space-x-6 <md:text-center separator-x">
<li><a href="#" class="hover:text-gray-500">Data Policy</a></li>
<li><a href="#" class="hover:text-gray-500">Terms and Conditions</a></li>
</ul>
</div>
</div>
<!-- block -->
</div>
<!-- container -->
<div class="container mx-auto hidden">
<div class="flex-center w-full px-1.5">
<div class="w-1/2 <md:w-full px-2.5">
<img src="/assets/matheus-bandoch-mkdI8JN6sDU-unsplash.7708170b.jpg">
</div>
<div class="w-1/2 <md:w-full px-2.5">
<img src="/assets/matheus-bandoch-mkdI8JN6sDU-unsplash.7708170b.jpg">
</div>
<div class="w-1/2 <md:w-full px-2.5">
<img src="/static/jeremy-bishop-dvACrXUExLs-unsplash.jpg">
</div>
</div>
<p>Flex: collapse padding on small</p>
<div class="flex-center w-full px-1.5 <md:px-0">
<div class="w-1/2 <md:w-full <md:p-0 px-2.5">
<img src="/assets/matheus-bandoch-mkdI8JN6sDU-unsplash.7708170b.jpg">
</div>
<div class="w-1/2 <md:w-full <md:p-0 px-2.5">
<img src="/assets/matheus-bandoch-mkdI8JN6sDU-unsplash.7708170b.jpg">
</div>
<div class="w-1/2 <md:w-full <md:p-0 px-2.5">
<img src="/static/jeremy-bishop-dvACrXUExLs-unsplash.jpg">
</div>
</div>
</div>
<google-recaptcha
v-bind:site-key="'6LciG4sUAAAAAGWqRDzuYNqV22tGZo3NWkX5lAMp'"
/>
<current-breakpoint/>
</div>
</body>
</html>