Needed a complete visual overhaul for modern design
02
Required improved usability and user interactions
03
Implemented favorites functionality for content management
04
Added advanced search and filtering options
05
Developed an interactive methodology wheel
06
Designed a unique grid layout for content cards
Projects in Numbers
100%
uptime of the website
2K+
signals in the Database
20+
landing pages in the CMS
Our Solutions
Implemented the new design using Tailwind CSS, including mobile and tablet versions
Created a balanced tablet design during development, bridging mobile and desktop designs
Integrated favourites functionality via API and global context for seamless use across all content pages
Developed a semantic search system with OpenAI integration, vectorized content, and automated indexing updates
Enabled automatic indexing of new Strapi CMS content using a Next.js API endpoint and a Vercel cron job for daily updates
Project Tech Stack
Strapi
Headless CMS used to develop websites, mobile applications, eCommerce sites, and APIs. The system builds APIs based on content models automatically, making it easy to view data in the CMS with Strapi examples.
Next.JS
Boosted our project with faster page loads, enhanced SEO, and a streamlined development process for an improved user experience
Vercel
Vercel provided us with the tools and infrastructure to deploy a highly optimized web solution, ensuring rapid load times, seamless scalability, and robust performance throughout the project's lifecycle.
Why Us
Accurate Estimates
90% of our projects stay within the initial offer without major scope changes
Performance by Default
NextJS and SEO audits are included by default to ensure top performance from day one
Faster Delivery
Our internal CMS-kit accelerates Headless CMS development, saving both time and budget
Key Features
1
2
Interactive Methodology Wheel
One of the interesting components of the project was a large methodology wheel with interactive hover behavior. Essentially, it was a complex SVG divided into layers and segments, which dynamically highlighted specific sections and corresponding labels when hovered over.
This functionality was implemented using hover event listeners, which dynamically applied the necessary classes to the target SVG segments.
2
2
Dynamic Content Grid
Another feature was the complex grid layout, designed to allow cards to expand for reading while dynamically adjusting the positioning of surrounding cards.
Depending on the initial position of the expanded card within the grid, other cards would shift appropriately. This functionality was implemented by combining CSS and JavaScript to observe screen width and adjust the grid’s behavior accordingly.
What our client says
David Green
We partnered with FocusReactive to redesign our e-commerce site for better usability and scalability. Their team was communicative, organized, and flexible, completing the project on time even with added tasks. The final product exceeded expectations with an intuitive design and scalability, and their use of tools like Slack and Trello made collaboration seamless. We were so impressed, we’re already planning to work with them again.
Explore Strapi, a leading headless CMS that empowers developers and content creators to build scalable and secure online experiences. Discover its unique features, best use cases, and advantages in this comprehensive overview.
