Skip to content

Commit

Permalink
Unification in career page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-jagruti-a
cp-jagruti-a committed Feb 19, 2024
1 parent 66a5276 commit dba2f69
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 187 deletions.
131 changes: 64 additions & 67 deletions nuxt-frontend/components/home-new/ContributionSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,90 +16,87 @@
>
</div>
<div
class="flex flex-col border mt-2 lg:mt-0"
class="flex flex-col border mt-2 lg:mt-0 p-4 lg:p-6"
v-for="(contribution, index) in contributions"
:key="index"
>
<nuxt-link
:to="contribution.link"
target="_blank"
@click.native="$mixpanel.track('tap_home_github_contribution_section')"
class="flex-col p-4 lg:p-6"
class="flex-col"
>
<div class="mobile-header-3-semibold lg:desk-header-3 text-black-87">
<span
class="mobile-header-3-semibold lg:desk-header-3 text-black-87 bg-black-underline-out box-decoration-clone bg-no-repeat pb-[5px] bg-[length:100%] hover:animate-mulitpleUnderlineOut"
>
{{ contribution.title }}
</div>
</span></nuxt-link
>
<div class="mt-4 sub-h3-regular lg:mobile-header-2-regular text-black-60">
{{ contribution.description }}
</div>
<div class="mt-6" v-if="width > 991">
<div
class="mt-2 sub-h3-regular lg:mobile-header-2-regular text-black-60"
class="mt-1 inline-flex pr-1"
v-for="(tag, index) in contribution.tags"
:key="index"
>
{{ contribution.description }}
<div
class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
v-html="tag"
></div>
</div>
<div class="mt-6" v-if="width > 991">
</div>
<swiper
v-else
:slidesPerView="2"
:grid="{
rows: 2,
fill: 'row',
}"
:modules="modules"
:breakpoints="{
'768': {
slidesPerView: 4,
},
}"
class="swiper-container mt-4 pl-0"
>
<swiper-slide
v-for="(tag, index) in contribution.tags"
:key="index"
class="cursor-pointer !mr-1 !w-auto pb-1"
>
<div
class="mt-1 inline-flex pr-1"
v-for="(tag, index) in contribution.tags"
:key="index"
class="bg-white-smoke inline-flex rounded-[1.875rem] py-1 px-4 sub-h3-regular text-black-4 whitespace-nowrap"
v-html="tag"
></div></swiper-slide
></swiper>
<div class="flex gap-4 mt-4 lg:mt-6">
<div class="flex items-center">
<Icon
class="fab footer-icon h-[1.625rem] w-[1.625rem] pr-[0.313rem]"
name="fa6-solid:star"
/>
<span
class="v2-canopas-gradient-text mt-0.5 sub-h3-semibold lg:mobile-header-3-semibold"
>{{ contribution.stars }}</span
>
<div
class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
v-html="tag"
></div>
</div>
</div>
<swiper
v-else
:slidesPerView="2"
:grid="{
rows: 2,
fill: 'row',
}"
:modules="modules"
:breakpoints="{
'768': {
slidesPerView: 4,
},
}"
class="swiper-container mt-4 pl-0"
>
<swiper-slide
v-for="(tag, index) in contribution.tags"
:key="index"
class="cursor-pointer !mr-1 !w-auto pb-1"
<div class="flex items-center gap-0.5 text-black-87">
<span> <Icon class="fa h-5 w-5" name="fa6-solid:code-fork" /></span
><span class="sub-h3-semibold lg:mobile-header-3-semibold">{{
contribution.forks
}}</span>
</div>
<div class="flex items-center gap-2">
<span class="h-4 w-4 rounded-full" :class="contribution.color"></span
><span
class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
>{{ contribution.language }}</span
>
<div
class="bg-white-smoke inline-flex rounded-[1.875rem] py-1 px-4 sub-h3-regular text-black-4 whitespace-nowrap"
v-html="tag"
></div></swiper-slide
></swiper>
<div class="flex gap-4 mt-4 lg:mt-6">
<div class="flex items-center">
<Icon
class="fab footer-icon h-[1.625rem] w-[1.625rem] pr-[0.313rem]"
name="fa6-solid:star"
/>
<span
class="v2-canopas-gradient-text mt-0.5 sub-h3-semibold lg:mobile-header-3-semibold"
>{{ contribution.stars }}</span
>
</div>
<div class="flex items-center gap-0.5 text-black-87">
<span> <Icon class="fa h-5 w-5" name="fa6-solid:code-fork" /></span
><span class="sub-h3-semibold lg:mobile-header-3-semibold">{{
contribution.forks
}}</span>
</div>
<div class="flex items-center gap-2">
<span
class="h-4 w-4 rounded-full"
:class="contribution.color"
></span
><span
class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
>{{ contribution.language }}</span
>
</div>
</div>
</nuxt-link>
</div>
</div>
</section>
</template>
Expand Down
65 changes: 31 additions & 34 deletions nuxt-frontend/components/jobs/CareerView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
<template>
<div class="container my-[14.063rem] mx-auto">
<div class="container mt-16 lg:my-60 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>
<div class="mobile-header-2 lg:desk-header-2 text-primary-1">
Find the career of your dreams
</div>
<div
class="mt-4 lg:mt-6 sub-h1-semibold lg:mobile-header-2-semibold text-black-60"
>
When was the last time you did something for the first time?
</div>
<div
class="mt-4 lg:mt-6 sub-h1-regular lg:mobile-header-2-regular text-black-60"
>
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>
</div>

