Building an Easybank Landing Page with React

Introduction

In this blog post, I’ll walk you through the development of a modern and visually appealing landing page for a fictional digital banking service, Easybank, using React. This project showcases essential React components and CSS styling to create a responsive and interactive user interface.

Project Overview

The Easybank landing page features a clean and modern design with a focus on simplicity and user engagement. The page is divided into several key sections:

• Navbar: Provides navigation links and a request invite button.
• Home: Displays a hero section with a compelling headline and a call-to-action button.
• About: Highlights the key features of Easybank with attractive icons and descriptions.
• Blog: Showcases the latest articles related to the banking service.
• Footer: Contains social media links, company information, and a request invite button.

Features

• Responsive Design: The layout adapts to various screen sizes, ensuring a consistent experience across devices.
• Interactive Components: Hover effects and clickable elements enhance user interaction.
• Modern Aesthetics: Utilizes a minimalist color scheme and clean typography.

Technologies Used

• React: For building the component-based user interface.
• CSS: For styling and responsive design.

Project Structure

The project is organized into the following components:

1. App.js: Main component that renders all other components.
2. Navbar.js: Contains the navigation bar.
3. Home.js: Displays the hero section of the landing page.
4. About.js: Provides information about the features of Easybank.
5. Blog.js: Lists recent articles.
6. Footer.js: Displays social media links and company information.
7. App.css: Stylesheet for the project.

Installation

To get started with this project, clone the repository and install the necessary dependencies:

git clone https://github.com/abhishekgurjar-in/Easybank-Landing-Page
cd easybank-landing-page
npm install

Usage

To run the project locally, use the following command:

npm start

This will start the development server and open the application in your default web browser.

Code Explanation

Here’s a brief overview of the main components:

• App.js:

 import "./App.css";
import Navbar from "./components/Navbar";
import About from "./components/About";
import Blog from "./components/Blog";
import Footer from "./components/Footer";
import Home from "./components/Home";

const App = () => {
  return (
    <>
      <Navbar />
      <Home />
      <About />
      <Blog />
      <Footer />
    </>
  );
};

export default App;

This is the main component that renders all the sections of the landing page.

• Navbar.js:

  import logo from "../assets/images/logo.svg";

  const Navbar = () => {
    return (
      <div className='navbar'>
        <img className='logo' src={logo} alt="Easybank logo" />
        <div className="header">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
          <a href="#">Blog</a>
          <a href="#">Careers</a>
        </div>
        <button className='request-btn'>Request Invite</button>
      </div>
    );
  }

  export default Navbar;

The Navbar component provides navigation links and a button for requesting an invite.

• Home.js:

  import phoneImage from "../assets/images/image-mockups.png" 

const Home = () => {
  return (
    <div className="home">
      <div className="home-text">
        <h1>Next generation <br /> digital  banking</h1>
        <p>
          Take your financial life online. Your Easybank account will be a
          one-stop-shop for spending, saving, budgeting, investing, and much
          more.
        </p>
        <button className="request-btn" id="btn-home" >Request Invite</button>
      </div>
      <div className="home-image">
      <div className="home-bg-image">
        <img className="phone-image" src={phoneImage} alt="" />
      </div>
      </div>
    </div>
  );
};

export default Home;

The Home component showcases the primary call-to-action and an image mockup.

• About.js:

  import bankingImage from "../assets/images/icon-online.svg";
  import onboardingImage from "../assets/images/icon-onboarding.svg";
  import apiImage from "../assets/images/icon-api.svg";

  const About = () => {
    return (
      <div className="about">
        <div className="about-first">
          <h1 className="about-title">Why choose Easybank?</h1>
          <p>
            We leverage Open Banking to turn your bank account into your financial
            hub. Control your finances like never before.
          </p>
        </div>
        <div className="about-second">
          <div className="card">
            <img src={bankingImage} alt="Online Banking" />
            <h1>Online Banking</h1>
            <p>
              Our modern web and mobile applications allow you to keep track of
              your finances wherever you are in the world.
            </p>
          </div>
          <div className="card">
            <img src={bankingImage} alt="Simple Budgeting" />
            <h1>Simple Budgeting</h1>
            <p>
              See exactly where your money goes each month. Receive notifications
              when you’re close to hitting your limits.
            </p>
          </div>
          <div className="card">
            <img src={onboardingImage} alt="Fast Onboarding" />
            <h1>Fast Onboarding</h1>
            <p>
              We don’t do branches. Open your account in minutes online and start
              taking control of your finances right away.
            </p>
          </div>
          <div className="card">
            <img src={apiImage} alt="Open API" />
            <h1>Open API</h1>
            <p>
              Manage your savings, investments, pension, and much more from one
              account. Tracking your money has never been easier.
            </p>
          </div>
        </div>
      </div>
    );
  };

  export default About;

