TEMPLATE GUIDE
Make SERPwise your own.
A concise guide to the native pages, shared components, content, motion, and launch settings.
01 / Brand and styles
Update the shared Palette color styles and On light / On dark text styles in Assets. Replace the native SERPwise wordmark in Navigation/Main and the Site shell footer. Update the favicon, social image, site title, and page metadata.
02 / Shared structure
Site shell owns the navigation, page content slot, and footer. Edit this layout once to update every route. Navigation/Main has Desktop, Phone closed, and Phone open variants. Keep menu links identical in the two phone states.
03 / Product and plans
Product/Interactive dashboard owns the three tour views. Its figures are sample content. Commerce/Pricing plans owns monthly and yearly variants; update prices, billed totals, feature limits, and destination links together. Default plan examples are USD; annual prices are 20% lower than twelve monthly payments.
04 / Journal content
The Journal CMS contains three original articles. Replace title, slug, excerpt, category, date, reading time, cover, and Article rich text. The journal grid, search field, and /journal/[slug] detail page are connected to this collection. Keep slugs unique.
05 / Form delivery
RequestForm is a code component with Demo mode on by default. Preview submissions validate fields and show a clearly labeled local completion state; they are not sent or stored. To receive requests, set Demo mode off, configure a trusted HTTPS webhook with CORS and spam protection, update Button and Success, and test delivery. Never place an API secret in the component.
06 / Motion and accessibility
Word-by-word headings, staggered cards, rolling button labels, arrow turns, the ticker, and page transitions use native Framer effects and variants. SignalField, RotatingSignal, and TrendLine provide the flowing glyph field, character transitions, and chart drawing. Their controls set speed, phrases, interval, path, and duration. Open Preview (▶) to watch motion; the editing canvas keeps code animations still. Reduced-motion preferences remain supported. Review keyboard focus, menus, and wrapping at the 1440, 810, and 390 pixel breakpoints after customization.
07 / Images and asset provenance
Three original images were made for this template with OpenAI image generation: a chrome orbit with a yellow glass sphere, a glass magnifying lens with chrome pages, and ascending chrome blocks with a glowing sphere. They are incorporated as project assets. Dashboard UI and the signal logo use original editable layers and SVG.
08 / Before publication or sale
Replace fictional product details with verified capabilities and real plan terms. Connect actual app, account, payment, and contact destinations. Complete Privacy and Terms for your operator. Review no-index settings, attach your domain, verify the complete published site, and create a Framer remix link. Marketplace submission and approval are separate steps; this build does not claim approval or trademark clearance.