TEMPLATE GUIDE / VERSION 1.0

Make Veyra your own.

A compact guide to the native Framer project, its reusable pieces, and the setup required before launch.

01 / Brand and visual system

Change the shared color tokens in Assets → Brand Colors. Edit Geist and Geist Mono text styles in Typography. Update the logo in Site Navigation and the shared Site Shell footer. Site-wide SEO, social image, and favicon are in Site Settings.

02 / Shared layout and controls

Site Shell distributes navigation and footer to every page. Action Button has Blue, White, Black, and Outline variants with hover and pressed states. Site Navigation has Desktop, Phone Closed, and Phone Open variants. Edit the source component to update every instance.

03 / Motion and interactive previews

Native pages
The site includes Home, Platform, Solutions, Pricing, About, Journal, Contact, and eight detailed destinations: For You, Triggers, Everyday Work, Sales & Revenue, Toolkits, Guardrails, Optimization, and Workflow Library. Each has Desktop, Tablet, and Phone layouts. Edit native copy, cards, FAQs, and CTAs directly on the canvas.

Navigation
Edit Site Navigation and the nested Menu Trigger component. Products, Solutions, and Resources use native relative overlays, with hover and tap triggers on desktop and a compact mobile drawer. Keep each menu link connected to an existing page or enabled scroll section.

Motion and interactive sections
SignalField.tsx draws the continuous blue/cyan hero ribbons. Adjust Speed, Movement, Canvas Motion, Intensity, Edge Width, Soft Glow, Autoplay, and Backdrop in the property panel. Canvas Motion is enabled by default; turn it off for a static editing pose. Reduced-motion preferences remain respected; KineticHeadline.tsx slides the hero words. WorkflowScene.tsx and ProductMotion.tsx power workflow, playbook, team, and review graphics. FlowMotion.tsx provides app networks, task queues, event handoffs, developer requests, gateway controls, and activity traces. FeatureLab.tsx adds event, permission, and optimization previews. Animations respect reduced motion.

Directories and client setup
ExploreGrid.tsx provides toolkit and workflow directories with search, filters, accessible detail dialogs, and prompt copying. Edit its Items array to customize names, categories, descriptions, starter prompts, and guide URLs. ClientSetup.tsx provides setup previews and clipboard actions. Replace example URLs and prompts with verified product configuration.

Before launch
The interactive examples are illustrative front-end demonstrations. Configure real integrations and authentication separately, connect Contact form delivery, verify pricing and legal copy, and set final metadata and domain settings before publishing.

App globe
AppGlobe.tsx powers the rotating dotted sphere and floating app badges on Home, Platform, and For You. Edit Brand, Accent, Dots, Speed, Density, Autoplay, Caption, Composition, and the Apps array in the property panel. App marks are self-contained SVGs, with a Custom icon override for each item. Keep the app list aligned with verified product support before launch. The illustration pauses offscreen, when the browser tab is hidden, and for reduced-motion preferences. The headline, supporting copy, and CTA remain editable native Framer layers. Update the app catalogue in both the desktop and compact illustration instances when customizing the section.

04 / Journal and original assets

Add and edit articles in the Journal CMS. Title, slug, summary, category, publication date, reading time, cover, and formatted article body are connected to the list and detail page. The blue glass artwork was generated for this project. Other illustrations and the Veyra mark are original vector graphics. No customer logos or testimonials are included.

05 / Forms, product, and offer

Select the Contact request form and add your verified email or webhook destination in Framer. Test delivery on a published staging site. Change sample pricing in the Pricing Table source and connect CTA destinations to your actual product, signup, or checkout. Keep claims aligned with the product you actually operate.

06 / Before publishing or selling

Complete the privacy and terms pages for the operating business. Set the real domain and final page metadata, then review desktop, tablet, phone, keyboard use, reduced motion, and form delivery. Publish the site from Framer, create a remix link, and prepare accurate marketplace screenshots and listing copy. The current project has not been published.