REALFLAME: Engineering Excellence in Clean Energy E-commerce

• Instead of static hero graphics, we built a custom Three.js engine to render a "tornado" of interactive stacked rings.
• These rings represent the core layers of RealFlame from "Foundation" to "Innovation" and "Excellence" featuring real-time wobbling, wave intensities, and organic rotation speeds.

• We developed an immersive milestone experience using GSAP and ScrollTrigger.
• As you scroll, a "road" path dynamically draws itself across a map, triggering milestone pins (like the 1987 "Journey Begins" or the 2016 "PM Ujjwala Yojana" partnership) that pop up with tactile information bubbles.
• This creates a narrative flow that turns historical data into an engaging visual story.

1. Semantic Structure & Keyboard Navigation

• Skip Navigation: We implemented a "Skip to Main Content" bypass link. This allows users with screen readers or keyboard navigators to bypass the header and jump straight to the heart of the site.

2. Inclusive Interactive Components

• Descriptive ARIA Labels: Every interactive element, from the mobile menu to the timeline, is enriched with aria-label attributes. This ensures screen readers can accurately describe the purpose of buttons and links.
• Alt Text Strategy: We moved beyond simple alt tags. We implemented a getLogoAlt helper to provide specific, contextual descriptions for partner logos like IOCL, BPCL, and HPCL.

3. Performance as Accessibility

• A slow site is an inaccessible site. By using code-splitting and lazy-loading for our heavy 3D and animation libraries, we ensure that users on slower connections or older hardware can still access the site's core information without frustration.