Aplio
NextJs
Footer

Footer

To customize the footer sections, please follow these steps:

  1. Open the data/footer.js file in your project.
  2. Locate the const FooterData object within the file.
  3. Inside the FooterData object, you will find various parameters that you can edit to customize the footer. Here are the parameters for various footer sections you can modify:

Footer Logo

To add a footer logo, you can modify the logo and logo in dark mode value in the FooterData object in the data/footer.js file. Here's the code snippet you can update:

logo: "/images/footer-logo.svg",
logoDark: "/images/logo-light.svg",

Replace "/images/footer-logo.svg" and /images/logo-light.svg with the path to your desired footer logo image. Make sure to provide the correct path to the image file.

Footer Description

To add a short description to the footer, you can edit the footerText value in the FooterDatas object in the data/footer.js file. Here's the code snippet you can update:

footerText: "Turpis tortor nunc sed amet et faucibus vitae morbi congue sed id mauris.",

Replace the existing text with your desired short description.

Copyright

To add the copyright information to the footer, you can modify the copyright value as follows:

copyright: `Copyright © ${new Date().getFullYear()} Your Company Name. All rights reserved.`,

Replace "Your Company Name" with the actual name of your company or organization. This will dynamically display the current year using new Date().getFullYear().

Remember to make this modification in the FooterDatas object located in the data/footer.js file.

Email

To add a short description to the footer, you can edit the email value in the FooterDatas object in the data/footer.js file. Here's the code snippet you can update:

 email: "info@example.com"

Replace the existing text with your desired short description.

Phone Number

To add a short description to the footer, you can edit the phone value in the FooterDatas object in the data/footer.js file. Here's the code snippet you can update:

  phone: "+3 230 705 5448"

Replace the existing text with your desired short description.

Quick Links

To add site links to the footer, you can modify the expolre and resources array in the FooterDatas object as follows:

expolre: [
  {
    id: 1,
    name: "About",
    link: "/about",
  },
  {
    id: 2,
    name: "Services",
    link: "/services",
  },
  {
    id: 3,
    name: "Career",
    link: "/career",
  },
  {
    id: 4,
    name: "Payment",
    link: "/home-2",
  },
  {
    id: 5,
    name: "Pricing",
    link: "/price",
  },
  {
    id: 6,
    name: "Faq's",
    link: "/faq",
  },
  {
    id: 7,
    name: "Testimonials",
    link: "/testimonial",
  },
],
  resources: [
  {
    id: 1,
    name: "Banking",
    link: "/home-3",
  },
  {
    id: 2,
    name: "Team",
    link: "/teams",
  },
  {
    id: 3,
    name: "Integration",
    link: "/integration",
  },
  {
    id: 4,
    name: "Blog",
    link: "/blog",
  },
  {
    id: 5,
    name: "Log In",
    link: "/login",
  },
  {
    id: 6,
    name: "Sign Up",
    link: "/signup",
  },
  {
    id: 7,
    name: "404",
    link: "/not-found",
  },
],

In this example, four site links are added for "Services", "Career", "Blogs", and "Contact Us". Each link is represented by an object with an id for identification, a name for the link label, and a link specifying the URL.

Make sure to update these values in the data/footer.js file within the FooterDatas object. You can add more site links following the same pattern by appending additional objects to the companyLinks array.

Add More Quick Links

To add more company links to the footer, you can simply append additional objects to the explore and resources array in the FooterDatas object. Each object represents a company link and should have the following structure:

{
  id: [unique identifier],
  name: [link label],
  link: [URL]
}

Here's an example of adding two additional links:

explore: [
  {
    id: 1,
    name: "Services",
    link: "/services",
  },
  {
    id: 2,
    name: "Career",
    link: "/career",
  },
  {
    id: 3,
    name: "Blogs",
    link: "/blog",
  },
  {
    id: 4,
    name: "Contact Us",
    link: "/contact",
  },
  {
    id: 5,
    name: "About Us",
    link: "/about",
  },
  {
    id: 6,
    name: "FAQ",
    link: "/faq",
  }
],

In this example, two additional links for "About Us" and "FAQ" are added. You can continue this pattern to add more links by appending objects with unique identifiers, link labels, and URLs to the explore and resources array.

Feel free to modify the existing objects or add new objects to include the desired company addresses in the footer.

Social Links

At first, import social logos from svgImages.js file. Then, add social media links to the footer. To do this, you have to modify the socialLinks array in the FooterDatas object in the data/footer.js file as follows:

socialLinks: [
    {
      id: 1,
      name: <Facebook />,
      link: "#",
    },
    {
      id: 2,
      name: <Github />,
      link: "#",
    },
    {
      id: 3,
      name: <LinkedIn />,
      link: "#",
    },
    {
      id: 4,
      name: <Behance />,
      link: "#",
    },
  ],

Replace link with the appropriate URLs for your Facebook, Github, and LinkedIn pages. You can also add more objects to the socialLinks array to include additional social media links.