Customization

This template is designed so most branding and product changes can be made without rewriting core app structure.

Branding and metadata

Global metadata defaults live in utils/generateMetaData.ts.

Use that file to update:

• default site title
• default description
• canonical base URL
• default Open Graph and Twitter image
• favicon and manifest references

If a single page needs different metadata, export metadata from that page and build it from the shared helper.

Fonts and typography

Google font registrations live in utils/font.ts. Update that file if you want to replace or remove bundled fonts such as:

• Inter Tight
• IBM Plex Mono
• Instrument Serif
• Manrope
• Sora
• Space Grotesk
• Funnel Display

Layout and shared chrome

The shared app shell is defined in app/layout.tsx.

That file wraps every page with:

• Navbar
• Footer
• SmoothScrollProvider
• MobileMenuProvider

If you want to change site-wide layout behavior, start there.

Navigation

Mobile navigation data is stored in data/mobile-menu.ts. Update those grouped menu items when you add or remove routes.

If you change a route path, update both the route folder in app/ and every menu entry that links to it.

Page sections and UI

Most page-level UI lives under components/ in folders that mirror the route or feature area:

• components/home/
• components/about/
• components/clone/
• components/integration/
• components/contact/

For visual changes:

1. locate the route in app/
2. inspect the matching component folder
3. edit copy, layout classes, or reusable shared UI as needed

Content-driven customization

Many sections are easier to update through data files than through JSX:

• pricing -> data/pricing.ts
• integrations -> data/integrations.ts
• clone voices -> data/clone-voices.ts
• testimonials -> data/testimonials.ts
• FAQs -> data/faq.ts
• blog, services and use cases etc. -> Markdown files in data/

Animations

Motion behavior is provided by components in components/animation/ and shared UI sections that use GSAP- or reveal-based animation wrappers.

If you remove or replace motion:

• update the relevant animated section component
• test mobile and desktop behavior
• confirm the page still works without hydration issues