Skip to content

Commit

Permalink
Deploy ios app development page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-jagruti-a
cp-jagruti-a committed Dec 6, 2023
1 parent f881fb2 commit 09d4b88
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 179 deletions.
115 changes: 14 additions & 101 deletions nuxt-frontend/components/ios-app-development/CaseStudySection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,8 @@
<!-- Mobile UI END-->
<!-- Desktop UI -->

<div
id="stickyParent"
class="sticky-parent h-[300vh] xll:h-[240vh] 3xl:!h-[220vh] hidden lg:block"
>
<div
class="sticky sticky top-0 max-h-full main overflow-hidden"
:class="{ '!top-[75px] xl:!top-[40px]': isScrollingUp }"
>
<div id="stickyParent" class="relative sticky-parent hidden lg:block">
<div class="sticky top-0 w-full h-screen">
<swiper
:direction="'vertical'"
:slidesPerView="1"
Expand All @@ -78,35 +72,29 @@
:mousewheel="{
enabled: false,
releaseOnEdges: true,
sensitivity: 1,
thresholdDelta: 1,
}"
:touchReleaseOnEdges="true"
:modules="modules"
:allowTouchMove="false"
class="swiper-container h-screen"
@swiper="setSwiperRef"
@slideChange="onSlideChange"
>
<swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
<div class="flex flex-row justify-center h-screen">
<div
:class="portfolio.row1Background"
class="flex flex-col justify-center !basis-[40%] justify-around px-8"
>
<div class="flex justify-end relative">
<div class="flex justify-end relative text-[#FFFFFF]">
<div
:class="portfolio.row1Background"
class="absolute top-4 xl:top-8 right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-13%] text-[#FFFFFF] w-[250px] h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex justify-center items-center"
>
<h2 class="header-1 title">
{{ portfolio.title }}
</h2>
</div>
class="absolute top-4 xl:top-8 right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-13%] w-[250px] h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex items-center"
></div>
<h2 class="absolute top-32 header-1 title right-[-30px]">
{{ portfolio.title }}
</h2>
</div>
<div
class="w-[19rem] xl:w-[33rem] mx-auto mt-44 xl:mt-72 description"
:class="{ '!mt-12 xl:!mt-72': isScrollingUp }"
>
<h2 class="header-2 text-[#FFFFFF]">
{{ portfolio.desktopDescription }}
Expand All @@ -117,16 +105,6 @@
}}</span>
</div>
</div>
<div
class="flex justify-end pr-[8%] 2xll:pr-[14%] cursor-pointer"
:class="{ 'mt-[-45%] xl:mt-0': isScrollingUp }"
>
<span
@click="scrollToNext()"
class="text-[#FFFFFF]/[0.80] mt-6 sub-h3-semibold"
>SKIP</span
>
</div>
</div>

