Skip to content

Commit

Permalink
Fix spacing and button of landing and other sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-priyanka-g
cp-priyanka-g committed Oct 28, 2023
1 parent 9a9d712 commit c020698
Show file tree
Hide file tree
Showing 9 changed files with 165 additions and 98 deletions.
24 changes: 10 additions & 14 deletions vue-frontend/src/components/ios-app-development/BlogSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<template>
<section class="tw-my-20 md:tw-mb-32 lg:tw-my-32 xll:tw-container">
<section
class="tw-my-16 md:tw-mb-32 lg:tw-my-32 xll:tw-container 3xl:tw-outer-container"
>
<div
class="tw-pb-4 md:tw-py-12 tw-text-center tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-text-[2.65625rem] md:tw-leading-[3.796875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] tw-tracking-[-0.04rem] xll:tw-py-24 tw-text-black-core/[0.87]"
class="tw-pb-4 md:tw-pb-12 tw-text-center header-2 xll:tw-py-24 tw-text-black-core/[0.87]"
>
<span>Our Blogs</span>
<span>Our blogs</span>
</div>
<!-- Mobile UI start -->
<div class="tw-mt-8 tw-block md:tw-hidden">
Expand Down Expand Up @@ -45,17 +47,13 @@
/>
<div
@click="openBlog(blog.link, 'tap_ios_blog_section')"
class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-px-8"
class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-p-8"
>
<h2
class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
>
<h2 class="sub-h1-semibold">
{{ blog.title }}
</h2>

<span
class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
>
<span class="tw-mt-2 tw-text-black-core/[0.60] sub-h4-semibold">
{{ blog.readTime }}
</span>
</div>
Expand Down Expand Up @@ -114,13 +112,11 @@
<div>
<p
@click="openBlog(blog.link, 'tap_ios_blog_section')"
class="tw-mt-2 tw-font-inter-semibold tw-text-2xl lg:tw-text-[2.125rem] tw-w-full lg:tw-leading-[3.1875rem] !tw-tracking-[-4%] tw-text-black-core/[0.87]"
class="tw-mt-6 header-3 tw-w-full !tw-tracking-[-4%] tw-text-black-core/[0.87]"
>
{{ blog.title }}
</p>
<p
class="tw-mt-2 tw-font-inter-medium tw-text-base lg:tw-text-lg tw-tracking-[-0.72px] lg:tw-leading-[1.125rem] tw-text-black-core/[0.60]"
>
<p class="tw-mt-6 sub-h4-regular tw-text-black-core/[0.60]">
{{ blog.readTime }}
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion vue-frontend/src/components/ios-app-development/CaseStudySection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@

