This template is built using native Framer features, combined with select custom code components where native functionality needed extending. Everything else is editable directly in the Framer Designer. The template includes multiple page layouts, CMS-driven content, scroll-based navigation switching, component variants, and a full responsive system.

What's included:

3 homepage layouts (Home A, B, C)
3 pricing layouts
3 case studies layouts
CMS collections for Services, Case Studies, Blog, People, Careers and Testimonials
About page
Testimonials page
404 page
FAQ page
Legal page

2. Template Variables

The template uses a Layout Template to maintain consistent site-wide elements. The Layout Template contains the promo bar, navigation, CTA section, and footer — these appear on every page that uses this template without needing to edit each page individually. When you update something in the Layout Template, every page using it updates automatically.

The content slot inside the Layout Template defines where each page's unique content appears.

Layout Template
Selects which Layout Template to use. The default is "Main," which includes the promo bar, navigation, CTA section, and footer.

Navigation Style
Sets the navigation variant on page load. Options: Desktop/Fill, Desktop/Transparent. Choose based on whether the first section of your page has a light or dark background. On mobile, the navigation is available in Fill only.

Promo Bar Scroll Section
Assign a Scroll Section name here to control when the promo bar disappears and the navigation slides up to take its place.

Promo Bar Scroll Section
Assign a Scroll Section name here to control when the promo bar disappears and the navigation slides up to take its place.

Navigation Scroll Sections (1–3)
These control the navigation's theme switching between Fill and Transparent on scroll. The navigation component has a Scroll Variant effect that listens for scroll sections. When a scroll section enters the viewport, the navigation switches to the assigned variant.

Navigation Scroll Sections (1–3)
These control the navigation's theme switching between Fill and Transparent on scroll. The navigation component has a Scroll Variant effect that listens for scroll sections. When a scroll section enters the viewport, the navigation switches to the assigned variant.

How to set up nav theme switching:

Select a section on your page where the nav theme should change.

In the section's properties, assign a unique Scroll Section name (e.g. "fill-01").

In the page's Template settings, assign that name to the matching slot (e.g. Navigation Change to Fill #1 : fill-01).

The navigation will switch to the dark variant when that section scrolls into view.

3. CMS Structure

The template includes 6 CMS collections. All field names follow the order content appears on the page.

Blog (6 items)
Articles organized by category (Growth, Transformation, Leadership, Decision-Making, Operations). Each article has a title, subtitle/excerpt, featured illustration, and multiple content sections with subheadings and paragraphs. The Date field controls sorting on the listing page.

Testimonials (7 items)
Simple collection with quote, client name, role and company, and a portrait photo. Used on the Testimonials page and pulled into sections across the site (homepage, case studies).

Case Studies (4 items)
Client case studies with a hero image, client name and role, a headline result title (e.g. "How KOKO improved growth across three markets"), a pull-quote, and a portrait photo. A Featured toggle controls which case study appears highlighted at the top of the listing page.

People (8 items)
Team member profiles with portrait, name, and position. Grouped on the About page into sections (e.g. "The Visionaries," "The Core Team").

Careers (5 items)
Job listings with title, employment type (Full-time / Contract / Part-time), and location (Warsaw / Remote / Flexible). Each listing links to its own single job page.

Services (5 items)
Service pages (Business Diagnosis, Strategic Advisory, Operating Model Redesign, Leadership Alignment, Leadership Coaching, Execution & Accountability) with a title and description, shown in the "Solving the problems that move the business" carousel and across service-related sections.

Managing content

All collections are designed to be self-explanatory — field names follow the order content appears on the page, so adding, editing, or replacing items is straightforward. When adding a new item, duplicating an existing one is the fastest way to preserve the correct structure. If a field connects to another collection (like Stories appearing on Solution pages), matching values need to be exact, including capitalization.

4. Customization

Colors
All colors are defined as Framer color styles. To change the color scheme, edit the color styles in the Styles panel — every element referencing that style updates automatically across the entire site. Do not override colors with hard-coded hex values on individual elements, as they won't update globally.

Colors
All colors are defined as Framer color styles. To change the color scheme, edit the color styles in the Styles panel — every element referencing that style updates automatically across the entire site. Do not override colors with hard-coded hex values on individual elements, as they won't update globally.

Typography
Fonts and text styles are managed through Framer's text styles. To change fonts, update the text styles in the Styles panel. All headings, body text, and labels reference these styles, so a single change propagates everywhere.

Typography
Fonts and text styles are managed through Framer's text styles. To change fonts, update the text styles in the Styles panel. All headings, body text, and labels reference these styles, so a single change propagates everywhere.

Logo
The logo is an SVG mask - replace the SVG file in both the navigation and footer components to update it across the site.

Logo
The logo is an SVG mask - replace the SVG file in both the navigation and footer components to update it across the site.

Images
Replace images by selecting the image element and uploading a new file in the properties panel. For CMS-connected images, update them directly in the CMS collection.

Images
Replace images by selecting the image element and uploading a new file in the properties panel. For CMS-connected images, update them directly in the CMS collection.

Sections
Every section on every page can be removed independently — no section depends on another. To remove a section, select it and delete it. If the section had a Scroll Section name assigned for navigation switching, remove the corresponding reference from the Template Variables panel.

Sections
Every section on every page can be removed independently — no section depends on another. To remove a section, select it and delete it. If the section had a Scroll Section name assigned for navigation switching, remove the corresponding reference from the Template Variables panel.

Buy

THE BAILEY HART BRIEF

Strategic notes for better business decisions

Your information is never disclosed to third parties.