<div
Expand Down Expand Up @@ -186,11 +164,7 @@ export default {
swiperRef: 0,
activeIndex: 0,
skipNext: true,
lastTouchY: null,
lastScrollY: 0,
isScrollingUp: false,
scrollPosition: 0,
lastSlideReached: false,
portfolios: [
{
title: "Justly",
Expand Down Expand Up @@ -246,69 +220,18 @@ export default {
},
mounted() {
document.addEventListener("scroll", this.handleScroll);
document.addEventListener("wheel", this.handleWheel);
window.addEventListener("touchstart", this.handleTouchStart);
window.addEventListener("touchmove", this.handleTouchMove);
window.addEventListener("touchend", this.handleTouchEnd);
window.addEventListener("scroll", this.handleScrollTop);
},
unmounted() {
document.removeEventListener("wheel", this.handleWheel);
window.removeEventListener("touchstart", this.handleTouchStart);
window.removeEventListener("touchmove", this.handleTouchMove);
window.removeEventListener("touchend", this.handleTouchEnd);
window.removeEventListener("scroll", this.handleScrollTop);
document.removeEventListener("scroll", this.handleScroll);
},
methods: {
setSwiperRef(swiper) {
this.swiperRef = swiper;
},
// handle mouseScroll event
scrollDirectionIsUp(event) {
if (event.wheelDelta) {
return event.wheelDelta > 0;
}
return event.deltaY < 0;
},
handleWheel(event) {
if (this.scrollDirectionIsUp(event)) {
this.skipNext = false;
} else {
this.skipNext = true;
}
},
//handleTouch event
handleTouchStart(event) {
this.lastTouchY = event.touches[0].clientY;
},
handleTouchMove(event) {
if (this.lastTouchY !== null) {
const currentTouchY = event.touches[0].clientY;
if (currentTouchY > this.lastTouchY) {
this.skipNext = false;
} else if (currentTouchY < this.lastTouchY) {
this.skipNext = true;
}
this.lastTouchY = currentTouchY;
}
},
handleTouchEnd() {
this.lastTouchY = null;
},
scrollToNext() {
if (this.skipNext) {
this.$emit("scroll-to-next");
} else {
this.$emit("scroll-to-previous");
}
},
handleScrollTop() {
handleScroll() {
const stickyParent = document.getElementById("stickyParent");
const stickyTop = stickyParent.offsetTop;
let scrollTop = window.scrollY;
var position = stickyParent.getBoundingClientRect();
if (
Expand All @@ -317,24 +240,11 @@ export default {
(window.innerHeight || document.documentElement.clientHeight)
) {
this.swiperRef.mousewheel.enable();
this.swiperRef.allowTouchMove = true;
this.$emit("sectionFullscreen", false);
} else {
this.swiperRef.mousewheel.disable();
this.swiperRef.allowTouchMove = false;
}
this.lastScrollY = scrollTop;
},
handleScroll() {
const windowHeight = window.innerHeight;
const lastSlide = document.querySelector(".main");
const lastSlidePosition = lastSlide.getBoundingClientRect().top;
if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
this.lastSlideReached = true;
this.isScrollingUp = window.scrollY < this.scrollPosition;
} else {
this.lastSlideReached = false;
this.$emit("sectionFullscreen", true);
}
this.scrollPosition = window.scrollY;
},
},
components: {
Expand All @@ -346,6 +256,9 @@ export default {
<style lang="postcss">
@import "swiper/css";
@import "swiper/css/pagination";
.sticky-parent {
@apply h-[300vh] 3xl:!h-[220vh];
}
.swiper-container {
@apply mx-0;
}
Expand Down
19 changes: 11 additions & 8 deletions nuxt-frontend/components/ios-app-development/LandingSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,19 @@
transform your business vision into reality, giving your brand the
edge it needs in today's competitive marketplace.
</p>

<nuxt-link
class="relative z-9 ml-0 lg:mt-[2.2rem] xl:mt-[2.5rem] 2xl:mt-[2.4rem] hidden lg:block gradient-btn primary-btn"
to="/contact"
@click.native="$mixpanel.track('tap_ios_development_cta')"
<div
class="relative z-9 lg:mt-[2.2rem] xl:mt-[2.5rem] 2xl:mt-[2.4rem] hidden lg:block"
>
<span class="sub-h3-semibold xl:sub-h4-semibold"
>Consult Our iOS Team</span
<nuxt-link
class="ml-0 gradient-btn primary-btn"
to="/contact"
@click.native="$mixpanel.track('tap_ios_development_cta')"
>
</nuxt-link>
<span class="sub-h3-semibold xl:sub-h4-semibold"
>Consult Our iOS Team</span
>
</nuxt-link>
</div>
</div>
<div
class="flex flex-col lg:flex-row items-center justify-center lg:flex-1 mt-8 xs:mt-0"
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ export default Object.freeze({
},
IS_PROD: false,
SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: true,
SHOW_IOS_APP_DEVELOPMENT_PAGE: true,
SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: true,
SMILEPLUS_URL: "https://www.udini.ai/products/smile",
WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
MIX_PANEL_TOKEN: "acf7239a736ff487ca6058c981a55d7e",
Expand Down
10 changes: 5 additions & 5 deletions nuxt-frontend/config.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,16 +100,16 @@ export default Object.freeze({
description:
"We create bespoke Android applications known for their supreme performance, unwavering security, and utmost reliability",
type: "Website",
url: "https://dev-stack.canopas.com/android-app-development",
image: "https://dev-stack.canopas.com/apple-touch-icon.png",
url: "https://canopas.com/android-app-development",
image: "https://canopas.com/apple-touch-icon.png",
},
IOS_APP_DEVELOPMENT_SEO_META_DATA: {
title: "Canopas Services - IOS App Development",
description:
"Explore Canopas' services for IOS app develeopment. Evaluate our exceptional work quality and experience for yourself.",
type: "Website",
url: "https://dev-stack.canopas.com/ios-app-development",
image: "https://dev-stack.canopas.com/apple-touch-icon.png",
url: "https://canopas.com/ios-app-development",
image: "https://canopas.com/apple-touch-icon.png",
},
FLUTTER_APP_DEVELOPMENT_SEO_META_DATA: {
title: "Flutter App Development Company - Canopas",
Expand All @@ -121,7 +121,7 @@ export default Object.freeze({
},
IS_PROD: true,
SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
SHOW_IOS_APP_DEVELOPMENT_PAGE: false,
SHOW_IOS_APP_DEVELOPMENT_PAGE: true,
SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: false,
SMILEPLUS_URL: "https://www.udini.ai/products/smile",
WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
Expand Down
110 changes: 46 additions & 64 deletions nuxt-frontend/pages/ios-app-development.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<Header />
<Header v-if="isHeaderVisible" />
<LandingSection />
<DevelopmentSection />
<CaseStudySection />
<CaseStudySection @sectionFullscreen="handleSectionFullscreen" />
<CtaSection />
<SuccessStorySection ref="iosSuccessstory" />
<BlogSection />
Expand All @@ -13,7 +13,7 @@
</div>
</template>

<script>
<script setup>
import Header from "@/components/partials/NewHeader.vue";
import config from "@/config.js";
import { defineAsyncComponent } from "vue";
Expand Down Expand Up @@ -42,67 +42,49 @@ const CtaSection2 = defineAsyncComponent(
const NewFooter = defineAsyncComponent(
() => import("@/components/partials/NewFooter.vue"),
);
const { $mixpanel } = useNuxtApp();
export default {
data() {
return {
event: "",
events: {
iosSuccessstory: "view_ios_app_development_success_story",
iosFaq: "view_ios_app_development_faq_section",
},
};
},
setup() {
const seoData = config.IOS_APP_DEVELOPMENT_SEO_META_DATA;
useSeoMeta({
robots: "noindex, nofollow",
title: seoData.title,
description: seoData.description,
ogTitle: seoData.title,
ogType: seoData.type,
ogUrl: seoData.url,
ogImage: seoData.image,
});
},
components: {
Header,
LandingSection,
DevelopmentSection,
CaseStudySection,
SuccessStorySection,
BlogSection,
FaqSection,
CtaSection,
CtaSection2,
NewFooter,
},
methods: {
sendEvent() {
const event = this.events[elementInViewPort(this.$refs)];
if (event && this.event !== event) {
this.event = event;
this.$mixpanel.track(event);
}
},
},
beforeRouteEnter(to, from, next) {
if (!config.SHOW_IOS_APP_DEVELOPMENT_PAGE) {
next({
name: "Error404Page",
params: { pathMatch: "/ios-app-development" },
});
} else {
next();
}
},
inject: ["mixpanel"],
mounted() {
window.addEventListener("scroll", this.sendEvent);
this.$mixpanel.track("view_ios_development_page");
},
unmounted() {
window.removeEventListener("scroll", this.sendEvent);
},
const iosSuccessstory = ref(null);
const iosFaq = ref(null);
const seoData = config.IOS_APP_DEVELOPMENT_SEO_META_DATA;
useSeoMeta({
title: seoData.title,
description: seoData.description,
ogTitle: seoData.title,
ogType: seoData.type,
ogUrl: seoData.url,
ogImage: seoData.image,
});
let isHeaderVisible = ref(true);
let event = "";
let events = {
iosSuccessstory: "view_ios_app_development_success_story",
iosFaq: "view_ios_app_development_faq_section",
};
let elements;
onMounted(() => {
elements = ref({
iosSuccessstory: iosSuccessstory,
iosFaq: iosFaq,
});
window.addEventListener("scroll", sendEvent);
$mixpanel.track("view_ios_development_page");
});
onUnmounted(() => {
window.removeEventListener("scroll", sendEvent);
});
function handleSectionFullscreen(isFullscreen) {
isHeaderVisible.value = isFullscreen;
}
function sendEvent() {
const newEvent = events[elementInViewPort(elements.value)];
if (newEvent && event !== newEvent) {
event = newEvent;
$mixpanel.track(event);
}
}
</script>

0 comments on commit 09d4b88

Please sign in to comment.