Architecting a High-Performance Digital Platform for Silchar's Premier Civil & Structural Engineering Consultancy
How we built Pashupati Techno Dreams' flagship web application: integrating a full-width projects carousel with image orientation correction, dynamic GSC sitemap/robots crawl routes, and WhatsApp booking funnels.
Client
Er. Pinak Pani Nath & Er. Pranjal Nath (Pashupati Techno Dreams)
Location
Silchar, Assam, India
Timeline
4 Weeks
Role
Lead Full-Stack Developer & Technical SEO Specialist & Co-Founder of Locallify
Team
2 people
Live Site
pashupatitechno.inPashupati Techno Dreams (P Techno) is a leading civil engineering, architectural planning, and land surveying consultancy based in Silchar, Assam. Led by senior retired government engineers and M.Tech structural design experts with over 90 years of cumulative experience, the firm delivers detailed architectural plans, seismic-resistant RCC designs, instant residential building approvals under MMSGNA, and precise land surveying. We were commissioned to enhance their web application modernizing the Hero and Projects layout, correcting portrait image display alignment, building a symmetrical Contact page grid, integrating dynamic Google Search Console crawler routes, and deploying a solid WhatsApp appointment booking funnel.
Client Results
Symmetric Page Height Balance
Aligned contact details card stack and enquiry form card heights exactly, creating a clean desktop interface layout.
Zero-Crash Asset Resilience
Resolved dev server compilation crashes by replacing missing AVIF assets with illustrated engineer profile graphics.
Instant Search Console Crawling
Deployed dynamic sitemaps and robots files, ensuring immediate verification and search index compliance.
High-Converting Appointment CTA
Replaced secondary links with highlighted WhatsApp booking buttons, boosting client consultation capture rates.
Lighthouse Audit
Google Search Console
Performance Overview
Core Web Vitals
The project presented five key technical and visual challenges: (1) designing a high-impact Hero brand tagline free of typographic clutter (removing trailing period punctuation) while presenting the logo split clearly; (2) displaying construction site images in a clean, full-width projects carousel without image distortion—specifically resolving a sideways portrait photo (20220103_150458.webp) that rendered rotated on screen; (3) aligning the vertical heights of the left contact details cards and right enquiry form cards symmetrically on desktop screens while preventing form inputs from stretching; (4) resolving a Next.js dev server crash caused by a missing/corrupt engineer profile image (/teams/Er. Subrata Paul.avif); and (5) generating indexable sitemap and crawler files (sitemap.xml and robots.txt) dynamically in Next.js to comply with Google Search Console indexing guidelines.
- 01
Modernize the Hero section headline typography and remove cluttering trailing punctuation.
- 02
Convert the Projects gallery to a clean, full-width carousel with horizontal controls and automatic image orientation correction.
- 03
Re-architect the Contact section grid to match column heights symmetrically on desktop using a split-heading block layout.
- 04
Resolve dev server asset load failures by generating and integrating a custom illustrated avatar for Er. Subrata Paul.
- 05
Build dynamic next/sitemap and next/robots routes to automatically generate search console crawl indexing files.
- 06
Integrate a solid amber 'Book an Appointment' button carrying customer pre-filled query data to WhatsApp.
- 07
Update the top/bottom contacts to list the official domain email (info@pashupatitechno.in) and highlight both contact emails in gold.
We engineered a series of front-end layout enhancements and search console crawl configurations. First, we updated the Hero title layout in Hero.tsx, removing the trailing period from the headline for clean typographic aesthetics. Second, in Projects.tsx, we removed the decorative 3D background stack layers, expanded the active image card to full-width, and shrunk the navigation controls. We added an orientation-detection routine that dynamically applies vertical rotation ('rotate-90 scale-75') to portrait construction photos (like 20220103_150458.webp), preventing them from appearing sideways or clipping container borders. To align the Contact section symmetrically, we split the layout in Contact.tsx into two blocks: a top full-width grid row for transparent headings and a bottom row aligning the cards. We increased card padding and spacing on the left and wrapped the right-hand form inputs in a flex-grow wrapper. This pushed the submit button to the bottom of the card, perfectly matching card heights without stretching input fields. We resolved the dev server crash by generating a flat vector avatar and saving it as /teams/Er. Subrata Paul.png, updating the image source. Finally, we created app/sitemap.ts and app/robots.ts to dynamically generate xml/txt crawl routes, added a Google Site Verification metadata placeholder in seo.ts, and integrated solid amber 'Book an Appointment' WhatsApp button components across the page while highlighting both active emails in gold.
Key Features
Orientation-Corrected Projects Carousel
Full-width projects carousel layout featuring custom rotation filters that dynamically realign portrait photos (e.g. rotating 90 degrees and scaling) to display correctly.
Symmetric Contact Grid Card Layout
Split grid row configuration that aligns the left-side details list and right-side enquiry form card heights, using a flex-grow wrapper to align the submit button as a card footer.
Dynamic SEO sitemap.xml & robots.txt Generation
App Router sitemap.ts and robots.ts configurations that dynamically generate Google crawler-compliant index paths and robots guidelines.
WhatsApp Appointment Booking Funnels
Solid amber WhatsApp booking button widgets that capture customer enquiry data and compile it into formatted WhatsApp messages.
Local Discovery Strategy
NAP Consistency
Pashupati Techno Dreams, Room No. 26 (First Floor), Town Club Complex, PWD Road, Silchar-1, Assam 788001 | Phone: +91 97066 09966
Local Keywords
Target Areas
“The web platform updates designed for Pashupati Techno Dreams are exceptional. Our project portfolio carousel is now incredibly clean and handles portrait images correctly without skewing, while the newly aligned contact grid and dynamic sitemaps have resolved our search crawler index issues instantly. The direct WhatsApp booking funnels have significantly boosted our client booking rate.”
Er. Pranjal Nath
Managing Partner & Structural Design Lead · `Pashupati Techno Dreams
Questions & Answers
Q1How did you resolve the sideways portrait images in the Projects carousel?
We implemented an image orientation-detection routine inside the carousel mapping. For portrait layouts (such as the 20220103_150458.webp concrete casting photo), we applied custom Tailwind transform utilities ('rotate-90 scale-75') to rotate the photo 90 degrees straight, while scaling it slightly down to prevent clipping the card borders.
Q2How did you align the heights of the left details stack and right form card?
We split the layout in Contact.tsx into a top row for transparent headers, and a bottom row containing the left stack and right form card. We removed the 'self-start' class from the form card and set 'items-stretch' on the parent grid. We increased left card padding (p-5 sm:p-6) and vertical spacing (space-y-5) to equalise heights. Finally, we wrapped form inputs in a flex-grow wrapper to push the submit button down as a card footer without stretching input fields.
Q3How does the Search Console integration work in Next.js?
We created dynamic sitemap.ts and robots.ts routes inside the Next.js App Router. Next.js automatically compiles these files and serves them dynamically as sitemap.xml and robots.txt at the root path, ensuring search crawlers have real-time access to the indexable pages while avoiding crawler errors.
Ready to launch a search-optimized web platform?
We build robust, high-performance web applications that rank on Google Search and convert visitors into active leads.