Skip to content

Commit

Permalink
Enhance: Redesign android development page according to new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-jagruti-a
cp-jagruti-a committed Oct 18, 2023
1 parent b6f2a07 commit 88495ad
Show file tree
Hide file tree
Showing 18 changed files with 563 additions and 479 deletions.
31 changes: 0 additions & 31 deletions vue-frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,35 +128,4 @@ a {
.v2-button:hover > .fa {
@apply tw-text-[#fff];
}
.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;
}
.gradient-btn > span {
@apply tw-mx-1.5 tw-my-0 tw-font-bold;
}
.gradient-btn:hover > a > span,
.gradient-btn:hover > span {
@apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
}
.white-btn > span {
@apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
}
.gradient-btn:hover > .fa,
.gradient-btn:hover > .fas,
.gradient-btn:hover > a > .fab {
@apply tw-text-[#f2709c];
}
.gradient-border-btn {
@apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
}
.gradient-border-btn > a > .fab {
@apply tw-text-[#f2709c];
}
.gradient-border-btn:hover > .arrow,
.gradient-border-btn:hover > .fa,
.gradient-border-btn:hover > a > .fab,
.gradient-border-btn:hover > span,
.gradient-border-btn:hover > span > span {
@apply tw-text-white;
}
</style>
82 changes: 82 additions & 0 deletions vue-frontend/src/assets/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@
font-weight: 700;
src: url(../fonts/Open-Sans-Bold.woff2) format("woff2");
}
@font-face {
font-display: swap;
font-family: Opensans-SemiBold;
font-style: normal;
font-weight: 600;
src: url(../fonts/Open-Sans-SemiBold.woff2) format("woff2");
}
@layer utilities {
input:-webkit-autofill,
input:-webkit-autofill:active,
Expand Down Expand Up @@ -115,3 +122,78 @@
animation-play-state: running;
}
}
@layer components {
.header-1 {
@apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.15rem] tw-text-[2rem] tw-leading-[2.6rem] md:tw-text-[2.875rem] md:tw-leading-[3.688rem] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem];
}
.header-2 {
@apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.12rem] tw-text-[1.5rem] tw-leading-[2.25rem] md:tw-text-[2.25rem] md:tw-leading-[2.938rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem];
}
.header-3 {
@apply tw-font-opensans-semibold tw-tracking-[-0.08rem] tw-text-[1.25rem] tw-leading-[1.875rem] md:tw-text-[1.625rem] md:tw-leading-[2.313rem] xl:tw-text-[2rem] xl:tw-leading-[3rem];
}
.sub-h1-regular {
@apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem] md:tw-leading-[1.813rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem] tw-font-inter-regular;
}
.sub-h1-semibold {
@apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem] md:tw-leading-[1.813rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem] tw-font-inter-semibold;
}
.sub-h2-medium {
@apply xl:tw-text-[1.375rem] xl:tw-leading-[2.063rem] tw-font-inter-medium;
}
.sub-h3-regular {
@apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-regular;
}
.sub-h3-medium {
@apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-medium;
}
.sub-h3-semibold {
@apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-semibold;
}
.sub-h4-regular {
@apply tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
}
.sub-h4-semibold {
@apply tw-font-inter-semibold tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
}
.primary-btn {
@apply tw-h-12 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center;
}
.gradient-border-btn {
@apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
}
.gradient-border-btn > a > .fab {
@apply tw-text-[#f2709c];
}
.gradient-border-btn:hover > .arrow,
.gradient-border-btn:hover > .fa,
.gradient-border-btn:hover > a > .fab,
.gradient-border-btn:hover > span,
.gradient-border-btn:hover > span > span {
@apply tw-text-white;
}
.white-btn > span {
@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;
}
.gradient-btn > span {
@apply tw-mx-1.5 tw-my-0 tw-font-bold;
}
.gradient-btn:hover > a > span,
.gradient-btn:hover > span {
@apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
}

.gradient-btn:hover > .fa,
.gradient-btn:hover > .fas,
.gradient-btn:hover > a > .fab {
@apply tw-text-[#f2709c];
}
.cta-button:hover > span,
.portfolio-nav:hover > span,
.v2-button:hover > .fa {
@apply tw-text-[#fff];
}
}
Binary file added vue-frontend/src/assets/fonts/Open-Sans-SemiBold.woff2
View file
Binary file not shown.
Binary file modified vue-frontend/src/assets/images/andriod-app-development/development/1.webp
View file
Binary file not shown.
Binary file modified vue-frontend/src/assets/images/andriod-app-development/development/2.webp
View file
Binary file not shown.
Binary file modified vue-frontend/src/assets/images/andriod-app-development/development/3.webp
View file
Binary file not shown.
Binary file modified vue-frontend/src/assets/images/andriod-app-development/development/4.webp
View file
Binary file not shown.
Binary file modified vue-frontend/src/assets/images/andriod-app-development/development/5.webp
View file
Binary file not shown.
33 changes: 12 additions & 21 deletions vue-frontend/src/components/android-app-development/BlackCtaSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,31 @@
<template>
<div class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem]">
<div
class="tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-16 tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
>
<img
:src="BackgroundImage[0]"
:srcset="`${BackgroundImage[0]} 400w, ${BackgroundImage[1]} 800w, ${BackgroundImage[2]} 1200w, ${BackgroundImage[3]} 2400w`"
alt="Background-Image"
class="tw-h-full lg:tw-h-[22.5rem] xll:tw-h-full tw-w-full tw-object-cover"
class="tw-h-full tw-w-full tw-object-cover"
loading="lazy"
/>
<div
class="tw-container tw-absolute tw-top-4 tw-w-full tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center tw-text-[#FFF] md:tw-left-0 md:tw-top-1/2 md:tw-top-16 md:tw--mt-10 md:tw-text-center lg:!tw-left-[50%] lg:!tw-top-[72%] 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%]"
class="tw-container tw-absolute tw-top-4 md:tw-top-20 xl:tw-top-32 tw-w-full tw-p-4 tw-text-center tw-text-[#FFF] xs:tw-left-[13%] xll:tw-left-[24%] 3xl:tw-left-[33%] xs:tw-w-[75%]"
>
<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.625rem] md:tw-font-inter-bold md:tw-text-[3.4375rem] md:tw-leading-[4.16rem]"
>
Have an app idea?
</p>
<div class="tw-m-auto">
<p class="tw-text-white header-1">Have an app idea?</p>

