Tarefa: Modernizar e Expandir um Rodapé HTML

[Malnati]

Instruções:
Você é um assistente de IA especializado em desenvolvimento web com foco em NestJS, Bootstrap e MDBootstrap. Sua tarefa é reestruturar um rodapé HTML estático de uma aplicação "white-label" para um formato moderno e dinâmico, baseado em MDBootstrap.

Regras estritas para esta tarefa:

1. Restrição de Arquivos: Modifique apenas os arquivos .html e .js do frontend.
2. Não Mudar a API: Nenhuma alteração deve ser feita nos arquivos do backend (API). O escopo é estritamente limitado à página index e ao formulário de configurações.
3. Uso de CDN: Mantenha o uso de bibliotecas via CDN (Content Delivery Network). Não inclua arquivos locais.
4. Lógica JavaScript: Crie um novo script em JavaScript para manipular dinamicamente o conteúdo do rodapé com base nos dados do formulário de configurações.

---

Seção 1: Código a Ser Melhorado (ANTES)

Considere o seguinte rodapé HTML como ponto de partida:

<footer class="text-center py-3 mt-5 border-top">
  <div id="footerCompanyName">Nome da Empresa</div>
  <div id="footerTitle">Título de Demonstração</div>
  <div id="footerDevelopedBy">Desenvolvido por Exemplo</div>
  <div id="footerCopyright">© 2024 Exemplo</div>
  <div id="footerRegistrationDate">Registrado em 01/01/2024</div>
</footer>

Seção 2: Código de Referência (DESIGN)

Este é o design de referência do MDBootstrap que deve ser adaptado:

<footer class="text-center text-lg-start bg-body-tertiary text-muted">
  <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
    <div class="me-5 d-none d-lg-block">
      <span>Get connected with us on social networks:</span>
    </div>
    <div>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-google"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-github"></i>
      </a>
    </div>
    </section>
  <section class="">
    <div class="container text-center text-md-start mt-5">
      <div class="row mt-3">
        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
          <h6 class="text-uppercase fw-bold mb-4">
            <i class="fas fa-gem me-3"></i>Company name
          </h6>
          <p>
            Here you can use rows and columns to organize your footer content. Lorem ipsum
            dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
          <h6 class="text-uppercase fw-bold mb-4">
            Products
          </h6>
          <p>
            <a href="#!" class="text-reset">Angular</a>
          </p>
          <p>
            <a href="#!" class="text-reset">React</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Vue</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Laravel</a>
          </p>
        </div>
        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
          <h6 class="text-uppercase fw-bold mb-4">
            Useful links
          </h6>
          <p>
            <a href="#!" class="text-reset">Pricing</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Settings</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Orders</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Help</a>
          </p>
        </div>
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
          <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
          <p>
            <i class="fas fa-envelope me-3"></i>
            info@example.com
          </p>
          <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
          <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
        </div>
        </div>
      </div>
  </section>
  <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
    © 2021 Copyright:
    <a class="text-reset fw-bold" href="[https://mdbootstrap.com/](https://mdbootstrap.com/)">MDBootstrap.com</a>
  </div>
  </footer>

Seção 3: Nova Implementação (DEPOIS)

Requisitos de Variáveis:

• {{companyName}}
• {{title}}
• {{developedBy}}
• © {{currentYear}} {{copyrightHolder}}
• {{registrationDate}}
• {{linkFacebook}}
• {{linkTwitter}}
• {{linkGoogle}}
• {{linkInstagram}}
• {{linkLinkedin}}
• {{linkGithub}}

Código HTML:

• Gere o código do novo rodapé MDBootstrap completo, substituindo o HTML antigo.
• O novo rodapé deve conter uma seção de mídias sociais e uma seção de informações da empresa, como no design de referência.
• Use os placeholders de variáveis ({{...}}) no lugar do conteúdo estático.

Código JavaScript:

• Gere o código JavaScript necessário para preencher esses placeholders com base em dados de um formulário de configurações.
• O script deve ser capaz de capturar os valores dos campos do formulário (que devem ter IDs correspondentes, como inputCompanyName, inputTitle, etc.) e injetá-los no HTML do rodapé.
• Adicione a lógica para preencher os links de redes sociais.
• Use o evento input em cada campo do formulário para atualizar o rodapé em tempo real.