Expand All @@ -23,7 +25,7 @@
</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"
class="rounded-2xl border overflow-hidden my-0 mx-[2%] mt-8 lg:mt-[4.5rem] md:mx-[6%]"
>
<div
v-if="careers.length == 0"
Expand All @@ -38,20 +40,17 @@
class="flex flex-col"
>
<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"
class="flex flex-row gap-4 items-center justify-center w-full items-center px-4 lg:px-10 py-6 lg:py-8 cursor-pointer"
@click="expandListItem(career.id, index)"
>
<div class="career-icon w-[50px] sm:w-[60px]">
<Icon
class="text-pink-300 icon text-[1.575rem] sm:text-[1.875rem]"
:name="career.icon_name"
/>
</div>
<div class="not-italic font-bold text-black-900">
<Icon class="text-pink-300 icon w-6 h-6" :name="career.icon_name" />
<div
class="sub-h1-semibold lg:mobile-header-2-semibold text-black-87"
>
{{ career.title }}
</div>
<Icon
class="career-plus-icon ml-auto order-2 text-[#3d3d3dcc]"
class="career-plus-icon ml-auto order-2 text-gray-40"
:name="
openList && career.id == currentIndex
? 'fa6-solid:minus'
Expand All @@ -75,43 +74,41 @@
]"
>
<div
class="p-[30px] text-[#3d3d3dcc] md:py-8 md:px-12 lg:py-10 lg:px-12 lg:leading-8"
class="sub-h3-regular lg:mobile-header-3-regular text-black-60 px-4 lg:px-10 pb-6 lg:pb-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"
class="flex flex-row justify-center pb-6 px-4 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"
class="flex items-center gradient-border-btn primary-btn mx-0"
:to="'/jobs/' + career.unique_id"
:aria-label="'Get more details about ' + career.title"
>
<Icon
class="fa text-pink-300 mr-[5px]"
class="fa text-black-60 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]"
<span class="sub-h3-semibold lg:sub-h1-semibold text-black-60"
>Read More</span
>
</nuxt-link>

