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.