create-landing-app 0.1.0

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "create-landing-app",
+  "version": "0.1.0",
+  "description": "Create a production-ready Next.js landing page with one command",
+  "type": "module",
+  "bin": {
+    "create-landing-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "prepublishOnly": "yarn build && rm -rf ./templates && cp -r ../../templates ./templates",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest"
+  },
+  "keywords": [
+    "nextjs",
+    "landing-page",
+    "boilerplate",
+    "scaffold",
+    "create-app",
+    "tailwindcss",
+    "typescript",
+    "starter"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LamHana/landing-page-boilerplate"
+  },
+  "homepage": "https://github.com/LamHana/landing-page-boilerplate#readme",
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "kolorist": "^1.8.0",
+    "execa": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.0.0",
+    "jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": { "node": ">=18.0.0" }
+}

package/templates/nextjs/base/.env.example

@@ -0,0 +1,8 @@
+# Site
+NEXT_PUBLIC_SITE_URL=https://yourdomain.com
+
+# Analytics (optional)
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
+
+# S3 / Storage (optional)
+NEXT_PUBLIC_S3_DOMAIN=

package/templates/nextjs/base/.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20 }
+      - run: yarn install --frozen-lockfile
+      - run: yarn format:check
+      - run: yarn lint
+
+  lighthouse:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20 }
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn lighthouse
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+  security-scan:
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - uses: actions/checkout@v4
+      - run: FAIL_ON_VULN=true bash ./scripts/build-and-scan.sh
+        env:
+          APP_NAME: __PROJECT_NAME__

package/templates/nextjs/base/.husky/commit-msg

@@ -0,0 +1,7 @@
+#!/bin/sh
+# commit-msg: enforce conventional commit format
+# Examples of valid commits:
+#   feat(navbar): add mobile menu
+#   fix(hero): correct CTA button color
+#   chore: update dependencies
+npx --no -- commitlint --edit "$1"

package/templates/nextjs/base/.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+# pre-commit: format and lint staged files only (fast)
+npx lint-staged --config package.json

package/templates/nextjs/base/.husky/pre-push

@@ -0,0 +1,46 @@
+#!/bin/sh
+set -e
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Pre-push quality checks"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+
+# ── Step 1: Next.js build (always runs) ──────────────────
+echo "${GREEN}[1/3] Building Next.js...${NC}"
+npm run build
+echo "${GREEN}✅ Build passed${NC}"
+echo ""
+
+# ── Step 2: Lighthouse CI (skip with SKIP_LIGHTHOUSE=true) ──
+if [ "${SKIP_LIGHTHOUSE}" = "true" ]; then
+  echo "${YELLOW}[2/3] Lighthouse skipped (SKIP_LIGHTHOUSE=true)${NC}"
+else
+  echo "${GREEN}[2/3] Running Lighthouse CI...${NC}"
+  bash ./scripts/lighthouse-check.sh
+  echo "${GREEN}✅ Lighthouse passed${NC}"
+fi
+echo ""
+
+# ── Step 3: Docker build + security scan (opt-in with RUN_SCAN=true) ──
+if [ "${RUN_SCAN}" = "true" ]; then
+  if ! command -v docker > /dev/null 2>&1; then
+    echo "${YELLOW}[3/3] Security scan skipped (Docker not found)${NC}"
+  else
+    echo "${GREEN}[3/3] Running Docker build + security scan...${NC}"
+    FAIL_ON_VULN=false bash ./scripts/build-and-scan.sh
+    echo "${GREEN}✅ Scan completed${NC}"
+  fi
+else
+  echo "${YELLOW}[3/3] Security scan skipped (set RUN_SCAN=true to enable)${NC}"
+fi
+
+echo ""
+echo "${GREEN}✅ All pre-push checks passed. Pushing...${NC}"
+echo ""

package/templates/nextjs/base/.lighthouserc.json

