Aplio
NuxtJs
Homepage

Customize Your Homepage

Customizing the homepage of Aplio is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the components folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the pages/index.vue folder. In this file, you will find all the necessary components for the homepage. Here is the code snippet:

Customize Sections

The majority of sections on the homepage are added through the components folder, and the data for these components is generated from the data/.json file.

In the components folder, you will find the individual components that make up the sections of the homepage. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, Client, Services, Counter, Vision, Solution, Integartion, Faq, Testimonial, HomeBlog , and HomeCta.

On the other hand, the data required for these components is stored in the data/json file. This file contains the necessary information, such as the content, images, or any other data relevant to each section. It is imported into the respective component files to provide the required data for rendering.

By modifying the data in the data/json file, you can customize the content and details of each section on the homepage. Similarly, if you need to make changes to the design or functionality of a specific section, you can locate and modify the corresponding component file in the components folder.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the components/Homepage-One/Hero.vue file:

  • Hero Tagline : To change the Hero title, locate the following code and update the text within the p tags:
<p className=" mb-8 font-medium uppercase">50k+ Trusted Businesses</p>
  • Title: To change the Hero title, locate the following code and update the text within the <h1> tags:
<h1 className="mb-12 max-md:mb-8">
  Make your
  <span className="font-playfair italic inline-block px-5 border-2 rounded-[88px] pt-0.5 pb-2.5 leading-none border-paragraph bg-[#D9D9D900] dark:border-[#F0F3EA]">
    Finance
  </span>
  more efficient.
</h1>
  • Description: To change the Hero description, find the following code and update the text within the <p> tags:
<p className="w-lg-75">
  Until recently, the prevailing view assumed lorem ipsum was born as a nonsense
  text. It&rsquo;s not Latin, though it looks like it
</p>
  • Images: Images ahs been imported from the public folder. To change the Hero images, you can replace the image files located in the specified paths (../public/images/hero/hero-circle.png and ../public/images/hero/hero-circle-dark.png). .
import heroCircleLight from "../public/images/hero/hero-circle.png"; import
heroCircleDark from "../public/images/hero/hero-circle-dark.png"; import
heroPolicyLight from "../public/images/hero/hero-policy.png"; import
heroPolicyDark from "../public/images/hero/hero-policy-dark.png"; import
heroRatingLight from "../public/images/hero/hero-rating.png"; import
heroRatingDark from "../public/images/hero/hero-rating-dark.png"; import
heroChartLight from "../public/images/hero/hero-chart.png"; import heroChartDark
from "../public/images/hero/hero-chart-dark.png";

Note: When making changes, ensure that the vue syntax is maintained and that the modifications are within the appropriate tags and attributes.

Clients

To configure the Client section, you need to make changes in the components/shared/Clients.vue file and the data/ClientData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/shared/Clients.vue file:
    <div class="text-center max-w-[550px] px-[10px] mx-auto max-lg:px-2.5">
     <h2 class="mb-10">The world's best companies trust aplio.</h2>
     <p class="text-light mb-15">
       Trusted by thousands of companies across 50+ countries
     </p>
   </div>
