Footer

The Footer component is a reusable Angular component that serves as a footer for your application, complete with navigation links, a call-to-action, and social media integration.

Features

Dynamic Content: Displays configurable links, sections, and Discord invitation.
Branding Support: Showcases your app's name and tagline with a logo.
Interactive Links: Supports router links, external links, and custom actions.
Discord Integration: Includes an optional "Join us" button to link users to a Discord server.
Responsive Design: Adapts seamlessly to various screen sizes for optimal usability.
Powered by DevRocket: Includes branding for apps built with DevRocket.

Usage

Step 1: Import the Component

Add the FooterComponent to your Angular project by including it in your module or component imports array.

import { FooterComponent } from "src/app/components/footer/footer.component";
 
@Component({
  ...
  imports: [..., FooterComponent],
  ...
})

Step 2: Add the Template

Include the Footer component in your template:

<devrocket-footer></devrocket-footer>

Component Structure

HTML Template

The default structure includes:

Brand Section: Displays the app name, tagline, copyright, and a "Built with DevRocket" link.
Navigation Sections:
- Links: Provides quick access to key parts of the app or external resources.
- Discord Invitation: Includes an optional "Join us" button with a Discord logo that links to your server.
Flexible Design: Allows customization through the footerData array for links and sections.

Example Template

<footer
  class="grid justify-content-between py-6 pt-4 md:py-8 mx-0 md:px-6 xl:px-8 surface-50"
>
  <div
    class="flex flex-column col-12 md:col-3 text-center md:text-left align-items-center md:align-items-start"
  >
    <a
      class="text-700 no-underline cursor-pointer letter-spacing-neg-04 text-lg md:text-2xl font-medium white-space-nowrap"
      [href]="homeLink"
    >
      <lucide-angular
        [img]="icon"
        class="mr-1 text-primary"
        [size]="18"
        color="#dd0031"
      ></lucide-angular>
      {{ config.appName }}
    </a>
    <p class="inline-block mb-0 mt-2 text-xs text-600">
      Your first internet dollar starts here
    </p>
    <p class="inline-block mt-0 mb-2 text-xs text-600">
      Copyright © {{ currentYear }} - All rights reserved
    </p>
    <a
      href="https://devrocket.ai"
      class="text-color white-space-nowrap mt-2 no-underline text-sm built-with-btn px-2 py-1 cursor-pointer flex justify-content-center align-items-center"
    >
      Built with
      <lucide-angular
        [img]="icon"
        [size]="18"
        color="#dd0031"
        style="margin: 0 4px"
        class="icon"
      ></lucide-angular>
      DevRocket</a
    >
  </div>
  <div class="col-12 xl:col-7">
    <div class="grid text-center md:text-left">
      <ng-container *ngFor="let section of footerData">
        <div class="col-12 md:col-4 mt-4 md:mt-2">
          <h4
            *ngIf="section.title"
            class="font-medium text-base line-height-3 mb-3 text-400 mt-0"
          >
            {{ section.title }}
          </h4>
          <ng-container *ngFor="let link of section.links">
            <a
              *ngIf="link.routerLink"
              [routerLink]="link.routerLink"
              class="line-height-3 block cursor-pointer mb-2 text-700 no-underline text-sm"
              >{{ link.label }}</a
            >
            <a
              *ngIf="link.externalHref"
              [href]="link.externalHref"
              target="_blank"
              rel="noopener noreferrer"
              class="line-height-3 block cursor-pointer mb-2 text-700 no-underline text-sm"
              >{{ link.label }}</a
            >
            <span
              *ngIf="link.onClick"
              (click)="link.onClick()"
              class="line-height-3 block cursor-pointer mb-2 text-700 no-underline text-sm"
              >{{ link.label }}</span
            >
          </ng-container>
          <a
            *ngIf="section.discordLink"
            [href]="section.discordLink"
            target="_blank"
            class="cursor-pointer no-underline discord-btn inline-flex align-items-center"
          >
            <img src="./assets/icons/discord.svg" alt="Discord Logo" />
            Join us
          </a>
        </div>
      </ng-container>
    </div>
  </div>
</footer>

The FooterComponent includes an optional Discord button that links users to your server. This button is styled with a Discord logo and customizable text. You can enable it by adding a discordLink property to the footerData section.

Example

footerData: FooterSection[] = [
  {
    title: 'Links',
    links: [
      { label: 'Login', routerLink: '/login' },
      { label: 'Pricing', onClick: () => this.handleScroll('pricing') },
      { label: 'Support', externalHref: 'mailto:contact@mvp4ssas.com' },
      { label: 'Documentation', routerLink: '/docs' },
    ],
    discordLink: 'https://discord.gg/YourServerCode', // Add your Discord link here
  },
];

Notes

The Footer component is highly customizable, allowing you to define links, sections, and social media integrations.
The Discord button is optional and can be toggled by adding or removing the discordLink property in the footerData array.