Main10 is India's first on-demand property maintenance platform, connecting residents of managed properties with skilled maintenance professionals in under 10 minutes.

The website serves as the marketing and download hub for their mobile app.

It explains how the service works — users raise a request, a professional is assigned within minutes, and the job is completed on the spot.

The site also covers subscription pricing plans, customer testimonials, an insights blog, and FAQs.

Build and deploy the marketing website within a week to align with the client's app launch timeline.

Build the entire site from scratch using Next.js and Tailwind CSS.

Ensure full responsiveness across all screen sizes.

Integrate TanStack Query to dynamically fetch data from their APIs for sections like pricing plans, blogs, and FAQs.

The hero section design called for a split layout — on desktop, the left side held the headline, tagline, and app download buttons, while a hand-holding-mobile image on the right had to stay anchored to the container's edge, deliberately overlapping into the content area rather than sitting with normal spacing.

Achieving this meant pulling the image out of the document flow using absolute positioning within a relatively positioned parent, then fine-tuning the overlap with negative margins and z-index layering so it stayed visually attached to the edge without pushing, compressing, or hiding the text and buttons on the left.

Padding had to be carefully calculated on mid-size screens so the overlapping image never crept over the content.

On mobile, a side-by-side overlapping layout wasn't viable, so the positioning strategy had to switch entirely — from absolute positioning on desktop to normal document flow on mobile — so the image would stack cleanly below the content in full width.

Making that switch work reliably across breakpoints, without one layout mode breaking or bleeding into the other, took careful testing and iteration rather than a single fixed CSS rule.

After testing across all major breakpoints, the layout held the intended design — anchored overlap on larger screens, clean vertical stack on mobile — with the left content remaining accessible throughout.