| 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/contact/ |
Upload File : |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ginger Monkey Design</title>
<script type="module" crossorigin src="/assets/vendors-DjiCUAVz.js"></script>
<script type="module" crossorigin src="/assets/main-Cp_KRKpB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-BRJl1nzS.css">
</head>
<body id="top">
<header
class="
py-5
px-10
<md:px-5
overflow-hidden
"
>
<!-- large up -->
<nav class="
2xl:container
mx-auto
flex
items-center
justify-center
transition-all
ease-in-out
duration-300
border-0
border-blue-500
relative
">
<div class="w-4/12 flex items-center justify-start border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<a href="#" class="border-0 border-blue-500 transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 h-full logo-complete overflow-hidden">
<img
src="/static/logo-ginger-monkey.svg"
class="
object-cover
object-contain
w-35
opacity-100
max-h-100
transition-all
ease-in-out
duration-300
"
/>
</a>
</div>
<div
class="w-4/12 flex justify-center items-center border-0 border-blue-500"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>
<ul class="flex space-x-8 <xl:space-x-5 border-0 border-blue-500 <md:hidden">
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a href="#" class="[&>*:last-child]:hover:visible [&>*:last-child]:hover:w-8/12 hover:opacity-50 [&>*:last-child]:hover:opacity-100 opacity-100 transition-all ease-in-out duration-300 text-[1.045rem] font-sans-myriad font-bold flex flex-col items-center border-0 border-blue-500">
<span class="border-0 border-blue-500">Projects</span>
<span class="block h-[2px] w-0 bg-black opacity-0 transition-all duration-200 invisible"></span>
</a>
</li>
<li class="border-0 border-blue-500 flex items-center justify-center relative">
<a href="#" class="[&>*:last-child]:hover:visible [&>*:last-child]:hover:w-8/12 [&>*:last-child]:hover:opacity-100 hover:opacity-50 opacity-100 transition-all ease-in-out duration-300 text-[1.045rem] font-sans-myriad font-bold flex flex-col items-center border-0 border-blue-500">
<span class="border-0 border-blue-500">Specimens</span>
<span class="block h-[2px] w-0 bg-black opacity-0 transition-all duration-200 invisible"></span>
</a>
</li>
</ul>
</div>
<!-- mobile burger -->
<ul class="w-4/12 flex flex-col items-end justify-end border-0 border-red-500"
data-aos="fade-left"
data-aos-duration="1000"
data-aos-delay="500"
>
<li class="border-0 border-blue-500 flex items-center justify-center">
<a
href="#"
class="flex flex-col items-center transition-all ease-in-out duration-300 border-0 border-red-500 spin"
id="burger-button"
>
<i class="icon-plus text-lg text-black"></i>
</a>
</li>
</ul>
<!-- mobile burger -->
</nav>
</header>
<main class="px-10 <md:px-5 overflow-hidden">
<!-- container -->
<div class="2xl:container mx-auto space-y-10 py-20 flex flex-col justify-center items-center border-0 border-red-500">
<div class="w-full flex flex-col justify-center items-center space-y-10">
<h1
class="text-6xl <md:text-4xl font-serif italic text-center"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>Get in touch</h1>
<!-- item -->
<div
class="w-7/12 <xl:w-8/12 <md:w-full flex flex-col justify-center space-y-5 border-0 border-red-500"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="text-2xl <md:text-lg font-serif italic text-center">
<p>If you’d like to start a project, refine an idea, or simply explore what’s possible, the easiest way to reach Ginger Monkey is by email.</p>
</div>
<div class="text-2xl <md:text-lg font-serif italic text-center tracking-wide">
<a href="" class="flex items-center justify-center space-x-2 text-gray-dark transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 border-0 border-red-500">
<i class="icon-envelop text-sm text-center border-0 border-red-500 pt-1"></i>
<span class="font-bold border-0 border-red-500">tom@gingermonkeydesign.com</span>
</a>
</div>
</div>
<!-- item -->
</div>
<!-- group -->
<div class="w-full flex-col flex justify-center items-center space-y-10">
<!-- item -->
<div class="w-6.5/12 <xl:w-8/12 <md:w-full flex justify-center space-y-5 border-0 border-red-500"
data-aos="fade-right"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="space-y-5 text-center">
<p>If you’d like a little more help getting things going. Please feel free to use the form below.</p>
</div>
</div>
<!-- item -->
<!-- item -->
<div class="w-8/12 <xl:w-8/12 <md:w-full flex flex-col justify-center border-0 border-red-500" id="app-form-contact">
<form-contact
v-slot="{ v$, form, response, submitForm, resetResponse, toggleCheckbox }"
v-bind:api-add-subscriber="'/wp-json/api/v1/subscriber/add'"
>
<form
class="w-full flex flex-col items-start justify-start space-y-15 border-0 border-blue-500"
novalidate="true"
v-on:submit.prevent="submitForm"
>
<!-- fields -->
<div class="w-full">
<!-- block: honey -->
<div class="absolute top-0 left-0 w-0 h-0 -z-1 opacity-0">
<label class="block" for="name">
Full Name
</label>
<input
id="name"
type="text"
name="name"
autocomplete="disabled"
v-model.trim="form.name"
>
<label class="block" for="fname">
First Name
</label>
<input
id="fname"
type="text"
name="fname"
autocomplete="disabled"
v-model.trim="form.fname"
>
<label class="block" for="lname">
Last Name
</label>
<input
id="lname"
type="text"
name="lname"
autocomplete="disabled"
v-model.trim="form.lname"
>
<label class="block" for="email">
Email
</label>
<input
id="email"
type="email"
name="email"
autocomplete="disabled"
v-model.trim="form.email"
>
<label class="block" for="telephone">
Telephone
</label>
<input
id="telephone"
type="text"
name="telephone"
autocomplete="disabled"
v-model.trim="form.telephone"
>
</div>
<!-- block: honey -->
<!-- flex -->
<div
class="w-full flex flex-col flex-wrap items-start justify-start space-y-10 border-0 border-red-500"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Name
</label>
<input
type="text"
placeholder="What should I call you?"
class="input-light"
v-model.trim="form.fullName"
v-on:blur="v$.fullName.$touch"
v-bind:class="{ 'has-error': v$.fullName.$errors.length }"
/>
<div v-for="error of v$.fullName.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Email
</label>
<input
type="text"
placeholder="Example@theinternet.com"
class="input-light"
v-model.trim="form.emailAddress"
v-on:blur="v$.emailAddress.$touch"
v-bind:class="{ 'has-error': v$.emailAddress.$errors.length }"
/>
<div v-for="error of v$.emailAddress.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Project type
</label>
<input
type="text"
placeholder="ie. Branding, Lettering, Packaging Design, Illustration, or not sure yet?"
class="input-light"
v-model.trim="form.type"
v-on:blur="v$.type.$touch"
v-bind:class="{ 'has-error': v$.type.$errors.length }"
/>
<div v-for="error of v$.type.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Tell me a little about your project
</label>
<textarea
placeholder="A short space for you to share what you’re working on, what you’re building, or what you’re hoping to create"
class="input-light"
v-model.trim="form.description"
v-on:blur="v$.description.$touch"
v-bind:class="{ 'has-error': v$.description.$errors.length }"
rows="4"
></textarea>
<div v-for="error of v$.description.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<p class="hidden">{{ form }}</p>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
What stage are you at?
</label>
<ul class="flex flex-col justify-start space-y-4">
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="1"
type="checkbox"
class="hidden"
v-model.trim="form.stage"
v-on:blur="v$.stage.$touch"
v-bind:class="{ 'has-error': v$.stage.$errors.length }"
value="Just exploring ideas"
/>
<span class="text-gray-400 text-xl">
Just exploring ideas
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="2"
type="checkbox"
class="hidden"
v-model.trim="form.stage"
v-on:blur="v$.stage.$touch"
v-bind:class="{ 'has-error': v$.stage.$errors.length }"
value="Ready to start soon"
/>
<span class="text-gray-400 text-xl">
Ready to start soon
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="3"
type="checkbox"
class="hidden"
v-model.trim="form.stage"
v-on:blur="v$.stage.$touch"
v-bind:class="{ 'has-error': v$.stage.$errors.length }"
value="Looking for a quote"
/>
<span class="text-gray-400 text-xl">
Looking for a quote
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="4"
type="checkbox"
class="hidden"
v-model.trim="form.stage"
v-on:blur="v$.stage.$touch"
v-bind:class="{ 'has-error': v$.stage.$errors.length }"
value="Need help figuring things out"
/>
<span class="text-gray-400 text-xl">
Need help figuring things out
</span>
</li>
</ul>
<div v-for="error of v$.stage.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Do you have a deadline in mind?
</label>
<input
type="text"
placeholder="Optional"
class="input-light"
v-model.trim="form.deadline"
v-on:blur="v$.deadline.$touch"
v-bind:class="{ 'has-error': v$.deadline.$errors.length }"
/>
<div v-for="error of v$.deadline.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
<div class="w-full flex flex-col items-start justify-start space-y-4 border-0 border-red-500">
<label class="text-4xl <2xl:text-3xl <md:text-2xl px-4 font-serif italic">
Budget range
</label>
<ul class="flex flex-col justify-start space-y-4">
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="1"
type="checkbox"
class="hidden"
v-model.trim="form.budgetRange"
v-on:blur="v$.budgetRange.$touch"
v-bind:class="{ 'has-error': v$.budgetRange.$errors.length }"
value="£500 - £1500"
/>
<span class="text-gray-400 text-xl">
£500 - £1500
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="2"
type="checkbox"
class="hidden"
v-model.trim="form.budgetRange"
v-on:blur="v$.budgetRange.$touch"
v-bind:class="{ 'has-error': v$.budgetRange.$errors.length }"
value="£1,500 - £5,000"
/>
<span class="text-gray-400 text-xl">
£1,500 - £5,000
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="3"
type="checkbox"
class="hidden"
v-model.trim="form.budgetRange"
v-on:blur="v$.budgetRange.$touch"
v-bind:class="{ 'has-error': v$.budgetRange.$errors.length }"
value="£5,000 +"
/>
<span class="text-gray-400 text-xl">
£5,000 +
</span>
</li>
<li class="flex flex-wrap items-center justify-start w-full border-0 border-red-500">
<a class="
rounded-md
w-[40px]
h-[40px]
bg-lime-xtralight
cursor-pointer
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</a>
<i class="
icon-close
w-[40px]
h-[40px]
text-md
bg-lime-xtralight
cursor-pointer
items-center
justify-center
border-0
border-red-500
hidden
mr-4
"
v-on:click.prevent="toggleCheckbox"
>
</i>
<input
id="4"
type="checkbox"
class="hidden"
v-model.trim="form.budgetRange"
v-on:blur="v$.budgetRange.$touch"
v-bind:class="{ 'has-error': v$.budgetRange.$errors.length }"
value="Not sure yet"
/>
<span class="text-gray-400 text-xl">
Not sure yet
</span>
</li>
</ul>
<div v-for="error of v$.budgetRange.$errors" :key="error.$uid">
<div class="text-red-500 text-xl">
<i class="icon-warning border-0 border-red-500"></i>
{{ error.$message }}
</div>
</div>
</div>
</div>
<!-- flex -->
</div>
<!-- fields -->
<div
class="flex flex-wrap items-center space-x-5"
data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="500"
>
<a class="btn" href="#">
<button>Submit</button>
</a>
<p
class="text-xl text-gray-400 hidden space-x-2 items-center"
v-on:click.prevent="resetResponse"
:class="{ 'flex-inline': response.status === 'ok' }"
>
<i class="icon-thumbs-up"></i>
<span>Thank you! I’ll be in touch soon.</span>
</p>
</div>
</form>
<div
v-on:click.prevent="resetResponse"
class="hidden top-0 bottom-0 left-0 right-0 bg-white bg-opacity-60 z-99999 border-0 border-red-500"
:class="{ 'fixed flex justify-center items-center flex-wrap': response.status === 'error' }"
>
<div class="w-6/12 <xl:w-10/12 <md:w-11/12 flex-center-x">
<p class="bg-red-200 py-4 px-6 text-3xl text-center">
<i class="icon-warning"></i> {{ response.message }}
</p>
</div>
</div>
</form-contact>
</div>
<!-- item -->
</div>
<!-- group -->
</div>
<!-- container -->
</main>
<footer
id="footer"
class="px-10 <md:px-5 py-10 overflow-hidden border-0 border-red-500"
>
<!-- container -->
<div class="2xl:container mx-auto flex flex-wrap items-center justify-between <lg:flex-col <lg:text-center <lg:space-y-3 border-0 border-red-500">
<div class="flex items-start space-x-5 <md:flex-col <md:items-center <md:justify-center <md:space-x-0 <md:space-y-2 transition-all ease-in-out duration-1000 fade-right -translate-x-full opacity-0 border-0 border-red-500">
<a href="" class="flex items-center justify-center space-x-2 text-gray-dark transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 border-0 border-red-500">
<i class="icon-envelop text-2xl text-center"></i>
<span>Connect via email</span>
</a>
<a href="" class="flex items-center justify-center space-x-2 text-gray-dark transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 border-0 border-red-500">
<i class="icon-social-instagram text-2xl text-center"></i>
<span>Join on Instagram</span>
</a>
</div>
<div class="text-md text-gray-dark transition-all ease-in-out duration-1000 fade-left translate-x-full opacity-0 border-0 border-red-500">
<p>© 2005-2026 Tom Lane, unless otherwise stated</p>
</div>
</div>
<!-- container -->
</footer>
<!-- up nav -->
<div
class="fixed right-0 bottom-0 z-999 p-5 border-0 border-blue-500 opacity-0 transition-all duration-1000 ease-in-out"
id="button-up"
>
<nav>
<ul>
<li>
<a
href="#top"
class="flex items-center justify-center text-xl bg-gray-600 px-4 py-3 rounded-3xl text-white block transition-all duration-1000 ease-in-out hover:opacity-50"
>
<i class="icon-chevron-thin-up"></i>
</a>
</li>
</ul>
</nav>
</div>
<!-- up nav -->
<!-- mobile nav -->
<div
class="-translate-y-full transition-all ease-in-out duration-300 bg-black xhidden fixed top-0 bottom-0 left-0 right-0 z-999 overflow-x-auto space-y-5 border-0 border-green-500 xopacity-30"
id="mobile-menu"
>
<div
class="relative w-full h-full"
>
<div class="absolute top-0 right-0 left-0 py-5 px-10 <md:px-5">
<div class="2xl:container mx-auto w-full flex justify-between items-center w-full border-0 border-blue-500 is-mobile">
<div class="w-4/12 flex items-center justify-start border-0 border-red-500 invisible">
<a href="#" class="border-0 border-blue-500 transition-all ease-in-out duration-300 opacity-100 hover:opacity-60 h-full logo-complete overflow-hidden">
<img
src="/static/logo-ginger-monkey.svg"
class="
object-cover
object-contain
w-35
opacity-100
max-h-100
transition-all
ease-in-out
duration-300
"
/>
</a>
</div>
<nav>
<ul>
<li>
<a
href="#"
class="flex flex-col items-center transition-all ease-in-out duration-300 spin"
id="exit-button"
>
<i class="icon-minus text-lg text-white"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="w-full h-full flex items-center justify-center border-0 border-purple-500 px-2">
<ul class="flex-col text-center space-y-2 border-0 border-red-500">
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all opacity-50 border-0 border-red-500">Projects</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Specimens</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Services</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">About</a>
</li>
<li class="">
<a href="#" class="text-white font-serif italic text-7xl <md:text-4xl inline-block transition-all hover:opacity-50 border-0 border-red-500">Connect</a>
</li>
</ul>
</div>
</div>
</div>
<!-- mobile nav -->
<div id="wait" class="hidden fixed top-0 bottom-0 left-0 right-0 z-999">
<div class="flex items-center justify-center h-12/12 w-12/12 bg-black bg-opacity-50 z-4 text-white text-xl">
<p>Please wait...</p>
</div>
</div>
<div id="app-current-breakpoint">
<current-breakpoint />
</div>
</body>
</html>