Astral Offerings - Copy this React, Tailwind Component to your project
Design a visually appealing section for a website that highlights "What does Astral Offer." The layout should feature a central image relevant to Astral's products, surrounded by text items arranged in a circular format to create an engaging presentation. Begin with a circular container that centers the image and text, ensuring equal spacing around it. Place the image prominently in the center, applying a slight zoom in effect on hover for added interactivity. Arrange seven text items around the central image, each containing a title and a brief descriptive paragraph. Use absolute positioning to achieve the circular layout, incorporating hover effects that change the opacity of each text item or highlight them to enhance user engagement. For styling, adopt a modern and clean design aesthetic with a cohesive color scheme, ensuring that font sizes and styles promote readability. Incorporate animations, such as fade in effects for the text and scaling effects for the image, to enrich the user experience. Remember to prioritize accessibility by ensuring legibility of all text against the background and including alt text for the central image. Content ideas for the text items include "A wide range of products to offer," detailing the variety of offerings; "Certifications," explaining the quality standards and testing processes; "A prominent brand with strong marketing support," highlighting brand awareness initiatives; "Pioneers in CPVC," showcasing industry leadership; "Leading Building Materials Company," providing an overview of product categories; "ALP Program," describing loyalty programs for plumbers and dealers; and "After sales service," outlining the technical support and services available. This design aims to create an inviting and informative experience for users, effectively showcasing what Astral has to offer.
