142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<script setup>
|
|
import ConnectImg from '@images/front-pages/landing-page/lets-contact.png'
|
|
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
|
|
|
const name = ref('')
|
|
const email = ref('')
|
|
const message = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<VContainer id="contact-us">
|
|
<!-- 👉 Headers -->
|
|
<div class="contact-us-section">
|
|
<div class="headers d-flex justify-center flex-column align-center pb-15">
|
|
<div class="d-flex gap-x-3 mb-6">
|
|
<img
|
|
:src="sectionTitleIcon"
|
|
alt="section title icon"
|
|
height="24"
|
|
width="25"
|
|
>
|
|
<div
|
|
class="text-body-1 text-high-emphasis font-weight-medium"
|
|
style="letter-spacing: 0.15px !important;"
|
|
>
|
|
CONTACT US
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2 text-center">
|
|
<span
|
|
class="text-h4 d-inline-block font-weight-bold"
|
|
style="line-height: 2rem;"
|
|
>
|
|
Let's work
|
|
</span> <span class="text-h5 d-inline-block">together</span>
|
|
</div>
|
|
|
|
<p class="text-body-1 font-weight-medium text-center mb-0">
|
|
Any question or remark? just write us a message
|
|
</p>
|
|
</div>
|
|
<div class="mb-15">
|
|
<VRow class="match-height">
|
|
<VCol
|
|
cols="12"
|
|
md="4"
|
|
sm="6"
|
|
>
|
|
<VCard
|
|
flat
|
|
elevation="0"
|
|
color="primary"
|
|
theme="dark"
|
|
>
|
|
<VCardText class="pa-8">
|
|
<h6 class="text-h6 mb-1">
|
|
Let's contact with us
|
|
</h6>
|
|
|
|
<h4 class="text-h4">
|
|
Share your ideas or requirement with our experts.
|
|
</h4>
|
|
|
|
<VImg
|
|
:src="ConnectImg"
|
|
class="my-5"
|
|
/>
|
|
|
|
<div class="text-body-1">
|
|
Looking for more customization, more features, and more anything? Don't worry, We've provide you with an entire team of experienced professionals.
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="8"
|
|
sm="6"
|
|
>
|
|
<VCard
|
|
flat
|
|
elevation="0"
|
|
>
|
|
<VCardText>
|
|
<div class="text-h5 mb-5">
|
|
Share your ideas
|
|
</div>
|
|
<VForm @submit.prevent="() => {}">
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="name"
|
|
placeholder="John Doe"
|
|
label="Full Name"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="email"
|
|
placeholder="johndoe@gmail.com"
|
|
label="Email address"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<VTextarea
|
|
v-model="message"
|
|
placeholder="Type Your message"
|
|
label="Message"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol>
|
|
<VBtn type="submit">
|
|
Send Inquiry
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</div>
|
|
</VContainer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.contact-us-section {
|
|
margin-block: 5.25rem;
|
|
}
|
|
</style>
|