First Love Center

The ministry needed an engaging and modern digital hub to manage and present its diverse portfolio of content, ranging from sermons and music streaming to global branch locations and live events.

The core challenges were:

• Consolidating a massive amount of varied content (First Love Channel, Dag Sermons, Healing Jesus Campaign) into a clean, intuitive structure without overwhelming the user.

• Designing an immersive way to visualize the church's extensive worldwide footprint (over 100 locations across 30+ countries) rather than using a static list.

• Implementing an efficient search mechanism for users to quickly look up branches across different countries, regions, and cities.

• Maintaining high performance and responsiveness on all devices despite the heavy use of videos, high-resolution imagery, and interactive elements.

A high-performance single-page application built on a component-driven architecture, wrapped in a sleek, dark-themed UI that brings the church's vibrant media to life.

Key Features & Technical Highlights:

• Interactive 3D Global Map: Integrated a custom 3D globe using @react-three/fiber and @react-three/drei on the Global page to visually map out and highlight the church's worldwide presence in real time.

• Advanced Location Search Algorithm: Built a custom fuzzy-matching search engine that instantly filters and highlights church branches by country, city, or region, weighing matches dynamically to surface the most relevant locations first.

• Scroll-Triggered Micro-Animations: Leveraged Framer Motion throughout the site to create smooth, scroll-linked entry effects and transitions that yield a premium, cinematic feel on every page load.

• Media-Centric Component Architecture: Separated distinct ministries like the First Love Channel, Dag Sermons, and First Love Music into dedicated module components, ensuring the homepage remains dynamic yet clean and easy to navigate.

• Responsive Utility-First Styling: Utilized Tailwind CSS to ensure complex layouts (like the masonry-style event grids and hero sections) adapt perfectly across mobile, tablet, and desktop screens without sacrificing performance.