<div
class="tw-font-inter-regular tw-text-base md:tw-my-4 md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-[1.815625rem]"
>
See if we can make it a reality.
</div>
<div class="tw-mt-2 tw-text-white/[0.8] sub-h1-regular md:tw-my-4">
See if we can make it a reality.
</div>
</div>
<div class="tw-mx-auto tw-mt-4">
<div class="tw-mx-auto tw-mt-5">
<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"
to="/contact"
@click.native="mixpanel.track('tap_android_development_cta')"
>
<span
class="tw-mr-2.5 tw-font-inter-medium tw-text-[1rem] tw-font-normal tw-leading-[1.1875rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
>Let's Chat
</span>
<span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
</router-link>
</div>
</div>
Expand Down
71 changes: 29 additions & 42 deletions vue-frontend/src/components/android-app-development/BlogSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
<template>
<section
class="section tw-my-20 md:tw-my-24 lg:tw-mb-40 lg:tw-mt-44 xll:tw-my-52"
>
<!-- Mobile UI start -->
<section class="section tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
<!-- ---------------------MOBILE UI START------------------ -->
<div
class="tw-relative tw-z-[1] tw-h-[27rem] tw-overflow-hidden tw-py-12 sm:tw-py-8 md:tw-hidden"
class="tw-relative tw-z-[1] tw-h-[27rem] sm:tw-h-[30rem] tw-overflow-hidden md:tw-hidden"
>
<p
class="tw-text-center tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87]"
>
Our Blogs
</p>
<div class="blog tw-mt-8 tw-block md:tw-hidden">
<p class="tw-text-center header-2 tw-text-black-core/[0.87]">Our blogs</p>
<div class="blog tw-mt-6 tw-block md:tw-hidden">
<swiper
:slidesPerView="2"
:spaceBetween="10"
:slidesPerView="1.425"
:spaceBetween="0"
:centeredSlides="true"
class="tw-p-4"
>
Expand All @@ -24,20 +18,20 @@
class="tw-relative tw-flex tw-flex-col"
>
<div class="tw-overflow-hidden">
<div class="tw-h-full tw-w-full tw-cursor-pointer">
<div
class="tw-scale-75 tw-transition-all tw-duration-200 tw-ease-out"
>
<img
@click="openBlog(blog.link, 'tap_android_app_blog_section')"
:src="blog.image[0]"
:srcset="`${blog.image[0]} 400w, ${blog.image[1]} 800w`"
:alt="blog.title"
class="tw-h-full tw-w-full tw-rounded-[10px] tw-object-cover"
class="tw-h-full tw-w-full tw-rounded-lg tw-object-cover"
loading="lazy"
/>
</div>
<div class="title tw-hidden">
<p
class="tw-mt-2 tw-pl-2 tw-font-inter-regular tw-text-[0.875rem] tw-leading-[1.3125rem] tw-text-black-core/[0.6]"
>
<p class="tw-mt-3 tw-text-black-core/[0.60]">
{{ blog.publishDate }}
</p>
<a
Expand All @@ -46,7 +40,7 @@
target="_blank"
>
<p
class="tw-mt-2 tw-cursor-pointer tw-pl-2 tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.6875rem] tw-text-black-core/[0.87]"
class="tw-mt-2 tw-cursor-pointer sub-h1-semibold tw-text-black-core/[0.87]"
>
{{ blog.title }}
</p>
Expand All @@ -56,20 +50,15 @@
</swiper-slide>
</swiper>
</div>
<div
class="tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-full tw-w-[60%] tw-rounded-[10px] tw-border tw-border-black-core/[0.60]"
></div>
</div>
<!-- ---------------------MOBILE UI END------------------ -->

