create-landing-app 0.1.0

package/templates/nextjs/optional/i18n-dict/files/components/sections/footer-section.tsx

@@ -0,0 +1,98 @@
+"use client";
+import Link from "next/link";
+import { SITE_NAME, NAV_LINKS, SOCIAL_LINKS } from "@/constants/common";
+import { Github, Twitter, Linkedin } from "lucide-react";
+import { useDictionary } from "@/lib/dict-context";
+
+export default function FooterSection() {
+  const dict = useDictionary();
+  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">{dict.footer.copyright}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/nextjs/optional/i18n-dict/files/dictionaries/en.json

@@ -0,0 +1,21 @@
+{
+  "nav": {
+    "features": "Features",
+    "about": "About",
+    "contact": "Contact",
+    "getStarted": "Get started"
+  },
+  "hero": {
+    "headline": "Build faster, ship better",
+    "subtext": "The modern landing page starter kit for your next project.",
+    "cta": "Get started",
+    "ctaSecondary": "Learn more"
+  },
+  "features": {
+    "title": "Everything you need",
+    "subtitle": "Built with the best tools in the ecosystem"
+  },
+  "footer": {
+    "copyright": "© 2025 __PROJECT_NAME__. All rights reserved."
+  }
+}

package/templates/nextjs/optional/i18n-dict/files/dictionaries/vi.json

@@ -0,0 +1,21 @@
+{
+  "nav": {
+    "features": "Tính năng",
+    "about": "Về chúng tôi",
+    "contact": "Liên hệ",
+    "getStarted": "Bắt đầu"
+  },
+  "hero": {
+    "headline": "Xây dựng nhanh hơn, ra mắt tốt hơn",
+    "subtext": "Bộ khởi đầu trang đích hiện đại cho dự án tiếp theo của bạn.",
+    "cta": "Bắt đầu",
+    "ctaSecondary": "Tìm hiểu thêm"
+  },
+  "features": {
+    "title": "Mọi thứ bạn cần",
+    "subtitle": "Được xây dựng với các công cụ tốt nhất"
+  },
+  "footer": {
+    "copyright": "© 2025 __PROJECT_NAME__. Bảo lưu mọi quyền."
+  }
+}

package/templates/nextjs/optional/i18n-dict/files/get-dictionary.ts

@@ -0,0 +1,10 @@
+import type { Locale } from "@/i18n-config";
+
+// Lazy-load dictionary to avoid bundling all locales
+const dictionaries = {
+  en: () => import("@/dictionaries/en.json").then((m) => m.default),
+  vi: () => import("@/dictionaries/vi.json").then((m) => m.default),
+};
+
+export const getDictionary = async (locale: Locale) =>
+  dictionaries[locale]?.() ?? dictionaries.en();

package/templates/nextjs/optional/i18n-dict/files/i18n-config.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  defaultLocale: "en",
+  locales: ["en", "vi"], // extend with your locales
+} as const;
+
+export type Locale = (typeof i18n)["locales"][number];

package/templates/nextjs/optional/i18n-dict/files/lib/dict-context.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { createContext, useContext } from "react";
+import defaultDict from "@/dictionaries/en.json";
+import type en from "@/dictionaries/en.json";
+
+type Dictionary = typeof en;
+
+const DictContext = createContext<Dictionary | null>(null);
+
+export function DictProvider({
+  dict,
+  children,
+}: {
+  dict: Dictionary;
+  children: React.ReactNode;
+}) {
+  return <DictContext.Provider value={dict}>{children}</DictContext.Provider>;
+}
+
+// Falls back to English if no provider in tree
+export function useDictionary(): Dictionary {
+  return useContext(DictContext) ?? defaultDict;
+}

package/templates/nextjs/optional/i18n-dict/files/middleware.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { match as matchLocale } from "@formatjs/intl-localematcher";
+import Negotiator from "negotiator";
+import { i18n } from "@/i18n-config";
+
+function getLocale(request: NextRequest): string {
+  const negotiatorHeaders: Record<string, string> = {};
+  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
+  // Filter out wildcard "*" — Intl.getCanonicalLocales throws on it
+  const languages = new Negotiator({ headers: negotiatorHeaders })
+    .languages()
+    .filter((lang) => lang !== "*");
+  return matchLocale(languages, [...i18n.locales], i18n.defaultLocale);
+}
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const pathnameHasLocale = i18n.locales.some(
+    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  );
+  if (pathnameHasLocale) return;
+
+  const locale = getLocale(request);
+  request.nextUrl.pathname = `/${locale}${pathname}`;
+  return NextResponse.redirect(request.nextUrl);
+}
+
+export const config = {
+  matcher: ["/((?!_next|api|favicon.ico|.*\\..*).*)"],
+};

