Skip to content

Commit

Permalink
Refine upto CTA
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-priyanka-g
cp-priyanka-g committed Oct 27, 2023
1 parent 94507e4 commit 9a9d712
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 44 deletions.
38 changes: 16 additions & 22 deletions vue-frontend/src/components/ios-app-development/CaseStudySection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<template>
<div
class="tw-my-16 xs:tw-my-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col 3xl:tw-container"
class="tw-mt-16 xs:tw-mt-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col 3xl:tw-outer-container"
>
<div
class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center md:tw-mb-20"
>
<h2
class="tw-tracking-[-0.04rem] tw-mb-2.5 tw-font-opensans-bold tw-text-2xl tw-leading-9 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.46875rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.359375rem] lg:tw-leading-[4.46875rem] xs:tw-mx-auto xs:tw-w-[71%]"
class="header-2 tw-mb-2.5 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto xs:tw-w-[71%]"
>
Case studies
</h2>
<span
class="tw-font-inter-regular tw-text-lg md:tw-text-xl tw-leading-[1.6875rem] md:tw-leading-[1.875rem] tw-text-black-core/[0.60] md:tw-font-inter-medium lg:tw-text-2xl lg:tw-leading-9 tw-w-11/12 2xl:tw-w-9/12 tw-mx-auto"
class="sub-h1-regular tw-text-black-core/[0.60] tw-w-11/12 2xl:tw-w-9/12 tw-mx-auto"
>Explore our case studies to witness how we've transformed our client's
ideas into successful iOS apps.</span
>
</div>
<!-- Mobile UI -->
<div class="md:tw-hidden tw-flex tw-flex-col">
<div class="lg:tw-hidden tw-flex tw-flex-col tw-mb-24 md:tw-mb-36">
<div
v-for="(portfolio, index) in portfolios"
:key="index"
Expand Down Expand Up @@ -56,15 +56,12 @@
class="tw-w-11/12 sm:tw-w-9/12 tw-flex tw-flex-col tw-ml-[10%] tw-pr-3.5 xs:tw-p-3"
:class="index == 1 ? 'tw-pl-3.5 tw-w-full' : ''"
>
<h2
class="tw-tracking-[0.04rem] tw-mb-2.5 tw-font-opensans-bold tw-text-2xl tw-leading-9 tw-text-black-core/[0.87]"
>
<h2 class="tw-mb-2.5 header-2">
{{ portfolio.title }}
</h2>
<span
class="tw-font-inter-regular tw-text-lg tw-leading-[1.6875rem] tw-text-black-core/[0.60]"
>{{ portfolio.description }}</span
>
<span class="sub-h1-regular tw-text-black-core/[0.60]">{{
portfolio.description
}}</span>
</div>
</div>
</div>
Expand All @@ -74,7 +71,7 @@

<div
id="stickyParent"
class="sticky-parent tw-h-[300vh] xll:tw-h-[250vh] 3xl:!tw-h-[220vh] tw-hidden md:tw-block"
class="sticky-parent tw-h-[300vh] xll:tw-h-[250vh] 3xl:!tw-h-[220vh] tw-hidden lg:tw-block"
>
<div
class="sticky tw-sticky tw-top-0 tw-max-h-full main tw-overflow-hidden"
Expand Down Expand Up @@ -110,9 +107,9 @@
<div class="tw-flex tw-justify-end tw-relative">
<div
:class="portfolio.row1Background"
class="tw-absolute tw-top-8 lg:tw-top-4 xl:tw-top-8 tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-17%] 2xll:tw-right-[-18%] xll:tw-right-[-12%] 3xl:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
class="tw-absolute tw-top-8 lg:tw-top-4 xl:tw-top-8 tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-17%] 2xll:tw-right-[-18%] xll:tw-right-[-12%] 3xl:tw-right-[-13%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
>
<h2 class="title">
<h2 class="header-1 title">
{{ portfolio.title }}
</h2>
</div>
Expand All @@ -121,16 +118,13 @@
class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 description"
:class="{ '!tw-mt-12 xl:!tw-mt-72': isScrollingUp }"
>
<h2
class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
>
<h2 class="header-2 tw-text-[#FFFFFF]">
{{ portfolio.desktopDescription }}
</h2>
<div class="tw-mt-6">
<span
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem]"
>{{ portfolio.subDescription }}</span
>
<span class="sub-h3-semibold tw-text-[#FFFFFF]/[0.80]">{{
portfolio.subDescription
}}</span>
</div>
</div>
<div
Expand All @@ -139,7 +133,7 @@
>
<span
@click="scrollToNext()"
class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
class="tw-text-[#FFFFFF]/[0.80] tw-mt-6 sub-h3-semibold"
>SKIP</span
>
</div>
Expand Down
25 changes: 9 additions & 16 deletions vue-frontend/src/components/ios-app-development/CtaSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<section>
<div
class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem] md:tw-hidden"
class="tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px] 3xl:tw-outer-container lg:tw-hidden"
>
<img
:src="BackgroundImage[0]"
Expand All @@ -11,25 +11,23 @@
loading="lazy"
/>
<div
class="tw-container tw-absolute tw-top-4 tw-w-full tw-p-4 tw-left-[2%] sm:tw-left-[13%] xs:tw-p-8 tw-text-center sm:tw-w-[79%]"
class="tw-container tw-absolute tw-top-0 md:tw-top-[17%] tw-w-full tw-p-4 tw-left-[2%] sm:tw-left-[13%] xs:tw-p-8 tw-text-center sm:tw-w-[79%]"
>
<div class="tw-flex tw-w-full">
<div class="tw-m-auto tw-text-white">
<p
class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.0625rem] tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
>
<p class="header-1 tw-text-black-core/[0.87]">
Let's Start a New Project Together
</p>
</div>
</div>
<div class="tw-mx-auto tw-mt-4">
<router-link
class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
class="gradient-btn primary-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-p-3 tw-px-7 tw-text-center"
to="/contact"
@click.native="mixpanel.track('tap_ios_development_cta')"
>
<span
class="tw-mr-2.5 tw-font-inter-semibold tw-text-base tw-leading-[1.21rem] md:tw-block"
class="tw-mr-2.5 sub-h3-semibold xl:sub-h4-semibold lg:tw-block"
>Contact Us
</span>
</router-link>
Expand All @@ -38,7 +36,7 @@
</div>
<!-- Desktop view start -->
<div
class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] tw-hidden md:tw-block"
class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] tw-hidden lg:tw-block"
>
<img
:src="BackgroundImage[1]"
Expand All @@ -54,23 +52,18 @@
<div
class="tw-w-[95%] tw-py-5 tw-text-white xl:tw-m-auto 2xl:tw-w-4/5"
>
<p
class="tw-font-inter-bold tw-text-[2.188rem] tw-leading-[2.625rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem]"
>
<p class="header-1">
Are you ready to take your business app to the next level?
</p>
</div>
</div>
<div class="tw-mx-auto tw-mt-4">
<router-link
class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
class="gradient-btn primary-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-p-3 tw-px-7"
to="/contact"
@click.native="mixpanel.track('tap_ios_development_cta')"
>
<span
class="tw-mr-2.5 tw-font-inter-medium tw-text-base tw-leading-[1.21rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.436875rem]"
>Let's Chat
</span>
<span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
</router-link>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions vue-frontend/src/components/ios-app-development/DevelopmentSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
class="tw-container tw-mb-2.5 md:tw-mb-7 tw-flex tw-flex-col tw-text-center"
>
<span
class="tw-mb-2.5 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto header-2"
class="tw-mb-2.5 lg:tw-mb-6 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto header-2"
>
iOS app <br class="lg:tw-hidden" />
development services</span
Expand Down Expand Up @@ -71,7 +71,7 @@
</div>