<!-- Mobile UI end -->
<!-- Desktop UI start -->
<!-- ---------------------DSKTOP UI START------------------ -->
<div
class="tw-container tw-flex tw-hidden tw-flex-col md:tw-block md:tw-min-h-[580px] lg:tw-py-0"
>
<p
class="tw-mb-8 tw-text-center tw-font-inter-bold tw-text-[3.4375rem] tw-leading-[5.15625rem] tw-text-black-core/[0.87]"
>
Our Blogs
<p class="tw-mb-8 tw-text-center header-2 tw-text-black-core/[0.87]">
Our blogs
</p>
<div class="tw-flex tw-flex-row tw-space-x-5 tw-space-y-1">
<div
Expand All @@ -89,7 +78,7 @@
</aspect-ratio>

<div
class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
:class="blog.bgColor"
>
<div
Expand Down Expand Up @@ -118,7 +107,7 @@
:alt="blog.title"
/>
<div
class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
:class="blog.bgColor"
>
<div
Expand Down Expand Up @@ -150,7 +139,7 @@
:alt="blog.title"
/>
<div
class="overlay tw-rounded-[18px] tw-duration-700 tw-ease-in tw-opacity-0 tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100"
class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
:class="blog.bgColor"
>
<div
Expand All @@ -166,7 +155,7 @@
</div>
</div>
</div>
<!-- Desktop UI end -->
<!-- ---------------------DESKTOP UI END------------------ -->
</section>
</template>

