create-landing-app 0.2.5 → 0.2.6

package/dist/prompts.js

@@ -10,6 +10,9 @@ export async function runPrompts() {
     const blog = await confirm({ message: "Include Blog section?" });
     if (isCancel(blog))
         return null;
+    const contact = await confirm({ message: "Include Contact section? (form + API route)" });
+    if (isCancel(contact))
+        return null;
     const docker = await confirm({ message: "Include Docker setup? (for VPS deploy)" });
     if (isCancel(docker))
         return null;
@@ -20,6 +23,7 @@ export async function runPrompts() {
         stateManagement: "zustand",
         dataFetching: "tanstack-query",
         blog: Boolean(blog),
+        contact: Boolean(contact),
         docker: Boolean(docker),
     };
 }

package/dist/scaffold.js

@@ -30,6 +30,8 @@ export async function scaffold(config, targetDir) {
     optionals.push("sections/about");
     if (config.blog)
         optionals.push("sections/blog");
+    if (config.contact)
+        optionals.push("sections/contact");
     if (config.docker)
         optionals.push("docker");
     // 3. Apply each optional feature (files + inject markers)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-landing-app",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Create a production-ready Next.js landing page with one command",
   "type": "module",
   "bin": {

package/templates/nextjs/optional/sections/contact/files/app/api/contact/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from "next/server";
+import { contactFormSchema } from "@/components/sections/contact-form-schema";
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  const parsed = contactFormSchema.safeParse(body);
+
+  if (!parsed.success) {
+    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+  }
+
+  // TODO: connect your email service (Resend recommended)
+  // import { Resend } from "resend";
+  // const resend = new Resend(process.env.RESEND_API_KEY);
+  // await resend.emails.send({
+  //   from: process.env.RESEND_FROM_EMAIL!,
+  //   to:   process.env.RESEND_TO_EMAIL!,
+  //   subject: `New contact from ${parsed.data.name}`,
+  //   text: `Phone: ${parsed.data.phone}\nEmail: ${parsed.data.email}\nMessage: ${parsed.data.message ?? ""}`,
+  // });
+
+  console.log("Contact submission:", parsed.data);
+  return NextResponse.json({ ok: true });
+}

package/templates/nextjs/optional/sections/contact/files/components/sections/contact-form-schema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const contactFormSchema = z.object({
+  name:    z.string().trim().min(1, "Name is required").max(100),
+  phone:   z.string().trim().regex(/^\+?[\d\s\-().]{7,20}$/, "Invalid phone number"),
+  email:   z.string().trim().email("Invalid email address"),
+  message: z.string().trim().optional(),
+});
+
+export type ContactFormValues = z.infer<typeof contactFormSchema>;
+
+export const DEFAULT_VALUES: ContactFormValues = {
+  name: "", phone: "", email: "", message: "",
+};

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

@@ -0,0 +1,74 @@
+"use client";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/components/ui/button";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
+import { contactFormSchema, type ContactFormValues, DEFAULT_VALUES } from "./contact-form-schema";
+import { useContactSubmit } from "./use-contact-submit";
+
+export function ContactForm() {
+  const form = useForm<ContactFormValues>({
+    resolver: zodResolver(contactFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  });
+  const { isSubmitting, onSubmit } = useContactSubmit();
+
+  async function handleSubmit(data: ContactFormValues) {
+    const ok = await onSubmit(data);
+    if (ok) form.reset();
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-4">
+        <FormField control={form.control} name="name" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Name *</FormLabel>
+            <FormControl>
+              <input {...field} placeholder="Your name"
+                className="h-12 w-full rounded-lg border border-border bg-background px-4 focus:outline-none focus:ring-2 focus:ring-ring" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+
+        <FormField control={form.control} name="phone" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Phone *</FormLabel>
+            <FormControl>
+              <input {...field} type="tel" placeholder="+84 xxx xxx xxx"
+                className="h-12 w-full rounded-lg border border-border bg-background px-4 focus:outline-none focus:ring-2 focus:ring-ring" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email *</FormLabel>
+            <FormControl>
+              <input {...field} type="email" placeholder="you@example.com"
+                className="h-12 w-full rounded-lg border border-border bg-background px-4 focus:outline-none focus:ring-2 focus:ring-ring" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+
+        <FormField control={form.control} name="message" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Message</FormLabel>
+            <FormControl>
+              <textarea {...field} rows={4} placeholder="How can we help?"
+                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" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? "Sending..." : "Send Message"}
+        </Button>
+      </form>
+    </Form>
+  );
+}

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

@@ -1,34 +1,7 @@
-"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;
-}
+import { ContactForm } from "./contact-form";
 
 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">
@@ -43,35 +16,7 @@ export default function ContactSection() {
             <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>
+          <ContactForm />
         </motion.div>
       </div>
     </section>

package/templates/nextjs/optional/sections/contact/files/components/sections/use-contact-submit.ts

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { toast } from "sonner";
+import { sendContact } from "@/lib/apis/contact";
+import type { ContactFormValues } from "./contact-form-schema";
+
+export function useContactSubmit() {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  async function onSubmit(data: ContactFormValues) {
+    setIsSubmitting(true);
+    try {
+      await sendContact(data);
+      toast.success("Message sent successfully!");
+      return true;
+    } catch {
+      toast.error("Failed to send. Please try again.");
+      return false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return { isSubmitting, onSubmit };
+}

package/templates/nextjs/optional/sections/contact/files/components/ui/form.tsx

@@ -0,0 +1,127 @@
+"use client";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = { name: TName };
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => (
+  <FormFieldContext.Provider value={{ name: props.name }}>
+    <Controller {...props} />
+  </FormFieldContext.Provider>
+);
+
+type FormItemContextValue = { id: string };
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) throw new Error("useFormField must be used within <FormField>");
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return (
+    <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) return null;
+  return (
+    <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/templates/nextjs/optional/sections/contact/files/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/templates/nextjs/optional/sections/contact/files/lib/apis/contact.ts

@@ -0,0 +1,11 @@
+import type { ContactFormValues } from "@/components/sections/contact-form-schema";
+
+export async function sendContact(data: ContactFormValues) {
+  const res = await fetch("/api/contact", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error("Contact API error");
+  return res.json();
+}

package/templates/nextjs/optional/sections/contact/pkg.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@radix-ui/react-label": "^2.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "react-hook-form": "^7.0.0",
+    "zod": "^3.0.0"
+  }
+}