Skip to content

Commit

Permalink
Enhance : Unification in home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-jagruti-a
cp-jagruti-a committed Dec 21, 2023
1 parent 67ddbe1 commit fa0fff9
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 40 deletions.
2 changes: 1 addition & 1 deletion nuxt-frontend/components/home-new/HomeIndex.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
/>
<CTASection ref="cta" class="pt-10 bg-[#121212]" />
<NewFooter
class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
class="bg-gradient-to-b from-pink-0 to-pink-16"
/>
</div>
</template>
Expand Down
67 changes: 33 additions & 34 deletions nuxt-frontend/components/jobs/VirtuesView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@
<div class="pt-10 mobile-header-3-semibold lg:desk-header-3 text-black-87">
Canopas is built on the 10 virtues
</div>
<div class="text-center container mt-8 mb-14 sm:p-0">
<div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
<div class="text-center container mt-8 sm:p-0">
<div class="flex-div flex flex-wrap m-auto lg:w-[85%] gap-10">
<div
class="relative flex-[100%] lg:flex-[33%]"
class="relative flex-[100%] md:flex-[33%]"
v-for="virtue in virtues.slice(0, 3)"
:key="virtue.id"
@touchstart.passive="activeIndex = virtue.id"
@hover.native="$mixpanel.track('hover_virtue')"
>
<div
class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
>
<div
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
>
<img
class="absolute w-[95%] h-[95%] left-0"
Expand All @@ -27,42 +27,41 @@
/>
</div>
<div
class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
class="w-[69%] sub-h1-semibold secondary-color"
>
{{ virtue.title }}
</div>
</div>
<div
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-xl flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
:class="activeIndex == virtue.id ? 'opacity-100' : ''"
>
<div
class="w-full secondary-color mobile-header-3-medium "
class="secondary-color mobile-header-3-medium "
>
{{ virtue.title }}
</div>
<div
class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]
"
class="sub-h1-regular text-black-60 mt-4"
>
{{ virtue.description }}
</div>
</div>
</div>
</div>
<div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
<div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
<div
class="relative flex-[100%] lg:flex-[33%] "
class="relative flex-[100%] md:flex-[33%] "
v-for="virtue in virtues.slice(3, 5)"
:key="virtue.id"
@touchstart.passive="activeIndex = virtue.id"
@hover.native="$mixpanel.track('hover_virtue')"
>
<div
class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0"
>
<div
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
>
<img
class="absolute w-[95%] h-[95%] left-0"
Expand All @@ -72,41 +71,41 @@
/>
</div>
<div
class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
class="w-[69%] sub-h1-semibold secondary-color"
>
{{ virtue.title }}
</div>
</div>
<div
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
:class="activeIndex == virtue.id ? 'opacity-100' : ''"
>
<div
class="w-full secondary-color mobile-header-3-medium "
class="secondary-color mobile-header-3-medium "
>
{{ virtue.title }}
</div>
<div
class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]"
class="sub-h1-regular text-black-60 mt-4"
>
{{ virtue.description }}
</div>
</div>
</div>
</div>
<div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
<div class="flex-div flex flex-wrap m-auto lg:w-[85%] gap-10">
<div
class="relative flex-[100%] lg:flex-[33%]"
class="relative flex-[100%] md:flex-[33%]"
v-for="virtue in virtues.slice(5, 8)"
:key="virtue.id"
@touchstart.passive="activeIndex = virtue.id"
@hover.native="$mixpanel.track('hover_virtue')"
>
<div
class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
>
<div
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
>
<img
class="absolute w-[95%] h-[95%] left-0"
Expand All @@ -116,41 +115,41 @@
/>
</div>
<div
class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
class="w-[69%] sub-h1-semibold secondary-color"
>
{{ virtue.title }}
</div>
</div>
<div
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
:class="activeIndex == virtue.id ? 'opacity-100' : ''"
>
<div
class="w-full secondary-color mobile-header-3-medium "
class="secondary-color mobile-header-3-medium "
>
{{ virtue.title }}
</div>
<div
class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full lg:mb-0 2xl:mb-[2%]"
class="sub-h1-regular text-black-60 mt-4"
>
{{ virtue.description }}
</div>
</div>
</div>
</div>
<div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
<div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
<div
class="relative flex-[100%] lg:flex-[33%] "
class="relative flex-[100%] md:flex-[33%] "
v-for="virtue in virtues.slice(8, 10)"
:key="virtue.id"
@touchstart.passive="activeIndex = virtue.id"
@hover.native="$mixpanel.track('hover_virtue')"
>
<div
class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0"
>
<div
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
>
<img
class="absolute w-[95%] h-[95%] left-0"
Expand All @@ -160,22 +159,22 @@
/>
</div>
<div
class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
class="w-[69%] sub-h1-semibold secondary-color"
>
{{ virtue.title }}
</div>
</div>
<div
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
:class="activeIndex == virtue.id ? 'opacity-100' : ''"
>
<div
class="w-full secondary-color mobile-header-3-medium "
class="secondary-color mobile-header-3-medium "
>
{{ virtue.title }}
</div>
<div
class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
class="sub-h1-regular text-black-60 mt-4"
>
{{ virtue.description }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/pages/flutter-app-development.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<CtaSection2 />
<FaqSection />
<NewFooter
class="-mt-4 md:mt-auto bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
class="-mt-4 md:mt-auto bg-gradient-to-b from-pink-0 to-pink-16"
ref="flutterFooter"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/pages/mobile-app-development.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>
</div>
<NewFooter
class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
class="bg-gradient-to-b from-pink-0 to-pink-16"
/>
</div>
</template>
Expand Down
8 changes: 5 additions & 3 deletions nuxt-frontend/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,18 @@ module.exports = {
60: "#00000099",
},
white: "#ffffff",
'white-core': {
"white-core": {
80: "#FFFFFFCC",
60: "#FFFFFF99",
90: "#FFFFFF14"
90: "#FFFFFF14",
},
pink: {
0: "rgba(242, 112, 156, 0)",
300: "#f2709c",
40: "rgba(242, 112, 156, .04)",
80: "rgba(242, 112, 156, .08)",
90: "rgba(242, 112, 156, .8)"
90: "rgba(242, 112, 156, .8)",
16: "rgba(242, 112, 156, .16)",
},
orange: {
300: "#ff835b",
Expand Down

0 comments on commit fa0fff9

Please sign in to comment.