Skip to content
NOICETHEMES

Configuration

All buyer-editable content lives in two places: src/config.ts (navigation, social links, studio contact info) and the individual files in src/config/ (section content). You rarely need to touch a component to change copy.

src/config.ts

Section titled “src/config.ts”

The root config file re-exports every module from src/config/ and defines the navigation directly:

// What you import everywhere:
import { siteMeta, mainMenu, footerLinks, socialLinks, studioInfo } from "@/config";

siteMeta

Section titled “siteMeta”

Defined in src/config/site.ts. Controls every <head> tag on every page.

FieldTypeDescription
titlestringBrowser tab + SEO title + Open Graph title
descriptionstringMeta description + Open Graph description
baseUrlstringFull URL of your live site — used in sitemaps
ogImagestringPath to the image shown when sharing on social
ogTypestringUsually "website"
twitterCreatorstringTwitter/X handle without @
export const siteMeta = {
  title: "My Studio",
  description: "We craft thoughtful digital experiences.",
  baseUrl: "https://yourdomain.com",
  ogImage: "./assets/og-image.png",
  ogType: "website",
  twitterCreator: "@yourstudio",
};
Section titled “mainMenu”

Array of MenuItemProps. Each item appears in the top navbar.

export const mainMenu: MenuItemProps[] = [
  { name: "Features", href: "/#features" },
  { name: "Pricing",  href: "/#pricing"  },
  // Dropdown: add a children array
  {
    name: "Pages",
    href: "#",
    children: [
      { name: "Blog",    href: "/blog"    },
      { name: "Contact", href: "/contact" },
    ],
  },
];

Use labelKey instead of name to pull the label from src/locales/en/common.json (required for i18n menus).

Section titled “footerLinks”

Array of column objects. Each column has a section label and a links array.

export const footerLinks = [
  {
    section: "Product",
    links: [
      { name: "Features", href: "/#features", target: "_self" },
      { name: "Pricing",  href: "/#pricing",  target: "_self" },
    ],
  },
  {
    section: "Social",
    links: [
      { name: "Instagram", href: "https://instagram.com/...", target: "_blank" },
    ],
  },
];
Section titled “socialLinks”

Shown in the desktop navbar and mobile menu footer. Icons use Tabler Icons.

export const socialLinks = [
  { name: "Instagram", href: "https://instagram.com/you", icon: "tabler:brand-instagram" },
  { name: "TikTok",    href: "https://tiktok.com/@you",   icon: "tabler:brand-tiktok"    },
];

studioInfo

Section titled “studioInfo”

Contact details rendered in the Contact section, footer, and FAQ.

export const studioInfo = {
  phone: "+1 (212) 555-0189",
  email: "[email protected]",
  address: "147 Bowery St, New York, NY 10002",
  hours: {
    weekdays: "Mon – Fri: 9am – 6pm",
    weekends: "Sat: 10am – 4pm",
  },
};

Section config files (src/config/)

Section titled “Section config files (src/config/)”

site.ts

Section titled “site.ts”

In addition to siteMeta, exports hero, stats, about, and testimonials.

hero — headline (supports <br />), subheading, ctaPrimaryText, ctaSecondaryText, establishedYear.

stats — array of { value: string, label: string } for the stats strip.

about — sectionLabel, heading, paragraphs[] (three strings), imageLabels[], features[] (icon + title + description).

testimonials — sectionLabel, heading, summaryText, and reviews[] (name, date, rating, text, style).

features.ts

Section titled “features.ts”

Feature cards for the Features section:

{ icon: "tabler:bolt", title: "Fast builds", description: "Ships zero JS by default." }

pricing.ts

Section titled “pricing.ts”

Pricing plan objects. Set highlighted: true to mark a plan with an accent border:

{
  name: "Pro",
  price: "$29",
  period: "/mo",
  description: "Everything you need to ship.",
  features: ["Unlimited pages", "Priority support"],
  cta: { text: "Get started", href: "/sign-up" },
  highlighted: true,
}

process.ts

Section titled “process.ts”

Numbered steps for the ProcessSteps section:

{ step: "01", title: "Discovery", description: "We research your users and goals." }

services.ts

Section titled “services.ts”

Service cards. Exports services[] and servicesCta ({ text, href }).

team.ts

Section titled “team.ts”

Team members for the Team section. Place photos in public/team/ and reference them as /team/name.jpg:

{
  name: "Alex Rivera",
  role: "Creative Director",
  bio: "10+ years leading brand projects.",
  avatar: "/team/alex.jpg",
  social: { instagram: "alexrivera", twitter: "alexrivera" },
}

faq.ts

Section titled “faq.ts”

FAQ accordion items:

{ question: "What is your turnaround time?", answer: "Most projects take 4–8 weeks." }

logos.ts

Section titled “logos.ts”

Client/partner logos for the LogoBar section. Each entry needs a name and an icon (Tabler icon name or a local SVG path).