479 lines
12 KiB
Vue
479 lines
12 KiB
Vue
<template>
|
|
<q-page class="about-page">
|
|
<HomeHeader />
|
|
|
|
<section class="hero-section">
|
|
<div class="page-shell">
|
|
<div class="row items-center q-col-gutter-xl">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="hero-copy">
|
|
<div class="eyebrow">About Omnimed</div>
|
|
<h1 class="hero-title">Healthcare built around clarity, empathy, and outcomes</h1>
|
|
<p class="hero-text">
|
|
We combine medical excellence with a human approach, designing every
|
|
visit around trust, prevention, and long-term wellbeing.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
no-caps
|
|
color="primary"
|
|
label="Book a consultation"
|
|
/>
|
|
<q-btn outline rounded no-caps color="primary" label="Meet our team" />
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<q-card
|
|
v-for="stat in stats"
|
|
:key="stat.label"
|
|
flat
|
|
class="stat-card"
|
|
>
|
|
<div class="stat-value">{{ stat.value }}</div>
|
|
<div class="stat-label">{{ stat.label }}</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="hero-visual">
|
|
<div class="hero-image-main">
|
|
<img :src="aboutImagePrimary" alt="Medical consultation" />
|
|
</div>
|
|
<div class="hero-image-secondary">
|
|
<img :src="aboutImageSecondary" alt="Clinical care team" />
|
|
</div>
|
|
<q-card flat class="floating-summary">
|
|
<div class="floating-summary-value">15+ years</div>
|
|
<div class="floating-summary-label">of integrated patient care</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="values-section">
|
|
<div class="page-shell">
|
|
<div class="section-heading">
|
|
<div class="section-kicker">What drives us</div>
|
|
<h2 class="section-title">A modern clinic with standards patients can feel</h2>
|
|
<p class="section-text">
|
|
Our model is simple: faster access, clearer communication, coordinated
|
|
care, and decisions guided by evidence.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-lg">
|
|
<div
|
|
v-for="value in values"
|
|
:key="value.title"
|
|
class="col-12 col-md-4"
|
|
>
|
|
<q-card flat class="value-card">
|
|
<img class="value-icon" :src="value.icon" :alt="value.title" />
|
|
<h3 class="value-title">{{ value.title }}</h3>
|
|
<p class="value-text">{{ value.text }}</p>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="journey-section">
|
|
<div class="page-shell">
|
|
<div class="section-heading align-center">
|
|
<div class="section-kicker">How we work</div>
|
|
<h2 class="section-title">A care journey designed to reduce friction</h2>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-lg">
|
|
<div
|
|
v-for="step in steps"
|
|
:key="step.title"
|
|
class="col-12 col-sm-6 col-lg-3"
|
|
>
|
|
<q-card flat class="step-card">
|
|
<img class="step-image" :src="step.image" :alt="step.title" />
|
|
<div class="step-number">{{ step.number }}</div>
|
|
<h3 class="step-title">{{ step.title }}</h3>
|
|
<p class="step-text">{{ step.text }}</p>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="team-section">
|
|
<div class="page-shell">
|
|
<div class="section-heading">
|
|
<div class="section-kicker">Our people</div>
|
|
<h2 class="section-title">Specialists who bring confidence to every appointment</h2>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-lg">
|
|
<div
|
|
v-for="member in team"
|
|
:key="member.name"
|
|
class="col-12 col-sm-6 col-lg-3"
|
|
>
|
|
<q-card flat class="team-card">
|
|
<img class="team-image" :src="member.image" :alt="member.name" />
|
|
<div class="team-content">
|
|
<div class="team-name">{{ member.name }}</div>
|
|
<div class="team-role">{{ member.role }}</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<HomeFooter />
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import HomeFooter from 'src/components/home/HomeFooter.vue';
|
|
import HomeHeader from 'src/components/home/HomeHeader.vue';
|
|
import aboutImagePrimary from 'src/assets/about/about-img-1.jpg';
|
|
import aboutImageSecondary from 'src/assets/about/about-img-2.jpg';
|
|
import valueIcon1 from 'src/assets/about/icon-about-info-1.svg';
|
|
import valueIcon2 from 'src/assets/about/icon-about-info-2.svg';
|
|
import valueIcon3 from 'src/assets/about/icon-about-info-3.svg';
|
|
import stepImage1 from 'src/assets/about/work-step-img-1.jpg';
|
|
import stepImage2 from 'src/assets/about/work-step-img-2.jpg';
|
|
import stepImage3 from 'src/assets/about/work-step-img-3.jpg';
|
|
import stepImage4 from 'src/assets/about/work-step-img-4.jpg';
|
|
import team1 from 'src/assets/about/team-1.jpg';
|
|
import team2 from 'src/assets/about/team-2.jpg';
|
|
import team3 from 'src/assets/about/team-3.jpg';
|
|
import team4 from 'src/assets/about/team-4.jpg';
|
|
|
|
const stats = [
|
|
{ value: '25k+', label: 'patients supported every year' },
|
|
{ value: '98%', label: 'patient satisfaction score' },
|
|
{ value: '40+', label: 'specialists across key disciplines' },
|
|
];
|
|
|
|
const values = [
|
|
{
|
|
icon: valueIcon1,
|
|
title: 'Clear medical guidance',
|
|
text: 'We explain options, next steps, and tradeoffs in language patients can act on.',
|
|
},
|
|
{
|
|
icon: valueIcon2,
|
|
title: 'Coordinated treatment',
|
|
text: 'Primary care, specialist input, and follow-up planning stay connected end to end.',
|
|
},
|
|
{
|
|
icon: valueIcon3,
|
|
title: 'Prevention first',
|
|
text: 'We focus on early detection and continuity, not only on treating symptoms.',
|
|
},
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
number: '01',
|
|
title: 'Book and prepare',
|
|
text: 'Schedule quickly and arrive with the right context already shared with the care team.',
|
|
image: stepImage1,
|
|
},
|
|
{
|
|
number: '02',
|
|
title: 'Assess and listen',
|
|
text: 'Every consultation starts with careful listening and a structured clinical review.',
|
|
image: stepImage2,
|
|
},
|
|
{
|
|
number: '03',
|
|
title: 'Plan the treatment',
|
|
text: 'We define a practical treatment path with timelines, referrals, and measurable goals.',
|
|
image: stepImage3,
|
|
},
|
|
{
|
|
number: '04',
|
|
title: 'Follow through',
|
|
text: 'Ongoing monitoring helps patients stay informed, supported, and on track.',
|
|
image: stepImage4,
|
|
},
|
|
];
|
|
|
|
const team = [
|
|
{ name: 'Dr. Amelia Carter', role: 'Internal Medicine', image: team1 },
|
|
{ name: 'Dr. Julian Meyer', role: 'Cardiology', image: team2 },
|
|
{ name: 'Dr. Sofia Bennett', role: 'Pediatrics', image: team3 },
|
|
{ name: 'Dr. Ethan Rossi', role: 'Preventive Care', image: team4 },
|
|
];
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.about-page
|
|
background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 36%, #eef5ff 100%)
|
|
color: #163047
|
|
|
|
.page-shell
|
|
width: min(1180px, calc(100% - 32px))
|
|
margin: 0 auto
|
|
|
|
.hero-section
|
|
padding: 72px 0 56px
|
|
|
|
.hero-copy
|
|
padding-right: 20px
|
|
|
|
.eyebrow
|
|
display: inline-flex
|
|
align-items: center
|
|
padding: 10px 16px
|
|
margin-bottom: 22px
|
|
border-radius: 999px
|
|
background: rgba(13, 148, 136, 0.12)
|
|
color: #0f766e
|
|
font-size: 0.9rem
|
|
font-weight: 800
|
|
|
|
.hero-title
|
|
margin: 0 0 18px
|
|
font-size: clamp(2.8rem, 5vw, 4.6rem)
|
|
line-height: 1
|
|
font-weight: 800
|
|
letter-spacing: -0.04em
|
|
|
|
.hero-text
|
|
max-width: 560px
|
|
margin: 0 0 26px
|
|
font-size: 1.08rem
|
|
line-height: 1.7
|
|
color: #55687c
|
|
|
|
.hero-actions
|
|
display: flex
|
|
flex-wrap: wrap
|
|
gap: 14px
|
|
margin-bottom: 30px
|
|
|
|
.stats-row
|
|
display: grid
|
|
grid-template-columns: repeat(3, minmax(0, 1fr))
|
|
gap: 16px
|
|
|
|
.stat-card
|
|
padding: 20px
|
|
border-radius: 24px
|
|
background: rgba(255, 255, 255, 0.88)
|
|
box-shadow: 0 24px 60px rgba(22, 48, 71, 0.08)
|
|
|
|
.stat-value
|
|
font-size: 1.8rem
|
|
font-weight: 800
|
|
|
|
.stat-label
|
|
margin-top: 8px
|
|
color: #647789
|
|
line-height: 1.5
|
|
|
|
.hero-visual
|
|
position: relative
|
|
min-height: 620px
|
|
|
|
.hero-visual::before
|
|
content: ''
|
|
position: absolute
|
|
inset: 40px 18px 32px 56px
|
|
border-radius: 40px
|
|
background: linear-gradient(145deg, #dff7ee 0%, #dbeafe 100%)
|
|
|
|
.hero-image-main,
|
|
.hero-image-secondary
|
|
position: absolute
|
|
overflow: hidden
|
|
border-radius: 34px
|
|
box-shadow: 0 28px 70px rgba(22, 48, 71, 0.16)
|
|
|
|
.hero-image-main
|
|
top: 0
|
|
right: 0
|
|
width: min(82%, 460px)
|
|
|
|
.hero-image-secondary
|
|
left: 0
|
|
bottom: 0
|
|
width: min(54%, 300px)
|
|
border: 8px solid rgba(255, 255, 255, 0.95)
|
|
|
|
.hero-image-main img,
|
|
.hero-image-secondary img
|
|
display: block
|
|
width: 100%
|
|
height: auto
|
|
|
|
.floating-summary
|
|
position: absolute
|
|
left: 28px
|
|
top: 48px
|
|
padding: 18px 20px
|
|
border-radius: 22px
|
|
background: rgba(255, 255, 255, 0.94)
|
|
box-shadow: 0 18px 50px rgba(22, 48, 71, 0.14)
|
|
|
|
.floating-summary-value
|
|
font-size: 1.6rem
|
|
font-weight: 800
|
|
|
|
.floating-summary-label
|
|
margin-top: 6px
|
|
color: #647789
|
|
|
|
.values-section,
|
|
.journey-section,
|
|
.team-section
|
|
padding: 56px 0
|
|
|
|
.journey-section
|
|
background: rgba(255, 255, 255, 0.62)
|
|
|
|
.section-heading
|
|
max-width: 700px
|
|
margin-bottom: 30px
|
|
|
|
.align-center
|
|
margin-left: auto
|
|
margin-right: auto
|
|
text-align: center
|
|
|
|
.section-kicker
|
|
margin-bottom: 10px
|
|
color: #0f766e
|
|
font-size: 0.85rem
|
|
font-weight: 800
|
|
text-transform: uppercase
|
|
letter-spacing: 0.08em
|
|
|
|
.section-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
|
|
margin: 0
|
|
color: #607284
|
|
line-height: 1.7
|
|
font-size: 1.02rem
|
|
|
|
.value-card,
|
|
.step-card,
|
|
.team-card
|
|
height: 100%
|
|
border-radius: 28px
|
|
background: rgba(255, 255, 255, 0.88)
|
|
box-shadow: 0 24px 70px rgba(22, 48, 71, 0.08)
|
|
|
|
.value-card
|
|
padding: 28px
|
|
|
|
.value-icon
|
|
width: 58px
|
|
height: 58px
|
|
margin-bottom: 18px
|
|
|
|
.value-title,
|
|
.step-title
|
|
margin: 0 0 12px
|
|
font-size: 1.3rem
|
|
font-weight: 800
|
|
|
|
.value-text,
|
|
.step-text
|
|
margin: 0
|
|
color: #647789
|
|
line-height: 1.65
|
|
|
|
.step-card
|
|
overflow: hidden
|
|
|
|
.step-image,
|
|
.team-image
|
|
display: block
|
|
width: 100%
|
|
height: 220px
|
|
object-fit: cover
|
|
|
|
.step-number
|
|
padding: 22px 24px 0
|
|
color: #0f766e
|
|
font-size: 0.9rem
|
|
font-weight: 800
|
|
letter-spacing: 0.08em
|
|
|
|
.step-title,
|
|
.step-text
|
|
padding-left: 24px
|
|
padding-right: 24px
|
|
|
|
.step-text
|
|
padding-bottom: 24px
|
|
|
|
.team-content
|
|
padding: 22px
|
|
|
|
.team-name
|
|
font-size: 1.16rem
|
|
font-weight: 800
|
|
|
|
.team-role
|
|
margin-top: 6px
|
|
color: #647789
|
|
|
|
@media (max-width: 1023px)
|
|
.hero-copy
|
|
padding-right: 0
|
|
|
|
.stats-row
|
|
grid-template-columns: 1fr
|
|
|
|
.hero-visual
|
|
min-height: 540px
|
|
margin-top: 16px
|
|
|
|
@media (max-width: 599px)
|
|
.page-shell
|
|
width: min(100% - 24px, 1180px)
|
|
|
|
.hero-section,
|
|
.values-section,
|
|
.journey-section,
|
|
.team-section
|
|
padding: 40px 0
|
|
|
|
.hero-title
|
|
font-size: 2.5rem
|
|
|
|
.hero-visual
|
|
min-height: 420px
|
|
|
|
.hero-visual::before
|
|
inset: 28px 0 20px 18px
|
|
border-radius: 30px
|
|
|
|
.hero-image-main
|
|
width: 84%
|
|
|
|
.hero-image-secondary
|
|
width: 46%
|
|
border-width: 6px
|
|
|
|
.floating-summary
|
|
left: 12px
|
|
top: 22px
|
|
padding: 14px 16px
|
|
</style>
|