[Chore] Conception Footer

by ADMIN 27 views

Description de la Tâche

Créer un composant Footer standardisé pour l'application norug.fun qui sera affiché sur toutes les pages principales. Ce footer doit inclure les informations de copyright, les liens de navigation essentiels, les liens légaux, les liens vers les réseaux sociaux et potentiellement le logo et la tagline.

Objectifs

  • Créer un nouveau composant React pour le Footer (par exemple, components/layout/Footer.tsx).
  • Intégrer les éléments de contenu définis (logo, tagline, liens de navigation, liens légaux, icônes sociales, copyright).
  • Organiser la mise en page du footer (utilisation de colonnes sur écrans larges, barre inférieure distincte).
  • Styliser le composant en utilisant Tailwind CSS en respectant la charte graphique existante du projet.
  • Assurer la responsivité du footer sur différentes tailles d'écrans (mobile, tablette, desktop).
  • Intégrer le composant Footer dans le layout principal de l'application (app/[locale]/layout.tsx).

Contenu du Footer

Le footer devrait contenir approximativement les éléments suivants :

Section Principale

  • Logo: (Optionnel, si le design le permet) Logo norug.fun.
  • Tagline: (Optionnel) "The trenches, with a helmet on."
  • Colonne Navigation:
    • Lien vers "Proposer un Token" (/propose - ou chemin équivalent)
    • Lien vers "Voir les Propositions" (/proposals - ou chemin équivalent)
    • Lien vers "Comment ça marche ?" (/how-it-works - ou chemin équivalent)
  • Colonne Ressources:
    • Lien vers "Transparence" (/transparency - ou chemin équivalent)
    • Lien vers "Support" (Lien direct vers Discord / Telegram)
  • Colonne Légal:
    • Lien vers "Conditions d'Utilisation" (/terms)
    • Lien vers "Politique de Confidentialité" (/privacy)
  • Icônes Réseaux Sociaux:
    • Lien vers Twitter/X
    • Lien vers Discord / Telegram (ou les deux)

Barre Inférieure

  • Texte Copyright: " 2025 norug.fun. Tous droits réservés."