<Marquee />

  2. Client Images

    • Open the data/ClientData.json file.
    • Find the ClientData array and modify it to include the client images you want to display.
    • Each object in the ClientData array represents a client images for light and Dark version. You can add or remove objects as needed.
    • Update the imageLight and `imageDark property of each object with the path to the corresponding client image file.
    • Example
    [ { "id": 1, "imageLight": "/images/clients/group.svg", "imageDark":
"/images/clients/group-dark.svg" }, { "id": 2, "imageLight":
"/images/clients/infinity.svg", "imageDark":
"/images/clients/infinity-dark.svg" }, { "id": 3, "imageLight":
"/images/clients/artifact.svg", "imageDark":
"/images/clients/artifact-dark.svg" }, { "id": 4, "imageLight":
"/images/clients/caudile.svg", "imageDark":
"/images/clients/caudile-dark.svg" }, { "id": 5, "imageLight":
"/images/clients/axeptio.svg", "imageDark":
"/images/clients/axeptio-dark.svg" }, { "id": 6, "imageLight":
"/images/clients/mfinity.svg", "imageDark":
"/images/clients/mfinity-dark.svg" } ]
    • Replace /images/client/group.svg, /images/client/group-dark.svg, etc. with the paths to your client image files.

Services

To configure the service section, you need to make changes in the components/Shared/Services.vue file and the data/ServiceData.json file. Here are the instructions:

  1. service Cards:

    • Open the data/ServiceData.json file.
    • Find the ServiceData.json array and modify it to include the service items you want to display.
    • Each object in the ServiceData.json array represents a service item. You can add or remove objects as needed.
    • Update the properties of each object with the desired values for the service item.
    • Example:
[ { "id": 1, "slug": "investment-bank", "title": "Investment Banks", "excerpt":
"Until recently, the prevailing view asumed lorem ipsum was born as nonsense
text.", "iconLight": "/images/services/investment.svg", "iconDark":
"/images/services/investment-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ], "serviceQualifications": "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.",
"serviceQualificationsList": [ { "item": "It’s scalable and secure" }, { "item":
"Artificial Intelligence Feature" }, { "item": "Offline version available" } ]
}, { "id": 2, "slug": "sales", "title": "Sales & Trading", "excerpt": "Until
recently, the prevailing view asumed lorem ipsum was born as nonsense text.",
"iconLight": "/images/services/sales.svg", "iconDark":
"/images/services/sales-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ], "serviceQualifications": "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.",
"serviceQualificationsList": [ { "item": "It’s scalable and secure" }, { "item":
"Artificial Intelligence Feature" }, { "item": "Offline version available" } ]
}, { "id": 3, "slug": "mortage-loan", "title": "Mortgage Loans", "excerpt":
"Until recently, the prevailing view asumed lorem ipsum was born as nonsense
text.", "iconLight": "/images/services/loan.svg", "iconDark":
"/images/services/loan-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ], "serviceQualifications": "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.",
"serviceQualificationsList": [ { "item": "It’s scalable and secure" }, { "item":
"Artificial Intelligence Feature" }, { "item": "Offline version available" } ]
}, { "id": 4, "slug": "finance-analyse", "title": "Finance Analysis", "excerpt":
"Until recently, the prevailing view asumed lorem ipsum was born as nonsense
text.", "iconLight": "/images/services/finance.svg", "iconDark":
"/images/services/finance-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ] }, { "id": 5, "slug": "effeciency", "title":
"Increased Efficiency", "excerpt": "Until recently, the prevailing view asumed
lorem ipsum was born as nonsense text.", "iconLight":
"/images/services/effeciency.svg", "iconDark":
"/images/services/effeciency-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ], "serviceQualifications": "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.",
"serviceQualificationsList": [ { "item": "It’s scalable and secure" }, { "item":
"Artificial Intelligence Feature" }, { "item": "Offline version available" } ]
}, { "id": 6, "slug": "fund", "title": "Fundraising Advice", "excerpt": "Until
recently, the prevailing view asumed lorem ipsum was born as nonsense text.",
"iconLight": "/images/services/fund.svg", "iconDark":
"/images/services/fund-dark.svg", "featureImage":
"/images/services/service-single1.png", "videoLink":
"https://www.youtube.com/embed/YE7VzlLtp-4?si=XvNRN6ztByvZQzqh",
"serviceDetails": "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.", "serviceExpectation": "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.", "serviceExpectationList": [ { "item": "It’s
scalable and secure" }, { "item": "Artificial Intelligence Feature" }, { "item":
"Offline version available" } ], "serviceQualifications": "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.",
"serviceQualificationsList": [ { "item": "It’s scalable and secure" }, { "item":
"Artificial Intelligence Feature" }, { "item": "Offline version available" } ] }
] ;

Counter

To edit the counter options in the components/shared/Counter.vue file, you need to modify the counterData array in the data/CounterData.json file. Here are the steps:

  1. Open the data/CounterData.json file.
  2. Locate the CounterData.json array.
  3. Modify the objects in the counterData.json array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • number: The number to be displayed by the counter.
    • rightIcon: The rightIcon to be displayed beside the counter number.
    • text: The name or description of the counter item.
  5. Update the number and text properties with your desired values for each counter option. 6.Example:
[ { "id": 1, "number": "60", "rightIcon": "%", "text": "Project Completed" }, {
"id": 2, "number": "30", "rightIcon": "+", "text": "Team Members" }, { "id": 3,
"number": "40", "rightIcon": "K", "text": "Satisfied Clients" } ] ;
  1. Save the changes to the data/CounterData.json file.

After updating the counterData.json array, the counter options in the components/Shared/Counter.vue file will reflect the new values you provided.

Vision

To configure the Work Process section, you need to make changes in the components/HomepageOne/Vision.vue file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageOne/Vision.vue file:
<p className="section-tagline">Data Integrations</p>
 
<h2 className="mb-8">A strong vision is crucial for the analysis of wealth.</h2>
<p className="mb-11">
      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text nothing Before & After
      magazine.
    </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

    import visionImageOneLight from "@/public/images/vision/vision-image.png";
import visionImageOneDark from "@/public/images/vision/vision-image.png";
import visionImage2Light from "@/public/images/vision/vision-image-1.png";
import visionImage2Dark from
"@/public/images/vision/vision-image-dark-1.png"; import visionImage3Light
from "@/public/images/vision/vision-image-2.png"; import visionImage3Dark
from "@/public/images/vision/vision-image-dark-2.png";

Solution

To configure the Work Process section, you need to make changes in the components/home-1/Solution.vue file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/home-1/Solution.vue file:
<p className="section-tagline">Strong Solutions</p>
 
<h2 className="mb-8">Ensure strong solutions are available at all times</h2>
<p className="mb-11">
    Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not Latin
    though it looks like nothing.
  </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

    import solutionImage from "@/public/images/solution/solution.png"; import
solutionImageDark from "@/public/images/solution/solution-dark.png"; import
solutionImage1 from "@/public/images/solution/solution-shape1.png"; import
solutionImage1Dark from "@/public/images/solution/solution-shape1-dark.png";
import solutionImage2 from "@/public/images/solution/solution-shape2.png";
import solutionImage2Dark from
"@/public/images/solution/solution-shape2-dark.png"; import solution3Image
from "@/public/images/solution/solution-shape3.png"; import
solutionImage3Dark from "@/public/images/solution/solution-shape3-dark.png";

Integration

To configure the Work Process section, you need to make changes in the components/HomepageOne/Integration.vue file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageOne/Integration.vue file:
<p className="section-tagline">Top Integration</p>
 
<h2 className="mb-8">Make productivity easier with 50+ Integrations</h2>
<p className="mb-10">
    Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. It&rsquo;s not Latin
    though it looks like nothing.
  </p>
  • Update the section as you need.

  1. Images: Images has been imported from the public folder. You can change them by changining the image path

    <Image
  src="images/twitter.svg"
  alt="value image"
  className="inline-block"
  width="{40}"
  height="{40}"
/>

FAQ

To configure the Work Process section, you need to make changes in the components/HomepageOne/Faq.vue file and the data/FAQData.json file. Here are the instructions:

  1. Section Title:

    • Locate the following code in the components/HomepageOne/Faq.vue file:
<div>
  <p className="section-tagline">Faq&rsquo;s</p>
 
  <h2 className="mb-8">
    Frequently Asked <br />
    Question
  </h2>
  <p>
    Neque accumsan dolor nullam commodo. Odio massa nisi ullamcorper suspendisse
    amet amet. Aenean suspendisse eget est pulvinar. Fames eget eget nascetur
    ornare
  </p>
</div>
  1. FAQData: all the faq data are in the FaqData array in data/FAQData.json file. Update them to add Faq's
[ { "id": 1, "type": ["general", "changelog"], "open": true, "question": "What
is a business agency?", "answer": "Until recently, the prevailing view assumed
lorem ipsum was born as a nonsense text. “It's not Latin." }, { "id": 2, "type":
["general"], "open": true, "question": "What services does a business agency
provide?", "answer": "Until recently, the prevailing view assumed lorem ipsum
was born as a nonsense text. “It's not Latin." }, { "id": 3, "type": ["general",
"changelog"], "open": false, "question": "How often should I update my
website?", "answer": "Until recently, the prevailing view assumed lorem ipsum
was born as a nonsense text. “It's not Latin." }, { "id": 4, "type": ["general",
"terms"], "open": false, "question": "How do subscriptions work?", "answer":
"Until recently, the prevailing view assumed lorem ipsum was born as a nonsense
text. “It's not Latin." }, { "id": 5, "type": ["changelog", "terms"], "open":
false, "question": "What other services are you compatible with?", "answer":
"Until recently, the prevailing view assumed lorem ipsum was born as a nonsense
text. “It's not Latin." } ] ;

Note: Only general type faq will be shown in the home page

Testimonials

To configure the testimonials section in the component/shared/Testimonial.vue file, you need to update the TestimonialData array in the data/TestimonialList.json file. Here are the steps:

  1. Open the data/TestimonialList.json file.
  2. Locate the TestimonialData array.
  3. Modify the objects in the TestimonialData array to set the desired testimonials.
  4. Each object represents a testimonial with the following properties:
  • id: Unique identifier for the testimonial.
  • logoLight: Company logo for the light version.
  • logoDark: Company logo for the dark version.
  • author: The author of the testimonial.
  • designation: The designation of the author.
  • testimonial: The testimonial provided by the author.
  • rating: The rating given by the author.
  • image: The image of the testimonial provider.
  1. Update the properties with your desired values for each testimonial.
  2. Example:
` { "TestimonialData": [ { "id": 1, "logoLight":
"/images/testimonial/bodygroup.svg", "logoDark":
"/images/testimonial/bodygroup-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 4, "date":
"Feb 03, 2024", "author": { "name": "Robert Frost", "designation": "Lead
Developer", "image": "/images/testimonial/avatar1.png" } }, { "id": 2,
"logoLight": "/images/testimonial/caudile.svg", "logoDark":
"/images/testimonial/caudile-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 5, "date":
"Feb 04, 2024", "author": { "name": "Guy Hawkins", "designation": "Developer",
"image": "/images/testimonial/avatar2.png" } }, { "id": 3, "logoLight":
"/images/testimonial/axeptio.svg", "logoDark":
"/images/testimonial/axeptio-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 3, "date":
"Feb 12, 2024", "author": { "name": "Cody Fisher", "designation": "UI Designer",
"image": "/images/testimonial/avatar3.png" } }, { "id": 4, "logoLight":
"/images/testimonial/infinity.svg", "logoDark":
"/images/testimonial/infinity-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 2, "date":
"Feb 13, 2024", "author": { "name": "Albert Flores", "designation": "Sr.
Developer", "image": "/images/testimonial/avatar4.png" } }, { "id": 5,
"logoLight": "/images/testimonial/mfinity.svg", "logoDark":
"/images/testimonial/mfinity-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 1, "date":
"Feb 23, 2024", "author": { "name": "Floyed Miles", "designation": "Junior
Designer", "image": "/images/testimonial/avatar5.png" } }, { "id": 6,
"logoLight": "/images/testimonial/coolchat.svg", "logoDark":
"/images/testimonial/coolchat-dark.svg", "testimonial": "Until recently, the
prevailing view assumed lorem ipsum was born as a nonsense text. It's not Latin
though it looks like it, and it actually says nothing.", "rating": 5, "date":
"Feb 07, 2024", "author": { "name": "Bessie Cooper", "designation": "Manager",
"image": "/images/testimonial/avatar6.png" } } ] }
  1. Save the changes to the data/TestimonialList.json file.

After updating the TestimonialData array, the testimonials section in the component/Shared/Testimonial.vue file will reflect the new testimonial data you provided.

Home Blog

Data in this section is generated from blogs. Create blogs and the data will always be shown here. See more on this link (opens in a new tab).

Home Cta

To update the title of the Call to Action section in the components/HomepageOne/Cta.vue file, NOw modify the following data to updata CTA section. Here are the codes:

<div className=" text-center   mx-auto">
  <h2 className="mb-5 text-[48px] font-semibold">
    Start Your Free <br />
    Trial Today.
  </h2>
  <p className="mb-12 max-w-[400px] mx-auto">
    By creating a custom Web design for your business, we can bring your vision
    to life.
  </p>
  <link href="/contact" className="btn">
    Get Started Today
  </link>
  <ul className=" flex max-md:flex-col max-md:gap-5 items-center justify-between mt-20 max-w-[815px] mx-auto">
    <li className="flex items-center">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="mr-3"
      >
        <path
          d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
          stroke=""
          className="stroke-paragraph dark:stroke-primary"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      <p>No Credit Card Required</p>
    </li>
    <li className="flex items-center">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="mr-3"
      >
        <path
          d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
          stroke=""
          className="stroke-paragraph dark:stroke-primary"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      <p>Free For 30 Day Trial.</p>
    </li>
    <li className="flex items-center">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="mr-3"
      >
        <path
          d="M14.125 7.75L8.62497 13L5.875 10.375M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
          stroke=""
          className="stroke-paragraph dark:stroke-primary"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      <p>Money Back Guarente.</p>
    </li>
  </ul>
</div>
  1. Save the changes to the components/Shared/Cta.vue file.

Animation

The animation effects in this section are achieved using the @vueuse/motion animation library. If you want to modify the animation, follow the instructions below.

All the animation is added in the nuxt.config.ts file.

fadeUpAnimation: { initial: { y: 100, opacity: 0, }, enter: { y: 0, opacity: 1,
transition: { duration: 700, delay: 100, }, }, },
  • Finally, use it on the item where you want to add.
<div class="container" v-motion-fadeUpAnimation>
      <div class="max-w-[750px] mx-auto text-center">
        <p class="mb-4 font-medium uppercase">{{ subTitle }}</p>
        <h1 class="max-lg:mb-10 mb-10">
          {{ title }}
          <span v-if="!title"
            >Frequently asked <br />
            question</span
          >
        </h1>
        <p class="max-lg:mb-10 mb-12 max-w-[590px] mx-auto">
          {{ description }}
        </p>
      </div>
    </div>
AnimationHomepage V2