package/templates/nextjs/optional/i18n-dict/pkg.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@formatjs/intl-localematcher": "^0.6.1",
+    "negotiator": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/negotiator": "^0.6.4"
+  }
+}

package/templates/nextjs/optional/sections/about/files/components/sections/about-section.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { motion } from "motion/react";
+
+// Replace placeholder content with your actual about content
+export default function AboutSection() {
+  return (
+    <section id="about" className="py-24">
+      <div className="content-container">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="grid items-center gap-12 md:grid-cols-2"
+        >
+          {/* Text */}
+          <div className="space-y-6">
+            <h2 className="text-4xl font-bold">About us</h2>
+            <p className="text-lg leading-relaxed text-muted-foreground">
+              We build products that make a difference. Our team is passionate about creating
+              exceptional experiences that delight users and drive results.
+            </p>
+            <p className="leading-relaxed text-muted-foreground">
+              Founded in 2024, we have helped hundreds of companies launch successful products with
+              our modern approach to design and development.
+            </p>
+          </div>
+          {/* Visual placeholder */}
+          <div className="flex h-80 items-center justify-center rounded-2xl bg-accent">
+            <span className="text-muted-foreground">Your image here</span>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/optional/sections/about/inject/app__[lang]__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import AboutSection from "@/components/sections/about-section";
+---
+MARKER:__PAGE_SECTIONS__
+<AboutSection />

package/templates/nextjs/optional/sections/about/inject/app__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import AboutSection from "@/components/sections/about-section";
+---
+MARKER:__PAGE_SECTIONS__
+<AboutSection />

package/templates/nextjs/optional/sections/about/inject/constants__common.ts

@@ -0,0 +1,2 @@
+MARKER:__NAV_LINK_ABOUT__
+{ label: "About", href: "#about" },

package/templates/nextjs/optional/sections/blog/files/components/sections/blog-section.tsx

@@ -0,0 +1,191 @@
+"use client";
+import Link from "next/link";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+
+type BlogPost = {
+  slug: string;
+  title: string;
+  description: string;
+  date: string;
+  category: string;
+  thumbnail?: string;
+};
+
+// Replace with your CMS/API data
+const BLOG_POSTS: BlogPost[] = [
+  { slug: "post-1", title: "Getting started with our platform", description: "Learn how to set up your account and launch your first project in minutes.", date: "2024-01-15", category: "Product" },
+  { slug: "post-2", title: "Best practices for modern web apps", description: "A guide to building scalable, maintainable applications.", date: "2024-02-01", category: "Engineering" },
+  { slug: "post-3", title: "How we scaled to 10k users", description: "A behind-the-scenes look at the challenges and solutions.", date: "2024-02-20", category: "Growth" },
+  { slug: "post-4", title: "Designing for accessibility", description: "Why inclusive design benefits everyone and how to do it.", date: "2024-03-05", category: "Design" },
+  { slug: "post-5", title: "Our open-source journey", description: "What we learned shipping our first open-source library.", date: "2024-03-18", category: "Engineering" },
+  { slug: "post-6", title: "The future of edge computing", description: "How edge functions are changing how we think about latency.", date: "2024-04-01", category: "Product" },
+  { slug: "post-7", title: "Team rituals that actually work", description: "Async-first habits that helped our remote team stay aligned.", date: "2024-04-10", category: "Culture" },
+];
+
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-GB"); // DD/MM/YYYY
+}
+
+function CategoryBadge({ label }: { label: string }) {
+  return (
+    <Button className="h-[22px] w-fit rounded-[4px] bg-primary text-xs leading-[18px] tracking-[-0.24px] text-primary-foreground hover:bg-primary/80">
+      {label}
+    </Button>
+  );
+}
+
+function Thumbnail({ src, alt, className }: { src?: string; alt?: string; className: string }) {
+  return src ? (
+    <img src={src} className={`h-full w-full object-cover ${className}`} alt={alt ?? ""} loading="lazy" />
+  ) : (
+    <div className={`h-full w-full bg-muted ${className}`} />
+  );
+}
+
+// Desktop: featured left + 3 secondary right + optional related grid
+function BlogViewDesktop({ posts }: { posts: BlogPost[] }) {
+  const [featured, ...rest] = posts;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-[128px] pb-20"
+    >
+      <div className="flex justify-between gap-[29px] max-lg:gap-5">
+        {/* Featured post */}
+        <div className={`flex flex-col gap-2 ${rest.length === 0 ? "w-full" : "w-1/2"}`}>
+          <Link href={`/blog/${featured.slug}`} className={`w-full ${rest.length === 0 ? "h-[500px]" : "h-[320px]"}`}>
+            <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
+          </Link>
+          <div className="mt-1">
+            <CategoryBadge label={featured.category} />
+          </div>
+          <Link href={`/blog/${featured.slug}`} className="line-clamp-2 text-xl font-semibold leading-[24px] text-primary hover:underline">
+            {featured.title}
+          </Link>
+          <time dateTime={featured.date} className="text-sm leading-5 text-primary">
+            {formatDate(featured.date)}
+          </time>
+          <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
+        </div>
+
+        {/* Secondary posts */}
+        {rest.length > 0 && (
+          <div className="flex w-1/2 flex-col gap-[30px]">
+            {rest.slice(0, 3).map((post) => (
+              <Link key={post.slug} href={`/blog/${post.slug}`} className="flex gap-[30px] max-xl:gap-6 max-lg:gap-4">
+                <div className="h-[147px] w-[191px] flex-shrink-0 max-lg:h-[130px] max-lg:w-[169px]">
+                  <Thumbnail src={post.thumbnail} className="rounded-[10px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadge label={post.category} />
+                  <span className="text-xl font-semibold leading-[30px] text-primary hover:underline max-xl:text-lg max-lg:text-base">
+                    {post.title}
+                  </span>
+                  <time dateTime={post.date} className="text-sm leading-5 text-primary">
+                    {formatDate(post.date)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Related: 4-col grid for posts beyond index 4 */}
+      {posts.length > 4 && (
+        <div className="flex flex-col gap-[32px]">
+          <span className="text-2xl font-semibold leading-8 text-primary">Related posts</span>
+          <div className="grid grid-cols-4 gap-8">
+            {posts.slice(4).map((post) => (
+              <Link key={post.slug} href={`/blog/${post.slug}`} className="flex flex-col gap-[30px]">
+                <div className="h-[220px] w-full max-lg:h-[130px]">
+                  <Thumbnail src={post.thumbnail} alt={post.title} className="rounded-[16px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadge label={post.category} />
+                  <span className="text-xl font-semibold leading-[30px] text-primary max-xl:text-lg max-lg:text-base">
+                    {post.title}
+                  </span>
+                  <time dateTime={post.date} className="text-sm leading-5 text-primary">
+                    {formatDate(post.date)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+// Mobile: full-width featured + horizontal list of remaining
+function BlogViewMobile({ posts }: { posts: BlogPost[] }) {
+  const [featured, ...rest] = posts;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-6 pb-20"
+    >
+      <div className="flex flex-col gap-2">
+        <Link href={`/blog/${featured.slug}`} className="h-[230px] w-full">
+          <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
+        </Link>
+        <div className="mt-1">
+          <CategoryBadge label={featured.category} />
+        </div>
+        <Link href={`/blog/${featured.slug}`} className="text-xl font-semibold leading-[30px] text-primary hover:underline max-lg:text-lg">
+          {featured.title}
+        </Link>
+        <time dateTime={featured.date} className="text-sm leading-5 text-primary">
+          {formatDate(featured.date)}
+        </time>
+        <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
+      </div>
+      <div className="flex flex-col gap-6">
+        {rest.map((post) => (
+          <Link key={post.slug} href={`/blog/${post.slug}`} className="flex items-start gap-4">
+            <div className="h-[91px] w-[118px] flex-shrink-0">
+              <Thumbnail src={post.thumbnail} className="rounded-[10px]" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <CategoryBadge label={post.category} />
+              <span className="text-sm font-semibold leading-6 text-primary">{post.title}</span>
+              <time dateTime={post.date} className="text-sm leading-5 text-primary">
+                {formatDate(post.date)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+export default function BlogSection() {
+  return (
+    <section id="blog" className="py-24">
+      <div className="content-container">
+        <div className="mb-12 space-y-4 text-center">
+          <h2 className="text-4xl font-bold text-primary">From the blog</h2>
+          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+            Insights, tutorials, and updates from our team.
+          </p>
+        </div>
+        <div className="hidden md:block">
+          <BlogViewDesktop posts={BLOG_POSTS} />
+        </div>
+        <div className="block md:hidden">
+          <BlogViewMobile posts={BLOG_POSTS} />
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/optional/sections/blog/inject/app__[lang]__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import BlogSection from "@/components/sections/blog-section";
+---
+MARKER:__PAGE_SECTIONS__
+<BlogSection />

package/templates/nextjs/optional/sections/blog/inject/app__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import BlogSection from "@/components/sections/blog-section";
+---
+MARKER:__PAGE_SECTIONS__
+<BlogSection />

package/templates/nextjs/optional/sections/blog/inject/constants__common.ts

@@ -0,0 +1,2 @@
+MARKER:__NAV_LINK_BLOG__
+{ label: "Blog", href: "#blog" },

package/templates/nextjs/optional/sections/contact/files/components/sections/contact-section.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { useState } from "react";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+interface FormData {
+  name: string;
+  email: string;
+  message: string;
+}
+
+export default function ContactSection() {
+  const [form, setForm] = useState<FormData>({ name: "", email: "", message: "" });
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      // Replace with your actual form submission logic
+      await new Promise((r) => setTimeout(r, 1000));
+      toast.success("Message sent! We'll get back to you soon.");
+      setForm({ name: "", email: "", message: "" });
+    } catch {
+      toast.error("Failed to send. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <section id="contact" className="bg-secondary/30 py-24">
+      <div className="content-container max-w-2xl">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="space-y-8"
+        >
+          <div className="space-y-4 text-center">
+            <h2 className="text-4xl font-bold">Get in touch</h2>
+            <p className="text-lg text-muted-foreground">We&apos;d love to hear from you.</p>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <input
+              type="text"
+              placeholder="Your name"
+              required
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              className="w-full rounded-lg border border-border bg-background px-4 py-3 focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+            <input
+              type="email"
+              placeholder="Email address"
+              required
+              value={form.email}
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              className="w-full rounded-lg border border-border bg-background px-4 py-3 focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+            <textarea
+              placeholder="Your message"
+              required
+              rows={5}
+              value={form.message}
+              onChange={(e) => setForm({ ...form, message: e.target.value })}
+              className="w-full resize-none rounded-lg border border-border bg-background px-4 py-3 focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+            <Button type="submit" className="w-full" disabled={submitting}>
+              {submitting ? "Sending..." : "Send message"}
+            </Button>
+          </form>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/optional/sections/contact/inject/app__[lang]__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import ContactSection from "@/components/sections/contact-section";
+---
+MARKER:__PAGE_SECTIONS__
+<ContactSection />

package/templates/nextjs/optional/sections/contact/inject/app__page.tsx

@@ -0,0 +1,5 @@
+MARKER:__PAGE_IMPORTS__
+import ContactSection from "@/components/sections/contact-section";
+---
+MARKER:__PAGE_SECTIONS__
+<ContactSection />

package/templates/nextjs/optional/sections/contact/inject/constants__common.ts

@@ -0,0 +1,2 @@
+MARKER:__NAV_LINK_CONTACT__
+{ label: "Contact", href: "#contact" },

package/templates/nextjs/optional/tanstack-query/files/lib/custom-fetch.ts

@@ -0,0 +1,9 @@
+// Typed fetch wrapper — use in TanStack Query queryFn
+export async function customFetch<T>(url: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(url, {
+    headers: { "Content-Type": "application/json", ...options?.headers },
+    ...options,
+  });
+  if (!res.ok) throw new Error(`Fetch error: ${res.status} ${res.statusText}`);
+  return res.json() as Promise<T>;
+}

package/templates/nextjs/optional/tanstack-query/files/lib/query-client.ts

@@ -0,0 +1,21 @@
+import { QueryClient } from "@tanstack/react-query";
+
+// Singleton QueryClient for server-side usage
+export function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000, // 1 minute
+        retry: 1,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined;
+
+export function getQueryClient() {
+  if (typeof window === "undefined") return makeQueryClient();
+  if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  return browserQueryClient;
+}

package/templates/nextjs/optional/tanstack-query/inject/components__providers.tsx

@@ -0,0 +1,9 @@
+MARKER:__PROVIDERS_IMPORT__
+import { QueryClientProvider } from "@tanstack/react-query";
+import { getQueryClient } from "@/lib/query-client";
+---
+MARKER:__PROVIDERS_WRAP_START__
+<QueryClientProvider client={getQueryClient()}>
+---
+MARKER:__PROVIDERS_WRAP_END__
+</QueryClientProvider>

package/templates/nextjs/optional/tanstack-query/pkg.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0"
+  }
+}

package/templates/nextjs/optional/zustand/files/store/ui-store.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+// Global UI state — mobile menu, modals, etc.
+// Only use this for state shared across 3+ components.
+// Local state (useState) is preferred for single-component state.
+interface UIStore {
+  mobileMenuOpen: boolean;
+  setMobileMenuOpen: (open: boolean) => void;
+  toggleMobileMenu: () => void;
+}
+
+export const useUIStore = create<UIStore>((set) => ({
+  mobileMenuOpen: false,
+  setMobileMenuOpen: (open) => set({ mobileMenuOpen: open }),
+  toggleMobileMenu: () => set((s) => ({ mobileMenuOpen: !s.mobileMenuOpen })),
+}));