(Note: Les chemins d'URL sont indicatifs et devront être confirmés)

Contexte Supplémentaire

Le footer est un élément standard manquant actuellement dans l'application. Il améliorera la navigation, fournira un accès facile aux informations légales et renforcera la présence sur les réseaux sociaux. L'implémentation doit suivre les standards de développement du projet (React, TypeScript, Tailwind CSS, potentiellement Shadcn UI pour certains éléments si pertinent).

Liens Utiles

  • Fichier Layout Principal : front/app/[locale]/layout.tsx

Conception du Footer

Pour concevoir le footer, nous allons suivre les étapes suivantes :

Étape 1 : Création du Composant Footer

Nous allons créer un nouveau composant React pour le Footer, appelé Footer.tsx. Ce composant devra contenir les éléments de contenu définis, tels que le logo, la tagline, les liens de navigation, les liens légaux, les icônes sociales et le copyright.

// components/layout/Footer.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const Footer = () => {
  return (
    <footer className="bg-gray-100 py-4">
      <div className="container mx-auto px-4">
        <div className="flex flex-wrap justify-center">
          <div className="w-full md:w-1/2 xl:w-1/3 px-4">
            <h5 className="title-font font-medium text-gray-900 tracking-widest text-xs">
              Logo
            </h5>
            <p className="leading-relaxed">Logo norug.fun</p>
          </div>
          <div className="w-full md:w-1/2 xl:w-1/3 px-4">
            <h5 className="title-font font-medium text-gray-900 tracking-widest text-xs">
              Navigation
            </h5>
            <ul>
              <li>
                <Link to="/propose">Proposer un Token</Link>
              </li>
              <li>
                <Link to="/proposals">Voir les Propositions</Link>
              </li>
              <li>
                <Link to="/how-it-works">Comment ça marche ?</Link>
              </li>
            </ul>
          </div>
          <div className="w-full md:w-1/2 xl:w-1/3 px-4">
            <h5 className="title-font font-medium text-gray-900 tracking-widest text-xs">
              Ressources
            </h5>
            <ul>
              <li>
                <Link to="/transparency">Transparence</Link>
              </li>
              <li>
                <Link to="/support">Support</Link>
              </li>
            </ul>
          </div>
          <div className="w-full md:w-1/2 xl:w-1/3 px-4">
            <h5 className="title-font font-medium text-gray-900 tracking-widest text-xs">
              Légal
            </h5>
            <ul>
              <li>
                <Link to="/terms">Conditions d'Utilisation</Link>
              </li>
              <li>
                <Link to="/privacy">Politique de Confidentialité</Link>
              </li>
            </ul>
          </div>
          <div className="w-full md:w-1/2 xl:w-1/3 px-4">
            <h5 className="title-font font-medium text-gray-900 tracking-widest text-xs">
              Réseaux Sociaux
            </h5>
            <ul>
              <li>
                <a href="https://twitter.com/norugfun" target="_blank">
                  Twitter
                </a>
              </li>
              <li>
                <a href="https://discord.com/invite/norugfun" target="_blank">
                  Discord
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div className="bg-gray-200 py-4">
        <div className="container mx-auto px-4">
          <p className="text-center text-gray-500">
            2025 norug.fun. Tous droits réservés.
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

Étape 2 : Stylisation du Footer

Nous allons styliser le footer en utilisant Tailwind CSS en respectant la charte graphique existante du projet.

/* components/layout/Footer.css */
.footer {
  @apply bg-gray-100 py-4;
}

.footer .container {
  @apply mx-auto px-4;
}

.footer .flex {
  @apply flex flex-wrap justify-center;
}

.footer .w-full {
  @apply w-full md:w-1/2 xl:w-1/3 px-4;
}

.footer .title-font {
  @apply title-font font-medium text-gray-900 tracking-widest text-xs;
}

.footer .leading-relaxed {
  @apply leading-relaxed;
}

.footer .bg-gray-200 {
  @apply bg-gray-200 py-4;
}

.footer .text-center {
  @apply text-center;
}

.footer .text-gray-500 {
  @apply text-gray-500;
}

Étape 3 : Responsivité du Footer

Nous allons assurer la responsivité du footer sur différentes tailles d'écrans (mobile, tablette, desktop).

/* components/layout/Footer.css */
@media (max-width: 768px) {
  .footer .flex {
    @apply flex flex-col;
  }

  .footer .w-full {
    @apply w-full px-4;
  }
}

@media (max-width: 480px) {
  .footer .flex {
    @apply flex flex-col;
  }

  .footer .w-full {
    @apply w-full px-4;
  }
}

Étape 4 : Intégration du Footer

Nous allons intégrer le composant Footer dans le layout principal de l'application (app/[locale]/layout.tsx).

// app/[locale]/layout.tsx
import React from 'react';
import Footer from '../components/layout/Footer';

const Layout = () => {
  return (
    <div>
      <header>
        {/* Header content */}
      </header>
      <main>
        {/* Main content */}
      </main>
      <Footer />
    </div>
  );
};

export default Layout;

Conclusion

Dans cet article, nous avons conçu un footer standardisé pour l'application norug.fun. Nous avons créé un composant React pour le Footer, stylisé

Questions Fréquentes

Q1 : Qu'est-ce qu'un footer standardisé ?

R1 : Un footer standardisé est un composant qui contient les informations de base d'une application, telles que le logo, la tagline, les liens de navigation, les liens légaux, les icônes sociales et le copyright. Il est conçu pour être affiché sur toutes les pages principales de l'application.

Q2 : Pourquoi est-il important de créer un footer standardisé ?

R2 : Un footer standardisé est important car il améliore la navigation, fournit un accès facile aux informations légales et renforce la présence sur les réseaux sociaux. Cela aide également à créer une expérience utilisateur cohérente et uniforme à travers l'application.

Q3 : Quels sont les éléments clés d'un footer standardisé ?

R3 : Les éléments clés d'un footer standardisé incluent :

  • Logo
  • Tagline
  • Liens de navigation
  • Liens légaux
  • Icônes sociales
  • Copyright

Q4 : Comment créer un footer standardisé ?

R4 : Pour créer un footer standardisé, vous devez suivre les étapes suivantes :

  1. Créer un nouveau composant React pour le Footer.
  2. Intégrer les éléments de contenu définis (logo, tagline, liens de navigation, liens légaux, icônes sociales, copyright).
  3. Organiser la mise en page du footer (utilisation de colonnes sur écrans larges, barre inférieure distincte).
  4. Styliser le composant en utilisant Tailwind CSS en respectant la charte graphique existante du projet.
  5. Assurer la responsivité du footer sur différentes tailles d'écrans (mobile, tablette, desktop).
  6. Intégrer le composant Footer dans le layout principal de l'application.

Q5 : Comment styliser un footer standardisé ?

R5 : Pour styliser un footer standardisé, vous pouvez utiliser Tailwind CSS en respectant la charte graphique existante du projet. Vous pouvez également utiliser des classes CSS pour personnaliser l'apparence du footer.

Q6 : Comment assurer la responsivité d'un footer standardisé ?

R6 : Pour assurer la responsivité d'un footer standardisé, vous devez utiliser des classes CSS pour adapter la mise en page du footer aux différentes tailles d'écrans (mobile, tablette, desktop).

Q7 : Comment intégrer un footer standardisé dans le layout principal de l'application ?

R7 : Pour intégrer un footer standardisé dans le layout principal de l'application, vous devez importer le composant Footer dans le fichier layout principal de l'application.

Réponses aux Questions Fréquentes

Dans cet article, nous avons répondu à des questions fréquentes sur la conception d'un footer standardisé pour l'application norug.fun. Nous avons couvert les éléments clés d'un footer standardisé, les étapes pour créer un footer standardisé, la stylisation d'un footerisé, l'assurance de la responsivité d'un footer standardisé et l'intégration d'un footer standardisé dans le layout principal de l'application.

Conclusion

En suivant les étapes et les conseils présentés dans cet article, vous pouvez créer un footer standardisé pour votre application norug.fun. Un footer standardisé est un élément important pour améliorer la navigation, fournir un accès facile aux informations légales et renforcer la présence sur les réseaux sociaux.