Slicing Gym Landing Page with Vue 3 Part 5: Plan Section

Hello everyone, on this occasion I will share how to slicing gym landing page using vue 3. Previously I will use a design that has been made by my friend syamil. You can access the figma file here.

This is part 5 of the slicing gym landing page series with vue 3. In this part we will focus on the slicing component plan. If you haven’t read the previous chapter, you can read it first.

Slicing Plan Section

Create a Plan.vue file in components/plan , then call the created About component into App.vue .

Create a div with id plan and class plan-container to wrap our section.

<div id="plan" class="plan-container">
</div>

here we will create a div that will wrap the section plan. Add the following code to index.css

#plan.plan-container {
   @apply bg-Grayscale min-h-screen xl:px-[120px] pt-10 xl:pt-[120px] relative px-5;
}

Then we will focus on the top where there is writing

create a div tag with class plan-body-up

<div class="plan-body-up">
</div>

Don’t forget to index.css , don’t forget to add styling. to make the text right in the middle, I will use flex with justify-content center

#plan .plan-body-up {
   @apply flex flex-col justify-center align-middle items-center z-20;
}

Next we do the title first, create an h2 tag with class title-plan . And for gradient writing, we will wrap it with a span tag with the text-gradient class that we previously created.

<h2 class="title-plan">Choose Your Best <span class="text-gradient-primary font-bold z-10">Plan</span></h2>

and we adjust the styling according to figma

#plan .title-plan {
   @apply font-semibold text-4xl text-white z-10 text-center;
}

For the subtitles we will wrap it with the p tag with the subtitle-plan class.

<p class="subtitle-plan">
We created a special price list that we will give you. Each of these <br> price lists will provide additional features that will help support you <br> in getting the best performance in your healthy lifestyle
</p>

to make the styling add code:

#plan .title-plan {
   @apply font-semibold text-4xl text-white z-10 text-center;
}

The top section is finished

Now we will focus on the bottom section. make the div tag inline with <div class=”plan-body-up”> , give the div class plan-body-down .

<div class="plan-body-down">
</div>

Next we will create a dynamic data card, using ref

When viewed from the design, not all cards have the same design. the middle part has a gradient background and there is a kind of eclipse. We will first import eclipse from figma

import Eclipse from '@images/multicircle.png';

It’s time for us to code using v-for and conditional classes, if index+1 is even, then we will create a gradient class. Because we will use the even index function many times, I decided to create a function that we can use many times

const isOdd = (number) => {
   return number % 2 === 0 ? true : false;
}

Just a little more, namely the gradient on the side. add code

<div class="hidden xl:inline top-0 left-0 bg-gradient-to-tl box-gradient"></div>
<div class="hidden xl:inline bottom-0 right-0 bg-gradient-to-br box-gradient"></div>

FullCode

Demo

That’s enough for the slicing plan, the next part we will slicing Benefit section. Thank you