ZoneStack Landing Page

🪪 Portfolio Summary

ZoneStack is a Next.js landing page for a Canadian real estate decision-intelligence product, designed to communicate a complex development-feasibility concept through a polished, conversion-focused interface.

I built the responsive UI, animated hero and content sections, and a Supabase-backed mailing list flow with validation, sanitization, duplicate handling, and database-level security.

📌 Overview

ZoneStack is a polished Next.js landing page and waitlist capture experience for a Canadian real estate decision-intelligence product. The site presents ZoneStack as a platform for helping developers, brokers, and architects evaluate whether a development opportunity is worth pursuing before spending weeks on manual due diligence.

The project combines a premium marketing interface with a working Supabase-backed mailing list flow. It uses animated landing-page sections, a massing-style hero visual, a demo report call-to-action, and a secure modal form to collect early user interest.

🎯 Problem / Purpose

Real estate feasibility analysis can be slow, expensive, and fragmented, especially when zoning rules, parking requirements, municipal bylaws, and development constraints vary across jurisdictions.

This project addresses that problem from a product-positioning perspective: it communicates the value of faster site screening and captures leads from potential users interested in the platform.

✨ Key Features

• Responsive landing page for ZoneStack’s real estate intelligence product
• Hero section with a clear value proposition, massing mockup, and demo report CTA
• Mailing list modal with controlled form state
• Client-side validation using Zod
• Input sanitization using DOMPurify
• Supabase integration for storing mailing list signups
• PostgreSQL table script with unique email constraint, email regex check, and Row Level Security
• Duplicate email handling with user-friendly feedback
• Scroll-reactive header styling
• Animated UI transitions using Framer Motion
• Tailwind CSS v4 theme with custom colors, typography, glass effects, and gradients
• Reusable button component and class-name utility
• SEO metadata for the landing page

⚙️ How It Works

A visitor lands on a single-page Next.js app that introduces ZoneStack’s value proposition: helping users evaluate Canadian development deals faster than traditional due diligence. The main page currently renders the header, hero section, problem section, and footer. The hero includes two primary actions: joining the mailing list or viewing an externally hosted demo report.

When a user opens the mailing list modal, they enter their name, user type, organization, and email. The form validates the data with Zod, sanitizes string inputs with DOMPurify, then writes the signup directly to a Supabase mailing_list table.

The accompanying SQL file defines the database table, enables Row Level Security, allows anonymous inserts, enforces unique emails, and adds a database-level email format check.

🧰 Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS v4
• Supabase / PostgreSQL
• Zod
• DOMPurify
• Framer Motion
• Lucide React
• next/image
• ESLint with Next.js Core Web Vitals and TypeScript config

🏗️ Architecture / Implementation Highlights

The app uses the Next.js App Router with a single public landing route composed from reusable section components. Interactive pieces are isolated as client components, including the header, hero, animated sections, and mailing list modal.

The waitlist flow does not use a custom API route. Instead, the browser-side Supabase client inserts into a public table using Supabase’s anonymous key, with database access controlled through Row Level Security. This keeps the app lightweight while still relying on Supabase policies and constraints for the persistent data layer.

The visual system is centralized in Tailwind theme variables and global utilities. A shared Button component supports multiple variants and sizes, while the cn helper combines clsx and tailwind-merge to keep component class composition clean.

The repository also includes additional landing-page sections for solution, trust, pricing, and final conversion content, but those sections are currently commented out from the active page.

👤 What I Built / My Role

I built the landing page experience, component structure, visual system, and lead-capture flow for ZoneStack. I designed the page around a clear conversion path: communicate the product’s value quickly, show a credible real estate analysis concept, and convert interested visitors into mailing list signups.

I also implemented the Supabase-backed signup workflow, including validation, sanitization, duplicate-email handling, and the database schema needed to support secure public submissions.

The result is a focused portfolio-ready landing page that demonstrates frontend polish, product thinking, and practical full-stack integration.

🧩 Challenges & Solutions

Communicating a complex real estate product clearly

The project simplifies zoning, density, PMTSA, and feasibility concepts into a concise hero message, risk-focused problem cards, and a demo report CTA.

Capturing leads without a full backend

Supabase handles persistence directly from the frontend, while Row Level Security, database constraints, Zod validation, and DOMPurify provide layered protection.

Creating a premium visual feel in a small codebase

The implementation uses Tailwind theme variables, glass-style utilities, custom gradients, Framer Motion, and a reusable button component instead of a heavy design system.