Untitled
unknown
plain_text
a year ago
51 kB
0
Indexable
Never
<template>
<div class="flex w-full mt-12 ml-16">
<button @click="showContactForm"
:class="{ 'text-mainColor border-b-8 border-mainColor rounded-b-md relative z-20 -mb-2': isContactFormVisible, 'text-grayCase': !isContactFormVisible }"
class="mr-8 text-lg pb-6">Send request</button>
<button @click="showCalendar"
:class="{ 'text-mainColor border-b-8 border-mainColor rounded-b-md relative z-20 -mb-2': isCalendarVisible, 'text-grayCase': !isCalendarVisible }"
class="text-lg pb-6">Schedule a call</button>
</div>
<div v-show="isSuccess"
class="font-regular p-5 absolute top-0 mb-4 block right-0 text-[24px] rounded-lg bg-green-500 w-600 text-base leading-5 text-white opacity-100">
Your contact form was successfully submitted!
</div>
<div class="flex flex-col lg:flex-row relative w-full">
<div v-show="isContactFormVisible"
class="blue-rectangle z-10 flex flex-col w-full lg:left-12 lg:w-[65%] px-6 py-8 sm:p-12 min-h-500">
<form @submit.prevent="submit" id="contactForm" class="form mt-0">
<div class="relative mb-[10px]">
<input v-model="form.name" type="text" id="name"
class="block px-2.5 pb-2.5 pt-5 appearance-none focus:bg-transparent focus:outline-none focus:ring-0 peer"
placeholder=" " />
<label for="name"
class="absolute text-sm text-gray duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-inputLabel peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Name</label>
<span v-if="nameError" class="text-red-500 ml-1 text-sm">
Please write name
</span>
</div>
<div class="flex flex-col sm:flex-row gap-5 w-full mb-[10px]">
<div class="relative sm:w-1/2">
<input v-model="form.email" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$" type="email"
id="email" class="block px-2.5 pb-2.5 pt-5 appearance-none focus:outline-none focus:ring-0 peer"
placeholder=" " />
<label for="email"
class="absolute text-sm text-gray duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-inputLabel peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Email</label>
<span
class=" hidden text-sm text-red-500 peer-[&:not(:placeholder-shown):not(:focus):invalid]:block">
Please enter a valid email address
</span>
<span v-if="emailError" class="text-red-500 ml-1 text-sm ">
Please write email
</span>
</div>
<div class="relative sm:w-1/2">
<input v-model="form.phone" type="text" id="phone"
class="block px-2.5 pb-2.5 pt-5 appearance-none focus:bg-transparent focus:outline-none focus:ring-0 peer"
placeholder=" " />
<label for="phone"
class="absolute text-sm text-gray duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-inputLabel peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Phone</label>
<span v-if="phoneValidationError" class="text-red-500 ml-1 text-sm ">
Please write a valid phone number
</span>
</div>
</div>
<div class="relative form-textarea">
<textarea v-model="form.message" id="message"
class="block px-2.5 pb-2.5 pt-5 appearance-none focus:outline-none focus:ring-0 peer"
placeholder=" "></textarea>
<label for="message"
class="absolute text-sm text-gray duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-inputLabel peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Message</label>
<span v-if="messageError" class="text-red-500 ml-1 text-sm">
Please write message
</span>
</div>
<div class="flex flex-col mt-2 border-b border-grayCase sm:-mx-12">
<div class="flex mb-5 sm:ml-12">
<div class="flex items-center mr-2">
<input id="checked-checkbox" type="checkbox" v-model="isCheckboxChecked"
class="w-4 h-4 mr-1 focus:ring-offset-0 focus-visible:outline-none outline-none checked:text-transparent bg-transparent checked:border-mainColor focus:ring-transparent checked:border focus:outline-none focus:border-mainColor border-gray-300 rounded" />
</div>
<p class="text-gray text-sm">
I Accept
<a href="/terms-and-conditions" target="_blank" class="text-mainColor">Terms and
Conditions</a>.I Am Over 18
Years Old*
</p>
</div>
<p v-if="isCheckboxUnchecked && checkboxError" class="text-red-500 sm:ml-12 text-sm mb-1">
Please accept the data protection rules.
</p>
</div>
<div v-show="isDetailsVisible"
class="flex mt-6 flex-col sm:flex-row gap-5 pb-5 border-b border-grayCase sm:-mx-12">
<div class="sm:w-1/2 w-full flex flex-col sm:ml-12">
<p class="text-grayInContainer mb-2 text-sm">My budget is {{ currencySign }}10K or more</p>
<input type="range" class="block w-full mt-3 mb-5 appearance-none rounded-full outline-none"
:min="min" :max="max" :step="step" v-model="form.value" />
<div class="flex justify-between">
<span class="text-gray-600">{{ form.value }}k</span>
<span class="text-gray-600">500k</span>
</div>
<div class="dropdown relative mt-7">
<button @click.prevent="toggleDropdown"
class="btn-dropdown truncate rounded-xl h-12 text-white p-4 font-semibold flex items-center border border-grayCase">
{{ form.selectedOption }}
<i class="fa fa-chevron-down ml-1"></i>
</button>
<ul class="text-blackColor shadow-lg absolute bg-white rounded-2xl mt-3" v-if="isOpen">
<li class="block pl-6 pr-4 py-2 hover:bg-gray-100" v-for="option in options" :key="option"
@click.prevent="selectOption(option)">{{ option }}</li>
</ul>
</div>
</div>
<div class="flex flex-col w-full sm:w-1/2">
<p class="text-gray text-sm mb-3">What solution do you need?</p>
<div class="flex flex-wrap gap-2">
<button @click.prevent="selectSolution('Staff Augmentation')"
:class="{ 'bg-grayCase border border-mainColor': form.selectedSolution === 'Staff Augmentation' }"
class="py-[6px] px-[10px] border border-grayCase bg-[#3D3F56] hover:bg-grayCase text-white text-sm rounded-[10px]">Staff
Augmentation</button>
<button @click.prevent="selectSolution('Custom Soft Dev')"
:class="{ 'bg-grayCase border border-mainColor': form.selectedSolution === 'Custom Soft Dev' }"
class="py-[6px] px-[10px] border border-grayCase bg-[#3D3F56] hover:bg-grayCase text-white text-sm rounded-[10px]">Custom
Soft Dev</button>
<button @click.prevent="selectSolution('Web Dev')"
:class="{ 'bg-grayCase border border-mainColor': form.selectedSolution === 'Web Dev' }"
class="py-[6px] px-[10px] border border-grayCase bg-[#3D3F56] hover:bg-grayCase text-white text-sm rounded-[10px]">Web
Dev</button>
<button @click.prevent="selectSolution('Mob Dev')"
:class="{ 'bg-grayCase border border-mainColor': form.selectedSolution === 'Mob Dev' }"
class="py-[6px] px-[10px] border border-grayCase bg-[#3D3F56] hover:bg-grayCase text-white text-sm rounded-[10px]">Mob
Dev</button>
<button @click.prevent="selectSolution('UX/UI Design')"
:class="{ 'bg-grayCase border border-mainColor': form.selectedSolution === 'UX/UI Design' }"
class="py-[6px] px-[10px] border border-grayCase bg-[#3D3F56] hover:bg-grayCase text-white text-sm rounded-[10px]">UX/UI
Design</button>
</div>
</div>
</div>
<div class="flex gap-7 mt-8 justify-between items-center sm:flex-row flex-col">
<button @click.prevent="showDetails"
class="rounded-xl w-full sm:w-auto whitespace-nowrap uppercase border text-sm text-white border-mainColor px-7 py-5 cursor-pointer">
{{ isDetailsVisible ? 'Less details' : 'Add more details' }}
</button>
<div class="flex w-full sm:w-auto flex-col sm:flex-row items-start sm:items-center">
<div class="flex flex-col mb-6 sm:mb-0 items-center">
<div class="flex w-full items-center">
<label for="attachment" class="rounded-xl border border-mainColor p-2 cursor-pointer">
<img alt="attachment icon" src="../../../images/attachment.png" />
</label>
<span class="text-sm ml-2 text-gray">Add an attachment</span>
<input type="file" id="attachment" name="attachment" class="hidden"
@change="handleAttachmentChange" />
</div>
<div v-if="form.selectedAttachment" class="flex">
<p
class="text-sm text-gray max-w-[300px] w-full sm:max-w-[13rem] md:max-w-[9rem] xl:max-w-[300px] truncate mt-2">
{{ form.selectedAttachment }}</p>
<button @click.prevent="deleteAttachment" class="ml-2 text-white"><svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="btn-primary w-full sm:w-40 sm:ml-4 transition duration-200 max-xs:w-full">
<input value="SEND MESSAGE" type="button" @click.prevent="submit" />
</div>
</div>
</div>
</form>
</div>
<div v-show="isCalendarVisible">
<div class="calendly-inline-widget" data-url="https://calendly.com/dmytro-navozenko"
style=“min-width:320px;height:700px;“></div>
</div>
<div id="indicators-carousel-7" :class="{ 'h-fit': isCalendarVisible, 'h-auto': isContactFormVisible }"
class="pt-20 -top-16 lg:top-0 relative sm:px-16 pb-6 px-12 sm:pb-3 lg:pr-8 lg:py-32 lg:pl-20 max-lg:border-t-0 flex flex-col sm:flex-row-reverse lg:flex-col lg:-left-[2.4rem] border border-grayText rounded-b-[28px] lg:rounded-tr-[28px] lg:rounded-br-[28px] w-full lg:w-[35%]">
<img class="absolute bg-white hidden lg:block w-14 -top-6 right-[72px]" data-src="../../../images/quote.png" />
<div ref="carousel-contact" id="carouselContact"
class="relative bg-white w-full h-72 lg:h-[24rem] xl:h-72 overflow-hidden">
<div id="carousel-item-contact1"
class="bg-white duration-700 !z-0 ease-in-out flex items-center justify-center"
data-carousel-item="active">
<div class="flex flex-col ">
<div class="flex items-start lg:items-center justify-between">
<div class="flex">
<img src="../../../images/contact-us-img.png" />
<div class="flex flex-col ml-4">
<h3 class="text-blackColor font-bold uppercase">Eyass Shakrah</h3>
<p class="text-sm text-gray">Co-founder of Pet Media Group</p>
</div>
</div>
<img class="bg-white hidden sm:block lg:hidden w-11 lazyload"
data-src="../../../images/quote.png" />
</div>
<p class="text-font-sm my-5 text-grayCase">
We regard the TSH team as co-founders in our business. The entire team from The Software House
has invested an incredible amount of time to truly understand our business, our users and their
needs.
</p>
<div class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
</div>
</div>
</div>
<div id="carousel-item-contact2"
class="bg-white duration-700 !z-0 ease-in-out flex items-center justify-center" data-carousel-item>
<div class="flex flex-col ">
<div class="flex items-start lg:items-center justify-between">
<div class="flex">
<img src="../../../images/contact-us-img.png" />
<div class="flex flex-col ml-4">
<h3 class="text-blackColor font-bold uppercase">Eyass Shakrah</h3>
<p class="text-sm text-gray">Co-founder of Pet Media Group</p>
</div>
</div>
<img class=" bg-white hidden sm:block lg:hidden w-11 lazyload"
data-src="../../../images/quote.png" />
</div>
<p class="text-font-sm my-5 text-grayCase">
We regard the TSH team as co-founders in our business. The entire team from The Software House
has invested an incredible amount of time to truly understand our business, our users and their
needs.
</p>
<div class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
</div>
</div>
</div>
<div id="carousel-item-contact3"
class="bg-white duration-700 !z-0 ease-in-out flex items-center justify-center" data-carousel-item>
<div class="flex flex-col ">
<div class="flex items-start lg:items-center justify-between">
<div class="flex">
<img src="../../../images/contact-us-img.png" />
<div class="flex flex-col ml-4">
<h3 class="text-blackColor font-bold uppercase">Eyass Shakrah</h3>
<p class="text-sm text-gray">Co-founder of Pet Media Group</p>
</div>
</div>
<img class="bg-white hidden sm:block lg:hidden w-11 lazyload"
data-src="../../../images/quote.png" />
</div>
<p class="text-font-sm my-5 text-grayCase">
We regard the TSH team as co-founders in our business. The entire team from The Software House
has invested an incredible amount of time to truly understand our business, our users and their
needs.
</p>
<div class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
</div>
</div>
</div>
<div id="carousel-item-contact4"
class="bg-white duration-700 !z-0 ease-in-out flex items-center justify-center" data-carousel-item>
<div class="flex flex-col ">
<div class="flex items-start lg:items-center justify-between">
<div class="flex">
<img src="../../../images/contact-us-img.png" />
<div class="flex flex-col ml-4">
<h3 class="text-blackColor font-bold uppercase">Eyass Shakrah</h3>
<p class="text-sm text-gray">Co-founder of Pet Media Group</p>
</div>
</div>
<img class="bg-white hidden sm:block lg:hidden w-11 lazyload"
data-src="../../../images/quote.png" />
</div>
<p class="text-font-sm my-5 text-grayCase">
We regard the TSH team as co-founders in our business. The entire team from The Software House
has invested an incredible amount of time to truly understand our business, our users and their
needs.
</p>
<div class="flex">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.9613 6.20694L11.4983 5.55831L9.50314 1.51358C9.44864 1.40284 9.359 1.31319 9.24825 1.2587C8.97052 1.12159 8.63302 1.23585 8.49415 1.51358L6.49903 5.55831L2.03595 6.20694C1.9129 6.22452 1.8004 6.28253 1.71427 6.37042C1.61014 6.47744 1.55276 6.62143 1.55474 6.77074C1.55671 6.92006 1.61789 7.06247 1.72482 7.16671L4.95392 10.3149L4.19103 14.7605C4.17314 14.8639 4.18458 14.9702 4.22406 15.0675C4.26354 15.1647 4.32947 15.2489 4.41439 15.3106C4.4993 15.3723 4.5998 15.4089 4.70448 15.4164C4.80917 15.4239 4.91385 15.4018 5.00665 15.3528L8.99864 13.254L12.9906 15.3528C13.0996 15.4108 13.2262 15.4302 13.3475 15.4091C13.6533 15.3564 13.859 15.0663 13.8063 14.7605L13.0434 10.3149L16.2725 7.16671C16.3604 7.08057 16.4184 6.96807 16.4359 6.84503C16.4834 6.53741 16.269 6.25264 15.9613 6.20694Z"
fill="#FD833F" />
</svg>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between sm:justify-center mt-6 sm:mt-0 lg:mt-5 mr-8">
<img class="bg-white block sm:hidden w-11 lazyload" data-src="../../../images/quote.png" />
<div class="flex flex-row sm:flex-col lg:flex-row gap-4 items-center justify-center">
<button id="carousel-indicator-contact1" class="slider-indicator" aria-current="true"
aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button id="carousel-indicator-contact2" class="slider-indicator" aria-current="false"
aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button id="carousel-indicator-contact3" class="slider-indicator" aria-current="false"
aria-label="Slide 3" data-carousel-slide-to="2"></button>
<button id="carousel-indicator-contact4" class="slider-indicator" aria-current="false"
aria-label="Slide 4" data-carousel-slide-to="3"></button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ContactForm",
data() {
return {
form: {
name: "",
email: "",
phone: "",
message: "",
attachment: null,
value: 0,
selectedSolution: null,
selectedOption: 'How did you hear about us?',
selectedAttachment: null,
},
emailValidationError: false,
isCheckboxChecked: false,
isSuccess: false,
checkboxError: false,
currencyCode: 'USD',
nameError: false,
emailError: false,
messageError: false,
phoneValidationError: false,
isContactFormVisible: true,
isCalendarVisible: false,
isDetailsVisible: false,
min: 10,
max: 500,
step: 10,
isOpen: false,
options: ['Listings (Clutch, Manifest, GoodFirms, etc.)', 'SEO(Other)', 'Colleague/friend/word-of-mouth', 'Email', 'Social media', 'Our blog', 'Other'],
};
},
methods: {
selectSolution(solution) {
this.form.selectedSolution = solution;
},
showSuccessMessage() {
this.isSuccess = true;
setTimeout(() => {
this.isSuccess = false;
}, 3000);
},
toggleDropdown() {
this.isOpen = !this.isOpen;
},
selectOption(option) {
this.form.selectedOption = option;
this.isOpen = false;
},
showContactForm() {
this.isContactFormVisible = true;
this.isCalendarVisible = false;
},
showDetails() {
this.isDetailsVisible = !this.isDetailsVisible;
},
showCalendar() {
this.isContactFormVisible = false;
this.isCalendarVisible = true;
},
handleAttachmentChange(event) {
const selectedFile = event.target.files[0];
this.form.attachment = selectedFile;
this.form.selectedAttachment = selectedFile ? selectedFile.name : null;
},
deleteAttachment() {
this.form.attachment = null;
this.form.selectedAttachment = null;
const inputElement = document.getElementById('attachment');
if (inputElement) {
inputElement.value = '';
}
},
submit(event) {
const formData = new FormData();
formData.append('name', this.form.name);
formData.append('phone', this.form.phone);
formData.append('email', this.form.email);
formData.append('message', this.form.message);
formData.append('attachment', this.form.attachment);
formData.append('budget', this.form.value * 1000);
formData.append('currency_code', this.currencyCode);
formData.append('selected_solution', this.form.selectedSolution);
if (this.form.selectedOption === 'How did you hear about us?') {
formData.append('hear_about_us', null);
} else {
formData.append('hear_about_us', this.form.selectedOption);
}
if (this.form.name === '') {
this.nameError = true
}
if (this.form.email === '') {
this.emailError = true
}
if (this.form.message === '') {
this.messageError = true
}
if (this.isCheckboxUnchecked) {
this.checkboxError = true;
}
let emailRe =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!emailRe.test(String(this.form.email).toLowerCase())) {
this.emailValidationError = true;
}
let phoneRe = /^\+?(\d{12}|\d{3}(\s\d{3}){3})$/;
let cleanedPhoneNumber = this.form.phone.replace(/\s/g, '');
if (!phoneRe.test(cleanedPhoneNumber)) {
this.phoneValidationError = true;
} else {
this.phoneValidationError = false
}
if (!this.emailValidationError && !this.isCheckboxUnchecked && !this.emailError && !this.nameError && !this.messageError) {
axios
.post("/api/contact-form", formData)
.then((response) => {
this.form.name = this.form.phone =
this.form.email =
this.form.message =
"";
this.form.value = 0
this.form.selectedOption = 'How did you hear about us?'
this.form.attachment = this.form.selectedSolution = this.form.selectedAttachment = null
this.checkboxError = false;
this.showSuccessMessage();
event.target.reset();
})
.catch((err) => {
console.log(err);
});
}
},
},
mounted() {
const itemsContact = [
{
position: 0,
el: document.getElementById("carousel-item-contact1"),
},
{
position: 1,
el: document.getElementById("carousel-item-contact2"),
},
{
position: 2,
el: document.getElementById("carousel-item-contact3"),
},
{
position: 3,
el: document.getElementById("carousel-item-contact4"),
},
];
const optionsContact = {
defaultPosition: 0,
interval: 3000,
indicators: {
items: [
{
position: 0,
el: document.getElementById("carousel-indicator-contact1"),
},
{
position: 1,
el: document.getElementById("carousel-indicator-contact2"),
},
{
position: 2,
el: document.getElementById("carousel-indicator-contact3"),
},
{
position: 3,
el: document.getElementById("carousel-indicator-contact4"),
},
],
},
};
const carouselContact = new Carousel(itemsContact, optionsContact);
carouselContact.cycle();
const carouselContactElement = document.getElementById("carouselContact");
const handleTouchStartContact = (event) => {
this.touchStartXContact = event.touches[0].clientX;
}
const handleTouchEndContact = (event) => {
this.touchEndXContact = event.changedTouches[0].clientX;
handleSwipeContact();
}
const handleSwipeContact = () => {
const swipeThreshold = 50;
const swipeDistance = this.touchEndXContact - this.touchStartXContact;
if (swipeDistance > swipeThreshold) {
carouselContact.prev();
} else if (swipeDistance < -swipeThreshold) {
carouselContact.next();
}
}
carouselContactElement.addEventListener(
"touchstart",
handleTouchStartContact
);
carouselContactElement.addEventListener(
"touchend",
handleTouchEndContact
);
},
computed: {
isCheckboxUnchecked() {
return !this.isCheckboxChecked;
},
currencySign() {
return this.currencyCode === 'USD' ? '$' : '';
}
}
};
</script>
<style>
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #FD833F;
height: 28px;
width: 28px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #87899B;
}
</style>