329 lines
7.9 KiB
Vue
329 lines
7.9 KiB
Vue
<template>
|
|
<q-page class="contact-page">
|
|
<HomeHeader />
|
|
|
|
<section class="contact-section">
|
|
<div class="page-shell">
|
|
<div class="contact-layout">
|
|
<div class="contact-info-panel">
|
|
<div class="section-kicker">Contact us</div>
|
|
<h1 class="section-title">Reach out for questions, appointments, or support</h1>
|
|
<p class="section-text">
|
|
We take the time to understand your individual needs and goals,
|
|
creating customized treatment plans to help you achieve optimal
|
|
health and peace of mind.
|
|
</p>
|
|
|
|
<div class="contact-info-list">
|
|
<q-card
|
|
v-for="item in contactItems"
|
|
:key="item.title"
|
|
flat
|
|
class="contact-info-card"
|
|
>
|
|
<img class="contact-icon" :src="item.icon" :alt="item.title" />
|
|
<div>
|
|
<div class="contact-card-title">{{ item.title }}</div>
|
|
<div class="contact-card-text">{{ item.text }}</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="social-row">
|
|
<span class="social-label">Follow us:</span>
|
|
<div class="social-links">
|
|
<q-btn
|
|
v-for="social in socialLinks"
|
|
:key="social.label"
|
|
round
|
|
flat
|
|
dense
|
|
class="social-btn"
|
|
:aria-label="social.label"
|
|
>
|
|
<q-tooltip>{{ social.label }}</q-tooltip>
|
|
<img class="social-icon" :src="social.icon" :alt="social.label" />
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-card flat class="contact-form-card">
|
|
<div class="form-kicker">Contact form</div>
|
|
<h2 class="form-title">Send us a message</h2>
|
|
<p class="form-text">
|
|
Share your question and our team will get back to you with the most
|
|
relevant next step.
|
|
</p>
|
|
|
|
<q-form class="contact-form" @submit.prevent>
|
|
<q-input
|
|
v-model="form.name"
|
|
outlined
|
|
label="Full name"
|
|
placeholder="Enter your name"
|
|
/>
|
|
<div class="form-grid">
|
|
<q-input
|
|
v-model="form.email"
|
|
outlined
|
|
type="email"
|
|
label="Email"
|
|
placeholder="Enter your email"
|
|
/>
|
|
<q-input
|
|
v-model="form.phone"
|
|
outlined
|
|
label="Phone"
|
|
placeholder="Enter your number"
|
|
/>
|
|
</div>
|
|
<q-input
|
|
v-model="form.message"
|
|
outlined
|
|
autogrow
|
|
type="textarea"
|
|
label="Message"
|
|
placeholder="Write message..."
|
|
/>
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
no-caps
|
|
color="primary"
|
|
label="Submit now"
|
|
class="submit-btn"
|
|
/>
|
|
</q-form>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="reach-section">
|
|
<div class="page-shell">
|
|
<div class="reach-heading">
|
|
<div class="section-kicker">How to reach us</div>
|
|
<h2 class="section-title center">Get in touch with us</h2>
|
|
<p class="section-text center">
|
|
The goal of our clinic is to deliver compassionate care and exceptional
|
|
medical services, including general consultations, specialized
|
|
treatments, and preventive care.
|
|
</p>
|
|
</div>
|
|
|
|
<q-card flat class="map-card">
|
|
<iframe
|
|
class="map-frame"
|
|
:src="mapEmbedUrl"
|
|
title="Clinic location map"
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
/>
|
|
</q-card>
|
|
</div>
|
|
</section>
|
|
|
|
<HomeFooter />
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
|
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
|
import phoneIcon from 'src/assets/contact/icon-phone.svg';
|
|
import locationIcon from 'src/assets/contact/icon-location.svg';
|
|
import mailIcon from 'src/assets/contact/icon-mail.svg';
|
|
import facebookIconUrl from 'src/assets/icons/facebook.svg';
|
|
import instagramIconUrl from 'src/assets/icons/instagram.svg';
|
|
import whatsappIconUrl from 'src/assets/icons/whatsapp.svg';
|
|
|
|
const form = reactive({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
message: '',
|
|
});
|
|
|
|
const contactItems = [
|
|
{ title: 'Contact details', text: '+01-787-582-568', icon: phoneIcon },
|
|
{ title: 'Address', text: '403, Port Washington Road, Canada', icon: locationIcon },
|
|
{ title: 'Email us', text: 'info@domain.com', icon: mailIcon },
|
|
];
|
|
|
|
const socialLinks = [
|
|
{ icon: facebookIconUrl, label: 'Facebook' },
|
|
{ icon: instagramIconUrl, label: 'Instagram' },
|
|
{ icon: whatsappIconUrl, label: 'WhatsApp' },
|
|
];
|
|
|
|
const mapEmbedUrl =
|
|
'https://maps.google.com/maps?q=403%20Port%20Washington%20Road%2C%20Canada&z=14&output=embed';
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.contact-page
|
|
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 34%, #eef5ff 100%)
|
|
color: #163047
|
|
|
|
.page-shell
|
|
width: min(1180px, calc(100% - 32px))
|
|
margin: 0 auto
|
|
|
|
.contact-section,
|
|
.reach-section
|
|
padding: 64px 0
|
|
|
|
.contact-layout
|
|
display: grid
|
|
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr)
|
|
gap: 24px
|
|
|
|
.contact-info-panel,
|
|
.contact-form-card,
|
|
.map-card
|
|
border-radius: 32px
|
|
background: rgba(255, 255, 255, 0.9)
|
|
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
|
|
|
.contact-info-panel
|
|
padding: 34px
|
|
background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)
|
|
|
|
.section-kicker,
|
|
.form-kicker
|
|
margin-bottom: 10px
|
|
color: #0f766e
|
|
font-size: 0.85rem
|
|
font-weight: 800
|
|
text-transform: uppercase
|
|
letter-spacing: 0.08em
|
|
|
|
.section-title,
|
|
.form-title
|
|
margin: 0 0 14px
|
|
font-size: clamp(2rem, 4vw, 3.2rem)
|
|
line-height: 1.05
|
|
font-weight: 800
|
|
letter-spacing: -0.03em
|
|
|
|
.section-text,
|
|
.form-text,
|
|
.map-text
|
|
margin: 0
|
|
color: #607284
|
|
line-height: 1.7
|
|
font-size: 1.02rem
|
|
|
|
.contact-info-list
|
|
display: grid
|
|
gap: 14px
|
|
margin-top: 28px
|
|
|
|
.contact-info-card
|
|
display: flex
|
|
align-items: center
|
|
gap: 16px
|
|
padding: 18px 20px
|
|
border-radius: 22px
|
|
background: rgba(255, 255, 255, 0.72)
|
|
|
|
.contact-icon
|
|
width: 54px
|
|
height: 54px
|
|
flex: 0 0 auto
|
|
|
|
.contact-card-title
|
|
font-weight: 800
|
|
margin-bottom: 4px
|
|
|
|
.contact-card-text
|
|
color: #5f7386
|
|
|
|
.social-row
|
|
display: flex
|
|
align-items: center
|
|
flex-wrap: wrap
|
|
gap: 12px
|
|
margin-top: 24px
|
|
|
|
.social-label
|
|
font-weight: 700
|
|
|
|
.social-links
|
|
display: flex
|
|
gap: 6px
|
|
|
|
.social-btn
|
|
color: #163047
|
|
|
|
.social-icon
|
|
display: block
|
|
width: 22px
|
|
height: 22px
|
|
|
|
.contact-form-card
|
|
padding: 34px
|
|
|
|
.contact-form
|
|
display: grid
|
|
gap: 18px
|
|
margin-top: 24px
|
|
|
|
.form-grid
|
|
display: grid
|
|
grid-template-columns: repeat(2, minmax(0, 1fr))
|
|
gap: 18px
|
|
|
|
.submit-btn
|
|
justify-self: start
|
|
min-width: 180px
|
|
|
|
.reach-heading
|
|
max-width: 760px
|
|
margin: 0 auto 30px
|
|
|
|
.center
|
|
text-align: center
|
|
|
|
.map-card
|
|
overflow: hidden
|
|
padding: 18px
|
|
|
|
.map-frame
|
|
display: block
|
|
width: 100%
|
|
height: 550px
|
|
border: 0
|
|
border-radius: 24px
|
|
filter: grayscale(1)
|
|
transition: filter 0.2s ease
|
|
|
|
.map-frame:hover
|
|
filter: grayscale(0)
|
|
|
|
@media (max-width: 1023px)
|
|
.contact-layout
|
|
grid-template-columns: 1fr
|
|
|
|
@media (max-width: 599px)
|
|
.page-shell
|
|
width: min(100% - 24px, 1180px)
|
|
|
|
.contact-section,
|
|
.reach-section
|
|
padding: 40px 0
|
|
|
|
.contact-info-panel,
|
|
.contact-form-card
|
|
padding: 24px
|
|
|
|
.form-grid
|
|
grid-template-columns: 1fr
|
|
|
|
.section-title,
|
|
.form-title
|
|
font-size: 2.4rem
|
|
</style>
|