The About component highlights the key features of Easybank with descriptive cards.

• Blog.js:

 import blog1Image from "../assets/images/image-currency.jpg";
import blog2Image from "../assets/images/image-restaurant.jpg";
import blog3Image from "../assets/images/image-plane.jpg";
import blog4Image from "../assets/images/image-confetti.jpg";

const Blog = () => {
  const blogData = [
    {
      image: blog1Image,
      author: "Claire Robinson",
      title: "Receive money in any currency with no fees",
      description:
        "The world is getting smaller and we’re becoming more mobile. So why should you be forced to only receive money in a single...",
    },
    {
      image: blog2Image,
      author: "Wilson Hutton",
      title: "Treat yourself without worrying about money",
      description:
        "Our simple budgeting feature allows you to separate out your spending and set realistic limits each month. That means you...",
    },
    {
      image: blog3Image,
      author: "Wilson Hutton",
      title: "Take your Easybank card wherever you go",
      description:
        "We want you to enjoy your travels. This is why we don’t charge any fees on purchases while you’re abroad. We’ll even show you...",
    },
    {
      image: blog4Image,
      author: "Claire Robinson",
      title: "Our invite-only Beta accounts are now live!",
      description:
        "After a lot of hard work by the whole team, we’re excited to launch our closed beta. It’s easy to request an invite through the site...",
    },
  ];

  return (
    <div className="blog">
      <div className="blog-title">
        <h2>Latest Articles</h2>
      </div>
      <div className="articles">
        {blogData.map((blog, index) => (
          <div className="blog-card" key={index}>
            <img src={blog.image} alt={blog.title} />
            <p>By {blog.author}</p>
            <h3>{blog.title}</h3>
            <h6>{blog.description}</h6>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Blog;

The Blog component displays recent articles with images and brief descriptions.

• Footer.js:

  import Logo from "../assets/images/logo.svg";
import fb from "../assets/images/icon-facebook.svg";
import yt from "../assets/images/icon-youtube.svg";
import tw from "../assets/images/icon-twitter.svg";
import pt from "../assets/images/icon-pinterest.svg";
import ig from "../assets/images/icon-instagram.svg";
const Footer = () => {
  return (
    <div className="footer">
      <div className="logos">
        <img src={Logo} alt="" />
        <div className="social-logo">
          <a href="">
            <img src={fb} alt="" />
          </a>
          <a href="">
            <img src={yt} alt="" />
          </a>
          <a href="">
            <img src={tw} alt="" />
          </a>
          <a href="">
            <img src={pt} alt="" />
          </a>
          <a href="">
            <img src={ig} alt="" />
          </a>
        </div>
      </div>
      <div className="aboutus">
        <a href="">About Us</a>
        <a href="">Contact</a>
        <a href="">Blog</a>
      </div>
      <div className="carrers">
        <a href="">Careers</a>
        <a href="">Support</a>
        <a href="">Privacy Policy</a>
      </div>
      <div className="invite">
        <div className="request-btn">Request Invite</div>
        <p>© Easybank. All rights reserved.</p>
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default Footer;

The Footer component includes navigation links, social media icons, and company information.

Live Demo

You can view the live demo of the Easybank landing page here.

Conclusion

Creating a landing page with React allows for the development of a modular and maintainable codebase. By structuring components effectively and utilizing modern CSS techniques, you can create a visually appealing and functional webpage. I hope this guide helps you in your journey to mastering React and building impressive web projects.

Credits

• Design Inspiration: Easybank design from Design Course
• Icons: Icons8
• Images: Unsplash

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.