Expand Down Expand Up @@ -196,7 +185,7 @@ export default {
image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
publishDate: "Sep 27, 2021",
title: "Android code coverage using JaCoCo",
hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.87]">Android<span><br><span class="tw-font-inter-regular tw-text-black-core/[0.87] tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
hovertitle: `<span class="header-3 tw-text-black-core/[0.87]">Android<span><br><span class="sub-h1-regular tw-text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
link: "https://blog.canopas.com/android-code-coverage-using-jacoco-6639a1fc4293",
bgColor: "tw-bg-gradient-to-b tw-from-[#E7E7E7] tw-to-[#DADADA]",
},
Expand All @@ -205,7 +194,7 @@ export default {
image: [mvvm_400w, mvvm_800w],
publishDate: "Dec 3, 2021",
title: "Jetpack Compose: MVVM State management in a simple way",
hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br> MVVM State management in a simple way`,
hovertitle: `<span class="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-text-white sub-h1-regular">MVVM State management in a simple way</span>`,
link: "https://blog.canopas.com/jetpack-compose-mvvm-state-management-in-a-simple-way-4c632fa6f554",
bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
},
Expand All @@ -214,7 +203,7 @@ export default {
image: [keyboard_400w, keyboard_800w],
publishDate: "Apr 26, 2022",
title: "Keyboard Handling In Jetpack Compose — All You Need To Know",
hovertitle: `<span >Keyboard Handling In<br> <span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br>All You Need To Know</span>`,
hovertitle: `<span class="tw-text-white sub-h1-regular">Keyboard Handling In<br> <span class="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-text-white sub-h1-regular">All You Need To Know</span></span>`,
link: "https://blog.canopas.com/keyboard-handling-in-jetpack-compose-all-you-need-to-know-3e6fddd30d9a",
bgColor: "tw-bg-gradient-to-b tw-from-[#070710] tw-to-[#222241]",
},
Expand All @@ -224,7 +213,7 @@ export default {
publishDate: "Feb 17, 2022",
title:
"Retrofit — Effective error handling with Kotlin Coroutine and Result API",
hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-white">Retrofit</span> <br><span class="tw-text-white">Effective error handling with Kotlin Coroutine and Result API</span>`,
hovertitle: `<span class="header-3 tw-text-white">Retrofit</span> <br><span class="tw-text-white sub-h1-regular">Effective error handling with Kotlin Coroutine and Result API</span>`,
link: "https://blog.canopas.com/retrofit-effective-error-handling-with-kotlin-coroutine-and-result-api-405217e9a73d",
className: "tw-basis-[54%]",
bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
Expand All @@ -235,7 +224,7 @@ export default {
publishDate: "Mar 10, 2022",
title:
"Android — Send live audio stream from client to server using WebSocket and OkHttp client",
hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.80]">Android</span><br>Send live audio stream from client to server using WebSocket and OkHttp client`,
hovertitle: `<span class="header-3 tw-text-black-core/[0.87]">Android</span><br><span class=" tw-text-black-core/[0.87] sub-h1-regular">Send live audio stream from client to server using WebSocket and OkHttp client</span>`,
link: "https://blog.canopas.com/android-send-live-audio-stream-from-client-to-server-using-websocket-and-okhttp-client-ecc9f28118d9",
className: "tw-basis-[60%] ",
bgColor: "tw-bg-gradient-to-b tw-from-[#FEE4DF] tw-to-[#FDCCBC]",
Expand All @@ -256,12 +245,10 @@ export default {
.swiper-slide-active .title {
@apply tw-block tw-animate-fadeIn tw-delay-500;
}
.swiper-slide-active div {
@apply tw-scale-[1];
}
.section .blog:not(.blog) {
@apply tw-container;
}
.content:hover .overlay {
@apply tw-h-full;
}
</style>
Loading

0 comments on commit 88495ad

Please sign in to comment.