<div
id="stickyParent"
class="sticky-parent tw-h-[300vh] xll:tw-h-[250vh] 3xl:!tw-h-[220vh] tw-hidden lg:tw-block"
class="sticky-parent tw-h-[300vh] xll:tw-h-[240vh] 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
6 changes: 2 additions & 4 deletions vue-frontend/src/components/ios-app-development/CtaSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<template>
<section>
<div
class="tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px] 3xl:tw-outer-container lg:tw-hidden"
>
<div class="tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[376px] lg:tw-hidden">
<img
:src="BackgroundImage[0]"
:srcset="`${BackgroundImage[0]} 400w`"
Expand Down Expand Up @@ -36,7 +34,7 @@
</div>
<!-- Desktop view start -->
<div
class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] tw-hidden lg:tw-block"
class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] 3xl:tw-outer-container tw-hidden lg:tw-block"
>
<img
:src="BackgroundImage[1]"
Expand Down
17 changes: 6 additions & 11 deletions vue-frontend/src/components/ios-app-development/CtaSection2.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem] tw-bg-gradient-to-l tw-from-[#FF835B]/[10%] tw-to-[#F2709C]/[10%]"
class="3xl:tw-outer-container tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[275px] lg:tw-mt-60 lg:tw-h-[476px] tw-bg-gradient-to-l tw-from-[#FF835B]/[10%] tw-to-[#F2709C]/[10%]"
>
<img
:src="BackgroundImage[0]"
Expand All @@ -12,29 +12,24 @@
<div
class="tw-container tw-absolute tw-top-[1.2rem] tw-w-full tw-p-4 tw-text-center tw-text-black-core/[0.87] md:tw-left-0 md:tw-top-1/2 md:tw-top-16 md:tw--mt-6 md:tw-text-center lg:!tw-left-[50%] lg:!tw-top-[57%] xll:!tw-top-[60%] lg:tw--translate-x-1/2 lg:tw--translate-y-1/2 lg:tw-transform xl:tw-w-[60%] 2xl:tw-w-[49%] xs:tw-left-[13%] xs:tw-w-[75%] xl2:tw-w-[55%] 2xll:tw-w-[45%] xll:tw-w-[61%]"
>
<div class="tw-flex tw-w-full">
<div class="tw-flex tw-w-full lg:tw-mb-10">
<div class="tw-m-auto">
<p
class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.0625rem] md:tw-font-inter-bold md:tw-text-[2.40625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.11125rem] lg:tw-leading-[4.16rem]"
>
<p class="header-1 tw-text-black-core/[0.87] tw-mb-4 lg:tw-mb-6">
Have an app idea?
</p>

<div
class="tw-font-inter-regular tw-text-base tw-leading-6 md:tw-my-4 md:tw-font-inter-medium md:tw-text-xl md:tw-leading-[1.875rem] lg:tw-text-2xl lg:tw-leading-9"
>
<div class="sub-h1-regular tw-text-black-core/[0.60]">
See if we can make it a reality.
</div>
</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-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-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-medium tw-text-base tw-leading-[1.21rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
<span class="tw-mr-2.5 sub-h3-semibold xl:sub-h4-semibold"
>Let's Chat
</span>
</router-link>
Expand Down
2 changes: 1 addition & 1 deletion vue-frontend/src/components/ios-app-development/DevelopmentSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
</div>

<div
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)]"
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)]"
>
<div class="tw--ml-4">
<div
Expand Down
185 changes: 133 additions & 52 deletions vue-frontend/src/components/ios-app-development/FaqSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<template>
<section class="tw-my-8 md:tw-mb-20 md:tw-mt-32">
<div class="tw-mb-4 md:tw-container">
<div class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 md:tw-my-0">
<section class="tw-my-8 md:tw-mb-20 lg:tw-my-60">
<div class="tw-mb-4 lg:tw-container">
<div class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 lg:tw-my-0">
<div class="tw-text-center">
<span
class="tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.453125rem] lg:tw-leading-[4.46875rem]"
>FAQs on iOS App Development</span
<span class="header-2 tw-text-black-core/[0.87]"
>FAQs on iOS app development</span
>
</div>

<div
class="tw-container tw-mt-6 tw-flex-[67%] tw-pb-8 md:tw-pb-16 md:tw-w-[65rem] md:tw--ml-6 xl:tw-mx-auto"
class="tw-container tw-mt-6 tw-flex-[67%] tw-pb-8 lg:tw-pb-16 lg:tw-w-[65rem] lg:tw--ml-6 xl:tw-mx-auto"
>
<div>
<transition-group tag="div" :name="'faq-' + faqTransitionName">
Expand All @@ -21,16 +20,16 @@
:key="faq"
>
<div
class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white md:tw-p-[15px] md:tw-shadow-md"
class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white lg:tw-p-[15px] lg:tw-shadow-md"
@click="expandListItem(faq.id)"
>
<div class="faq-header tw-flex tw-flex-row tw-items-center">
<div
class="faq-question tw-w-[90%] tw-p-[10px] tw-font-inter-semibold tw-tracking-[-0.04rem] tw-text-lg tw-leading-[1.6875rem] md:tw-text-2xl lg:tw-text-[1.75rem] md:tw-leading-8 lg:tw-leading-[2.625rem]"
class="faq-question tw-w-[90%] tw-p-[10px] sub-h1-semibold"
:class="
openList && faq.id == currentIndex
? 'v2-canopas-gradient-text footer-icon'
: 'tw-text-black-core/[0.60] md:tw-text-black-core/[0.80]'
: 'tw-text-black-core/[0.60] lg:tw-text-black-core/[0.80]'
"
>
{{ faq.question }}
Expand All @@ -56,15 +55,14 @@
/>
</div>
</div>

