Digitalbank-Landing

I am most proud of building a responsive Digitalbank landing page that closely follows the provided design across mobile, tablet, and desktop screen sizes. I organized the page into reusable React components such as Header, Hero, Features, Articles, Footer, and MobileMenu, which made the code easier to maintain.

I am also proud of implementing an interactive mobile navigation menu with:

(i) Open and close functionality

(ii) Escape-key support

(iii) Overlay-click support

(vi) Aria-expanded and aria-controls attributes

(v) Keyboard-focus indicators

(vii) A skip-to-content link

Next time, I would add automated tests earlier in the project. I would specifically test the mobile menu, keyboard navigation, responsive layouts between the provided breakpoints, and the accessibility of interactive elements. I would also improve focus management by moving focus into the mobile menu when it opens and returning focus to the menu button when it closes.

One challenge was reproducing the design accurately across different screen sizes. The hero section uses different image assets and layouts for mobile and desktop, so I had to use responsive Tailwind classes and carefully position the background, mockup images, and text.

I overcame this by:

• Using separate mobile and desktop image assets
• Applying responsive breakpoints for layout changes
• Testing the page at mobile, tablet, and desktop widths
• Adjusting spacing, typography, image positioning, and alignment based on the design

Another challenge was building the mobile navigation behaviour. The menu needed to appear below the header, prevent background scrolling, close when the overlay was clicked, and respond to the Escape key.

I solved this by managing the menu state in LandingPage.tsx, passing event handlers to Header and MobileMenu, and using useEffect to handle keyboard events and body scrolling.

I also had to maintain consistent spacing, colors, typography, and hover states throughout the page. Defining shared design values in Tailwind helped me avoid repeating inconsistent styles.