Next.jsReactDirectory site

zanbio — Next.js Directory site Template

By rendyandika28

Zanbio is a marketing website template for the B2B SaaS product Zanbio, built with Next.js 14 App Router. It includes a landing page, a sales lead form, and an API route that sends emails via SendGrid, with no authentication, database, or backend.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Includes a landing page, a sales lead form page, and a SendGrid email sending API route

02

Built with Next.js 14 App Router and TypeScript

03

Forms use react-hook-form with Yup validation

04

Uses NextUI v2, Tailwind CSS, SCSS Modules, and Tailwind Variants for styling and UI development

05

Scroll-triggered animations via Framer Motion, with Zustand used only for navigation scroll tracking

06

No authentication, database, or backend; leads are sent directly to an email address via SendGrid

Template Details

This template is the marketing website for Zanbio (a B2B SaaS platform that automates accounts receivable and accounts payable for finance teams). The site is positioned as a lead generation tool: visitors browse product features and benefits, then fill out a contact form to reach the sales team. The README explicitly states there is no authentication, database, or backend; leads are sent directly to an email address via SendGrid.

Routes include: `/` landing page (hero → features → AR and AP benefits → closing CTA), `/sales-team` lead collection form (name, email, phone, company, job title, current system), and a POST endpoint at `/api/contact-sales` (validates input with Yup and sends the inquiry via SendGrid).

For the tech stack, the README lists Next.js 14 (App Router) with TypeScript, Tailwind CSS, SCSS Modules, Tailwind Variants, NextUI v2, Radix UI (Toast), Framer Motion, Zustand (only for navigation scroll tracking), react-hook-form + Yup, and SendGrid. The project structure includes pages, API routes, and layouts under the app directory; shared UI under components (navbar, footer, Framer Motion scroll-trigger wrapper, Radix-based toast); and directories such as config, constant, and store.

The README does not provide information about deployment environment, performance, accessibility, browser compatibility, or production readiness; the preview screenshots only prove that page screenshots exist, not that the pages function.

Next.jsDirectory site

Is it right for your project?

Use Cases

  • Building a marketing landing page for a B2B SaaS product and collecting sales leads
  • A static marketing site that needs form submissions sent to a specified email address via SendGrid
  • Building a frontend project with API routes using Next.js App Router and TypeScript
  • Marketing pages that need form validation (react-hook-form + Yup) and scroll animations