@@ -0,0 +1,28 @@
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:3000"],
+      "numberOfRuns": 1,
+      "settings": {
+        "preset": "desktop",
+        "throttlingMethod": "simulate"
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", { "minScore": 0.8 }],
+        "categories:accessibility": ["error", { "minScore": 0.9 }],
+        "categories:best-practices": ["warn", { "minScore": 0.9 }],
+        "categories:seo": ["warn", { "minScore": 0.9 }],
+        "first-contentful-paint": ["warn", { "maxNumericValue": 2000 }],
+        "largest-contentful-paint": ["error", { "maxNumericValue": 3000 }],
+        "total-blocking-time": ["warn", { "maxNumericValue": 300 }],
+        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
+        "interactive": ["warn", { "maxNumericValue": 4000 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

package/templates/nextjs/base/.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+out
+dist
+build
+*.min.js
+*.min.css
+pnpm-lock.yaml
+yarn.lock
+bun.lockb
+package-lock.json

package/templates/nextjs/base/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSameLine": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["cn", "cva"]
+}

package/templates/nextjs/base/Dockerfile

@@ -0,0 +1,42 @@
+# Stage 1: Install dependencies
+FROM node:20-alpine AS deps
+RUN corepack enable
+WORKDIR /app
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lock* bun.lockb* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then pnpm i --frozen-lockfile; \
+  elif [ -f bun.lock ] || [ -f bun.lockb ]; then npm i -g bun && bun install --frozen-lockfile; \
+  else echo "No lockfile found." && exit 1; \
+  fi
+
+# Stage 2: Build
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN \
+  if [ -f yarn.lock ]; then yarn build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then pnpm run build; \
+  elif [ -f bun.lock ] || [ -f bun.lockb ]; then npm i -g bun && bun run build; \
+  else npm run build; \
+  fi
+
+# Stage 3: Production runner (standalone output)
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Run as non-root user for security (OWASP A05)
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+USER nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+EXPOSE 3000
+CMD ["node", "server.js"]

package/templates/nextjs/base/app/globals.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../styles/theme.css"; /* theme variables — edit this file to rebrand */
+
+@custom-variant dark (&:is(.dark *));
+
+/* Map Tailwind v4 color tokens to CSS variables */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --breakpoint-tablet: 1024px;
+  --breakpoint-mobile: 768px;
+}
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground; }
+}
+
+/* Hide scrollbar */
+::-webkit-scrollbar { display: none; }
+html { -ms-overflow-style: none; scrollbar-width: none; }
+body { overflow-x: hidden; }
+
+/* Layout container — use this on all sections for consistent max-width */
+.content-container {
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+@media (max-width: 1024px) {
+  .content-container { padding-left: 40px !important; padding-right: 40px !important; }
+}
+@media (max-width: 768px) {
+  .content-container { padding-left: 20px !important; padding-right: 20px !important; }
+}
+
+/* Brand utilities — sourced from theme.css vars */
+.btn-primary {
+  background-color: var(--brand-action);
+  border-radius: 8px;
+  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
+}
+.btn-outline {
+  border: 1px solid var(--brand-border);
+  background: var(--background);
+  border-radius: var(--radius-md);
+}
+.bg-footer {
+  background: linear-gradient(279deg, var(--brand-footer-from) 1.61%, var(--brand-footer-to) 100.79%);
+}
+.text-gradient-brand {
+  background: linear-gradient(90deg, var(--brand-gradient-from), var(--brand-gradient-to));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.header-shadow {
+  box-shadow: 0 0px 24px 0px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}

package/templates/nextjs/base/app/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+import { Toaster } from "@/components/ui/sonner";
+import Providers from "@/components/providers";
+import { createMetadata } from "@/lib/metadata";
+import "./globals.css";
+// __PROVIDERS_IMPORT__
+
+const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
+
+export const metadata: Metadata = createMetadata({
+  title: "__PROJECT_NAME__",
+  description: "A modern landing page",
+});
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} font-sans antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <Providers>
+            {/* __PROVIDERS_WRAP_START__ */}
+            {children}
+            {/* __PROVIDERS_WRAP_END__ */}
+          </Providers>
+        </ThemeProvider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/base/app/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4">
+      <h1 className="text-6xl font-bold text-primary">404</h1>
+      <p className="text-muted-foreground">Page not found</p>
+      <Link href="/" className="btn-primary px-6 py-2 text-white rounded-lg">
+        Back to home
+      </Link>
+    </div>
+  );
+}

package/templates/nextjs/base/app/page.tsx

@@ -0,0 +1,15 @@
+import HeroSection from "@/components/sections/hero-section";
+import FeaturesSection from "@/components/sections/features-section";
+import FooterSection from "@/components/sections/footer-section";
+// __PAGE_IMPORTS__
+
+export default function Home() {
+  return (
+    <main>
+      <HeroSection />
+      <FeaturesSection />
+      {/* __PAGE_SECTIONS__ */}
+      <FooterSection />
+    </main>
+  );
+}

package/templates/nextjs/base/app/robots.ts

@@ -0,0 +1,9 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "https://yourdomain.com";
+  return {
+    rules: { userAgent: "*", allow: "/" },
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}

package/templates/nextjs/base/commitlint.config.mjs

