Instructions

Colors

Open the Variables panel. The Base collection holds the brand colors (Black, White, Grey and their transparent versions) and the color roles: Button Bg, Pill Bg, Stars, Dark Section and a few more. Change a base color and every role that uses it follows.

Fonts

The template uses Manrope from Google Fonts in weights 400, 500 and 700. To switch fonts, add the new font in Site settings, Fonts, then change the Font Primary variable.

Images

Select an image and replace it in the Settings panel, then update its alt text there. Photos in the hero, About and CTA sections are set to cover, so any landscape photo works.

Components

Navbar, Footer, CTA, Testimonials, Button (variants Primary and Border) and Nav Button are Components, so one edit updates every page. Right-click an instance to edit it.

Contact form

The form on the Contact page is a native Webflow form. Submissions arrive in Site settings, Forms. Add your email under Form notifications to receive them by email.

How to edit the interactions

Every animation uses Interactions with GSAP. There is no custom code. Open the Interactions panel to change timing or easing. Interactions that switch a state add or remove a combo class, and the look of that state lives in the class itself.

• Reveal hero on page load: the hero photo fades in, the heading appears letter by letter, then the text, button and reviews slide up.
• Move hero on scroll: parallax for the hero photo and content.
• Scale coaching cards on scroll: each pricing card grows from 90% to 100% as it enters the screen.
• Fade in about text on scroll and Switch about image 2 and 3: the story texts fade in and the photo on the right changes with each block.
• Show review 1 to 4: clicking an author photo adds is-slide-active, is-author-active and is-wipe-active to the matching review. To add a fifth review, duplicate a slide and an author, set their data-review attributes to 5 and duplicate one of these interactions.
• Toggle FAQ answer 1 to 5: adds is-panel-open to the answer and is-line-open to the plus icon.
• Toggle mobile menu, Close mobile menu on link click and Turn navbar white after scroll: switch the is-nav-open and is-nav-scrolled states of the Navbar on phones.
• Straighten button arrow on hover: turns the arrow inside the hovered button.

Removing an animation

Delete the interaction in the Interactions panel. Elements fall back to their final look, nothing stays hidden. Visitors with reduced motion turned on see the final state right away.

Support

Questions or a bug? Write to info@sebadam.com. You get an answer within two working days.