Skip to main content

Footer

A footer is a section of a webpage that typically appears at the bottom of the page and contains information about the website, such as copyright notices, contact information, and links to relevant pages or sections.

In addition to providing important information to users, the footer can also help to enhance the user experience by providing additional navigation options or quick access to commonly used features.

The default Technotic Footer

To call technotic's footer:

import { Footer } from "technotic";

<Footer/>

Color​

You can customize the color of the footer according to individual preferences

<Footer bgColor="darkSlateBlue"/>

Font Color​

Apart from the footer color, you have the option to customize the color of the font text

<Footer fontColor="yellow"/>

You have the flexibility to modify the title, description and copyright of the website as per your preferences.

<Footer
    title={<img src="image.png" alt="logo" />}
    description="Established in 1989, Bina Nusantara Computer Club (BNCC) is the oldest computer-based organization at BINUS University. We are a close-knit family of exceptional individuals who are passionately into technology and a commitment to professionalism."
    copyrightText="Copyright © 2023 Bina Nusantara Computer Club. All rights reserved."
/>

You have the flexibility to modify the footer links title of the website as per your preferences.

<Footer
    navLinksTitle1="Explore"
    navLinks1={[
        { text: "History", href: "/" },
        { text: "About Us", href: "/" },
        { text: "Structure", href: "/" },
    ]}
    navLinksTitle2="Products"
    navLinks2={[
        { text: "Filemagz", href: "/" },
        { text: "FAVE Solution", href: "/" },
        { text: "Learning & Training", href: "/" },
    ]}
    navLinksTitle3="Work with us"
    navLinks3={[{ text: "Contact Us", href: "/" }]}
/>

Social Media​

You can enhance the footer by adding social media integration. The available social media platforms include Facebook, Instagram, Twitter, LinkedIn, and YouTube.

Note: The icons will be displayed by default when the corresponding social media links are provided.

<Footer
    socialMedia={{
        facebook: {
        username: "Facebook",
        url: "https://www.facebook.com",
        },
        instagram: {
        username: "Instagram",
        url: "https://www.instagram.com",
        },
        linkedin: {
        username: "LinkedIn",
        url: "https://www.linkedin.com",
        },
    }}
/>

This is how a comprehensive footer with customizable options looks like

<Footer
    title={<img src="image.png" alt="logo" />}
    description="Established in 1989, Bina Nusantara Computer Club (BNCC) is the oldest computer-based organization at BINUS University. We are a close-knit family of exceptional individuals who are passionately into technology and a commitment to professionalism."
    copyrightText="Copyright © 2023 Bina Nusantara Computer Club. All rights reserved."
    socialMedia={{
        facebook: {
        username: "Facebook",
        url: "https://www.facebook.com",
        },
        instagram: {
        username: "Instagram",
        url: "https://www.instagram.com",
        },
        linkedin: {
        username: "LinkedIn",
        url: "https://www.linkedin.com",
        },
    }}
    navLinksTitle1="Explore"
    navLinks1={[
        { text: "History", href: "/" },
        { text: "About Us", href: "/" },
        { text: "Structure", href: "/" },
    ]}
    navLinksTitle2="Products"
    navLinks2={[
        { text: "Filemagz", href: "/" },
        { text: "FAVE Solution", href: "/" },
        { text: "Learning & Training", href: "/" },
    ]}
    navLinksTitle3="Work with us"
    navLinks3={[{ text: "Contact Us", href: "/" }]}
/>