Customization
Customize NA-AI Landing content, branding, pricing, sections, SEO, and assets using its data-driven structure.
Customize without rewriting every componentLink to section
NA-AI Landing is data-driven by design.
Most product copy and section content lives in:
src/@dataThis makes the template easier to adapt because you can:
- update the product story first
- validate positioning quickly
- change pricing and messaging centrally
- avoid rewriting every component early
Change the story before changing the UI.
One-time payment · Instant access after purchase
Core idea
Start by changing the data, not the components. Rewrite the product story before you rewrite the UI.
Recommended customization orderLink to section
Update site settingsLink to section
Edit:
src/config/site.tsUpdate:
- product name
- tagline
- site URL
- SEO title
- social preview configuration
Update core contentLink to section
Edit the files under:
src/@dataStart with:
- hero
- features
- pricing
- testimonials
- FAQ
- CTA
- contact
Replace assetsLink to section
Update:
- logo
- icons
- Open Graph images
- Twitter preview images
- manifest assets
Adjust brandingLink to section
Update:
- fonts
- token usage
- theme settings
- product visuals
Do this only after the content direction becomes clear.
Test and deployLink to section
Run the production build, inspect both themes, and validate responsive layouts before deployment.
Customization foundationsLink to section
Centralized content
SEO-ready structure
PyColors design foundation
Fast launch workflow
Data filesLink to section
| Section | File |
|---|---|
| Hero | src/@data/hero.ts |
| Features | src/@data/features.ts |
| Integrations | src/@data/integrations.ts |
| Pricing | src/@data/pricing.ts |
| Pricing Table | src/@data/pricing-table.ts |
| Testimonials | src/@data/customers.ts |
| FAQ | src/@data/faq.ts |
| CTA | src/@data/cta.ts |
| Contact | src/@data/contact.ts |
| Footer | src/@data/footer.ts |
| Navbar | src/@data/navbar.ts |
Site configurationLink to section
Edit:
src/config/site.tsUse it to update:
- product name
- tagline
- site URL
- SEO title
- SEO description
- Open Graph image
- Twitter image
SEO rule
Update the site URL and social preview assets before deploying publicly.
Branding and tokensLink to section
NA-AI Landing uses:
@pycolors/ui
@pycolors/tokensThe shared tokens provide a stable visual foundation for:
- colors
- surfaces
- borders
- radius
- shadows
- focus states
- dark and light mode
Design rule
Prefer semantic tokens over raw color values. This keeps the page visually consistent across themes.
Content strategyLink to section
Prefer
- clear product promise
- specific AI or SaaS use case
- short feature labels
- proof-oriented sections
- pricing aligned with your offer
Avoid
- generic AI buzzwords
- changing every component first
- too many competing CTAs
- removing trust sections
- publishing with default SEO assets
Customize pricingLink to section
Pricing content is split across:
src/@data/pricing.ts
src/@data/pricing-table.tsUse it to update:
- plan names
- monthly and yearly pricing
- comparison rows
- feature availability
- CTA labels
- positioning copy
Pricing rule
Pricing should clarify the buying decision, not only list features.
Customize SEO and assetsLink to section
Update social preview images:
public/seo/og-main.jpg
public/seo/twitter-main.jpgUpdate icons:
public/iconsUpdate the web manifest:
public/manifest.webmanifestRecommended workflowLink to section
A high-leverage customization path usually looks like this:
- define positioning
- update hero and pricing
- replace branding assets
- adjust proof and testimonials
- validate SEO metadata
- refine layout and visuals
- deploy publicly
This keeps the launch process focused on clarity and conversion before visual overengineering.
Positioning principle
A landing page becomes valuable when the offer is clear, believable, and easy to understand quickly.