Initial commit

resources/js/views/front-pages/landing-page/our-team.vue

@@ -0,0 +1,150 @@
+<script setup>
+import teamPerson1 from '@images/front-pages/landing-page/team-member-1.png'
+import teamPerson2 from '@images/front-pages/landing-page/team-member-2.png'
+import teamPerson3 from '@images/front-pages/landing-page/team-member-3.png'
+import teamPerson4 from '@images/front-pages/landing-page/team-member-4.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.16)',
+    isHover: false,
+  },
+  {
+    name: 'Paul Miles',
+    position: 'UI Designer',
+    image: teamPerson2,
+    backgroundColor: 'rgba(22, 177, 255, 0.16)',
+    borderColor: 'rgba(22, 177, 255,0.16)',
+    isHover: false,
+  },
+  {
+    name: 'Nannie Ford',
+    position: 'Development Lead',
+    image: teamPerson3,
+    backgroundColor: 'rgba(255, 76, 81, 0.16)',
+    borderColor: 'rgba(255, 76, 81,0.16)',
+    isHover: false,
+  },
+  {
+    name: 'Chris Watkins',
+    position: 'Marketing Manager',
+    image: teamPerson4,
+    backgroundColor: 'rgba(86, 202, 0, 0.16)',
+    borderColor: 'rgba(86, 202, 0,0.16)',
+    isHover: false,
+  },
+])
+</script>
+
+<template>
+  <VContainer id="team">
+    <div class="our-team pa-">
+      <div class="headers d-flex justify-center flex-column align-center">
+        <VChip
+          label
+          color="primary"
+          class="mb-4"
+          size="small"
+        >
+          Our Great Team
+        </VChip>
+
+        <h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
+          <div class="position-relative me-2">
+            <div class="section-title">
+              Supported
+            </div>
+          </div>
+          by Real People
+        </h4>
+
+        <p class="text-center text-body-1 mb-0">
+          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
+            min-width="267"
+            class="position-relative overflow-visible team-card mb-lg-0 mb-12"
+          >
+            <div :style="{ maxHeight: '185px', minHeight: '185px', borderRadius: '90px 20px 0 0', backgroundColor: `${data.backgroundColor}`, border: `1px solid ${data.borderColor}`, borderBottom: 'none' }">
+              <VImg
+                :src="data.image"
+                height="240"
+                class="team-image"
+              />
+            </div>
+            <VCardText
+              class="text-center pa-4"
+              :style="{ border: `1px solid ${data.borderColor}`, borderBlockStart: 'none', borderRadius: '0 0 6px 6px', boxSizing: 'border-box' }"
+            >
+              <h5 class="text-h5">
+                {{ data.name }}
+              </h5>
+              <p class="text-body-1 text-disabled mb-0">
+                {{ data.position }}
+              </p>
+            </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: 7.4375rem;
+}
+
+.our-team {
+  margin-block: 5.25rem;
+}
+
+@media (max-width: 1264px) {
+  .our-team {
+    margin-block-end: 1rem;
+  }
+}
+
+.team-card {
+  border-radius: 90px 20px 6px 6px;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 36px;
+}
+
+.section-title::after {
+  position: absolute;
+  background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
+  background-size: contain;
+  block-size: 100%;
+  content: "";
+  font-weight: 800;
+  inline-size: 120%;
+  inset-block-end: 12%;
+  inset-inline-start: -12%;
+}
+</style>