<nuxt-link
@click.native="$mixpanel.track('tap_apply_job')"
class="flex items-center m-[5px] gradient-btn p-3"
class="flex items-center m-[5px] gradient-btn primary-btn"
: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]"
<span class="sub-h3-semibold lg:sub-h1-semibold"
>Apply Now</span
>
</nuxt-link>
Expand Down
9 changes: 3 additions & 6 deletions nuxt-frontend/components/jobs/FaqSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<template>
<div class="container mb-40">
<div class="container mt-16 lg:mt-60 mb-40">
<div
class="row flex flex-col md:flex-row gap-4 my-0 mx-[2%] md:my-0 md:mx-[6%] md:-ml-8"
>
<div
class="text-center header-text canopas-gradient-text title-mobile block md:hidden mb-12"
class="text-center mobile-header-2 text-black-87 md:hidden mb-12"
>
<span
class="underline-text underline-offset-[0.5rem] sm:underline-offset-[1rem]"
>Freq</span
>uently Asked Questions
Frequently Asked Questions
</div>
<div
class="flex-[33%] image py-0 px-[20%] md:py-0 md:px-0 md:translate-y-60 lg:translate-y-80 xl:translate-y-40 animate__animated"
Expand Down
14 changes: 7 additions & 7 deletions nuxt-frontend/components/jobs/LandingView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<template>
<div
class="text-center container max-w-[687px] mt-[1.875rem] mb-[14.063rem] mx-auto py-0 px-5 sm:px-[6.25rem] lg:px-0"
>
<div class="header-2-text mt-12 animate__animated animate__fadeInDown">
<div class="text-center container mt-8 lg:mt-[7.5rem] mb-16 lg:mb-60 mx-auto">
<div
class="xl:w-[89%] 2xl:w-4/5 xl:mx-auto mobile-header-1 lg:desk-header-2 text-black-87 animate__animated animate__fadeInDown"
>
<h1>
Are you looking for a job where you can leverage your knowledge and
experience to build digital products that will be used by millions of
customers?
</h1>
</div>
<div
class="normal-text my-8 lg:my-12 animate__animated animate__fadeInLeft"
class="xl:w-[71%] 2xl:w-[65%] xl:mx-auto sub-h1-regular lg:mobile-header-2-regular text-black-60 mt-4 lg:mt-6 animate__animated animate__fadeInLeft"
>
You've come to the right place. We're looking for an AVENGER who can join
our existing team of AVENGERS.
</div>
<button
class="gradient-btn rounded-[15px] sm:m-auto p-3 normal-text animate__animated animate__fadeInUp"
class="mt-6 lg:mt-10 gradient-btn primary-btn"
@click="$emit('scroll-to-career')"
@click.native="$mixpanel.track('tap_see_all_positions')"
>
<span>SEE ALL POSITIONS</span>
<span class="sub-h3-semibold lg:sub-h1-semibold">SEE ALL POSITIONS</span>
</button>
</div>
</template>
Expand Down
18 changes: 9 additions & 9 deletions nuxt-frontend/components/jobs/LifeAtCanopas.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div>
<div
class="container normal-text px-5 pt-[3.125rem] pb-[1.875rem] md:px-[3.125rem] md:pt-[6.25rem] md:pb-[3.125rem] lg:pt-[14.063rem] text-center"
>
<div class="header-text canopas-gradient-text">
<span class="underline-text">Life a</span>t Canopas
<div class="container mt-16 lg:mt-60 text-center">
<div class="mobile-header-2 lg:desk-header-2 text-primary-1">
Life at Canopas
</div>
<div class="description mx-auto my-[30px] md:my-[50px]">
<div
class="xl:w-[90%] 2xl:w-[77%] xl:mx-auto sub-h1-regular lg:mobile-header-2-regular text-black-60 mt-4 lg:mt-6 mb-8 lg:mb-[4.5rem]"
>
We wanted to create an environment that helps you get out of bed in the
morning and an office that creates excellent work and encourages fun. As
we play the infinite game, it is not about winning or losing, it's about
Expand Down Expand Up @@ -43,7 +43,7 @@
<swiper-slide v-for="(slider, index) in slides" :key="index">
<aspect-ratio
height="66%"
class="mb-[80px] border-solid border-transparent border"
class="mb-20 border-solid border-transparent border"
>
<img
@click.native="$mixpanel.track('click_life_photo')"
Expand Down Expand Up @@ -109,10 +109,10 @@ export default {
@import "swiper/css/pagination";
.swiper-pagination-bullet {
@apply !w-[15px] !h-[15px] !rounded-[3px] !bg-transparent !border !border-solid !border-[#3d3d3d];
@apply !w-[0.938rem] !h-[0.938rem] !rounded-[3px] !bg-transparent !border !border-solid !border-black-80;
}
.swiper-pagination-bullet-active {
@apply !border-none !from-[#F69259] !to-[#F16975] !bg-gradient-[45deg];
@apply !border-none !from-orange-300 !to-pink-300 !bg-gradient-[45deg];
}
</style>
Loading

0 comments on commit dba2f69

Please sign in to comment.