Skip to content
Parker Van Ham
Back to projects
Industrial CNC Router Promotions landing page hero section showing tiered router pricing cards and a call-to-action for pricing and info

Industrial CNC Router Promotions

Full-Stack Developer (Sole Developer)

A conversion-focused marketing landing page for an Industrial CNC promotional ad campaign, built to turn visitors into qualified sales leads. It presents tiered product promotions, feature breakdowns, customer testimonials, and financing information, all funneling into a validated lead-capture form that emails inquiries directly to the sales inbox. The site was built with the Next.js App Router and styled with Tailwind CSS to match the client's existing brand identity.

Key Contributions

  • Built a single-page Next.js 16 App Router marketing site composed of eight discrete, independently testable section components (Header, Hero, TSlotPromotion, AutomateShop, FeaturedPromotion, Testimonials, LeadForm, Footer).
  • Implemented a server-validated lead capture form using React 19's useActionState hook wired to a Next.js Server Action (submitLead), covering required-field and email-format validation with per-field inline error messages.
  • Integrated the Resend email API to deliver lead notifications as HTML emails with the visitor's address set as replyTo, so the sales team can respond directly from their inbox.
  • Added a hidden honeypot field to the lead form to silently discard bot submissions without alerting the submitter or sending false-positive emails.
  • Configured custom HTTP security headers (X-Content-Type-Options, Referrer-Policy, Permissions-Policy) in next.config.ts to harden the deployed site.
  • Set up dynamic SEO and Open Graph metadata that resolves the canonical site URL automatically from Vercel's VERCEL_PROJECT_PRODUCTION_URL environment variable at build time.
  • Styled the UI with Tailwind CSS v4's @theme inline token system, defining custom brand color variables and a repeating background texture, plus a reduced-motion-aware fade-up entrance animation.
  • Loaded and applied two Google fonts (Anton for display headings, Lato for body copy) via next/font/google with tuned font-weight subsets for performance.

Technologies

  • Next.js 16 (App Router)
  • React 19 & TypeScript
  • Tailwind CSS 4
  • Next.js Server Actions
  • Resend (transactional email)
  • lucide-react
  • next/font (Google Fonts)
  • Vercel
View Live Site