Enhance : Unification in home page

nuxt-frontend/components/android-app-development/DevelopmentSection.vue

@@ -186,7 +186,7 @@ export default {
       items: [
         {
           title: "Android App Development Consultation",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: consultation,
           description: [
             "At Canopas, we believe that a successful project begins with a thorough understanding of your vision, goals, and market dynamics.",
@@ -210,7 +210,7 @@ export default {
         },
         {
           title: "Custom Android Application Development",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: custom,
           description: [
             "Our approach to development is rooted in agility and focused collaboration.  We build in two-week sprints where our team devotes their complete energy and attention to sculpting the foundation of your app.",
@@ -234,7 +234,7 @@ export default {
         },
         {
           title: "Maintenance and Support",
-          bgColor: "bg-[#F2709C]/[0.04]",
+          bgColor: "bg-pink-40",
           icon: maintenance,
           description: [
             "Post-deployment, we monitor the app's performance and user feedback closely, ready to make quick updates or fixes if needed. Our maintenance and support services ensure your app stays relevant, competitive, and effective in the face of new devices, OS updates, and emerging user expectations.",

nuxt-frontend/components/android-app-development/SuccessStorySection.vue

@@ -34,7 +34,7 @@
               <div
                 v-for="(client, index) in clients"
                 :key="index"
-                class="mb-8 mx-auto rounded-[5px] sm:px-10 md:px-6 lg:px-4 xl:px-24 p-5 bg-[#F2709C]/[0.08]"
+                class="mb-8 mx-auto rounded-[5px] sm:px-10 md:px-6 lg:px-4 xl:px-24 p-5 bg-pink-80"
               >
                 <div
                   class="text-black-87 sub-h1-semibold lg:mobile-header-2-semibold transition-all ease duration-500"

nuxt-frontend/components/contact/NewContactForm.vue

@@ -10,7 +10,7 @@
               <input
                 type="text"
                 id="username"
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 name="username"
                 required
                 autocomplete="given-username"
@@ -33,7 +33,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="email"
                 id="email"
@@ -64,7 +64,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <textarea
-                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium placeholder-black-core/[.6] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 id="project"
                 name="project"
                 rows="3"
@@ -93,7 +93,7 @@
             </div>
             <div class="relative pt-6 md:pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="reference"
                 id="reference"
@@ -121,7 +121,7 @@
             <div class="relative pt-8">
               <div ref="invest-list" class="flex">
                 <button
-                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-black/[0.08] bg-none px-0 sub-h3-regular lg:mobile-header-3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-60"
+                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b bg-none px-0 sub-h3-regular lg:mobile-header-3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-60"
                   type="button"
                   id="invest"
                   name="invest"
@@ -135,7 +135,9 @@
                       floatable
                         ? '-translate-y-4 xl:-translate-y-[0.5rem] origin-[0] scale-75'
                         : 'translate-y-0 scale-100',
-                      floatable && showList ? 'text-black' : 'text-black-60',
+                      floatable && showList
+                        ? 'text-black-core'
+                        : 'text-black-60',
                     ]"
                     @click="floatable = !floatable"
                     >I'll invest</label

nuxt-frontend/components/contact/NewContactLanding.vue

@@ -29,7 +29,7 @@
           class="flex items-start px-0 pt-4"
         >
           <span
-            class="mt-2 md:mt-3 mr-[15px] w-2 md:w-[8.81px] h-2 md:h-[9px] rounded-full bg-[#F2709C]"
+            class="mt-2 md:mt-3 mr-[15px] w-2 md:w-[8.81px] h-2 md:h-[9px] rounded-full bg-pink-300"
           ></span>
           <div
             class="w-11/12 lg:w-[90%] sub-h3-regular lg:mobile-header-3-regular text-black-87"

nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue

@@ -47,7 +47,9 @@
           :key="index"
           class="cursor-pointer px-4"
         >
-          <div class="flex flex-col gap-4 py-8 px-4 bg-white/[0.08] rounded-xl">
+          <div
+            class="flex flex-col gap-4 py-8 px-4 bg-white-core-90 rounded-xl"
+          >
             <div class="mobile-header-3-semibold">
               <span v-html="item.title"></span>
             </div>
@@ -186,7 +188,7 @@ function handleScroll() {
   @apply static pt-8;
 }
 .swiper-pagination-bullet {
-  @apply !w-3 !h-3 !rounded-full !bg-[#F2709C]/[0.8] !border !border-solid !border-[#FFFFFF]/[0.80];
+  @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
 }
 .swiper-pagination-bullet-active {
   @apply !border-none !opacity-100;

nuxt-frontend/components/flutter-app-development/FaqSection.vue

@@ -14,7 +14,7 @@
             :key="faq"
           >
             <div
-              class="faq-container cursor-pointer overflow-hidden rounded-xl bg-[#F2709C]/[0.08] py-6 px-4 lg:py-8 lg:px-10"
+              class="faq-container cursor-pointer overflow-hidden rounded-xl bg-pink-80 py-6 px-4 lg:py-8 lg:px-10"
               @click="expandListItem(faq.id)"
             >
               <div class="faq-header flex flex-row gap-4 lg:gap-6">
@@ -70,7 +70,7 @@
               :key="faq"
             >
               <div
-                class="faq-container cursor-pointer overflow-hidden rounded-xl bg-[#F2709C]/[0.08] py-6 px-4 lg:py-8 lg:px-10"
+                class="faq-container cursor-pointer overflow-hidden rounded-xl bg-pink-80 py-6 px-4 lg:py-8 lg:px-10"
                 @click="expandListItem(faq.id)"
               >
                 <div class="faq-header flex flex-row gap-4 lg:gap-6">

nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue

@@ -104,7 +104,7 @@ const pagination = {
   @apply static pt-6 pl-0;
 }
 .swiper-pagination-bullet {
-  @apply !w-3 !h-3 !rounded-full !bg-[#F2709C]/[0.8] !border !border-solid !border-[#FFFFFF]/[0.80];
+  @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
 }
 .swiper-pagination-bullet-active {
   @apply !border-none !opacity-100;

nuxt-frontend/components/jobs/VirtuesView.vue

@@ -1,24 +1,24 @@
 <template>
   <div
-    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 py-[100px] overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
+    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
   >
-    <div class="normal-text text-black-900 font-bold">
+    <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-20 sm:p-0">
+    <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="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg: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 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              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%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -27,41 +27,42 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ 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-1/2 md: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-xl flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              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%]
+"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg: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 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              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%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -71,22 +72,22 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ 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-1/2 md: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-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              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%]"
             >
               {{ virtue.description }}
             </div>
@@ -95,17 +96,17 @@
       </div>
       <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg: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 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              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%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -115,41 +116,41 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ 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-1/2 md: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-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              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%]"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
         <div
-          class="relative flex-[100%] md:flex-[33%]"
+          class="relative flex-[100%] lg: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 md:my-[10%]"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
           >
             <div
-              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
+              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%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -159,22 +160,22 @@
               />
             </div>
             <div
-              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
+              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
             >
               {{ 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-1/2 md: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-[60%] lg:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
+              class="w-full secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              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%]"
             >
               {{ virtue.description }}
             </div>