Suitable For

  • Teams that need to quickly build a B2B SaaS marketing website and collect leads
  • Frontend developers familiar with Next.js 14 App Router and TypeScript
  • Projects that want to build interfaces using NextUI, Tailwind CSS, and Framer Motion
  • Lightweight marketing sites that accept no backend and leads sent via SendGrid email

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Run yarn install to install dependencies

  2. 2

    Copy .env.example to .env.local and fill in the SendGrid-related credentials

  3. 3

    Environment variables include SENDGRID_API_KEY, NEXT_PUBLIC_SENDGRID_FROM_NAME, NEXT_PUBLIC_SENDGRID_FROM_EMAIL, NEXT_PUBLIC_SENDGRID_REPLY_TO_EMAIL

  4. 4

    Use yarn dev to start the development server (http://localhost:3000)

  5. 5

    Use yarn build for a production build (standalone output)

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.

Must comply with when using

  • You are allowed to use, modify, commercialize, and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • Leads are sent directly to an email address via SendGrid; using this template to collect form submissions requires configuring the SendGrid email service.
  • You need to copy .env.example to .env.local and fill in the SendGrid credentials, otherwise the email sending feature will not work.
  • You must provide the SENDGRID_API_KEY environment variable (SendGrid API key) to send lead emails.
  • You need to set the NEXT_PUBLIC_SENDGRID_FROM_NAME environment variable as the sender display name.
  • You need to set the NEXT_PUBLIC_SENDGRID_FROM_EMAIL environment variable as the sender email address.
  • You need to set the NEXT_PUBLIC_SENDGRID_REPLY_TO_EMAIL environment variable to specify the delivery address for inquiry emails.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

The site is a lead generation tool — visitors browse product features and benefits, then fill a contact form to reach the sales team. There is no authentication, database, or backend. Leads are sent directly to email via SendGrid.

Original README

cp .env.example .env.local # fill in SendGrid credentials

Original README

| `SENDGRID_API_KEY` | SendGrid API key |

Original README

| `NEXT_PUBLIC_SENDGRID_FROM_NAME` | Sender display name |

Original README

| `NEXT_PUBLIC_SENDGRID_FROM_EMAIL` | Sender email |

Original README

| `NEXT_PUBLIC_SENDGRID_REPLY_TO_EMAIL` | Where inquiries are delivered |

Original README
https://github.com/rendyandika28/zanbio/blob/main/LICENSEhttps://github.com/rendyandika28/zanbio/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 80 / 100
Technologies
Next.js · React
Website type
Directory site
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-06-25
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: a0608e496c6d590e021b672e587260651c476d4ca69c569b77147791e02705f0

2026-10-13T21:44:16.338Z

Source file / repository
# Zanbio — Marketing Site

![Project Preview](https://rdydika.dev/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdpaqb7s4w%2Fimage%2Fupload%2Fv1782209892%2Frdydika%2Fportfolio%2FZanbio.png&w=1536&q=75)

This is the **marketing website** for [Zanbio](https://zanbio.foya.dev), a B2B SaaS platform that automates Accounts Receivable (AR) and Accounts Payable (AP) for finance teams.

The site is a lead generation tool — visitors browse product features and benefits, then fill a contact form to reach the sales team. There is no authentication, database, or backend. Leads are sent directly to email via SendGrid.

## Routes

| Path | Purpose |
|------|---------|
| `/` | Landing page: hero → features → benefits (AR & AP) → closing CTA |
| `/sales-team` | Lead capture form: name, email, phone, company, job title, current system |
| `/api/contact-sales` | `POST` — validates input with Yup, sends inquiry through SendGrid |

## Tech Stack

| Area | Tools |
|------|-------|
| Framework | Next.js 14 (App Router), TypeScript |
| Styling | Tailwind CSS, SCSS Modules, Tailwind Variants |
| UI | NextUI v2, Radix UI (Toast) |
| Animation | Framer Motion |
| State | Zustand (nav scroll tracking only) |
| Form | react-hook-form + Yup |
| Email | SendGrid |

## Project Structure

```
app/                  # App Router pages, API route, layout
├── page.tsx          # Homepage (client component)
├── layout.tsx        # Root layout with Navbar, Footer, Toaster
├── providers.tsx     # NextUI + Theme providers
├── error.tsx         # Error boundary
├── api/contact-sales/# POST endpoint → SendGrid
├── sales-team/       # Contact form page
└── _components/      # Homepage sections (introduction, features, benefits, tagline)

components/           # Shared UI
├── navbar.tsx        # Sticky nav with scroll-aware tab via IntersectionObserver
├── footer.tsx
├── motion/section.tsx # Framer Motion scroll-triggered wrapper
└── ui/toast.tsx      # Radix-based toast

config/               # Site metadata, nav items, font config
constant/benefits.ts  # AR & AP benefit data (typed arrays)
store/                # Zustand — active menu state
```

## Getting Started

```bash
yarn install
cp .env.example .env.local   # fill in SendGrid credentials
yarn dev                     # http://localhost:3000
yarn build                   # production build (standalone output)
```

## Environment

| Variable | Purpose |
|----------|---------|
| `SENDGRID_API_KEY` | SendGrid API key |
| `NEXT_PUBLIC_SENDGRID_FROM_NAME` | Sender display name |
| `NEXT_PUBLIC_SENDGRID_FROM_EMAIL` | Sender email |
| `NEXT_PUBLIC_SENDGRID_REPLY_TO_EMAIL` | Where inquiries are delivered |

## License

MIT
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

mkdirs

mkdirs

Mkdirs is an open-source directory website template built with Next.js, offering directory entries, categories, collections, tags, and search as core content structures, plus AI-assisted submissions, user authentication and dashboards, free/paid/sponsored submissions via Stripe, Sanity CMS with blog, Resend email and newsletters, SEO…

Next.js · Directory site

next-pages-template

next-pages-template

A Next.js Pages Router starter template pre-configured with HeroUI, Tailwind CSS, Tailwind Variants, TypeScript, and next-themes, including example home and blog pages.

Next.js · Directory site

snxtw

snxtw

snxtw is a Next.js App Router starter template with Tailwind CSS and TypeScript, offering prebuilt components, SEO metadata, and a code quality toolchain including ESLint, Prettier, Husky, lint-staged, and Conventional Commit Lint.

Next.js · Directory site

nextjs-directory-site-starter

nextjs-directory-site-starter

Nextory is a starter template for directory websites built with Next.js 15 and Tailwind CSS V4.

Next.js · Directory site

next-app-template

next-app-template

A directory site template built with Next.js App Directory and NextUI, integrating Tailwind CSS, Framer Motion, and next-themes.

Next.js · Directory site

Resume-Builder

Resume-Builder

A purely client-side resume builder built with Next.js and React, offering split-screen live preview, 6 single- and two-column templates, and one-click PDF export via @react-pdf/renderer, with data stored in localStorage.

Next.js · Portfolio