Building an Easybank Landing Page with React

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

npm start

 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;

  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;

  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;

  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;

 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;

  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;