Skip to content

Commit

Permalink
Refine iOS developemnt page according to new resolution
Browse files Browse the repository at this point in the history
cp-priyanka-g committed Oct 28, 2023
1 parent fdc5ed8 commit 7e0d9f8
Showing 20 changed files with 233 additions and 181 deletions.
2 changes: 1 addition & 1 deletion vue-frontend/src/assets/css/tailwind.css
Original file line number Diff line number Diff line change
@@ -176,7 +176,7 @@
@apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
}
.gradient-btn {
@apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
@apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-to-[#ff835b] tw-from-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
}
.gradient-btn > span {
@apply tw-mx-1.5 tw-my-0 tw-font-bold;
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
24 changes: 10 additions & 14 deletions vue-frontend/src/components/ios-app-development/BlogSection.vue
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">
@@ -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>
@@ -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>
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"
@@ -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>
@@ -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-[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"
@@ -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>
@@ -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
@@ -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>
27 changes: 9 additions & 18 deletions vue-frontend/src/components/ios-app-development/CtaSection.vue
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-48 md:tw-h-72 xll:tw-h-[30rem] md: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`"
@@ -11,25 +9,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>
@@ -38,7 +34,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] 3xl:tw-outer-container tw-hidden lg:tw-block"
>
<img
:src="BackgroundImage[1]"
@@ -54,23 +50,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>
17 changes: 6 additions & 11 deletions vue-frontend/src/components/ios-app-development/CtaSection2.vue
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]"
@@ -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>
Loading

0 comments on commit 7e0d9f8

Please sign in to comment.