Skip to content

Commit

Permalink
Fix runtime error
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-jagruti-a
cp-jagruti-a committed Nov 24, 2023
1 parent a71e649 commit 54eae22
Showing 1 changed file with 144 additions and 86 deletions.
230 changes: 144 additions & 86 deletions nuxt-frontend/components/partials/NewFooter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,157 @@
<template>
<div class="relative px-0 font-inter-medium z-[1]">
<img
:src="bg"
class="absolute top-[15px] sm:top-0 left-0 w-full h-full xl2:h-[unset] -z-[1] object-cover xl2:object-fill"
alt="canopas-contact-footer"
/>
<div class="container text-center">
<div class="mt-11 mb-8 md:mb-[60px]">
<div
class="mt-5 text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
>
Follow us on
<div class="container my-[14.063rem] mx-auto">
<div class="text-center">
<p class="header-text canopas-gradient-text">
<span class="underline-text">Find t</span>he career of your dreams
</p>
<div class="my-[30px] mx-[2%] md:my-[50px] md:mx-20 normal-text">
<div class="font-bold">
When was the last time you did something for the first time?
</div>
<div class="mt-12">
At Canopas, we frequently do new things that help you leave your
comfort zone. And when you leave your comfort zone, you will know what
you are capable of and you will never be the same again. If you
believe your work should have meaning and want to make an impact in
the world with your work, come join us.
</div>
<ul
class="flex flex-wrap justify-center w-full m-auto mt-2 xl:mt-6 cursor-pointer list-none"
</div>
</div>

<div v-if="careers == null" class="flex justify-center">
<img :src="loader" alt="loader-image" />
</div>
<div
v-else
class="rounded-[14px] border border-solid border-[#e2e2e2] overflow-hidden my-0 mx-[2%] mt-12 md:mx-[6%] normal-text"
>
<div
v-if="careers.length == 0"
class="text-center py-3.5 px-0 normal-text"
>
No matching jobs found
</div>
<div v-else class="flex flex-col">
<div
v-for="(career, index) in careers"
:key="career"
class="flex flex-col"
>
<li
v-for="icon in socialMediaIcons"
:key="icon"
class="flex justify-center !items-center w-10 h-10 md:w-[62px] md:h-[62px] !rounded-[50%] text-center cursor-pointer"
:class="icon.image ? 'm-[5px]' : 'gradient-border-btn border-0'"
<div
class="flex flex-row w-full items-center p-[30px] cursor-pointer md:py-8 md:px-12 lg:py-10 lg:px-12 normal-text"
@click="expandListItem(career.id, index)"
>
<nuxt-link
:to="icon.url"
target="_blank"
aria-label="footerLink"
@click.native="$mixpanel.track(icon.event)"
>
<div class="career-icon w-[50px] sm:w-[60px]">
<Icon
class="fab footer-icon w-5 h-5 md:w-8 md:h-8 box-content"
:name="icon.icon"
class="text-pink-300 icon text-[1.575rem] sm:text-[1.875rem]"
:name="career.icon_name"
/>
</nuxt-link>
</li>
</ul>
</div>
<div
class="mb-8 md:mb-9 text-[0.75rem] leading-[0.9375rem] md:text-[0.84375rem] md:leading-[1.03125rem] lg:text-[0.9375rem] lg:leading-[1.125rem] text-white/[.87]"
>
<Icon name="fa6-regular:copyright" class="box-content" />
{{ new Date().getFullYear() }} Canopas Software LLP. All rights
reserved.
</div>
<div class="not-italic font-bold text-black-900">
{{ career.title }}
</div>
<Icon
class="career-plus-icon ml-auto order-2 text-[#3d3d3dcc]"
:name="
openList && career.id == currentIndex
? 'fa6-solid:minus'
: 'fa6-solid:plus'
"
/>
</div>
<collapse-transition>
<div
ref="careerDetails"
class="overflow-hidden ease-out duration-300"
:key="career.summary"
:style="[
openList && career.id == currentIndex
? {
maxHeight: `1000px`,
}
: {
maxHeight: `0`,
},
]"
>
<div
class="p-[30px] text-[#3d3d3dcc] md:py-8 md:px-12 lg:py-10 lg:px-12 lg:leading-8"
>
{{ career.summary }}
</div>

<div
class="flex flex-row justify-center pt-0 pr-0 pb-[30px] pl-0 sm:justify-end sm:pt-0 sm:pr-5 sm:pb-[30px] sm:pl-5"
>
<nuxt-link
@click.native="$mixpanel.track('tap_read_more_job')"
class="flex items-center gradient-border-btn p-3"
:to="'/jobs/' + career.unique_id"
:aria-label="'Get more details about ' + career.title"
>
<Icon
class="fa text-pink-300 mr-[5px]"
name="fa6-solid:align-left"
flip="vertical"
/>
<span
class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
>Read More</span
>
</nuxt-link>

<nuxt-link
@click.native="$mixpanel.track('tap_apply_job')"
class="flex items-center m-[5px] gradient-btn p-3"
:to="'/jobs/apply/' + career.unique_id"
>
<Icon
class="fa"
name="fa6-solid:circle-check"
aria-hidden="true"
/>
<span
class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
>Apply Now</span
>
</nuxt-link>
</div>
</div>
</collapse-transition>
<div class="bg-[#e2e2e2] h-px" v-if="index <= careers.length"></div>
</div>
</div>
</div>
<svg width="0" height="0">
<linearGradient id="lgrad" x1="100%" y1="100%" x2="0%" y2="0%">
<stop offset="-24.42%" style="stop-color: #ff835b; stop-opacity: 1" />
<stop offset="101.76%" style="stop-color: #f2709c; stop-opacity: 1" />
</linearGradient>
</svg>
</div>
</template>

<script type="module">
import bg from "@/assets/images/footer/new-bg.svg";
import Config from "@/config.js";
<script setup>
import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
import loader from "@/assets/images/theme/loader.svg";
import { useJobListStore } from "@/stores/jobs";
const { $mixpanel } = useNuxtApp();
const currentIndex = ref(0);
const previousIndex = ref(0);
const openList = ref(true);
const store = useJobListStore();
const careers = computed(() => store.items);
const jobsError = computed(() => store.error);
await useAsyncData("jobs", () => store.loadJobs());
function expandListItem(id, index) {
if (previousIndex.value == id && openList.value) {
openList.value = false;
$mixpanel.track("tap_job_collapse_comp");
} else {
openList.value = true;
$mixpanel.track("tap_job_expand_comp");
}
export default {
data() {
return {
bg,
socialMediaIcons: [
{
url: Config.FACEBOOK_URL,
icon: "fa6-brands:facebook-f",
event: "tap_footer_facebook",
},
{
url: Config.INSTAGRAM_URL,
icon: "fa6-brands:instagram",
event: "tap_footer_instagram",
},
{
url: Config.TWITTER_URL,
icon: "fa6-brands:x-twitter",
event: "tap_footer_twitter",
},
{
url: Config.BLOG_URL,
icon: "fa6-brands:medium",
event: "tap_footer_medium",
},
{
url: Config.LINKEDIN_URL,
icon: "fa6-brands:linkedin-in",
event: "tap_footer_linkedin",
},
{
url: Config.YOUTUBE_URL,
icon: "fa6-brands:youtube",
event: "tap_footer_youtube",
},
],
};
},
inject: ["mixpanel"],
};
currentIndex.value = id;
previousIndex.value = currentIndex.value;
}
</script>

0 comments on commit 54eae22

Please sign in to comment.