<div
class="tw-rounded-[20px] tw-hidden lg:tw-flex tw-flex-row tw-container tw-mt-16 tw-bg-[#FFF] tw-drop-shadow-[0px_20px_20px_rgba(0,0,0,0.10)]"
class="tw-container tw-rounded-[20px] tw-hidden lg:tw-flex tw-flex-row tw-container tw-mt-16 tw-bg-[#FFF] tw-drop-shadow-[0px_20px_20px_rgba(0,0,0,0.10)]"
>
<div class="tw--ml-4">
<div
Expand All @@ -81,7 +81,7 @@
activeIndex == index ? 'tw-border-r-[#FF9472] tw-bg-[#FFF]' : '',
index == 4 || index == 0 ? item.className : '',
]"
class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[7.5rem] lg:tw-h-[6.8rem] tw-w-40 xl:tw-w-60 xl:tw-h-[6.2rem] tw-bg-[#F5F5F5] tw-border-b tw-border-[#E3E3E3] tw-border-r-[5px]"
class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[7.5rem] tw-h-[5.8rem] xl:tw-h-[6.8rem] tw-w-40 xl:tw-w-60 xl:tw-h-[6.2rem] tw-bg-[#F5F5F5] tw-border-b tw-border-[#E3E3E3] tw-border-r-[5px]"
@mouseover="slideTo(index), (activeIndex = index)"
@touchstart.passive="slideTo(index), (activeIndex = index)"
@touchmove.passive="slideTo(index), (activeIndex = index)"
Expand Down Expand Up @@ -112,7 +112,7 @@
}"
:loop="true"
:modules="modules"
class="swiper-container tw-h-[600px] lg:tw-h-[540px] xl:tw-h-[495px] tw-flex"
class="swiper-container lg:tw-h-[463px] xl:tw-h-[495px] tw-flex"
@swiper="setSwiperRef"
@slideChange="onSlideChange"
>
Expand Down
4 changes: 2 additions & 2 deletions vue-frontend/src/components/ios-app-development/LandingSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
edge it needs in today's competitive marketplace.
</p>
<router-link
class="tw-relative tw-z-9 tw-ml-0 lg:tw-mt-8 tw-hidden tw-w-[51%] lg:tw-block gradient-btn consultation-btn"
class="tw-relative tw-z-9 tw-ml-0 lg:tw-mt-8 tw-hidden tw-w-[51%] lg:tw-block gradient-btn primary-btn"
to="/contact"
@click.native="mixpanel.track('tap_ios_development_cta')"
>
Expand Down Expand Up @@ -56,7 +56,7 @@
class="tw--mt-[2.7rem] tw-mr-28 xs:tw--mt-14 xs:tw-mr-40 lg:tw-hidden"
>
<router-link
class="gradient-btn consultation-btn"
class="gradient-btn primary-btn"
to="/contact"
@click.native="mixpanel.track('tap_ios_development_cta')"
>
Expand Down

0 comments on commit 9a9d712

Please sign in to comment.