diff --git a/public/img/home-bg-2.png b/public/img/home-bg-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b76706124ca3303ed36e31f1e9ee498d0eaa87e
Binary files /dev/null and b/public/img/home-bg-2.png differ
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 7d5d297e4fefc908d6a35519f49e9d62e41f51f1..256a3b592f6b2044760d09810509f73d546d1075 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,10 +1,12 @@
<template>
<div class="overflow-hidden">
<section
- class="relative z-10 text-white h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
+ class="relative z-10 text-white h-[700px] sm:h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
>
<HeaderComponent current-page="home"></HeaderComponent>
- <h2 class="text-[54px] font-bold leading-[4.5rem] max-w-lg ml-24 mt-[187px]">
+ <h2
+ class="text-[54px] font-bold leading-[4.5rem] max-w-lg ml-24 mt-20 sm:mt-[187px]"
+ >
Moving to Portugal?
</h2>
<p class="text-2xl ml-24 mt-[10px] max-w-[434px] font-gilroy">
@@ -19,60 +21,115 @@
</section>
<!-- Reviews -->
- <section
- class="mt-16 relative"
- >
- <div class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -top-[134px] -left-[87px]"></div>
- <div class="z-10 w-[85.4%] mx-auto flex justify-between items-center h-36 relative">
- <button @click="reviewLeft" class="mr-3">
- <LeftArrow class="text-blue"></LeftArrow>
- </button>
+ <section class="mt-16 relative">
+ <div
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -top-[134px] -left-[87px]"
+ ></div>
<div
- class="flex gap-[38px] items-center relative"
- :class="{ slideLeft: slideLeft, slideRight: slideRight }"
+ class="z-10 w-[85.4%] mx-auto flex justify-between items-center h-36 relative"
>
- <ReviewComponent
- v-for="(review, index) in reviews"
- :key="index"
- :data="review.data"
- :class="[
- { hidden: review.hidden, '-left-[373px]': review.isLeft },
- review.absolute ? 'absolute' : 'relative',
- review.isRight ? '-right-[373px]' : '',
- review.fade ? 'fade' : 'unfade',
- ]"
- ></ReviewComponent>
+ <button @click="reviewLeft" class="mr-3">
+ <LeftArrow class="text-blue"></LeftArrow>
+ </button>
+ <div
+ class="flex gap-[38px] items-center relative"
+ :class="{ slideLeft: slideLeft, slideRight: slideRight }"
+ >
+ <ReviewComponent
+ v-for="(review, index) in reviews"
+ :key="index"
+ :data="review.data"
+ :class="[
+ { hidden: review.hidden, '-left-[373px]': review.isLeft },
+ review.absolute ? 'absolute' : 'relative',
+ review.isRight ? '-right-[373px]' : '',
+ review.fade ? 'fade' : 'unfade',
+ ]"
+ ></ReviewComponent>
+ </div>
+ <button @click="reviewRight" class="ml-3">
+ <RightArrow class="text-blue"></RightArrow>
+ </button>
</div>
- <button @click="reviewRight" class="ml-3">
- <RightArrow class="text-blue"></RightArrow>
- </button>
- </div>
-
</section>
<!-- Services -->
- <section class="mt-32 mb-12 relative">
- <div class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[255px] h-[255px] z-0 -right-[65px] top-[42%]"></div>
+ <section class="mt-32 relative">
+ <div
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[255px] h-[255px] z-0 -right-[65px] top-[42%]"
+ ></div>
<div class="relative z-10">
- <h1 class="text-center font-medium text-[54px] leading-[4.5rem] relative">
- <span class="text-dark">Our</span>
- <span class="text-blue-text">Services
- <FeatureSvg class="inline absolute -top-3 -translate-x-[3px]"></FeatureSvg>
- </span>
- </h1>
- <h2 class="text-dark text-center font-medium text-[2rem] leading-[42px] mt-4">Tailor-made solutions for your unique situation</h2>
- <p class="text-[15px] leading-[18px] mt-8 w-[92.5%] mx-auto">
- On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will
- </p>
+ <h1
+ class="text-center font-medium text-[54px] leading-[4.5rem] relative"
+ >
+ <span class="text-dark">Our </span>
+ <span class="text-blue-text"
+ >Services
+ <FeatureSvg
+ class="inline absolute -top-3 -translate-x-[3px]"
+ ></FeatureSvg>
+ </span>
+ </h1>
+ <h2
+ class="text-dark text-center font-medium text-[2rem] leading-[42px] mt-4"
+ >
+ Tailor-made solutions for your unique situation
+ </h2>
+ <p class="text-[15px] leading-[18px] mt-8 w-[92.5%] mx-auto">
+ On the other hand, we denounce with righteous indignation and dislike
+ men who are so beguiled and demoralized by the charms of pleasure of
+ the moment, so blinded by desire, that they cannot foresee the pain
+ and trouble that are bound to ensue; and equal blame belongs to those
+ who fail in their duty through weakness of will
+ </p>
- <div class="grid w-max mx-auto gap-[31px] mt-4 justify-center grid-cols-1 min-[700px]:grid-cols-2 min-[1000px]:grid-cols-3 min-[1400px]:grid-cols-4 min-[1800px]:grid-cols-5">
- <ServiceCard v-for="service in services" :key="service.service" :data="service"></ServiceCard>
- <ServiceQuestionCard></ServiceQuestionCard>
- </div>
+ <div
+ class="grid w-max mx-auto gap-[31px] mt-4 justify-center grid-cols-1 min-[700px]:grid-cols-2 min-[1000px]:grid-cols-3 min-[1400px]:grid-cols-4 min-[1800px]:grid-cols-5"
+ >
+ <ServiceCard
+ v-for="service in services"
+ :key="service.service"
+ :data="service"
+ ></ServiceCard>
+ <ServiceQuestionCard></ServiceQuestionCard>
+ </div>
</div>
-
</section>
+ <section
+ class="mt-12 sm:mt-[100px] text-white bg-cover bg-no-repeat bg-center bg-blend-multiply bg-dark-400 bg-[url('../public/img/home-bg-2.png')]"
+ >
+
+ <h1
+ class="mt-14 sm:mt-[106px] 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%]">
+ 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
+ capabilities provide real business value to our customers through
+ human-centric innovation.
+ <br><br>
+ There are many variations of passages of Lorem
+ Ipsum available, but the majority have suffered alteration in some form,
+ by injected humour, or randomised words which don't look even slightly
+ believable. If you are going to use a passage of Lorem Ipsum, you need
+ to be sure there isn't anything embarrassing hidden in the middle of
+ text. All the Lorem Ipsum generators on the Internet tend.
+ </p>
+
+ </section>
+
+ <section>
+ <h1>
+ Team
+ </h1>
+ </section>
<footer class="mt-10"></footer>
</div>
</template>
@@ -85,8 +142,8 @@ import ServiceQuestionCard from "../components/ServiceQuestionCard.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 ReviewsMixin from "../components/mixins/ReviewsMixin.vue";
+import ServicesMixin from "../components/mixins/ServicesMixin.vue";
import FeatureSvg from "../components/svg/FeatureSvg.vue";
export default {
@@ -261,8 +318,16 @@ export default {
}, 150);
},
},
- components: { HeaderComponent, ReviewComponent, LeftArrow, RightArrow, FeatureSvg, ServiceCard, ServiceQuestionCard },
- mixins:[ReviewsMixin, ServicesMixin]
+ components: {
+ HeaderComponent,
+ ReviewComponent,
+ LeftArrow,
+ RightArrow,
+ FeatureSvg,
+ ServiceCard,
+ ServiceQuestionCard,
+ },
+ mixins: [ReviewsMixin, ServicesMixin],
};
</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index c4a7bcfef5575eca2c67ab13d190e51a4325de6a..d1cc4085ed9dc7bdd11801cf78fe4312793ff119 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,7 @@ module.exports = {
DEFAULT: "#757575",
},
dark:{
+ 400:"rgba(0, 0, 0, 0.4)",
DEFAULT: "#0F0F10",
},
},