astro-njx-launch — Astro 启动器模板

SHA-256: 07e753a9d220e583c8851f392db79cede2f8f953165a09750058696b83605712

2026-10-13T00:32:44.936Z

# astro-njx-launch

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/njbSaab/astro-njx-launch) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/njbSaab/astro-njx-launch)

> Part of **[njX Astro Themes](https://njxui.dev/themes)** — ecommerce storefronts & landing pages by one author, free today, Pro versions on the way.

**Product launch / waitlist starter — Astro + [njX UI](https://njxui.dev) (npm: `njx-ui`) + Alpine.js.**

One CSS import, nine runtime themes, ~25 lines of custom CSS. Every element on
the page is an njX UI class; interactivity is plain Alpine `x-data` right in the
markup; Astro renders it all to static HTML.

**Live demo:** https://astro-njx-launch.pages.dev

![astro-njx-launch preview](./screenshot.png)

## What you get

- **Glow hero** with a waitlist counter badge and a **video modal** (library `.lib-modal-*`, Escape / backdrop close)
- **How it works** — three numbered steps on showcase cards (`card-outline-gradient` / `card-aura` / `card-shine`)
- **Testimonial slider** — library `.testi-slider`: stars, avatars, counter, touch swipe
- **Waitlist form** with optimistic submit and a success state
- **Theme toggle** in the navbar with `localStorage` persistence

## The stack

| Layer | Tool | Why |
| ----- | ---- | --- |
| Markup & build | [Astro](https://astro.build) | Components, zero JS by default |
| Look | [njX UI](https://njxui.dev) — 44 KB gzip | Ready blocks: cards, modals, sliders, badges |
| Interactivity | [Alpine.js](https://alpinejs.dev) | Modal, slider, form — state lives in the markup |

## Quick start

```bash
git clone https://github.com/njbSaab/astro-njx-launch my-launch
cd my-launch
npm install
npm run dev
```

Open `http://localhost:4321`, then make it yours:

1. **`src/config.ts`** — product name, themes, social-proof numbers.
2. **Data arrays** — `STEPS` in `HowItWorks.astro`, `SLIDES` in `Testimonials.astro`.
3. **Waitlist** — swap the demo `@submit` in `Waitlist.astro` for a fetch to your endpoint.

## What's inside

```
src/
├── config.ts                 # brand, themes, numbers — rebrand in one file
├── layouts/Layout.astro      # njX UI import · theme restore · SEO meta
├── styles/global.css         # the one signature gradient (~25 lines)
├── components/
│   ├── Nav.astro             # navbar + Alpine theme toggle
│   ├── Hero.astro            # glow hero + video modal
│   ├── HowItWorks.astro      # three showcase cards (data-driven)
│   ├── Testimonials.astro    # testi-slider with swipe (data-driven)
│   ├── Waitlist.astro        # optimistic form + success state
│   └── Footer.astro
└── pages/index.astro         # assembles the sections
```

## Themes

njX UI ships 9 themes driven by one attribute:

```html
<html data-theme="cyan">   <!-- dark · light · red · blue · green · cyan · yellow · pink · purple -->
```

## Deploy

[![Deploy to Cloudflare Pages](https://img.shields.io/badge/Deploy%20to-Cloudflare%20Pages-f38020?logo=cloudflarepages&logoColor=white)](https://dash.cloudflare.com/?to=/:account/pages/new)
[![Deploy to Netlify](https://img.shields.io/badge/Deploy%20to-Netlify-00c7b7?logo=netlify&logoColor=white)](https://app.netlify.com/start/deploy?repository=https://github.com/njbSaab/astro-njx-launch)

Static output — any host works. Build command `npm run build`, output directory `dist`.

## Learn more

- njX UI documentation: https://njxui.dev/documentation
- Alpine presets for njX components: https://njxui.dev/documentation#njx-alpine
- Sibling themes: [astro-njx-saas](https://github.com/njbSaab/astro-njx-saas) · [astro-njx-portfolio](https://github.com/njbSaab/astro-njx-portfolio)

## License

MIT — use it for anything, no attribution required.