SaaS landing
Nightshift, a deploy scheduler: a lit 2am headline, a live night-run panel, pricing and a plan comparison page.
2 pages, 17 components, 27 files.
Pages
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/saas.jsonWrites the pages to app/saas, their sections to components/templates/saas and adds the 17 NeonKit components it's built from. Then open /saas in your app.
Built from Accordion, Avatar, Badge, Button, Copy Button, Hardware Switch, Heartbeat, Icons, Input, Marquee, Neon Sign, Seven-Segment Display, Switch, Table, Terminal, Toggle Group and Tooltip.
Make it yours
components/templates/saas/config.ts
import type { NeonColor } from "@/lib/neon";
/** Where the template is mounted in your app. Every link between its pages starts here. */
export const basePath = "/saas";
/** The template's color. Change it here and every part of it follows. */
export const color: NeonColor = "magenta";
export const brand = "Nightshift";
/** The hour (local time) the deploy window opens. Countdowns across the site aim at it. */
export const windowHour = 2;
export const contactEmail = "crew@nightshift.example";
/**
* Landing-page sections in scroll order. The navbar, the section rail and the
* mobile bar all read from here. `clock` is the time the rail shows as you pass.
*/
export const sections = [
{ id: "instruments", label: "Instruments", clock: "22:30", nav: true },
{ id: "install", label: "Install", clock: "23:15", nav: true },
{ id: "pricing", label: "Pricing", clock: "00:20", nav: false },
{ id: "customers", label: "Customers", clock: "01:05", nav: true },
{ id: "faq", label: "Questions", clock: "01:40", nav: true },
{ id: "deploy", label: "Deploy", clock: "02:00", nav: false },
] as const;
export type SectionId = (typeof sections)[number]["id"];Change color and the whole template re-tints. To serve it somewhere else, move app/saas and update basePath; every link between its pages starts there.
What lands in your repo
27 files, all of them yours to edit.
- app/saas/layout.tsx
- app/saas/opengraph-image.tsx
- app/saas/page.tsx
- app/saas/pricing/page.tsx
- components/templates/saas/compare.tsx
- components/templates/saas/config.ts
- components/templates/saas/cta.tsx
- components/templates/saas/data.ts
- components/templates/saas/faq.tsx
- components/templates/saas/features/features.tsx
- components/templates/saas/features/instruments.tsx
- components/templates/saas/features/night-run.ts
- components/templates/saas/features/queue-panel.tsx
- components/templates/saas/fonts.ts
- components/templates/saas/footer.tsx
- components/templates/saas/hero.tsx
- components/templates/saas/home.tsx
- components/templates/saas/install.tsx
- components/templates/saas/logos.tsx
- components/templates/saas/mobile-bar.tsx
- components/templates/saas/navbar.tsx
- components/templates/saas/plans.tsx
- components/templates/saas/pricing-page.tsx
- components/templates/saas/primitives.tsx
- components/templates/saas/section-rail.tsx
- components/templates/saas/shell.tsx
- components/templates/saas/testimonials.tsx