Chinese-English bilingual content rendered server-side based on a language cookie
Next.jsReactSaaSCorporate WebsiteStarter
shadcn-landing-page — Next.js SaaS Template
By LvvUP
A Chinese-English bilingual landing page starter built on Next.js and shadcn/ui, featuring 12 responsive sections, suitable for SaaS and product teams building marketing pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided previewTop of page
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-01View source
What stands out
A quick read of the recorded project description.
Three theme preferences: light, dark, and system
12 responsive sections covering value proposition, trust signals, pricing, and contact conversion
shadcn/ui component source code is locally editable for easy style replacement or extension
Includes skip navigation, semantic sections, localized control labels, and reduced motion handling
Provides check scripts for translation consistency, dependency compatibility, lint, type checking, and production build
Template Details
This is a front-end starter for marketing landing pages, built with Next.js, React, Tailwind CSS, and shadcn/ui, with Chinese-English bilingual support provided by next-intl. Page content is rendered server-side based on a saved language cookie. The theme supports light, dark, and system preferences, and colors, border radius, fonts, and animations can be adjusted in global styles.
The template includes 12 responsive sections covering Hero, sponsors, services, team, advantages, features, testimonials, FAQ, community, pricing, contact, and footer, organized into three categories: discovery, evaluation, and conversion. All people, testimonials, contact details, and prices are fictional demo content.
The repository is positioned as a front-end starter and does not include backend services or a form backend. When the contact form is submitted, it passes the input to the user's configured email application as a draft; privacy behavior depends on that email application. The project uses cookie-based single-URL language switching; if separately indexable multilingual pages are needed, language route segments must be added manually.
The code is MIT licensed, allowing free use, modification, commercial use, and distribution, but third-party assets such as demo images, fonts, and icons require separate license verification, and external services such as domains, hosting, databases, payments, or AI may incur additional charges.
Next.jsReactSaaSCorporate websiteStarter
Is it right for your project?
Use Cases
- Building a Chinese-English bilingual marketing landing page for a SaaS product
- Indie developers quickly launching a product introduction page and replacing demo content
- Product teams customizing brand visuals on top of existing shadcn/ui components
- A homepage requiring light/dark theme switching and mobile adaptation
Suitable For
- Front-end developers using Next.js and React
- SaaS or product teams needing a Chinese-English bilingual landing page
- Developers who prefer directly modifying component source code rather than relying on a page builder
- Projects that accept integrating their own form backend and deployment configuration
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js >= 20.9.0; after cloning the repository, run npm ci and npm run dev, then access http://localhost:3000 by default
- 2
Brand colors, border radius, fonts, and animations are adjusted in app/globals.css; section content and order are modified in components/layout/sections and app/page.tsx
- 3
Chinese and English copy is located in messages/zh-CN.json and messages/en-US.json respectively; page titles and descriptions are configured in the metadata namespace
- 4
Before deployment, replace all demo copy, fictional identities, prices, contact details, and target links, and set production metadata and canonical URL
- 5
The form has no backend; define validation, anti-abuse, data retention, and privacy policies before integrating. Third-party asset licenses require separate verification
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full 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
- The repository is only a front-end starter; it does not provide a hosted product or backend services, and you must deploy and integrate a backend yourself.
- The contact form has no backend; on submission it only passes the content as a draft to the user's configured email application, and privacy behavior depends on that email application.
- By default, it uses cookie-based single-URL language switching; if you need multilingual pages that can be indexed separately by search engines, you must add language route segments yourself.
- Before deployment, you must replace all demo copy, fictional identities, prices, contact details, and target links.
- Before integrating the form, you must define validation, anti-abuse, data retention, and privacy policies yourself.
- Licenses for third-party assets such as demo images, fonts, and icons require separate verification and may have additional usage restrictions.
- 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.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
This repository is a frontend starter, not a hosted product or backend service.
Original README
The site has no form backend; submitting hands the entered values to your configured mail app as a draft
Original README
if you need separately indexable localized pages, add locale route segments as part of your deployment architecture.
Original README
Replace all demo copy, fictional identities, prices, contact details, and destination links.
Original README
Connect forms only after defining validation, abuse protection, retention, and privacy behavior.
Original README
https://github.com/LvvUP/shadcn-landing-page/blob/main/LICENSEhttps://github.com/LvvUP/shadcn-landing-page/blob/main/README.mdreview asset rights
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-01. 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
- Partly documented · 73 / 100
- Technologies
- Next.js · React
- Website type
- SaaS · Corporate Website · Starter
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-09-20
- Screenshot last checked
- 2026-10-01
No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.
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.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: dc0bc1f546bcaeddc0f43d0dedfa273787428110d2f21791fe0dc8a40a15b046
2026-10-01T01:08:50.936Z
Source file / repository<div align="center">
# Shadcn Landing Page
**A bilingual, theme-ready Next.js starter for shipping a polished product story faster.**
[](https://github.com/LvvUP/shadcn-landing-page/actions/workflows/ci.yml)
[](https://nextjs.org/)
[](./messages)
[](./LICENSE)
[Quick start](#quick-start) · [中文文档](./README.zh-CN.md) · [Contributing](./CONTRIBUTING.md) · [Discussions](https://github.com/LvvUP/shadcn-landing-page/discussions)
</div>
Shadcn Landing Page is a customizable marketing-site starter built with Next.js 16, React 19, Tailwind CSS 4, shadcn/ui, and next-intl. It gives indie makers and product teams a coherent page structure without hiding the source behind a page builder.
> [!NOTE]
> This repository is a frontend starter, not a hosted product or backend service. People, testimonials, contact details, and pricing are explicitly fictional demo content. The site has no form backend; submitting hands the entered values to your configured mail app as a draft, where that app's privacy behavior applies.
## Live preview
<table>
<tr>
<td width="50%" align="center">
<img src="./assets/readme/landing-page-preview.png" width="100%" alt="Chinese light-theme desktop view of the running Shadcn Landing Page">
<br><sub>中文 · Light · Desktop</sub>
</td>
<td width="50%" align="center">
<img src="./assets/readme/landing-page-desktop-en-dark.png" width="100%" alt="English dark-theme desktop view of the running Shadcn Landing Page">
<br><sub>English · Dark · Desktop</sub>
</td>
</tr>
<tr>
<td align="center">
<img src="./assets/readme/landing-page-mobile-zh-light.png" width="56%" alt="Chinese light-theme mobile view of the running Shadcn Landing Page">
<br><sub>中文 · Light · Mobile</sub>
</td>
<td align="center">
<img src="./assets/readme/landing-page-mobile-en-dark.png" width="56%" alt="English dark-theme mobile view of the running Shadcn Landing Page">
<br><sub>English · Dark · Mobile</sub>
</td>
</tr>
</table>
All four images were captured from the real production build: `1440 × 1024` on desktop and `390 × 844` on mobile.
## Why use it
| Capability | What it gives you |
| --- | --- |
| Bilingual SSR | Chinese and English content is rendered from the server using the saved locale cookie. |
| Theme-ready UI | Light, dark, and system preferences powered by `next-themes` and editable CSS tokens. |
| Complete product story | 12 responsive sections covering value, proof, pricing, contact, and conversion. |
| Editable shadcn/ui | Local component source you can restyle, replace, or extend without framework lock-in. |
| Accessible baseline | Skip navigation, semantic sections, localized control labels, keyboard-friendly primitives, and reduced-motion handling. |
| Repeatable quality gates | Translation parity, dependency compatibility, lint, type, production build, audit, CI, and Dependabot. |
## Included sections
| Discover | Evaluate | Convert |
| --- | --- | --- |
| Hero | Benefits | Community |
| Sponsors | Features | Pricing |
| Services | Testimonials | Contact |
| Team | FAQ | Footer |
All sample identities are synthetic, and the interface no longer relies on remote avatar or stock-image hosts.
## Quick start
Requires Node.js `>= 20.9.0`.
```bash
git clone https://github.com/LvvUP/shadcn-landing-page.git
cd shadcn-landing-page
npm ci
npm run dev
```
Open [http://localhost:3000](http://localhost:3000).
Create and run a production build:
```bash
npm run build
npm run start
```
## Make it yours
| Change | Where |
| --- | --- |
| Brand colors, radius, typography, and motion | [`app/globals.css`](./app/globals.css) |
| Section content and order | [`components/layout/sections/`](./components/layout/sections) and [`app/page.tsx`](./app/page.tsx) |
| Chinese and English copy | [`messages/zh-CN.json`](./messages/zh-CN.json) and [`messages/en-US.json`](./messages/en-US.json) |
| Shared UI primitives | [`components/ui/`](./components/ui) |
| Localized title and description | The `metadata` namespace in both message catalogs |
| Locale and time-zone defaults | [`lib/i18n-config.ts`](./lib/i18n-config.ts) |
The starter uses cookie-based locale selection so the saved language is reflected in the next server response. It intentionally keeps one URL; if you need separately indexable localized pages, add locale route segments as part of your deployment architecture.
## Quality and security
Run the same complete gate used by CI:
```bash
npm run check
npm run audit
```
`npm run check` verifies both locale catalogs, blocks known incompatible dependency regressions, runs ESLint and TypeScript, and produces a full Next.js build. The audit result can change as advisories are published, so rerun it before every release.
Security fixes target the latest `main` branch. Please report vulnerabilities privately as described in [SECURITY.md](./SECURITY.md), never in a public issue. The repository also ships conservative response headers, restricted GitHub Actions permissions, automated dependency updates, and templates that remind contributors not to include secrets or private data.
## Before deploying
- Replace all demo copy, fictional identities, prices, contact details, and destination links.
- Set your production metadata, canonical URL, and analytics consent strategy; a ready-to-upload [social preview PNG](./assets/readme/social-preview.png) is included.
- Connect forms only after defining validation, abuse protection, retention, and privacy behavior.
- Test mobile widths, keyboard navigation, both locales, and every theme preference.
- Preserve [third-party notices](./THIRD_PARTY_NOTICES.md), review asset rights, and rerun `npm run check` plus `npm run audit`.
## Project structure
```text
shadcn-landing-page/
├── app/ # App Router, metadata, layout, and global theme
├── assets/readme/ # Repository-native README artwork
├── components/
│ ├── layout/ # Navigation, locale/theme controls, page sections
│ └── ui/ # Editable shadcn/ui primitives
├── lib/ # Locale configuration and shared utilities
├── messages/ # zh-CN and en-US catalogs
├── scripts/ # Deterministic project checks
├── .github/ # CI, Dependabot, and contribution templates
├── CONTRIBUTING.md
├── SECURITY.md
├── THIRD_PARTY_NOTICES.md
└── NOTICE.md
```
## Contributing and attribution
Focused bug fixes, accessibility work, documentation improvements, and reusable section enhancements are welcome. Read [CONTRIBUTING.md](./CONTRIBUTING.md) before opening a pull request.
This project continues work from [nobruf/shadcn-landing-page](https://github.com/nobruf/shadcn-landing-page), itself based on [leoMirandaa/shadcn-vue-landing-page](https://github.com/leoMirandaa/shadcn-vue-landing-page). Upstream copyright notices and the modernization history are preserved in [NOTICE.md](./NOTICE.md).
Released under the [MIT License](./LICENSE).
<div align="center">
If this starter saves you time, a **Star** helps other builders discover it.
</div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
Next.js SaaS Starter
The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.
Next.js · SaaS
Next.js Commerce
Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.
Next.js · E-commerce
Next-js-Boilerplate
A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.
Next.js · Starter
tailwind-nextjs-starter-blog
A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.
Next.js · Blog
next-forge
next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.
Next.js · Starter
SaaS-Boilerplate
SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.
Next.js · SaaS