How to use this template.

Getting started

1. Duplicate the template and open the Home page.
2. Click any section to edit its content in the right-hand properties panel.
3. Update the site settings (name, favicon, social image) under Site Settings → General.
4. Publish. Every page is already connected through the navbar, footer and buttons.

Colors & fonts

All sections read their colors from one place: the C tokens at the top of Kit.tsx (Assets → Code). Change primary, accent or bg there and every page updates. The same palette is also saved as Framer color styles (Brand, Surface, Text) and text styles (Heading, Body, Label) for anything you build natively. Headings use Geist, body text uses Inter.

Editing sections

• Every section is a component with labeled controls: titles, subtitles, buttons, links, stats and lists.
• Wrap words in *asterisks* inside any title to give them the violet gradient.
• Presets (FAQ, Page header, Pricing mode) switch the content for each page in one click.
• Animations pause on the canvas and play in Preview and on the live site.

Agents & agent pages

• Agent content (name, description, features, workflow steps, metric, quote, integrations) lives in the AGENTS list in Kit.tsx, so cards, filters and detail pages stay in sync.
• Each agent has its own page at /agent/[slug]. To add one, duplicate an agent page, change its path, then turn on Custom content in the Agent detail component to edit every field.
• Prefer Framer CMS? Create an Agents collection with the same fields and bind them to a CMS page. Field names match the controls one-to-one.

Forms

The contact form validates every field and shows designed success and error states. To receive submissions, paste a form endpoint (for example from Formspree or Basin) into the Form endpoint control. The agent dropdown is pre-filled when visitors arrive from an agent page's “Book a demo” button. The newsletter field in the footer can be connected the same way.

Links & navigation

Navbar and footer links are editable lists. “How it works” points to /#how-it-works, the anchor ID set on the How it works section. Change the ID in the section's controls if you rename it.

Responsive behavior

Every section adapts to its own width (container queries), so the template works on desktop, tablet and phone without extra breakpoints. Add Framer breakpoints any time if you want different layouts per device.

Need help?

Questions about the template? Reach out through the contact page of the marketplace listing and we'll get back to you within two business days.