Certificate Map - Copy this React, Tailwind Component to your project
Create a visually stunning interactive map of all certificates related to the company "Well Pipes." The design should feature a modern, stylish layout that effectively showcases each certificate, represented by distinct nodes or icons. Implement a subtle 3D effect on each certificate node to create depth, with nodes lifting slightly and casting shadows on hover for a dynamic touch. When users hover over a certificate, display a brief summary that includes the name of the certificate, the date it was awarded, and a short description of its significance. Allow smooth horizontal scrolling through the certificates, with each certificate sliding into view as the user scrolls, accompanied by a smooth transition effect. Utilize a cohesive color palette aligned with Well Pipes’ branding, incorporating shades of blue and green to represent the water industry while ensuring high contrast for readability. Incorporate interactive features such as clickable nodes that expand to reveal more detailed information, including images of the certificates and downloadable links. The background should be subtle and professional, perhaps featuring a light gradient or texture that complements the certificate design without overwhelming it. Ensure the design is responsive for both desktop and mobile devices, allowing users to easily access the certificates on smaller screens. Finally, implement accessibility features, such as alt text for images and proper color contrast, to ensure all users can engage with the content.
