Pengenalan

Mencipta semula halaman pendaratan moden yang menarik secara visual sentiasa menjadi cabaran yang menarik. Minggu ini, saya menumpukan pada membina replika halaman utama Interswitch menggunakan React dan TailwindCSS. Artikel ini menyediakan panduan teknikal proses, daripada persediaan projek hingga melaksanakan komponen dan penggayaan boleh guna semula. Begini cara saya mendekatinya:

Persediaan Projek dengan Vite

Vite telah menjadi alat pilihan saya untuk projek React kerana masa pembinaannya yang sangat pantas dan kesederhanaan. Proses persediaan yang terlibat:

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

Dengan pelayan pembangunan berjalan, saya sudah bersedia untuk memulakan pengekodan.

Komponen Penstrukturan

Memecahkan halaman utama kepada komponen boleh guna semula adalah penting untuk kebolehselenggaraan dan kebolehskalaan. Di bawah adalah beberapa komponen utama yang saya laksanakan.

Komponen 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;

Komponen Statistik

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;

Menggayakan dengan TailwindCSS

TailwindCSS menjadikan penggayaan komponen lancar. Dengan memanfaatkan kelas utiliti, saya boleh menumpukan pada fungsi tanpa menulis CSS tersuai. Contohnya, bahagian wira di bawah menggunakan utiliti kecerunan dan tipografi Tailwind untuk mencipta reka bentuk yang menarik perhatian.

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&apos;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;

Pengambilan Utama

1. Pengkomponenan: Pemecahan UI kepada komponen boleh guna semula memastikan kebolehselenggaraan yang lebih baik.

2. TailwindCSS: Pendekatan mengutamakan utiliti menjadikan penggayaan intuitif dan cekap.

3. Vite: Masa binaannya yang pantas meningkatkan pengalaman pembangunan.

Kesimpulan

Mencipta semula halaman utama Interswitch merupakan pengalaman yang bermanfaat yang mengukuhkan pemahaman saya tentang React dan TailwindCSS. Dengan memanfaatkan alatan moden dan amalan terbaik, saya membina halaman pendaratan yang boleh skala dan menarik secara visual. Jika anda sedang mengusahakan projek yang serupa atau mempunyai soalan, mari sambung dalam ulasan!

Atas ialah kandungan terperinci Mencipta semula Halaman Utama Interswitch dengan React dan TailwindCSS.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!