Sustainability Hero Section - Copy this Html, Tailwind Component to your project

Theme: Design a hero section for a campus sustainability website that emphasizes environmental responsibility, inspires immediate action, and highlights recent initiatives. Background and Layout: Background Image: Use a nature inspired image (forest, clean river, campus greenery) with soft green blue tones. Ensure the image is light and low contrast for clear text overlays, symbolizing eco consciousness. Overlay: Apply a semi transparent overlay with a subtle gradient (light green to deep teal) to enhance readability and give the section a fresh, eco friendly look. Hero Section: Logo: Positioned on the left side, subtle but noticeable. Headline: Centered, bold and inspiring: "Join the Movement Toward a Sustainable Campus" Font: Large (50 60px), white text, modern, with slight letter spacing (e.g., Montserrat or Raleway). Subheading: A call to action below the headline: "Track your water usage, report waste, and make an impact today." Font: Medium weight (20 25px), soft white or light grey (e.g., Lato or Roboto), encouraging immediate action. Call to Action Buttons: Login (blue) and Register (green) buttons on the right, side by side with rounded edges and hover effects that brighten the colors. Animations: Subtle fade in for the headline, slight enlargement and color change for buttons on hover. News Section: Scrolling Image Slider: Below the hero section, include a horizontally scrolling image carousel highlighting recent campus sustainability efforts (e.g., tree planting, water conservation, eco friendly events). 3 4 images with a smooth fade or slide transition every 4 5 seconds, each image showing a caption or brief description of the initiative. Image Captions: Short descriptions overlaid on the images, such as: "Eco Challenge 2024: Reducing Single Use Plastics" "Water Conservation Efforts Save 10,000 Gallons" "Student Led Tree Planting Drive" Additional Sections: Quick Info Boxes: Below the news slider, feature four labeled sections: "Why," "What," "Where," "How," offering short insights into the sustainability mission, actions, and impact. Animations and Responsiveness: Smooth animations (fade ins, hover effects) and mobile friendly design ensure users can engage easily on all devices. This enhanced hero section combines powerful calls to action, interactive visuals, and dynamic news highlights to inspire immediate participation in campus sustainability initiatives.