Most small business sites sell something once and move on. Grow SD Agave is the opposite: a customer reserves a plant today and stays connected to it for up to nine years until harvest. On top of that, the business runs two different offers, Agave Ownership and Sustainable Agave Landscapes, each needing its own quote flow. The site had to explain an unusual product clearly, convert visitors into quote requests, and give every customer an account they could come back to for years.

We kept the visual system restrained so the product could do the talking. The palette is three colors: Ivory, Cobalt Navy, and Charcoal. Headings are set in Playfair Display Italic, which gives the brand the feel of a craft spirit label, while body text uses Outfit Extra Light to keep longer explanations easy to read.

The harder problem was showing a product that takes years to grow. There were no product photos to work with, so we created a set of agave line illustrations. We generated the base artwork with AI and curated it into one consistent set, giving a small business custom illustration without the cost of a commissioned illustrator.

The About page is where it all comes together. Each illustration sits beside the part of the story it explains, so the page walks visitors through what owning an agave actually means.

Every customer gets their own account where they can follow their plants, review their orders, and update their details, on desktop or mobile.

Behind those accounts is an eight-table PostgreSQL database that we designed from scratch. Row-level security policies make sure each customer can only ever read their own plants and orders, enforced by the database itself rather than just hidden in the interface. Even if someone tampered with a request, the database would refuse to return another customer’s data.

One of the trickier parts of the build was authentication. Supabase uses the PKCE flow, which means the link in a confirmation or password reset email doesn’t sign a customer in on its own. It carries a one-time code that the server has to exchange for a real session, and without that step anyone clicking the link would land on the site still signed out. We built a dedicated callback route in Next.js that catches the code, exchanges it for a session on the server, and redirects the customer straight to their account, so getting from an email to the portal takes one click.

The navigation was designed to stay pinned to the top of the screen, sliding out of view as visitors scroll down and back in the moment they scroll up, so it’s always one flick away without covering the content. In production it stopped following the screen and scrolled away with the page instead. We traced it to overflow-x: hidden on a parent element. That property quietly turns the element into its own scroll container, so the header was pinned to that element instead of the browser window. Switching it to overflow-x: clip kept the overflow hidden without creating a new scroll container, and the header worked again.

We chose a stack that a small business could run for years without a dedicated developer. Next.js handles the site and the server logic in one codebase, and Supabase gives us authentication and a secure database without managing our own servers.

Grow SD Agave is live at growsdagave.com. Customers can reserve a plant, request a quote for either offer, and log in to follow their agave without having to contact the business for updates. Because the database was designed for the long haul, the platform is ready to carry every customer from planting to harvest, up to nine years out.