Style and mixpanel changes

.github/workflows/deploy-frontend-dev.yml

@@ -29,6 +29,7 @@ jobs:
           sed -i "s|VITE_IFRAMELY_KEY_VALUE|${{ secrets.IFRAMELY_KEY }}|g" config.js
           sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.js
           sh ./../deploy/generate-sitemap.sh https://dev-stack.canopas.com https://dev-stack-api.canopas.com
-          yarn install --frozen-lockfile && yarn build && yarn generate
+          yarn install --frozen-lockfile && yarn generate
           aws s3 sync ./.output/public s3://dev-stack.canopas.com --exclude "*.js"
-          aws s3 sync ./.output/public s3://dev-stack.canopas.com --include "*.js" --content-type "application/javascript"
+          aws s3 sync ./.output/public s3://dev-stack.canopas.com --include "*.js" --content-type "application/javascript"
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.github/workflows/deploy-frontend-prod.yml

@@ -32,5 +32,6 @@ jobs:
           sed -i "s|VITE_RECAPTCHA_SITE_KEY_VALUE|${{ secrets.RECAPTCHA_SITE_KEY }}|g" config.prod.js
           mv src/config.prod.js src/config.js
           sh ./../deploy/generate-sitemap.sh https://canopas.com https://prod-stack-api.canopas.com
-          yarn install --frozen-lockfile && yarn build && yarn generate
-          aws s3 sync ./.output/public s3://nuxt.canopas.com
+          yarn install --frozen-lockfile && yarn generate
+          aws s3 sync ./.output/public s3://canopas.com --exclude "*.js"
+          aws s3 sync ./.output/public s3://canopas.com --include "*.js" --content-type "application/javascript"

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

@@ -23,7 +23,7 @@
         <router-link
           class="gradient-btn primary-btn"
           to="/contact"
-          @click.native="mixpanel.track('tap_android_development_cta')"
+          @click.native="$mixpanel.track('tap_android_development_cta')"
         >
           <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
         </router-link>

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

@@ -17,7 +17,7 @@
         <router-link
           class="gradient-btn primary-btn"
           to="/contact"
-          @click.native="mixpanel.track('tap_android_development_cta')"
+          @click.native="$mixpanel.track('tap_android_development_cta')"
         >
           <span class="sub-h3-semibold">Contact Us </span>
         </router-link>
@@ -50,7 +50,7 @@
           <router-link
             class="gradient-btn primary-btn"
             to="/contact"
-            @click.native="mixpanel.track('tap_android_development_cta')"
+            @click.native="$mixpanel.track('tap_android_development_cta')"
           >
             <span class="sub-h4-semibold">Contact Us </span>
           </router-link>

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

@@ -42,7 +42,7 @@
                       <div
                         class="faq-icon w-[10%] text-end"
                         @click.native="
-                          mixpanel.track('tap_android_app_faq_questions')
+                          $mixpanel.track('tap_android_app_faq_questions')
                         "
                       >
                         <Icon
@@ -103,7 +103,7 @@
                         <div
                           class="faq-icon w-[10%] text-end"
                           @click.native="
-                            mixpanel.track('tap_android_app_faq_questions')
+                            $mixpanel.track('tap_android_app_faq_questions')
                           "
                         >
                           <Icon

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

@@ -28,7 +28,7 @@
         <router-link
           class="cta-button primary-btn border border-solid border-white bg-white hover:bg-transparent active:scale-[0.98]"
           to="/contact"
-          @click.native="mixpanel.track('tap_android_development_cta')"
+          @click.native="$mixpanel.track('tap_android_development_cta')"
         >
           <span class="sub-h4-semibold v2-canopas-gradient-text"
             >Let's Chat</span

nuxt-frontend/components/contributions/WeeklyUpdate.vue

@@ -205,6 +205,11 @@ export default {
       window.addEventListener("scroll", this.handleScroll);
     }
   },
