create-landing-app 0.1.0

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

@@ -0,0 +1,98 @@
+import Link from "next/link";
+import { SITE_NAME, NAV_LINKS, SOCIAL_LINKS } from "@/constants/common";
+import { Github, Twitter, Linkedin } from "lucide-react";
+
+// Server component — static links, no interactivity needed
+export default function FooterSection() {
+  return (
+    <footer className="bg-footer text-white">
+      <div className="content-container py-16">
+        <div className="mb-12 grid gap-12 md:grid-cols-4">
+          {/* Brand */}
+          <div className="space-y-4 md:col-span-2">
+            <p className="text-2xl font-bold">{SITE_NAME}</p>
+            <p className="max-w-xs text-sm leading-relaxed text-white/70">
+              A modern landing page starter kit. Built for developers who ship fast.
+            </p>
+            {/* Social links */}
+            <div className="flex items-center gap-4">
+              {SOCIAL_LINKS.github && (
+                <Link
+                  href={SOCIAL_LINKS.github}
+                  className="text-white/70 transition-colors hover:text-white"
+                >
+                  <Github className="h-5 w-5" />
+                </Link>
+              )}
+              {SOCIAL_LINKS.twitter && (
+                <Link
+                  href={SOCIAL_LINKS.twitter}
+                  className="text-white/70 transition-colors hover:text-white"
+                >
+                  <Twitter className="h-5 w-5" />
+                </Link>
+              )}
+              {SOCIAL_LINKS.linkedin && (
+                <Link
+                  href={SOCIAL_LINKS.linkedin}
+                  className="text-white/70 transition-colors hover:text-white"
+                >
+                  <Linkedin className="h-5 w-5" />
+                </Link>
+              )}
+            </div>
+          </div>
+
+          {/* Nav links */}
+          <div className="space-y-4">
+            <p className="text-sm font-semibold uppercase tracking-wider text-white/50">
+              Navigation
+            </p>
+            <ul className="space-y-3">
+              {NAV_LINKS.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-white/70 transition-colors hover:text-white"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Legal */}
+          <div className="space-y-4">
+            <p className="text-sm font-semibold uppercase tracking-wider text-white/50">Legal</p>
+            <ul className="space-y-3">
+              <li>
+                <Link
+                  href="/privacy"
+                  className="text-sm text-white/70 transition-colors hover:text-white"
+                >
+                  Privacy Policy
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/terms"
+                  className="text-sm text-white/70 transition-colors hover:text-white"
+                >
+                  Terms of Service
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div className="border-t border-white/10 pt-8">
+          <p className="text-center text-sm text-white/50">
+            © {new Date().getFullYear()} {SITE_NAME}. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import Navbar from "@/components/navs/navbar";
+
+// Hero section — the first thing users see
+// Replace headline, subtext, and CTA content with your actual copy
+export default function HeroSection() {
+  return (
+    <>
+      <Navbar />
+      <section
+        id="hero"
+        className="relative flex min-h-[calc(100vh-4rem)] items-center overflow-hidden py-24"
+      >
+        {/* Background decoration */}
+        <div
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              "radial-gradient(ellipse 80% 60% at 50% 0%, var(--brand-surface) 0%, transparent 70%)",
+          }}
+        />
+
+        <div className="content-container">
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, ease: "easeOut" }}
+            className="mx-auto max-w-3xl space-y-8 text-center"
+          >
+            {/* Badge */}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.1 }}
+              className="inline-flex items-center gap-2 rounded-full border border-border bg-background px-4 py-1.5 text-sm font-medium"
+            >
+              <span className="h-2 w-2 rounded-full bg-primary" />
+              New — v1.0 just shipped
+            </motion.div>
+
+            {/* Headline */}
+            <h1 className="text-5xl font-bold leading-tight tracking-tight md:text-7xl">
+              Build faster,{" "}
+              <span className="text-gradient-brand">ship better</span>
+            </h1>
+
+            {/* Subtext */}
+            <p className="mx-auto max-w-2xl text-xl leading-relaxed text-muted-foreground">
+              The modern landing page starter for your next project. Production-ready, beautifully
+              designed, fully customizable.
+            </p>
+
+            {/* CTAs */}
+            <div className="flex flex-col justify-center gap-4 sm:flex-row">
+              <Button size="lg" className="btn-primary px-8 text-white">
+                Get started free
+              </Button>
+              <Button size="lg" variant="outline" className="btn-outline px-8">
+                View documentation
+              </Button>
+            </div>
+
+            {/* Social proof */}
+            <p className="text-sm text-muted-foreground">
+              Trusted by <span className="font-semibold text-foreground">500+</span> developers
+            </p>
+          </motion.div>
+        </div>
+      </section>
+    </>
+  );
+}

package/templates/nextjs/base/components/ui/accordion.tsx

@@ -0,0 +1,47 @@
+"use client";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => (
+  <AccordionPrimitive.Item className={cn("border-b", className)} {...props} />
+);
+
+const AccordionTrigger = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+);
+
+const AccordionContent = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>) => (
+  <AccordionPrimitive.Content
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+);
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/nextjs/base/components/ui/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-12 px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { buttonVariants };

