153 lines
4.3 KiB
Vue
153 lines
4.3 KiB
Vue
<script setup>
|
|
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
|
import teamPerson1 from '@images/pages/teamPerson1.png'
|
|
import teamPerson2 from '@images/pages/teamPerson2.png'
|
|
import teamPerson3 from '@images/pages/teamPerson3.png'
|
|
import teamPerson4 from '@images/pages/teamPerson4.png'
|
|
|
|
const teamData = ref([
|
|
{
|
|
name: 'Sophie Gilbert',
|
|
position: 'Project Manager',
|
|
image: teamPerson1,
|
|
backgroundColor: 'rgba(144, 85, 253, 0.16)',
|
|
borderColor: 'rgba(144, 85, 253,0.38)',
|
|
isHover: false,
|
|
},
|
|
{
|
|
name: 'Nannie Ford',
|
|
position: 'Development Lead',
|
|
image: teamPerson2,
|
|
backgroundColor: 'rgba(255, 76, 81, 0.16)',
|
|
borderColor: 'rgba(255, 76, 81,0.38)',
|
|
isHover: false,
|
|
},
|
|
{
|
|
name: 'Chris Watkins',
|
|
position: 'Marketing Manager',
|
|
image: teamPerson3,
|
|
backgroundColor: 'rgba(86, 202, 0, 0.16)',
|
|
borderColor: 'rgba(86, 202, 0,0.38)',
|
|
isHover: false,
|
|
},
|
|
{
|
|
name: 'Paul Miles',
|
|
position: 'UI Designer',
|
|
image: teamPerson4,
|
|
backgroundColor: 'rgba(22, 177, 255, 0.16)',
|
|
borderColor: 'rgba(22, 177, 255,0.38)',
|
|
isHover: false,
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<VContainer id="team">
|
|
<div class="our-team">
|
|
<div class="headers d-flex justify-center flex-column align-center">
|
|
<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;"
|
|
>
|
|
OUR GREAT TEAM
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<span
|
|
class="text-h4 d-inline-block font-weight-bold"
|
|
style="line-height: 2rem;"
|
|
>
|
|
Supported
|
|
</span> <span class="text-h5 d-inline-block">by Real People</span>
|
|
</div>
|
|
|
|
<p
|
|
class="text-body-1 font-weight-medium text-center"
|
|
style="letter-spacing: 0.15px !important;"
|
|
>
|
|
Who is behind these great-looking interfaces?
|
|
</p>
|
|
</div>
|
|
|
|
<VRow>
|
|
<VCol
|
|
v-for="(data, index) in teamData"
|
|
:key="index"
|
|
cols="12"
|
|
lg="3"
|
|
sm="6"
|
|
>
|
|
<VCard
|
|
flat
|
|
variant="outlined"
|
|
min-width="267"
|
|
class="position-relative overflow-visible mt-16"
|
|
:style="data.isHover ? { border: `1px solid ${data.borderColor}` } : {}"
|
|
@mouseenter="data.isHover = true"
|
|
@mouseleave="data.isHover = false"
|
|
>
|
|
<VImg
|
|
:src="data.image"
|
|
height="240px"
|
|
class="team-image"
|
|
/>
|
|
<div :style="{ maxHeight: '185px', minHeight: '185px', backgroundColor: data.backgroundColor }" />
|
|
<VCardText class="text-center">
|
|
<div class="mb-3">
|
|
<h5 class="text-h5">
|
|
{{ data.name }}
|
|
</h5>
|
|
<div class="text-body-1 text-medium-emphasis">
|
|
{{ data.position }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-x-2 align-center justify-center">
|
|
<template
|
|
v-for="{ icon, color } in [
|
|
{ icon: 'ri-facebook-circle-line', color: 'rgba(59, 89, 152, 1)', link: 'https://www.facebook.com/' },
|
|
{ icon: 'ri-twitter-line', color: 'rgba(0, 172, 238, 1)', link: 'https://twitter.com/' },
|
|
{ icon: 'ri-linkedin-box-line', color: 'rgba(0, 119, 181, 1)', link: 'https://linkedin.com' },
|
|
]"
|
|
:key="color"
|
|
>
|
|
<VIcon
|
|
:icon="icon"
|
|
size="22"
|
|
:color="data.isHover ? color : ''"
|
|
class="cursor-pointer"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</VContainer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.team-image {
|
|
position: absolute;
|
|
inset-block-start: -3.4rem;
|
|
inset-inline: 0;
|
|
}
|
|
|
|
.headers {
|
|
margin-block-end: 1.25rem;
|
|
}
|
|
|
|
.our-team {
|
|
margin-block: 5.25rem;
|
|
}
|
|
</style>
|