Career Page

Career Page Hero

To customize the data in the Hero section, you can modify the following properties in the components\Shared\PageHero.vue file in the pages\career\index.vue and customize the following data:

<PageHero
  subtitle="CAREER PAGE"
  title="Become a part of the <br/> aplio team"
/>

Career Details

To configure the Banking Details section, you need to make changes in the pages\career\[slug].vue file..And Change the following data on Nuxt-content:

<section class="mb-150 relative">
      <div class="container relative z-10">
        <div
          class="absolute left-1/2 top-20 -translate-x-1/2 -translate-y-1/2 flex max-md:flex-col -z-10 max-md:hidden"
        >
          <div
            class="max-1xl:w-[335px] max-1xl:h-[335px] 1xl:w-[442px] 1xl:h-[442px] rounded-full bg-primary-200/20 blur-[145px]"
          ></div>
          <div
            class="max-1xl:w-[335px] max-1xl:h-[335px] 1xl:w-[442px] 1xl:h-[442px] rounded-full bg-primary-200/25 -ml-[170px] max-md:ml-0 blur-[145px]"
          ></div>
          <div
            class="max-1xl:w-[335px] max-1xl:h-[335px] 1xl:w-[442px] 1xl:h-[442px] rounded-full bg-primary-200/20 -ml-[170px] max-md:ml-0 blur-[145px]"
          ></div>
        </div>
        <div class="grid grid-cols-12 max-lg:gap-y-25 lg:gap-16">
          <div
            class="col-span-full max-lg:order-2 lg:col-span-8 singlePage relative"
          >
            <ContentRenderer :value="doc" />
          </div>
          <div
            class="col-span-full max-lg:order-1 lg:col-span-4 self-start relative"
          >
            <div
              class="bg-white dark:bg-dark-200 rounded-medium p-2.5 shadow-nav relative z-10"
            >
              <div
                class="bg-white dark:bg-dark-200 border border-dashed rounded border-gray-100 dark:border-borderColor-dark max-md:p-5 py-10 px-8"
              >
                <h3 class="mb-1">Job Overview</h3>
                <div
                  class="[&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-dashed [&>*:not(:last-child)]:border-borderColor dark:[&>*:not(:last-child)]:border-borderColor-dark"
                >
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Date Posted</h4>
                    <p>{{ doc.publishDate }}</p>
                  </div>
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Expiration date</h4>
                    <p>{{ doc.expirationDate }}</p>
                  </div>
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Location</h4>
                    <p>{{ doc.location }}</p>
                  </div>
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Offered Salary</h4>
                    <p>{{ doc.salary }} / week</p>
                  </div>
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Experience</h4>
                    <p>{{ doc.experience }} Years Experience</p>
                  </div>
                  <div class="py-5">
                    <h4 class="text-lg font-medium mb-2">Qualification</h4>
                    <p>{{ doc.qualification }}</p>
                  </div>
                </div>
                <div class="mb-12 mt-4">
                  <h3 class="mb-8">Job Skills</h3>
 
                  <div class="flex flex-wrap w-full gap-3">
                    <div v-for="skill in doc.skills" :key="skill">
                      <span
                        class="inline-block w-full items-center justify-between rounded-[60px] border border-borderColor px-5 py-2 font-medium text-paragraph-light dark:border-borderColor-dark"
                      >
                        {{ skill }}
                      </span>
                    </div>
                  </div>
                </div>
                <div>
                  <a href="#" class="btn w-full text-center"> Apply Now </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

Image - import CareerImage from "../public/images/about/career.png"; change the image path here to change the image.

Payment Features

To configure the Payment Features section, you need to make changes in the components/shared/PaymentFeatures.vue file and the content/career file. Here are the instructions:

Section Title:
- Locate the following code in the page/payment.vue file. Now import AboutFeaturesData from data/AboutFeaturesData.json.Then inside feature add the AboutFeaturesData to add features. Also ad sectionTag and sectionTitle like the following codes to update section title and tagline. You should also add spacing props value to add spacing:

      <div class="grid grid-cols-3 max-md:grid-cols-1 gap-8">
          <div
            class="bg-white dark:bg-dark-200 shadow-box rounded-medium p-2.5"
            v-for="feature in AboutFeaturesData"
            :key="feature.id"
          >
            <div
              class="border border-dashed rounded border-gray-100 dark:border-borderColor-dark p-10 max-lg:p-5 text-center h-full"
            >
              <NuxtImg
                sizes="100"
                :src="feature.iconLight"
                alt="value image"
                class="inline-block dark:hidden mb-6"
              />
              <NuxtImg
                sizes="100"
                :src="feature.iconDark"
                alt="value image"
                class="hidden dark:inline-block mb-6"
              />
              <h3 class="mb-2.5">{{ feature.title }}</h3>
              <p>
                {{ feature.desc }}
              </p>
            </div>
          </div>
        </div>

Update the section as you need.

Career list

All the career list data are generated from content/career folder. To create a career post on Aplio, you need to create a Markdown (.md) file inside the content/career folder. Each .md file will generate a new career post page, and a list of these files will be displayed on the career list page. By clicking on the title of a career or the "Read More" button, users can navigate to the respective career details page.

Here's how you can create your first career post:

Create a new file at content/career/marketing-lead.md.
Add the following front matter at the beginning of the file:

---
title: Marketing Lead
publishDate: December 20, 2023
expirationDate: January 20, 2024
shortDesc: The prevailing view asumed
jobType: Remote
location: New York
address: 2464 Royal Ln. Mesa, New Jersey 45463
salary: $170 - $200
experience: 4
qualification: Bachelor Degree
skills: ["App", "Design", "Support", "UI/UX", "Brand"]
---
 
## Job Description Lorem ipsum dolor sit amet consectetur. Nullam blandit dui
gravida aliquam enim eu. Adipiscing viverra vulputate curabitur est. Morbi lorem
proin morbi tempor risus. Nisl lobortis diam id faucibus pretium vitae
suspendisse sed accumsan. Sodales morbi tristique elit cursus gravida.
Ullamcorper commodo eget pulvinar pretium. Condimentum rhoncus commodo amet nec
auctor nibh vel mi blandit. Neque ultrices nunc condimentum morbi risus
tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna augue
adipiscing. ### The Work You’ll Do: Morbi lorem proin morbi tempor risus. Nisl
lobortis diam id faucibus pretium vitae suspendisse sed accumsan. Sodales morbi
tristique elit cursus gravida. Ullamcorper commodo eget pulvinar pretium.
Condimentum rhoncus commodo amet nec auctor nibh vel mi blandit. Neque ultrices
nunc condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in
rhoncus magna augue adipiscing. - Manage your time so you’ll get more done in
less time - Cut expenses without sacrificing quality - Attract and retain
quality, high-paying customers ### What you’ll bring: Neque ultrices nunc
condimentum morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in
rhoncus magna augue adipiscing. - Manage your time so you’ll get more done in
less time - Cut expenses without sacrificing quality - Attract and retain
quality, high-paying customers ### Benefits: Neque ultrices nunc condimentum
morbi risus tincidunt. Vel arcu lacus non ornare. Porttitor in rhoncus magna
augue adipiscing. - Manage your time so you’ll get more done in less time - Cut
expenses without sacrificing quality - Attract and retain quality, high-paying
customers

Save the file after adding your desired content.

Career List Page

The Career list page fetches data from the .md files located in the content/careerfolder. It displays a list of career posts based on these files. To add more career posts, create additional .md files following the same structure as described above.

The career list page will automatically retrieve the necessary details.

Services Page Blogs