Creating a landing page
Lacuna • July 19, 2022
Before I look at the landing page itself, I need to create a couple of components. Initially I'll need a simple HTML component as this will be used in at least three separate places: guest pages, authenticated pages and admin pages.
This is just an anonymous component roughly like:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>{{ config('app.name') }}</title>
<link rel="icon" href="/favicon.ico" />
{{ $head ?? '' }}
</head>
<body>
{{ $slot }}
</body>
</html>
Now I can create the guest page layout:
<x-html>
<x-slot name="head">
@vite(['resources/css/guest.scss', 'resources/js/app.js'])
</x-slot>
<header>
<nav>
<a href="{{ route('index') }}">{{ config('app.name') }}</a>
</nav>
</header>
{{ $slot }}
</x-html>
Once these components are created, the index page becomes a real cinch:
<x-guest>
{{-- whatever you want to attract your users -}}
</x-guest>
And finally, the IndexController itself:
namespace App\Http\Controllers;
class IndexController extends Controller
{
public function __invoke()
{
return view('index');
}
}
Wrapping up
At this stage, the application really does nothing, it only has a blank landing page, but the seeds have been sown for the next stage; authenticating users where I will address the login and register forms, password recovery and reset, a simple home page and of course a logout method.