Responsive Bookmark Homepage with React.js and Framer Motion

I am proud of my use of Framer Motion to animate sliding an active-tab indicator in the Features section, rotating accordion carets with expand/close interactions in the FAQ section, and scaling buttons throughout the page with hover and click effects. Next time, I would add animation to the expansion and closing of FAQ elements to give the accordion a more natural feel.

I initially tried to use props to dynamically update colors in a reusable Button component, but I quickly realized that Tailwind CSS cannot concatenate partial class names. I learned that props need to be mapped to static class names, so I created an object to store my color variants and used props to call the desired variant in my Button styling.