-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ffc3476
commit 05a2ec7
Showing
6 changed files
with
195 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+2.26 KB
nuxt-frontend/assets/images/backend-development/partnerwithus/maintanance.webp
Binary file not shown.
Binary file added
BIN
+2.47 KB
nuxt-frontend/assets/images/backend-development/partnerwithus/moneyback.webp
Binary file not shown.
Binary file not shown.
188 changes: 188 additions & 0 deletions
188
nuxt-frontend/components/backend-development/PartnerWithUsSection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| <template> | ||
| <section class="bg-[#121212] 3xl:outer-container"> | ||
| <div class="py-14 lg:py-[7.5rem] container text-white"> | ||
| <!-- ---------------------MOBILE UI START------------------ --> | ||
| <div class="flex flex-col gap-8 lg:hidden"> | ||
| <h2 class="header-1 text-center"> | ||
| Why should you partner with Canopas? | ||
| </h2> | ||
| <div class="flex flex-col gap-6" v-for="item in items" :key="item"> | ||
| <div class="flex gap-4"> | ||
| <img | ||
| :src="item.image" | ||
| class="w-9 h-9 object-contain" | ||
| :alt="item.title" | ||
| /> | ||
| <div class="flex flex-col gap-3"> | ||
| <span class="sub-h1-semibold">{{ item.title }}</span> | ||
| <span | ||
| class="sub-h3-regular text-white/[0.8]" | ||
| v-html="item.description" | ||
| ></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <nuxt-link | ||
| class="gradient-btn primary-btn mt-0" | ||
| to="/contact" | ||
| @click.native="$mixpanel.track('tap_backend_partner_with_us_cta')" | ||
| > | ||
| <span class="sub-h3-semibold">Let’s Work Together</span></nuxt-link | ||
| > | ||
| </div> | ||
| <!-- ---------------------MOBILE UI END-------------------- --> | ||
|
|
||
| <!-- ---------------------DESKTOP UI START------------------ --> | ||
| <div class="hidden lg:block stickyparent h-[150vh]"> | ||
| <div | ||
| class="sticky top-0 h-[125vh] xl:top-4 xl:h-[100vh] main" | ||
| > | ||
| <div | ||
| class="text-white/[0.12] !absolute !-translate-y-1/2 !top-1/2" | ||
| :class="{ | ||
| '!ease-in-out !flex flex-1': isAnimated, | ||
| }" | ||
| > | ||
| <div | ||
| class="flex-col my-auto opacity-100 transition-all delay-300 transform ease-in-out" | ||
| :class="{ '!flex !text-white': isAnimated }" | ||
| > | ||
| <span class="header-text">Why should you</span> | ||
| <span | ||
| class="block ml-2 transition-all delay-300 transform ease-in-out" | ||
| :class="[isAnimated ? '!header-text !ml-0' : 'text1']" | ||
| >partner | ||
| <span | ||
| class="hidden transition-all delay-300 transform ease-in-out" | ||
| :class="{ '!inline-block': isAnimated }" | ||
| >with</span | ||
| ></span | ||
| > | ||
| <div | ||
| class="flex ml-0 xl:ml-32 gap-6 transition-all delay-300 transform ease-in-out" | ||
| :class="{ '!ml-0': isAnimated }" | ||
| > | ||
| <span | ||
| class="my-auto -rotate-90 header-text transition-all delay-300 transform ease-in-out" | ||
| :class="{ '!hidden !rotate-0': isAnimated }" | ||
| >with</span | ||
| ><span | ||
| class="transition-all transform ease-in-out" | ||
| :class="[isAnimated ? '!header-text' : 'text1']" | ||
| >Canopas?</span | ||
| > | ||
| </div> | ||
| <nuxt-link | ||
| class="gradient-btn primary-btn ml-0 mt-10 animate-fadeIn" | ||
| :class="[!isAnimated ? 'hidden' : '']" | ||
| to="/contact" | ||
| @click.native=" | ||
| $mixpanel.track('tap_backend_partner_with_us_cta') | ||
| " | ||
| > | ||
| <span class="sub-h3-semibold" | ||
| >Let’s Work Together</span | ||
| ></nuxt-link | ||
| > | ||
| </div> | ||
| <nuxt-link | ||
| class="gradient-btn primary-btn mt-[5.69rem]" | ||
| :class="{ '!hidden': isAnimated }" | ||
| to="/contact" | ||
| @click.native="$mixpanel.track('tap_backend_partner_with_us_cta')" | ||
| > | ||
| <span class="sub-h3-semibold" | ||
| >Let’s Work Together</span | ||
| ></nuxt-link | ||
| > | ||
| </div> | ||
| <div | ||
| class="flex flex-col absolute w-[50%] left-1/2 -translate-y-1/2 top-1/2" | ||
| > | ||
| <div | ||
| v-for="(item, index) in items" | ||
| :key="item" | ||
| class="flex flex-col mb-10 item opacity-0" | ||
| :class="[isVisible ? `item-${index} !opacity-100` : 'hidden']" | ||
| > | ||
| <div class="flex gap-[1.69rem]"> | ||
| <img | ||
| :src="item.image" | ||
| class="w-14 h-14 object-contain" | ||
| :alt="item.title" | ||
| /> | ||
| <div class="flex flex-col gap-4"> | ||
| <span class="sub-h1-semibold">{{ item.title }}</span> | ||
| <span | ||
| class="sub-h3-regular text-white/[0.8]" | ||
| v-html="item.description" | ||
| ></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- ---------------------DESKTOP UI END-------------------- --> | ||
| </div> | ||
| </section> | ||
| </template> | ||
| <script setup> | ||
| import maintainance from "@/assets/images/backend-development/partnerwithus/maintanance.webp"; | ||
| import moneyback from "@/assets/images/backend-development/partnerwithus/moneyback.webp"; | ||
| import user from "@/assets/images/backend-development/partnerwithus/user.webp"; | ||
| const { $mixpanel } = useNuxtApp(); | ||
| const isAnimated = ref(false); | ||
| const isVisible = ref(false); | ||
| const items = [ | ||
| { | ||
| title: "Skin In The Game", | ||
| image: maintainance, | ||
| description: `To prove our skin in the game, we offer <span class="text-[#FF9472] sub-h3-semibold">6 Months of Free Post Deployment Maintenance</span> for all the work we do on your project. If any bugs arise in the project within 6 months of deployment, we'll do it for free. This approach ensures careful development, as neglect could result in significant expenses.`, | ||
| }, | ||
| { | ||
| title: "100% Risk Free Experience / Money Back Guarantee", | ||
| image: moneyback, | ||
| description: `To walk the talk, we offer a <span class="text-[#FF9472] sub-h3-semibold">100% Money Back Guarantee for two weeks of work at any time during our engagement</span>. If you work with us, you will get a feedback survey every Monday. If you ain't happy with the work we did in the past week, get your money back.`, | ||
| }, | ||
| { | ||
| title: "Achieving Excellence - One step at a time", | ||
| image: user, | ||
| description: `Whether your goal is user growth, user engagement, revenue growth, user satisfaction, improved user experience, unforgettable branding, customer loyalty, or all of them, we know how to achieve it, one step at a time!`, | ||
| }, | ||
| ]; | ||
| onMounted(() => { | ||
| window.addEventListener("scroll", handleScroll); | ||
| }); | ||
| onUnmounted(() => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }); | ||
| function handleScroll() { | ||
| const stickyparent = document.querySelector(".stickyparent"); | ||
| const main = document.querySelector(".main"); | ||
| const stickyparenthead = stickyparent.getBoundingClientRect(); | ||
| if (stickyparenthead.top < 0) { | ||
| isAnimated.value = true; | ||
| isVisible.value = true; | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped lang="postcss"> | ||
| img { | ||
| animation: zoomIn 2s linear !important; | ||
| } | ||
| .item-0 { | ||
| animation: fadeInLeft 2s linear !important; | ||
| } | ||
| .item-1 { | ||
| animation: fadeInLeft 3s linear !important; | ||
| } | ||
| .item-2 { | ||
| animation: fadeInLeft 4s linear !important; | ||
| } | ||
| .text1 { | ||
| @apply text-[12.5rem] leading-[16.25rem] font-bold; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters