Footer

There are two sections in Footer. One is Call to Action section and another is Foter Links. Both sections will be configured from components/Footer.jsx file.

Call to Action

To customize the data in the Call to Action section, you can modify the following properties in the components/Footer.jsx file:

Title: To change the Call to Action title, locate the following code and update the text within the <h2> tags:

<h2 className="mb-lg-6 mb-5">
  Have a project in mind? <br /> Let’s get to work.👋📫
</h2>

Links: If you want to change the URL or route the "Say Hello" button links to, modify the href attribute of the Link component. For example:

<Link
  href="/contact"
  className="btn btn-primary btn-lg me-sm-3 mb-4 mb-sm-0"
>
  <span className=" position-relative">
    Say Hello
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 15L15 5"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M6.875 5L15 5L15 13.125"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </span>
  <span className=" position-relative">
    Say Hello
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 15L15 5"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M6.875 5L15 5L15 13.125"
        stroke="white"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </span>
</Link>

Save the file after making the desired changes.

Footer Social Links

To add social links to the footer, you need to modify the components/Footer.jsx file and add the href links for your social addresses.

Here's an example of how you can modify the code to add social links:

<div className="footer-description">
  <ul className="list-unstyled">
    <li>
      <Link href="https://example.com/facebook">
        {/* SVG path for social icon */}
      </Link>
    </li>
    <li>
      <Link href="https://example.com/twitter">
        {/* SVG path for social icon */}
      </Link>
    </li>
    <li>
      <Link href="https://example.com/instagram">
          {/* SVG path for social icon */}
      </Link>
    </li>
    {/* Add more social links using the same pattern */}
  </ul>
</div>

Replace "https://example.com/facebook", "https://example.com/twitter", "https://example.com/instagram", and so on with the actual URLs of your social media profiles.

Make sure to update the SVG paths inside the <Link> tags to match the icons of the respective social media platforms.

By adding the appropriate URLs and SVG paths, you can customize the social links in the footer component.

Footer Links

To add footer links, please follow the steps below:

Step 1: Locate the components/Footer.jsx file.

Step 2: Find the following code within the file:

<div className="footer-widget">
  <ul className="list-unstyled">
    <li className="nav-item">
      <Link
        className="nav-link"
        href="/blog"
      >
        Blog
      </Link>
    </li>
  </ul>
</div>

Step 3: To change the name of the link, modify the text within the <Link> component. For example, let's change it to "About" instead of "blog":

<div className="footer-widget">
  <ul className="list-unstyled">
    <li className="nav-item">
      <Link
        className="nav-link"
        href="/blog"
      >
        About
      </Link>
    </li>
  </ul>
</div>

Step 4: To edit the href value and add a link, modify the href attribute within the <Link> component. Replace "/blog" with the desired URL. For instance, let's change it to "/about":

<div className="footer-widget">
  <ul className="list-unstyled">
    <li className="nav-item">
      <Link
        className="nav-link"
        href="/about"
      >
        About
      </Link>
    </li>
  </ul>
</div>

Step 5: Repeat these steps to add more links. Simply copy the entire <li> block and modify the text and href attribute for each additional link.

For example, to add a second link for "Contact" with a URL of "/contact":

<div className="footer-widget">
  <ul className="list-unstyled">
    <li className="nav-item">
      <Link
        className="nav-link"
        href="/about"
      >
        About
      </Link>
    </li>
    <li className="nav-item">
      <Link
        className="nav-link"
        href="/contact"
      >
        Contact
      </Link>
    </li>
  </ul>
</div>

Continue repeating these steps to add more links

Navbar Homepage