Magatunga - 1 — Turning a Mockup into a Laravel Theme
We started the Magatunga project by transforming a single-file HTML mockup into a reusable Laravel theme. The goal: a beautiful landing page that makes a great first impression and forms the design backbone for the upcoming app.
The challenge
We had built a static prototype — one massive HTML file with inline CSS and a simple layout inspired by charity sites. It looked nice, but it wasn’t practical for growth. We needed something structured, maintainable, and reusable inside Laravel so future pages (login, courses, dashboards) all share the same visual identity.
What we did
Created a theme structure inside
resources/views/themes/magatunga/:layout.blade.php→ holds<head>, shared CSS, navbar, footer, JS.parts/→ contains reusable partials likenav.blade.phpandfooter.blade.php.pages/→ holds the actual page content (landing.blade.php).
Used Blade’s inheritance system (
@extends,@section,@yield) to inject page content into the layout without repeating markup.Added a config file
config/theme.phpwith our color tokens — now the entire palette can change by editing one file.Hooked up routing:
Route::get('/', fn() => view('themes.magatunga.pages.landing'))->name('landing');Prepared for multilingual copy by structuring text in
config/landing.php. This will let us switch DE/EN seamlessly later this week.Result: The same HTML mockup now lives as a real Laravel view hierarchy — clean, maintainable, and theme-ready.