Overview
Synavanta is the public site for a New Delhi ICT and digital transformation partner. Founders, operations leaders, CTOs, and IT heads needed to trust one firm with infrastructure, software, security, and support, then start a qualified conversation.
Success is inquiry quality through the form, phone, email, and WhatsApp. After ten seconds a visitor should still have this line: cloud, security, and day-to-day systems planned together.
Problem
Finance and procurement sit in the second row. They share a fear that modernization will add vendors, muddy ownership, and leave systems nobody on staff can run.
The company also needed a real pipeline. Every form submission had to land in a database, a CRM, and inboxes without requiring sales staff to copy leads from email.
Approach
The brand is clear, composed, and exacting. Cool near-white canvases, one brand blue, ink type, and a navy Why block. Inter at 300 / 400 / 600 / 700. Eight-pixel buttons, eighteen-pixel cards, twenty-four-pixel banners. Press feedback is a shared scale(0.97) at 160ms. No card shadows, no second accent, no pill CTAs.
Five public routes: Home, Services, Blog, About, Contact. A Work index exists in code and stays unpublished until client-approved project assets exist. Every marketing closer uses the same rounded BlueBanner: white copy, white CTA, blueprint grid, ghost wordmark.
The contact flow combines field-level validation, a honeypot, and IP rate limiting before distributing each qualified lead to Supabase, Notion, and Resend.
Canonical URLs, a sitemap, robots rules, and JSON-LD for the organization, website, articles, and FAQs. Open Graph images render from /og at 1200×630 and are versioned so WhatsApp and LinkedIn refetch after a brand change.
Homepage
What shipped
The first screen names the offer. Later sections walk a belief ladder: two practices, a five-step engagement, industries, a navy Why block, FAQ, then the blue closer.
A long document with sticky module tabs — ICT, Transform, Industries, Engage — so a 19-item catalog stays scannable. Featured ICT rows carry a Primary badge and an explicit outcome line. Transformation stages name what the client leaves with.
Services
A page hero with in-page jump links (Story, Mission, Leadership, Principles, FAQ), then a leadership card and the same Why and FAQ modules as home.
Five practical notes for the same buyer: managed IT, cloud migration, choosing an integrator, identity-first security, and transformation as one workflow. Covers are generated in-brand so the index never depends on stock photography.
Direct lines (phone, email, WhatsApp) sit beside the form so a buyer who hates forms can leave in one tap. Fields: name, work email, company, optional E.164 phone, message. Errors sit on the field and say how to fix them. On phones the floating WhatsApp chip steps aside on this route, so it does not compete with the in-page WhatsApp row.
Contact
Mobile
Technical highlights
POST /api/contact validates submissions with Zod, including E.164 phone numbers, drops honeypot traffic, and rate-limits requests by IP. Valid leads are inserted into the Supabase contact_leads table, added to a Notion CRM, and sent through Resend as both a visitor confirmation and an internal sales alert.
Shared press feedback on buttons, nav links, and cards. Staggered hero line reveals with named properties. A sliding active-tab pill on desktop. The mobile overlay locks scroll, focuses Close, and returns focus to the menu button. Form label and icon swap between idle, sending, and sent without a layout jump. WhatsApp expands on hover (fine pointer) or first tap (coarse pointer), without animating width. Canvas, reveals, and press fall back to opacity and color when reduced motion is requested.
Page-level metadata, a public Open Graph route, schema.org graphs, FAQ structured data, and crawler rules make the site accessible to both search engines and answer engines.
The site targets WCAG AA with keyboard-accessible navigation, forms, and FAQs.
Outcome
The site is live at synavanta.com. What shipped is the full path: a calm offer, a catalog with outcomes, writing for search, and a contact system that lands in a database, a CRM, and two inboxes.
Scope I owned: visual system, IA, copy system, marketing pages, motion tokens, contact API, SEO and OG pipeline, reduced-motion paths.
Stack
Next.js 16, React 19, TypeScript, Tailwind CSS 4, Motion, Zod, Supabase, Notion, and Resend.