My First React Project(Part 2): Struggling with a Responsive Hero Section (CSS Lessons Learned)

In Part 1 , I talked about building the header for the Frontend Mentor's Digital Bank Landing Page Challenge . At that point, I felt like I had momentum. Then I met the Hero section ... and yeah, it didn't go as smoothly as I expected. This post is about that struggle, what went wrong, what I learned, and how I pushed through it. I'll also share a quick win with the Feature section that reminded me why I enjoy React. Hero Section (a.k.a. where things got real) At first, I thought: "This is just a two-column layout. I've done this before. Easy" It was not easy. The JSX part? Totally fine. If you understand functional components in React, structuring this is pretty straightforward. The real battle was CSS , specifically: positioning layering responsiveness making everything behave across screen sizes I rewrote this section more times than I'd like to admit. What Made It So Difficult? The design doesn't look that complex, but under the hood: There's an SVG background and a mockup image of