Tomas Cordero

Keap’s Website

The main marketing site for Keap

Alpine.js, CraftCMS, Laravel, Marketo, Redis, Tailwind CSS, Vue

The Idea

This is the main corporate website for Keap. It’s the main engine behind marketing campaigns, lead capture, education and just general information about Keap.

What it Does

The site does a lot. Its main role is to capture leads using custom forms and interactive elements. It also hosts the company blog that gets fed from a headless Craft CMS instance.

Under the Hood

The Backend

The backend is built fully on Laravel. Laravel has a great templating engine, blade, that allows us to quickly create reusable components and have a very fast turn around time on new projects. It also allows us to build out maintainable but complex business logic on the backend to handle any need that might come up. Since Laravel also has a great caching facade we can use Redis to improve our page loading times whenever we need to read data from a database or API.

The Frontend

For most of the site we built the frontend out using Laravel’s Blade templating engine. For the blog it’s built on top of a headless Craft CMS instance that hydrates a Blade template with the blog data. For the interactive elements on the page we use a mixture of Alpine.js, Vue.js and Vanilla Javascript. If there’s any kind of animation that gets more complex than a simple CSS animation we use Motion Framer (FKA Motion One). As for the styles we use Tailwind for any new pages created but a good chunk of the site uses a legacy Foundation CSS library.

What’s up with it now?

Currently the Keap site is alive and well. It’s always changing and growing. Check it out for yourself: https://keap.com