Landing Page - Copy this React, Tailwind Component to your project
added to the landing page regarding the image feature: 1. Two images have been added to the main section of the landing page, positioned in a relative container. 2. The images are placed one behind the other using absolute positioning within the container. 3. Both images are given a tilted appearance using CSS transforms: - The front image is rotated -6 degrees (slightly counterclockwise) - The back image is rotated 6 degrees (slightly clockwise) 4. Hover effects have been applied to both images: - When hovered, the rotation is reset to 0 degrees, removing the tilt - The images also scale up slightly (to 105% of their original size) on hover - A smooth transition effect is applied for both the rotation and scaling 5. The z-index property is used to ensure the front image appears on top of the back image. 6. The images are given rounded corners and a shadow effect for a more polished look. 7. The transition between the tilted and straight states, as well as the scaling effect, is set to occur over 300 milliseconds, providing a smooth and visually pleasing animation. This implementation creates an interactive and visually engaging element on the landing page, drawing attention to the highway imagery and adding a dynamic feel to the design.
