Agency Studio

Agency name and branding

The template uses "Forma Studio" as the agency name. Do a global find-and-replace for Forma and Forma Studio across all files in src/. The logo is the letter F in a red rounded square - update it in Navbar.tsx and Footer.tsx.

Portfolio projects

All project data is defined in src/lib/projects-data.ts as a typed array. Each project has: slug, title, client, category, year, description, longDescription, tags, featured, image (optional), gradient, accentColor, services, and outcome.

The imagefield is optional - if omitted the card shows an animated CSS gradient using the project's gradient and accentColor values instead. Set featured: true on up to 4 projects to show them in the homepage hero strip and the Work section.

Replacing project images

Drop your own images into public/projects/ and update the image path in projects-data.ts. Any format works (.avif, .webp, .jpg, .png). Images are referenced as plain <img> tags so no next.config.ts changes are needed.

Team members

Team data is defined in the team array at the top of src/app/about/page.tsx. Each member has name, role, bio, initials, color (accent), and image (optional path in public/team/). If no image is provided, the card shows a colored square with initials.

Colors and theme tokens

All colors are CSS custom properties in src/app/globals.css, set directly in the @theme block (Tailwind v4 style). Override for dark mode in the .dark selector:

/* Light mode — edit in @theme block */
--color-background: #F7F4EE;   /* warm cream page background */
--color-foreground: #0D0B09;   /* near-black text */
--color-primary:    #C83B2A;   /* terracotta red — change to your brand */
--color-muted:      #EEEAE0;   /* slightly darker cream for muted sections */

/* Dark mode — edit in .dark selector */
.dark {
  --color-background: #0D0B09;
  --color-foreground: #F7F4EE;
  --color-primary:    #E04830;
  --color-muted:      #1E1A15;
}

Fonts

Two fonts are loaded in app/layout.tsx via next/font/google:

• Fraunces - display/headings (--font-display, variable serif with optical sizing)
• Plus Jakarta Sans - body text (--font-body, geometric sans)

Fraunces is loaded as a variable font with weight: "variable" and both normal and italic styles - this is required for the optical axes to work.

Services and pricing

Service details, deliverables, timelines, and pricing are defined in the services array at the top of src/app/services/page.tsx. FAQ entries are in the faqs array in the same file. The process steps are in src/components/Process.tsx.

Testimonials

Testimonial data is defined in the testimonials array at the top of src/components/Testimonials.tsx. Each entry has quote, name, title, initials, and color (accent).

Deploy to Vercel (recommended)

Push to GitHub, then import at vercel.com/new. All 6 pages are pre-rendered at build time - no environment variables required.

Static export (Netlify, Cloudflare Pages, GitHub Pages)

Since the template has no server-side logic or API routes, it supports full static export. Add the following to next.config.ts:

const nextConfig: NextConfig = {
  output: "export",
};

Run npm run build and deploy the out/ folder to any static host.

Deploy to Railway / Render

Build command:  npm run build
Start command:  npm start
Node version:   18+

Adding a contact form backend

The contact form in src/app/contact/page.tsx is a static HTML form. To wire it up, create a src/app/api/contact/route.ts Next.js route handler and point the form action there. Popular options for sending email: Resend, SendGrid, or Formspree (no backend needed).

Environment variables

No environment variables are required out of the box. When you add a contact form backend or CMS, create a .env.localfile locally and add the same keys in your hosting provider's environment settings.