+  unmounted() {
+    if (window.innerWidth > 767) {
+      window.removeEventListener("scroll", this.handleScroll);
+    }
+  },
   methods: {
     scrollToCard(index) {
       this.activeIndex = index;

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

@@ -13,7 +13,7 @@
         <div class="hidden lg:block">
           <router-link
             to="/contact"
-            @click.native="mixpanel.track('tap_flutter_development_cta')"
+            @click.native="$mixpanel.track('tap_flutter_development_cta')"
           >
             <button class="gradient-btn primary-btn ml-0">
               <span class="sub-h4-semibold border-none"
@@ -35,7 +35,7 @@
         <div class="lg:hidden">
           <router-link
             to="/contact"
-            @click.native="mixpanel.track('tap_flutter_development_cta')"
+            @click.native="$mixpanel.track('tap_flutter_development_cta')"
           >
             <button class="gradient-btn primary-btn">
               <span class="sub-h3-semibold border-none"

nuxt-frontend/components/home-new/CaseStudy.vue

@@ -63,7 +63,6 @@ import config from "@/config.js";
 import PortfolioSection from "@/components/home-new/PortfolioSection.vue";
 import PortfolioCTASection from "@/components/home-new/PortfolioCTASection.vue";
 import PortfolioPageCTASection from "@/components/home-new/PortfolioPageCTASection.vue";
-import { elementInViewPort } from "@/utils.js";
 
 export default {
   data() {

nuxt-frontend/components/home-new/HomeIndex.vue

@@ -2,18 +2,30 @@
   <div>
     <ScreenHeader />
     <LandingSection ref="landing" />
-    <ServiceSection class="hidden md:block" ref="service" />
-    <ServiceSectionMobile class="block md:hidden" ref="service" />
+    <ServiceSection class="hidden md:block" ref="service" v-if="width > 768" />
+    <ServiceSectionMobile
+      class="block md:hidden"
+      ref="service"
+      v-if="width <= 768"
+    />
     <CaseStudy ref="casestudies" />
     <ClientReview ref="clientReview" />
     <BlogSection ref="blogs" />
-    <ContributionSection class="hidden lg:block" ref="contributions" />
-    <ContributionSectionMobile class="block lg:hidden" ref="contributions" />
+    <ContributionSection
+      class="hidden lg:block"
+      ref="contributions"
+      v-if="width > 992"
+    />
+    <ContributionSectionMobile
+      v-if="width <= 992"
+      class="block lg:hidden"
+      ref="contributions"
+    />
     <CTASection
       ref="cta"
       class="!mt-[100px] md:!mt-[220px] pt-10 bg-black-core/[0.85] mb-[-15px]"
     />
-    <NewFooter ref="footer" />
+    <NewFooter />
   </div>
 </template>
 
@@ -24,31 +36,31 @@ import { elementInViewPort } from "@/utils.js";
 import { defineAsyncComponent } from "vue";
 
 const CaseStudy = defineAsyncComponent(() =>
-  import("@/components/home-new/CaseStudy.vue"),
+  import("@/components/home-new/CaseStudy.vue")
 );
 const ServiceSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ServiceSection.vue"),
+  import("@/components/home-new/ServiceSection.vue")
 );
 const ServiceSectionMobile = defineAsyncComponent(() =>
-  import("@/components/home-new/ServiceSectionMobile.vue"),
+  import("@/components/home-new/ServiceSectionMobile.vue")
 );
 const ContributionSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSection.vue"),
+  import("@/components/home-new/ContributionSection.vue")
 );
 const ContributionSectionMobile = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSectionMobile.vue"),
+  import("@/components/home-new/ContributionSectionMobile.vue")
 );
 const ClientReview = defineAsyncComponent(() =>
-  import("@/components/home-new/ClientReviewSection.vue"),
+  import("@/components/home-new/ClientReviewSection.vue")
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/CTASection2.vue"),
+  import("@/components/mobile-app-development/CTASection2.vue")
 );
 const BlogSection = defineAsyncComponent(() =>
-  import("@/components/home-new/BlogSection.vue"),
+  import("@/components/home-new/BlogSection.vue")
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue"),
+  import("@/components/partials/NewFooter.vue")
 );
 
 export default {
@@ -67,6 +79,7 @@ export default {
   },
   data() {
     return {
+      width: 0,
       event: "",
       events: {
         landing: "view_landing_section",
@@ -76,12 +89,12 @@ export default {
         blogs: "view_blog_post_section",
         contributions: "view_open_source_contribution",
         cta: "view_home_cta",
-        footer: "view_home_footer",
       },
     };
   },
   inject: ["mixpanel"],
   mounted() {
+    this.width = window.innerWidth;
     window.addEventListener("scroll", this.sendEvent);
     this.$mixpanel.track("view_landing_section");
   },

nuxt-frontend/components/ios-app-development/CtaSection.vue

@@ -24,7 +24,7 @@
           <router-link
             class="gradient-btn consultation-btn m-0 mx-auto flex text-[#FFF] w-max items-center rounded-full p-3 px-7 text-center"
             to="/contact"
-            @click.native="mixpanel.track('tap_ios_development_cta')"
+            @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
             <span
               class="mr-2.5 font-inter-semibold text-base leading-[1.21rem] md:block"
@@ -59,7 +59,7 @@
           <router-link
             class="gradient-btn consultation-btn m-0 mx-auto flex text-[#FFF] w-max items-center rounded-full p-3 px-7 text-center"
             to="/contact"
-            @click.native="mixpanel.track('tap_ios_development_cta')"
+            @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
             <span
               class="mr-2.5 font-inter-medium text-base leading-[1.21rem] lg:text-[1.1875rem] lg:leading-[1.436875rem]"

nuxt-frontend/components/portfolio/BrandingSection.vue

@@ -194,7 +194,7 @@
 <script>
 import AspectRatio from "@/components/utils/AspectRatio.vue";
 import LottieAnimation from "@/components/utils/LottieAnimation.vue";
-import { elementInViewPort } from "@/utils.js";
+
 export default {
   props: ["json"],
   data() {

nuxt-frontend/components/portfolio/LandingSection.vue

@@ -24,7 +24,6 @@
 
 <script>
 import AspectRatio from "@/components/utils/AspectRatio.vue";
-import { elementInViewPort } from "@/utils.js";
 
 export default {
   props: ["json"],

nuxt-frontend/package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.10",
-    "@canopassoftware/canopas-blog-components": "^1.0.3",
+    "@canopassoftware/canopas-blog-components": "^1.0.4",
     "@ivanv/vue-collapse-transition": "^1.0.2",
     "@nuxt/devtools": "latest",
     "@vueuse/components": "^10.4.1",

nuxt-frontend/pages/android-app-development.vue

@@ -50,7 +50,7 @@ const NewFooter = defineAsyncComponent(() =>
 
 export default {
   setup() {
-    var seoData = config.ANDRIOD_APP_DEVELOPMENT_SEO_META_DATA;
+    const seoData = config.ANDRIOD_APP_DEVELOPMENT_SEO_META_DATA;
     useSeoMeta({
       title: seoData.title,
       description: seoData.description,

nuxt-frontend/pages/flutter-app-development.vue

@@ -46,7 +46,7 @@ export default {
       const event = this.events[elementInViewPort(this.$refs)];
       if (event && this.event !== event) {
         this.event = event;
-        this.mixpanel.track(event);
+        this.$mixpanel.track(event);
       }
     },
   },
@@ -63,7 +63,7 @@ export default {
   inject: ["mixpanel"],
   mounted() {
     window.addEventListener("scroll", this.sendEvent);
-    this.mixpanel.track("view_flutter_development_page");
+    this.$mixpanel.track("view_flutter_development_page");
   },
   unmounted() {
     window.removeEventListener("scroll", this.sendEvent);

nuxt-frontend/pages/jobs/[id].vue

@@ -94,8 +94,9 @@ const store = useJobDetailStore();
 const job = computed(() => store.item);
 const jobsError = computed(() => store.error);
 const isLoading = computed(() => store.isLoading);
-let jobLink = "",
-  showErrorMessagePopup = false;
+
+const showErrorMessagePopup = ref(false);
+const jobLink = ref("");
 
 await setCareerDetails();
 
@@ -127,10 +128,10 @@ async function setCareerDetails() {
         params: { pathMatch: ["jobs", id] },
       });
     } else {
-      showErrorMessagePopup = true;
+      showErrorMessagePopup.value = true;
     }
   } else {
-    jobLink = "/jobs/apply/" + job.value.unique_id;
+    jobLink.value = "/jobs/apply/" + job.value.unique_id;
     setBulletsAndIconsInDescription();
   }
 }

nuxt-frontend/pages/jobs/apply/[id].vue

@@ -411,7 +411,7 @@ async function setCareerDetails() {
         params: { pathMatch: ["jobs", "apply", id] },
       });
     } else {
-      showErrorMessagePopup.value = true;
+      showErrorMessage.value = true;
       $mixpanel.track("job_apply_failed");
     }
   }

nuxt-frontend/pages/thank-you.vue

@@ -19,6 +19,7 @@ import config from "@/config.js";
 import Header from "@/components/partials/NewHeader.vue";
 import LandingSection from "@/components/contact/thank-you/LandingSection.vue";
 import BenefitSection from "@/components/contact/thank-you/BenefitSection.vue";
+import { elementInViewPort } from "@/utils.js";
 const HappyClientSection = defineAsyncComponent(() =>
   import("@/components/contact/thank-you/HappyClient.vue"),
 );

nuxt-frontend/utils.js

@@ -34,7 +34,7 @@ function setGithubStars(contributions, githubRepos) {
       .filter(
         (repo) =>
           repo.name ==
-          contribution.link.slice(contribution.link.lastIndexOf("/") + 1),
+          contribution.link.slice(contribution.link.lastIndexOf("/") + 1)
       )
       .map((repo) => repo.stargazers_count.toString())[0];
   });
@@ -77,7 +77,7 @@ function getJobDates() {
     currentDay <= maxDays
       ? startDateOfMonth
       : new Date(
-          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays),
+          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays)
         );
 
   const datePosted = jobPosted.toISOString().split("T")[0];