<collapse-transition>
<div
class="faq-header tw-mt-1.5 tw-flex tw-flex-row tw-animate-fadeIn tw-items-center gradient-border tw-h-auto tw-border-l md:tw-border-l-4 tw-ml-3"
v-if="openList && faq.id == currentIndex"
:key="faq.answer"
>
<div
class="faq-answer tw-w-[90%] tw-px-3 tw-font-inter-regular tw-text-base tw-leading-normal tw-text-black-core/[0.87] md:tw-text-xl md:tw-leading-[1.875rem]"
class="faq-answer tw-w-[90%] tw-px-3 sub-h3-regular"
v-html="faq.answer"
></div>
</div>
Expand All @@ -74,51 +72,133 @@
</div>
</div>
</transition-group>
<collapse-transition>
<transition-group
tag="div"
:name="'faq-' + faqTransitionName"
v-if="showAdditionalFAQs"
>
<div class="faq-section tw-h-auto">
<div
class="tw-mt-3"
v-for="faq in faqs.slice(5, 10)"
:key="faq"
>
<div
class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white tw-p-[15px] tw-shadow-md sm:tw-p-[25px]"
@click="expandListItem(faq.id)"
>
<div
class="faq-header tw-flex tw-flex-row tw-items-center"
>
<div
class="faq-question tw-w-[90%] sub-h1-semibold"
:class="
openList && faq.id == currentIndex
? 'v2-canopas-gradient-text footer-icon'
: 'tw-text-black-core/[0.87]'
"
>
{{ faq.question }}
</div>
<div
class="faq-icon tw-w-[10%] tw-text-end"
@click.native="
mixpanel.track('tap_android_app_faq_questions')
"
>
<font-awesome-icon
class="xmark tw-text-black-core/[0.87]"
:class="
openList && faq.id == currentIndex
? 'footer-icon'
: 'tw-text-black-core/[0.87]'
"
:icon="
openList && faq.id == currentIndex
? 'xmark'
: 'plus'
"
/>
</div>
</div>
<collapse-transition>
<div
class="faq-header tw-flex tw-flex-row tw-items-center"
v-if="openList && faq.id == currentIndex"
:key="faq.answer"
>
<div
class="faq-answer tw-mt-4 tw-w-[90%] tw-animate-fadeIn sub-h3-regular tw-text-black-core/[0.87]"
v-html="faq.answer"
></div>
</div>
</collapse-transition>
<div
class="faq-divider"
v-if="faq.id != faq.length"
></div>
</div>
</div>
</div>
</transition-group>
</collapse-transition>
<div class="tw-mx-auto tw-my-8 lg:tw-hidden">
<div
class="tw-border tw-border-white primary-btn"
@click="showAdditionalFAQs = !showAdditionalFAQs"
>
<span class="tw-text-white sub-h3-semibold"
>{{ showAdditionalFAQs ? "View Less" : "View More" }}
</span>
<font-awesome-icon
class="tw-ml-2 tw-mt-1 fab tw-w-4 tw-h-4 tw-text-white"
:icon="showAdditionalFAQs ? faAngleUp : faAngleDown"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="tw-container tw-py-4 tw-flex tw-justify-center tw-items-center md:tw-justify-end tw-pr-4 tw-text-center md:tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44 md:tw--mr-8 lg:tw--mr-10"
</div>
<div
class="tw-hidden lg:tw-block tw-container tw--mt-8 tw-text-right lg:tw-pt-4 xl:tw-pr-[4.5rem] 2xl:tw-pr-40"
>
<button
v-if="isActivePrev"
type="button"
:disabled="!isActivePrev"
class="lg:tw--mr-4 tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
@click="slide(-1)"
@click.native="mixpanel.track('tap_android_app_faq_previous_arrow')"
aria-label="leftArrow"
>
<button
v-if="isActivePrev"
type="button"
:disabled="!isActivePrev"
class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer sm:tw-mx-2"
@click="slide(-1)"
@click.native="mixpanel.track('tap_ios_app_faq_previous_arrow')"
aria-label="leftArrow"
>
<font-awesome-icon
:class="isActivePrev ? 'footer-icon' : ''"
class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-border-[#3d3d3d26] tw-bg-white tw-p-2.5 tw-drop-shadow-md md:tw-h-5 md:tw-w-5"
icon="fa-angle-left"
id="leftArrow"
/>
</button>
<button
v-else
type="button"
:disabled="!isActiveNext"
class="clients-indicators tw-flex tw-items-center tw-justify-center tw-my-0 tw-cursor-pointer"
@click="slide(1)"
@click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
aria-label="rightArrow"
<font-awesome-icon
:class="isActivePrev ? 'footer-icon' : ''"
class="tw-mr-2 tw-h-5 tw-w-5"
icon="arrow-left"
id="leftArrow"
/><span class="v2-canopas-gradient-text sub-h4-semibold">Back</span>
</button>
<button
v-else
type="button"
class="lg:tw--mr-4 tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
:disabled="!isActiveNext"
@click="slide(1)"
@click.native="mixpanel.track('tap_android_app_faq_next_arrow')"
aria-label="rightArrow"
>
<span class="v2-canopas-gradient-text sub-h4-semibold"
>View More Questions</span
>
<div
:disabled="!isActiveNext"
class="faq-question v2-canopas-gradient-text tw-w-full tw-font-inter-semibold tw-text-base tw-leading-[1.21rem] md:tw-text-2xl lg:tw-text-3xl md:tw-leading-[1.3234375rem] lg:tw-leading-[1.436875rem]"
>
Load More Questions
</div>
<font-awesome-icon
:class="isActiveNext ? 'footer-icon' : ''"
class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-bg-white tw-p-2.5 md:tw-h-5 md:tw-w-5"
icon="fa-angle-right"
id="rightArrow"
/>
</button>
</div>
<font-awesome-icon
:class="isActiveNext ? 'footer-icon' : ''"
class="tw-ml-2 tw-h-5 tw-w-5"
icon="arrow-right"
id="rightArrow"
/>
</button>
</div>
</section>
</template>
Expand All @@ -132,6 +212,7 @@ const TOTAL_FAQ_IN_SLIDE = 5;
export default {
data() {
return {
showAdditionalFAQs: false,
faqs: [
{
id: 1,
Expand Down
6 changes: 2 additions & 4 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 primary-btn"
class="tw-relative tw-z-9 tw-ml-0 lg:tw-mt-8 tw-hidden tw-h-[3.6rem] tw-w-[51%] lg:tw-block gradient-btn primary-btn"
to="/contact"
@click.native="mixpanel.track('tap_ios_development_cta')"
>
Expand Down Expand Up @@ -52,9 +52,7 @@
alt="ios-landing"
/>

<div
class="tw--mt-[2.7rem] tw-mr-28 xs:tw--mt-14 xs:tw-mr-40 lg:tw-hidden"
>
<div class="tw--mt-[5.3rem] tw-mr-28 xs:tw-mr-40 lg:tw-hidden">
<router-link
class="gradient-btn primary-btn"
to="/contact"
Expand Down
Loading

0 comments on commit c020698

Please sign in to comment.