This is a solution to the Easybank landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

• Solution URL: [https://github.com/AskTiba/DigitalBank-LP]
• Live Site URL: [https://digital-bank-lp.vercel.app/]

• Semantic HTML5 markup
• Flexbox & CSS Grid
• Mobile-first workflow
• Next.js – React framework
• Tailwind CSS – Utility-first CSS framework
• shadcn/ui – Accessible components built with Tailwind
• Firebase Studio – as am code editor
• Git – version control
• Vercel – for deployment

This project helped me:

• Deepen my understanding of responsive design using Tailwind utility classes.
• Master layout design using flex, grid, and spacing utilities in a mobile-first approach.
• Improve my component structuring and organization with Next.js.
• Implement design system components with shadcn/ui.
• Practice deploying a Next.js project with Vercel and linking it to a custom domain.
• Use Git effectively for version control through the Git CLI and GitHub.

// components/FeatureCard.tsx
import React from "react";
import Image, { StaticImageData } from "next/image";

interface FeatureCardProps {
  icon: StaticImageData;
  title: string;
  description: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({
  icon,
  title,
  description,
}) => {
  return (
    <article className="flex flex-col sm:items-start items-center sm:text-left text-center gap-4 px-4 sm:px-0">
      <Image src={icon} alt={title} width={72} height={72} />
      <h3 className="text-xl font-semibold text-gray-800">{title}</h3>
      <p className="text-sm text-gray-500 max-w-xs">{description}</p>
    </article>
  );
};

export default FeatureCard;

This reponsive compenent was used to render a card.

In future projects, I want to:

• Explore advanced animations and transitions using Framer Motion.
• Improve performance and SEO techniques in Next.js apps.
• Deepen my understanding of accessibility best practices in Tailwind and React.
• Build more complex UI layouts and refine my use of design systems like shadcn/ui.

• Tailwind CSS Documentation – My go-to for styling and layout references.
• shadcn/ui Docs – Helped me structure and theme my UI components.
• Firebase Docs – Used as a code editor.
• Vercel Docs – For continuous deployment and managing environments.
• FreeCodeCamp Articles – Great explanations on Next.js, responsive design, and modern CSS tips.
• YouTube Tutorials – Channels like Frontend Masters, Web Dev Simplified, and Codevolution were really helpful.
• Git Documentation – For mastering commits, branches, and remote repositories.

• Website – your-portfolio.com
• Frontend Mentor – (https://www.frontendmentor.io/profile/AskTiba)
• Twitter – (https://x.com/AskTiba)

A huge thanks to:

• The creators of the tutorials I watched on YouTube.
• The authors of articles on FreeCodeCamp for their detailed breakdowns of frontend concepts.
• The Tailwind, Next.js, and shadcn/ui communities for the amazing tooling and documentation.