Hanabi Agency

Hanabi is a Lincoln-based agency specialising in e-commerce projects with a focus on Shopify. We developed their new website and empowered their marketing team with Sanity CMS.

View live website

Requirements

Implement their new design with Next.js for a superior page speed

Implementation of Sanity for content management and Uniform to personalize content based on user's intent

Integration of contact form with a CRM on Notion

Newsletter integration with Klaviyo

Fast and modern website

Hanabi wanted to attract more clients, and for that they decided to work with Tinloof to implement a fast website that follows SEO best practices and enables content managers to create unlimited landing pages without the involvement of designers and developers.

One of the main requirements was to use Sanity as the headless CMS, reach page speeds of 90+ on Lighthouse, and implement 3rd party integrations.

We achieved Hanabi's goals.

Hanabi landing page
Hanabi case study banner
Hanabi case study page
“

Tinloof collaborated with us on a new agency website. As a developer, I could tell that they know what they're talking about and it was a really pleasant experience working with them. They delivered the project on time and budget. We would certainly work with them in the future.”

Neil Bradley's photo
Neil Bradley
Co-founder @ Hanabi Agency

Tech stack

View all

Framework

Next.js's logoNext.js

Library & Languages

React's logoReactTypeScript's logoTypeScript

Deployment Platform

Vercel's logoVercel

Composable DXC

Uniform's logoUniform

API Integrations

Notion's logoNotion

Website architecture

We followed a headless architecture approach, and built the frontend with Next.js and used Sanity as the headless CMS to control the content and the layout of the website.

The site is deployed on Vercel, and integrates with 3rd party tools with APIs like Notion, Uniform, and Klaviyo.

Content management with Sanity

Hanabi leverages Sanity as a headless CMS not only to manage content and create pages, but also to manage theme colors, the homepage pattern, and SEO configurations like redirects and schema markup.

Hanabi's marketing team also makes use of Sanity's out of the box real-time collaboration and live preview feature.

The website is built with a modular architecture, meaning that the

Reusable modules to build landing pages
Hanabi Agency Sanity studio
Create OG images from Sanity
Control Hanabi homepage animated pattern
Control color themes from Sanity

Reaching top page speeds

The frontend was built with Next.js and TypeScript as a language.

By following our usual best practices, we managed to obtain great Lighthouse scores and managed to make all pages load in a second or less.

We used Sanity's codegen plugin to automatically generate types based on Sanity schemas and easily ensure more reliability in the communication with the CMS backend.

98
Performance
96
Accessibility
100
Best Practices
100
SEO

Personalized content with Uniform

We made it possible to fully control Hanabi's call-to-action footer based on the website visitor's intent.

We used Uniform's powerful Canvas platform to create various intents based on the ad the user clicked to land on the website and made it possible to control the content for each intent directly from Sanity.

Uniform integration with Sanity



Notion integration

Whenever someone submits a contact form on Hanabi, a new lead is automatically generated on their Notion CRM with populated fields such as Name, Company, Email, Budget, and Required Service.

We've leveraged the Notion API for this feature.

Klaviyo integration

Users can register on the Hanabi newsletter thanks to the Klaviyo integration.

We also added an extra security layer by using Botpoison's spam prevention tool.

More work

Contact

hi@tinloof.com