Pulock Deb RoyUpdated How We Built Alignment AI's New Site
The Alignment AI site is a Next.js page where visitors talk to Aria, an AI concierge that qualifies each lead and saves it to a private dashboard. This is how we built it, and why.
How does Aria qualify a lead?
Aria runs on OpenAI, through a route on the server, so the key never reaches the browser. Its instructions set a calm, measured tone and a fixed order of five questions, one per message:
- What kind of project the visitor has in mind.
- Its scale or scope.
- The budget.
- The timeline.
- Their name and email address.
When the conversation is complete, Aria turns it into a structured record: the project, budget, timeline, a score from 1 to 10, and a one-line reason for the score. That record and the full transcript are saved to a Supabase table.
How does Aria stay on task?
Aria's instructions rule out acting as a general assistant, writing code, or discussing how it was built. If a visitor asks something only the team can answer, Aria says so and promises a follow-up.
The server also guards the route:
- Each visitor can send 20 messages an hour.
- Settings are checked at start-up, so a missing key fails loudly rather than quietly.
What does the team see?
The dashboard sits behind a sign-in. It lists every lead with its score, shown as a bar, and opens the full transcript. The team can filter to recent leads and mark a lead as contacted, which updates the record through a server route. Marking a lead as contacted also checks that the request comes from the site's own address.
How is the public page laid out?
The public site is one long page with sections for the philosophy, the services, Aria, the team and common questions. The header links jump between sections. Smooth scrolling and gentle movement keep the page feeling calm on a large screen and quick on a phone.
What is it built with?
- Next.js 16, React 19 and TypeScript.
- OpenAI for Aria.
- Supabase for leads and the team sign-in.
- Zod to check settings and data.
- Tailwind for styling, with Framer Motion and Lenis for movement and scrolling.
- Hosted on Vercel.
First published
Pulock Deb Roy is the Co-Founder and Chief Marketing Officer of Ravenence, leading brand strategy, digital growth, and business development.
