Recréation de la page d'accueil d'Interswitch avec React et TailwindCSS.

Introduction

Recréer une page de destination moderne et visuellement attrayante est toujours un défi passionnant. Cette semaine, je me suis concentré sur la création d'une réplique de la page d'accueil d'Interswitch à l'aide de React et TailwindCSS. Cet article fournit une présentation technique du processus, depuis la configuration du projet jusqu'à l'implémentation des composants et du style réutilisables. Voici comment je l'ai abordé :

Configuration du projet avec Vite

Vite est devenu mon outil de prédilection pour les projets React en raison de ses temps de construction ultra-rapides et de sa simplicité. Le processus de configuration impliqué :

npm create vite@latest interswitch-clone --template react
cd interswitch-clone
npm install

Une fois le serveur de développement en cours d'exécution, j'étais prêt à commencer à coder.

Composants structurants

Diviser la page d'accueil en composants réutilisables était essentiel pour la maintenabilité et l'évolutivité. Vous trouverez ci-dessous quelques composants clés que j'ai implémentés.

Composant NavBar

import { useState } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import { FiChevronDown } from "react-icons/fi";

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const navLinks = [
    { title: "About Us", hasDropdown: true },
    { title: "What We Do", hasDropdown: true },
    { title: "Financial Inclusion", hasDropdown: false },
    { title: "Corporate Responsibility", hasDropdown: false },
    { title: "News & Insights", hasDropdown: false },
  ];

export default Navbar;

Composant Statistiques

const Stats = () => {
  return (
    <div classname="bg-blue-50 py-12">
      <div classname="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div classname="flex flex-col gap-8">
          <div classname="flex flex-col md:flex-row items-start gap-8">
            <h2 classname="text-3xl md:text-4xl font-semibold text-gray-900 flex-1">
              Pushing the boundaries of innovation to deliver payment solutions that enable commerce across Africa
            </h2>
            <div classname="flex-1 flex flex-col gap-4">
              <p classname="text-xl text-gray-700">
                Bespoke payment solutions for your modern lifestyle, business collections, disbursements, and payment processing.
              </p>
              <button classname="bg-blue-950 text-white px-6 py-3 rounded-md hover:bg-blue-900 transition w-fit">
                Learn More
              </button>
            </div>
          </div>
export default Stats;




<p><strong>Style avec TailwindCSS</strong></p>

<p>TailwindCSS a rendu le style des composants transparent. En tirant parti des classes utilitaires, j'ai pu me concentrer sur les fonctionnalités sans écrire de CSS personnalisé. Par exemple, la section héros ci-dessous utilise les utilitaires de dégradé et de typographie de Tailwind pour créer un design accrocheur.<br>
</p>

<pre class="brush:php;toolbar:false">const Hero = () => {
  return (
    <div classname="text-blue-950 pt-6 relative">
      <div classname="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div classname="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 classname="text-2xl md:text-7xl mb-6 mt-16 font- text-blue-950">
              The Gateway To Africa's Payment Ecosystem
            </h1>
            <p classname="text-xl md:text-xl mb-8 text-black-200">
              We create and sustain a payment ecosystem that helps 
  commmerce evolve, businesses grow and individuals thrive.
            </p>
          </div>
       </div>
     </div>
  </div>


export default Hero;

Points clés à retenir

1. Componentisation : diviser l'interface utilisateur en composants réutilisables a assuré une meilleure maintenabilité.

2. TailwindCSS : l'approche axée sur l'utilitaire a rendu le style intuitif et efficace.

3. Vite : ses temps de construction rapides ont amélioré l'expérience de développement.

Conclusion

Recréer la page d'accueil d'Interswitch a été une expérience enrichissante qui a solidifié ma compréhension de React et TailwindCSS. En tirant parti des outils modernes et des meilleures pratiques, j'ai créé une page de destination évolutive et visuellement attrayante. Si vous travaillez sur un projet similaire ou si vous avez des questions, connectons-nous dans les commentaires !