@@ -0,0 +1,32 @@
+/** @type {import('@commitlint/types').UserConfig} */
+const config = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    // Allowed commit types
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat", // new feature
+        "fix", // bug fix
+        "docs", // documentation only
+        "style", // formatting, whitespace
+        "refactor", // code change that's not feat or fix
+        "perf", // performance improvement
+        "test", // tests
+        "build", // build system, deps
+        "ci", // CI/CD
+        "chore", // other changes
+        "revert", // revert a commit
+      ],
+    ],
+    // Subject line max length
+    "subject-max-length": [2, "always", 100],
+    // No period at end of subject
+    "subject-full-stop": [2, "never", "."],
+    // Subject must start lowercase
+    "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]],
+  },
+};
+
+export default config;

package/templates/nextjs/base/components/navs/navbar-mobile.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { NAV_LINKS } from "@/constants/common";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export default function NavbarMobile() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <button onClick={() => setOpen(!open)} aria-label="Toggle menu">
+        {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </button>
+
+      {/* Slide-down mobile menu */}
+      <div
+        className={cn(
+          "absolute inset-x-0 top-16 flex flex-col gap-4 border-b bg-background p-6 transition-all duration-200",
+          open ? "visible opacity-100" : "invisible pointer-events-none opacity-0"
+        )}
+      >
+        {NAV_LINKS.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            onClick={() => setOpen(false)}
+            className="text-sm font-medium"
+          >
+            {link.label}
+          </Link>
+        ))}
+        <Button className="w-full">Get started</Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/components/navs/navbar.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { NAV_LINKS, SITE_NAME } from "@/constants/common";
+import NavbarMobile from "./navbar-mobile";
+import { Button } from "@/components/ui/button";
+// __NAVBAR_IMPORT__
+
+// Server component — no animation needed at nav level
+export default function Navbar() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow">
+      <div className="content-container flex h-16 items-center justify-between">
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 text-xl font-bold text-primary">
+          {SITE_NAME}
+        </Link>
+
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-6 md:flex">
+          {NAV_LINKS.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* CTA + mobile toggle */}
+        <div className="flex items-center gap-3">
+          {/* __NAVBAR_EXTRAS__ */}
+          <Button className="hidden md:flex">Get started</Button>
+          <NavbarMobile />
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/nextjs/base/components/providers.tsx

@@ -0,0 +1,12 @@
+"use client";
+// __PROVIDERS_IMPORT__
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {/* __PROVIDERS_WRAP_START__ */}
+      {children}
+      {/* __PROVIDERS_WRAP_END__ */}
+    </>
+  );
+}

package/templates/nextjs/base/components/sections/features-section.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { motion } from "motion/react";
+import { Zap, Shield, Palette, Globe, Code, Rocket } from "lucide-react";
+
+const FEATURES = [
+  {
+    icon: Zap,
+    title: "Lightning fast",
+    description: "Built on Next.js 15 with Turbopack. Dev server starts in milliseconds.",
+  },
+  {
+    icon: Shield,
+    title: "Secure by default",
+    description: "Best-practice security headers, no inline scripts, CSP-ready.",
+  },
+  {
+    icon: Palette,
+    title: "Fully themeable",
+    description: "5 beautiful presets. One CSS file to rebrand completely.",
+  },
+  {
+    icon: Globe,
+    title: "i18n ready",
+    description: "Optional dictionary-based translation. Zero extra dependencies.",
+  },
+  {
+    icon: Code,
+    title: "Clean code",
+    description: "TypeScript, ESLint, component-first architecture. Easy to extend.",
+  },
+  {
+    icon: Rocket,
+    title: "Deploy anywhere",
+    description: "Docker-ready standalone output. Ships to any VPS in minutes.",
+  },
+];
+
+export default function FeaturesSection() {
+  return (
+    <section id="features" className="bg-secondary/30 py-24">
+      <div className="content-container">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="mb-16 space-y-4 text-center"
+        >
+          <h2 className="text-4xl font-bold">Everything you need</h2>
+          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+            Built with the best tools in the ecosystem. No bloat, just what matters.
+          </p>
+        </motion.div>
+
+        {/* Feature grid */}
+        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature, i) => (
+            <motion.div
+              key={feature.title}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: i * 0.08 }}
+              className="group rounded-2xl border border-border bg-background p-6 transition-all duration-300 hover:border-primary/40 hover:shadow-md"
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-accent transition-colors group-hover:bg-primary/10">
+                <feature.icon className="h-6 w-6 text-primary" />
+              </div>
+              <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}