diff --git a/public/img/team/Alastair.png b/public/img/team/Alastair.png
new file mode 100644
index 0000000000000000000000000000000000000000..90349f9f38bb75a30ba46dbb0179cbc8266171bb
Binary files /dev/null and b/public/img/team/Alastair.png differ
diff --git a/public/img/team/Chris-2.png b/public/img/team/Chris-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..07a48782536da1a192eaa07211f08e588c59e894
Binary files /dev/null and b/public/img/team/Chris-2.png differ
diff --git a/public/img/team/Chris.png b/public/img/team/Chris.png
new file mode 100644
index 0000000000000000000000000000000000000000..d05e2ac6ac15f248f8876c86c6ae84ce47ca6bcd
Binary files /dev/null and b/public/img/team/Chris.png differ
diff --git a/public/img/team/Team.png b/public/img/team/Team.png
new file mode 100644
index 0000000000000000000000000000000000000000..845454a103ee9225567eef22d0b490390e64da12
Binary files /dev/null and b/public/img/team/Team.png differ
diff --git a/src/components/TeamMember.vue b/src/components/TeamMember.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39b97741f0aea6dc07412a01196d61c5b6424aa5
--- /dev/null
+++ b/src/components/TeamMember.vue
@@ -0,0 +1,30 @@
+<template>
+ <article class="w-[342px]">
+ <img
+ class="w-[193px] h-[193px] mx-auto"
+ :src="`/img/team/${data.image}`"
+ alt=""
+ />
+ <p class="text-center mt-6 text-dark font-bold text-lg">
+ {{ data.name }}
+ </p>
+ <p class="text-blue-text text-center text-sm leading-6 font-medium">
+ {{ data.role ? data.role : "\u200b" }}
+ </p>
+ <p class="mt-6 text-dark text-sm leading-[1.813rem] text-center">
+ {{ data.description }}
+ </p>
+ </article>
+</template>
+
+<script>
+export default {
+ name: "TeamMember",
+ props: {
+ data: {
+ type: Object,
+ required: true,
+ },
+ },
+};
+</script>
diff --git a/src/components/mixins/TeamMixin.vue b/src/components/mixins/TeamMixin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67048d7991149dac247ba1903338ce75ba62c99c
--- /dev/null
+++ b/src/components/mixins/TeamMixin.vue
@@ -0,0 +1,38 @@
+<script>
+export default {
+ data: function () {
+ return {
+ team: [
+ {
+ image: "Alastair.png",
+ role: "Founder, Landing Pad",
+ name: "Alastair Cunningham",
+ description:
+ "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassi and hidden in the middle of text. All the Lorem Ipsum be sure there goingyou need to be.",
+ },
+ {
+ image: "Chris.png",
+ role: "Founder, Landing Pad",
+ name: "Chris Kraus",
+ description:
+ "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassi and hidden in the middle of text. All the Lorem Ipsum be sure there goingyou need to be.",
+ },
+ {
+ image: "Chris-2.png",
+ role: "COO",
+ name: "Chris Kraus",
+ description:
+ "If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassi and hidden in the middle of text. All the Lorem Ipsum be sure there goingyou need to be.",
+ },
+ {
+ image: "Team.png",
+ role: "",
+ name: "Our team",
+ description:
+ "We can help you reimagine your business through a digital lens. Our software engineering heritage combined with our strategic business and innovation consulting, design thinking, and physical-digital.",
+ },
+ ],
+ };
+ },
+};
+</script>
diff --git a/src/components/svg/FeatureLeftSvg.vue b/src/components/svg/FeatureLeftSvg.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9daf09b4e376f537f796617c9ea32d4fe457818c
--- /dev/null
+++ b/src/components/svg/FeatureLeftSvg.vue
@@ -0,0 +1,11 @@
+<template>
+<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 29.4857C54 23.4889 53.5 12.9946 53.5 3M40.5 38.4808L14.5 17.4922M36 53.4727C34.4 53.4727 13.3333 53.4727 3 53.4727" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "FeatureLeftSvg",
+};
+</script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 256a3b592f6b2044760d09810509f73d546d1075..7b5534a3c33d434fbac5a72f25d8665c0147fdc7 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -101,14 +101,14 @@
>
<h1
- class="mt-14 sm:mt-[106px] text-[3.375rem] leading-[4.5rem] text-center relative"
+ class="mt-9 sm:mt-[87px] text-[3.375rem] leading-[4.5rem] text-center relative"
>
Our Story
<FeatureSvg
class="inline absolute -top-3 -translate-x-[3px]"
></FeatureSvg>
</h1>
- <p class="mt-10 mb-14 sm:mb-[102px] text-lg leading-[1.625rem] text-center mx-auto w-[66%]">
+ <p class="mt-10 mb-9 sm:mb-[89px] text-lg leading-[1.625rem] text-center mx-auto w-[66%]">
We can help you reimagine your business through a digital lens. Our
software engineering heritage combined with our strategic business and
innovation consulting, design thinking, and physical-digital
@@ -125,10 +125,29 @@
</section>
- <section>
- <h1>
+ <section class="bg-blue-200 rounded-2xl w-[92.5%] mx-auto mt-[100px] relative overflow-hidden">
+ <div
+ class="absolute bg-blue-400 blur-[170px] rounded-[190px] w-[190px] h-[190px] z-0 -left-[72px] -top-[47px]"
+ ></div>
+ <div class="relative z-10">
+
+ <h1 class="relative text-[54px] leading-[4.5rem] w-min mx-auto mt-[71px]">
+ <FeatureLeftSvg class="inline absolute -top-10 -translate-x-[93%] text-blue-text"></FeatureLeftSvg>
Team
</h1>
+
+ <h2 class=" text-center text-[2rem] leading-[2.625rem] max-w-[385px] mx-auto">
+ A team of <span class="text-blue-text">professionals</span> is <span class="text-blue-text">working</span> on your problem
+ </h2>
+
+ <div class="mt-16 mx-auto mb-[53px] w-max grid grid-cols-1 lg:grid-cols-2 gap-x-[90px] gap-y-16">
+ <TeamMember v-for="(member, index) in team" :key="index" :data="member"></TeamMember>
+ </div>
+
+ </div>
+ <div
+ class="absolute bg-blue-400 blur-[170px] rounded-[190px] w-[190px] h-[190px] z-0 -right-[133px] -bottom-[136px]"
+ ></div>
</section>
<footer class="mt-10"></footer>
</div>
@@ -139,12 +158,16 @@ import HeaderComponent from "../components/HeaderComponent.vue";
import ReviewComponent from "../components/ReviewComponent.vue";
import ServiceCard from "../components/ServiceCard.vue";
import ServiceQuestionCard from "../components/ServiceQuestionCard.vue";
+import TeamMember from "../components/TeamMember.vue";
-import RightArrow from "../components/svg/RightArrow.vue";
-import LeftArrow from "../components/svg/LeftArrow.vue";
import ReviewsMixin from "../components/mixins/ReviewsMixin.vue";
import ServicesMixin from "../components/mixins/ServicesMixin.vue";
+import TeamMixin from "../components/mixins/TeamMixin.vue";
+
+import RightArrow from "../components/svg/RightArrow.vue";
+import LeftArrow from "../components/svg/LeftArrow.vue";
import FeatureSvg from "../components/svg/FeatureSvg.vue";
+import FeatureLeftSvg from "../components/svg/FeatureLeftSvg.vue";
export default {
name: "HomePage",
@@ -326,8 +349,10 @@ export default {
FeatureSvg,
ServiceCard,
ServiceQuestionCard,
+ FeatureLeftSvg,
+ TeamMember,
},
- mixins: [ReviewsMixin, ServicesMixin],
+ mixins: [ReviewsMixin, ServicesMixin, TeamMixin],
};
</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index d1cc4085ed9dc7bdd11801cf78fe4312793ff119..c7618dc57c14d98a41031759a1e197911304274b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,38 +1,40 @@
/** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./public/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
boxShadow: {
- '4x10': '0 3.7px 10.2px rgba(0, 0, 0, 0.10)',
- '3x28': '0 3px 28px rgba(203, 203, 203, 0.25)'
+ "4x10": "0 3.7px 10.2px rgba(0, 0, 0, 0.10)",
+ "3x28": "0 3px 28px rgba(203, 203, 203, 0.25)",
},
fontFamily: {
- 'sans': ['Futura', ...defaultTheme.fontFamily.sans],
- 'gilroy': ['Gilroy-Regular', ...defaultTheme.fontFamily.sans],
+ sans: ["Futura", ...defaultTheme.fontFamily.sans],
+ gilroy: ["Gilroy-Regular", ...defaultTheme.fontFamily.sans],
},
},
colors: {
transparent: "transparent",
current: "currentColor",
white: "#ffffff",
- blue: {
+ blue: {
+ 200: "#DBEBFF",
+ 400: "#3060C9",
500: "#3b82f6",
600: "#2563eb",
DEFAULT: "#2967F0",
- 'text': "#0F38B4",
+ text: "#0F38B4",
700: "#1d4ed8",
- 'line': "#4950ED",
- 'question': "rgba(41, 103, 240, 0.8)"
+ line: "#4950ED",
+ question: "rgba(41, 103, 240, 0.8)",
},
- gray:{
- 'bg': '#F2F6FF',
+ gray: {
+ bg: "#F2F6FF",
300: "rgb(0 0 0 / 35%)",
DEFAULT: "#757575",
},
- dark:{
- 400:"rgba(0, 0, 0, 0.4)",
+ dark: {
+ 400: "rgba(0, 0, 0, 0.4)",
DEFAULT: "#0F0F10",
},
},