package/templates/nextjs/base/components/ui/dialog.tsx

@@ -0,0 +1,61 @@
+"use client";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+);
+
+const DialogContent = ({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg border",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogClose className="absolute right-4 top-4 opacity-70 hover:opacity-100">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogClose>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5", className)} {...props} />
+);
+const DialogTitle = DialogPrimitive.Title;
+const DialogDescription = DialogPrimitive.Description;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};

package/templates/nextjs/base/components/ui/dropdown-menu.tsx

@@ -0,0 +1,55 @@
+"use client";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>) => (
+  <DropdownMenuPortal>
+    <DropdownMenuPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPortal>
+);
+
+const DropdownMenuItem = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+);
+
+const DropdownMenuSeparator = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>) => (
+  <DropdownMenuPrimitive.Separator
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+);
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+};

package/templates/nextjs/base/components/ui/sonner.tsx

@@ -0,0 +1,6 @@
+"use client";
+import { Toaster as SonnerToaster } from "sonner";
+
+export function Toaster() {
+  return <SonnerToaster richColors position="bottom-right" />;
+}

package/templates/nextjs/base/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/nextjs/base/constants/common.ts

@@ -0,0 +1,15 @@
+export const SITE_NAME = "__PROJECT_NAME__";
+export const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://yourdomain.com";
+
+export const NAV_LINKS = [
+  { label: "Features", href: "#features" },
+  // __NAV_LINK_ABOUT__
+  // __NAV_LINK_BLOG__
+  // __NAV_LINK_CONTACT__
+] as const;
+
+export const SOCIAL_LINKS = {
+  twitter: "#",
+  github: "#",
+  linkedin: "#",
+} as const;

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

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+const eslintConfig = [
+  { ignores: [".next/**", "node_modules/**"] },
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      // Enforce no unused variables — common source of tech debt
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      // No explicit any — forces proper typing
+      "@typescript-eslint/no-explicit-any": "warn",
+      // React hooks rules
+      "react-hooks/exhaustive-deps": "warn",
+    },
+  },
+];
+
+export default eslintConfig;

package/templates/nextjs/base/lib/metadata.ts

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://yourdomain.com";
+
+interface MetadataOptions {
+  title: string;
+  description: string;
+  image?: string;
+  path?: string;
+}
+
+// Factory for consistent metadata across all pages
+export function createMetadata({ title, description, image, path = "" }: MetadataOptions): Metadata {
+  const url = `${BASE_URL}${path}`;
+  const ogImage = image ?? `${BASE_URL}/og-image.png`;
+
+  return {
+    title,
+    description,
+    metadataBase: new URL(BASE_URL),
+    openGraph: {
+      title,
+      description,
+      url,
+      images: [{ url: ogImage, width: 1200, height: 630 }],
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [ogImage],
+    },
+    alternates: { canonical: url },
+  };
+}

package/templates/nextjs/base/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Merge Tailwind classes safely — use this everywhere instead of string interpolation
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/nextjs/base/next.config.ts

@@ -0,0 +1,33 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    optimizePackageImports: ["lucide-react"],
+  },
+  compiler: {
+    // Remove console.log in production
+    removeConsole: process.env.NODE_ENV === "production",
+  },
+  output: "standalone", // Required for Docker VPS deploy
+  images: {
+    minimumCacheTTL: 2592000, // 30-day image cache
+    remotePatterns: [
+      // Add your image domains here
+      // { protocol: "https", hostname: "your-s3-domain.com", pathname: "/**" }
+    ],
+  },
+  headers: async () => [
+    {
+      // Immutable cache for hashed Next.js static bundles
+      source: "/_next/static/:path*",
+      headers: [{ key: "Cache-Control", value: "public, max-age=2592000, immutable" }],
+    },
+    {
+      // Long-lived cache for public assets
+      source: "/:path*.(webp|png|jpg|jpeg|svg|ico|woff2|woff|ttf)",
+      headers: [{ key: "Cache-Control", value: "public, max-age=2592000" }],
+    },
+  ],
+};
+
+export default nextConfig;

package/templates/nextjs/base/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "husky",
+    "build-and-scan": "bash ./scripts/build-and-scan.sh",
+    "lighthouse": "bash ./scripts/lighthouse-check.sh"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "prettier --write",
+      "eslint --fix --no-warn-ignored --max-warnings 0"
+    ],
+    "*.{css,json,md,yml,yaml}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.537.0",
+    "motion": "^12.0.0",
+    "next": "15.3.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.0.0",
+    "@commitlint/config-conventional": "^19.0.0",
+    "@eslint/eslintrc": "^3",
+    "@lhci/cli": "^0.14.0",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.0",
+    "husky": "^9.0.0",
+    "lint-staged": "^15.0.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.6.0",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.0",
+    "typescript": "^5"
+  }
+}

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

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;