%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<img src="assets/img/contactus.jpg" class="img-fluid">
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="section-bg">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="contact-heading">
<h2>Let's Connect</h2>
<p>We’re here to help our people, our clients, and our communities achieve their ambitions – all over the world. So let us know what you’re interested in, or what you’re looking for, and we’ll get back to you shortly.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 pt-4 pt-lg-0 content d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="100">
<h3>Address</h3>
<p>Mather Square, Tower B, Second Floor,<br> Xavier Arakkal Rd, Ernakulam, Kerala 682018</p>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" id="name" type="text" name="Name">
</div>
<div class="form-group">
<label for="name">email</label>
<input class="form-control" id="email" type="email" name="Name">
</div>
<div class="form-group">
<label for="name">Phone</label>
<input class="form-control" id="phone" type="text" name="Name">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="Message"></textarea>
</div>
<input class="btn btn-primary" type="submit" value="Submit" />
</form>
</div>
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15717.22277424285!2d76.2858801!3d9.9915878!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66fbd456ba6ecb42!2sVFM%20Assets!5e0!3m2!1sen!2sin!4v1662616628509!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section><!-- End About Section -->
</main><!-- End #main -->
</div>
</template>
<script>
export default {
data(){
return {
packages:[],
tasks:[],
searchQuery:'',
isTyping: false,
isLoading: false,
property_type:null,
property_for:null,
name:'',
email:'',
phone:'',
feedback:'',
name1:'',
email1:'',
phone1:'',
message:'',
thankyou:'',
thankyou1:'',
city: [],
test:[],
themes: [],
products: [
{name:'test1', color:'red', size:'XL'},
{name:'test2', color:'black', size:'L'},
{name:'test3', color:'red', size:'L'},
{name:'test4', color:'black', size:'XL'},
{name:'test5', color:'red', size:'L'},
{name:'test6', color:'yellow', size:'XL'},
{name:'test7', color:'black', size:'L'}
],
sortBy: 'name',
keyword: '',
}
},
watch: {
searchQuery: _.debounce(function() {
this.isTyping = false;
}, 500),
isTyping: function(value) {
if (!value) {
this.searchUser(this.searchQuery);
}
}
},
methods:{
searchUser: function(searchQuery) {
this.isLoading = true;
axios.get('client/searchquery?q=' + searchQuery)
.then(response => {
this.isLoading = false;
this.users = response.data;
});
},
getResults:function(page = 1) {
axios.get('properties?page=' + page)
.then(response => {
this.properties = response.data;
});
},
loadusers:function(){
axios.get('/packages').then(response => {
this.packages = response.data
this.test=this.packages.data
})
},
loadtotalcount(){
axios.get('/client/totalcount') .then(response => {
this.tasks = response.data
})
},
addfeedback(){
axios
.post('/feedback', {
name: this.name,
email: this.email,
phone:this.phone,
feedback:this.feedback
}) .then(response => {
this.thankyou1 ='Thankyou our team will contact you shortly';
});
},
addmessage(){
axios
.post('/message', {
name: this.name1,
email: this.email1,
phone:this.phone1,
message:this.message
}) .then(response => {
this.thankyou ='Thankyou our team will contact you shortly';
});
},
getPosts:function () {
axios.get('/client').then(function(response){
this.rows = response.data;
}.bind(this));
},
searchProperty:function (){
axios.post('/properties/searchproperty', {
property_for: this.property_for,
}).then(response => {
this.properties = response.data})
}
},
computed:{
computedProducts: function () {
return this.test.filter((item) => {
return (this.keyword.length === 0 || item.package_name.match(this.keyword)) &&
(this.city.length === 0 || this.city == item.destination) &&
(this.themes.length === 0 || this.themes.includes(item.themes))
})
}
},
created: function(){
this.loadusers(),
this.loadtotalcount()
},
}
</script>
<style scoped>
.filterTitle{
font-weight: 700;
color: #000;
margin-bottom: 14px;
font-size: 16px;
line-height: 16px;
margin-top: 22px;
}
.searchHeader{
background: #f9c11e;
height: 60px;
margin-bottom: 20px;
}
.sti{
font-weight: 600;
color: #33475b;
text-align: left;
font-size: 20px;
}
.contact-title{
display: inline-block;
}
.contact-box-item.logo {
height: 50px;
width: 50px;
}
.ctb{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 40px;
background-color: #fff;
border: 1px solid #eaf0f6;
height: 300px;
}
.title{
font-weight: 600;
color: #33475b;
text-align: center;
font-size: 20px;
}
.ctb h4{
font-weight: bold;
font-size: 1.25em;
}
#contact{
background:#f5f8fa;
}
.st{
padding-top: 6%;
font-weight: bold;
}
.searchHeaders{
background: #f9c11e;
height: 60px;
}
</style>
Zerion Mini Shell 1.0