Intro Section with Dropdown Navigation using React + Tailwind CSS

At first, I used a hoverable drop-down menu approach but after reading about how it's not good for accessibility, I changed it to a clickable one. I've tried to make the menu more accessible by using ARIA attributes like aria-expanded, aria-controls, and aria-labelledby. please let me know if there's anything wrong with the accessibility.

Instead of hardcoded items for the menu, I've added the menu data to a JSON file and implemented a component in react that shows the menu dynamically based on the data from that file which allows for changing the items, icons, and links easily in the future.

I've also added CSS animations to the menu in both desktop and mobile view and looked up animation libraries like framer motion to possibly use and experiment with in later challenges. 😊